专家入库

templates/backstageNet/limit/expert.html

@@ -133,6 +133,7 @@
             width: 90%;
             margin-top: 30px;
         }
+
         .uploadImg {
             position: absolute;
             margin: 10px 0;
@@ -142,6 +143,7 @@
             border: 1px solid #b8b8b8;
             cursor: pointer;
         }
+
         .uploadImgIcon {
             background: url(../../static/imgs/uploadImgIcon.png) no-repeat center;
             background-size: 80% 80%;
@@ -152,6 +154,12 @@
             right: 40px;
             top: 55px;
         }
+
+        .layui-upload-img {
+            width: 92px;
+            height: 92px;
+            margin: 0 10px 10px 0;
+        }
     </style>
 </head>
 
@@ -176,115 +184,8 @@
         </div>
 
         <!-- 内容 -->
-        <div class="expertGather">
-            <div class="expertGatherItem">
-                <img src="{% static '/imgs/cornerIcon.png' %}" alt="">
-                <div class="expertInner">
-                    <div class="expertImg">
-                        <img src="{% static '/imgs/Customer.png'%}" alt="">
-                    </div>
-                    <div class="expertTxt">
-                        <h1>吴玉金教授</h1>
-                        <p>简介：</p>
-                        <div class="desc">
-                            吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授</div>
-                        <div class="ctrlBtn">
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">视频电话</a>
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">发信息</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="expertGatherItem">
-                <img src="{% static '/imgs/cornerIcon.png' %}" alt="">
-                <div class="expertInner">
-                    <div class="expertImg">
-                        <img src="{% static '/imgs/Customer.png'%}" alt="">
-                    </div>
-                    <div class="expertTxt">
-                        <h1>吴玉金教授</h1>
-                        <p>简介：</p>
-                        <div class="desc">
-                            吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授</div>
-                        <div class="ctrlBtn">
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">视频电话</a>
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">发信息</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="expertGatherItem">
-                <img src="{% static '/imgs/cornerIcon.png' %}" alt="">
-                <div class="expertInner">
-                    <div class="expertImg">
-                        <img src="{% static '/imgs/Customer.png'%}" alt="">
-                    </div>
-                    <div class="expertTxt">
-                        <h1>吴玉金教授</h1>
-                        <p>简介：</p>
-                        <div class="desc">
-                            吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授</div>
-                        <div class="ctrlBtn">
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">视频电话</a>
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">发信息</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="expertGatherItem">
-                <img src="{% static '/imgs/cornerIcon.png' %}" alt="">
-                <div class="expertInner">
-                    <div class="expertImg">
-                        <img src="{% static '/imgs/Customer.png'%}" alt="">
-                    </div>
-                    <div class="expertTxt">
-                        <h1>吴玉金教授</h1>
-                        <p>简介：</p>
-                        <div class="desc">
-                            吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授</div>
-                        <div class="ctrlBtn">
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">视频电话</a>
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">发信息</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="expertGatherItem">
-                <img src="{% static '/imgs/cornerIcon.png' %}" alt="">
-                <div class="expertInner">
-                    <div class="expertImg">
-                        <img src="{% static '/imgs/Customer.png'%}" alt="">
-                    </div>
-                    <div class="expertTxt">
-                        <h1>吴玉金教授</h1>
-                        <p>简介：</p>
-                        <div class="desc">
-                            吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授</div>
-                        <div class="ctrlBtn">
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">视频电话</a>
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">发信息</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="expertGatherItem">
-                <img src="{% static '/imgs/cornerIcon.png' %}" alt="">
-                <div class="expertInner">
-                    <div class="expertImg">
-                        <img src="{% static '/imgs/Customer.png'%}" alt="">
-                    </div>
-                    <div class="expertTxt">
-                        <h1>吴玉金教授</h1>
-                        <p>简介：</p>
-                        <div class="desc">
-                            吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授吴玉金教授</div>
-                        <div class="ctrlBtn">
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">视频电话</a>
-                            <a href="tencent://message/?uin=405204799&Site=sc.chinaz.com&Menu=yes">发信息</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div class="expertGather" id="expertGather">
+
         </div>
 
         <!-- 筛选框 -->
@@ -303,17 +204,17 @@
                     <div class="layui-form-item">
                         <label class="layui-form-label">联系QQ：</label>
                         <div class="layui-input-inline">
-                            <input type="text" name="curr_var" required lay-verify="required" placeholder="请输入联系的QQ号"
+                            <input type="text" name="relation" required lay-verify="required" placeholder="请输入联系的QQ号"
                                 autocomplete="off" class="layui-input">
                         </div>
                     </div>
 
                     <div class="layui-form-item">
                         <label class="layui-form-label">专家照片：</label>
-                        <div class="layui-input-inline" style="margin-top: 0; margin-bottom: 65px;">
+                        <div class="layui-input-inline">
                             <button type="button" class="uploadImg uploadImgIcon" id="pickImg"></button>
                             <!-- 隐藏的input -->
-                            <input type="hidden" id="img_url" name="img_url" value="" />
+                            <input type="hidden" id="img_url" name="pic" value="" />
                             <div class="layui-upload-list">
                                 <img class="layui-upload-img" id="demo1">
                                 <p id="demoText"></p>
@@ -323,8 +224,8 @@
 
                     <div class="layui-form-item layui-form-text">
                         <label class="layui-form-label">专家介绍：</label>
-                        <div class="layui-input-inline">
-                            <textarea name="content" id="editor1" lay-verify="required" placeholder="请输入介绍"
+                        <div class="layui-input-block">
+                            <textarea name="desc" id="desc" lay-verify="required" placeholder="请输入介绍"
                                 class="layui-textarea"></textarea>
                         </div>
                     </div>
@@ -351,6 +252,117 @@
 
 </body>
 <script>
+    var laypage, form, upload;
+    layui.use(['laypage', 'form', 'upload'], function () {
+        laypage = layui.laypage;
+        form = layui.form;
+        upload = layui.upload;
+        var uploadInst = upload.render({
+            elem: '#pickImg'
+            , url: 'expert_img'
+            , field: 'upload'
+            , accept: 'images' //只允许上传图片
+            // , acceptMime: 'image/*' //只筛选图片
+            // ,exts: 'jpg|jpeg' 
+            , size: 1024 * 2 //限定大小
+            , xhr: function () { } //上传视频进度条
+            , before: function (obj) {
+                $('.uploadImg').removeClass('uploadImgIcon')
+                //预读本地文件示例，不支持ie8
+                obj.preview(function (index, file, result) {
+                    $('#demo1').attr('src', result); //图片链接（base64）
+                });
+            }
+            , done: function (res) {
+                //如果上传失败
+                if (res.code == 0) {
+                    //上传成功
+                    document.getElementById("img_url").value = res.data.src;
+                } else {
+                    return layer.msg('上传失败');
+                }
+
+
+            }
+            , error: function () {
+                //演示失败状态，并实现重传
+                var demoText = $('#demoText');
+                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
+                demoText.find('.demo-reload').on('click', function () {
+                    uploadInst.upload();
+                });
+            }
+        });
+
+        //监听提交
+        form.on('submit(formDemo)', function (data) {
+            window.id = data.field.id
+            var img_url = $('#img_url').val();
+            if (!img_url) {
+                layer.msg("请上传专家照片", { icon: 5 });
+                return false;
+            }
+            $.ajax({
+                url: 'expert_info',
+                data: $("#formDiv").serialize(),
+                type: 'post',
+                success: function (data) {
+                    if (data) {
+
+                        clearForm()
+                    } else {
+
+                    }
+                },
+                error: function (type) {
+
+                }
+            })
+            return false;
+
+        });
+        getData('expert_info', 1)
+        function getData(url, page) {
+            $.ajax({
+                url: url,
+                type: 'get',
+                data: {
+                    page: page
+                },
+                dataType: 'html',
+                success: function (data) {
+                    $('#expertGather').html(data);
+                    laypage.render({
+                        elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
+                        // , count: 30
+                        , count: $('#totalPage').val()
+                        , theme: '#2ca9f9'
+                        , layout: ['prev', 'page', 'next', 'skip']
+                        , jump: function (obj, first) {
+                            if (!first) {
+                                $.ajax({
+                                    url: url,
+                                    type: 'get',
+                                    data: { page: obj.curr },
+                                    dataType: 'html',
+                                    success: function (data) {
+                                        $('#expertGather').html(data);
+                                    },
+                                    error: function (type) {
+                                        console.log(type)
+                                    }
+                                })
+                            }
+                        }
+                    });
+                },
+                error: function (type) {
+                    // console.log(type)
+                }
+            })
+        }
+    })
+
     function selectModelFun() {
         layui.use(['layer'], function () {
             layer = layui.layer;
@@ -362,18 +374,21 @@
                 cancel: function () {
                     // 右上角关闭事件的逻辑
                     clearForm()
-                    sessionStorage.removeItem('seelectID')
                 }
             })
         })
     }
 
     function clearForm() {
+        form.val('newsFormDiv', {
+            "title": "",
+            "writer": "",
+            "intro": ""
+        });
         $('#img_url').val('');
         $('.uploadImg').addClass('uploadImgIcon');
         $('#demo1').removeAttr('src'); //图片链接（base64）
-        layer.closeAll(); //疯狂模式，关闭所有层
-        location.reload()
+        layer.closeAll();
     }
 </script>