Wesmiler 人人车 初始化项目 0816

public/manage/pages/store/taxi-user.html

@@ -64,12 +64,15 @@
         <div class="layui-form-item">
             <label class="layui-form-label layui-form-required">证件照片</label>
             <div class="layui-input-block">
-                <input type="text" name="id_card_img" value="" class="layui-input layui-disabled" style="padding-right: 80px;"
-                       lay-verType="tips" lay-verify="required" required>
-                <button  class="layui-btn icon-btn dialog-file-choose" data-input="id_card_img" type="button" style="position: absolute;top: 0;right: 0px;cursor: pointer;"><i class="layui-icon"></i>上传图片</button>
-                <div class="img-preview-box id_card_img" style="display: flex;flex-wrap: wrap;align-content: space-between;background: #f7f7f7;">
-                    <img class="input-img-preview" src="../../assets/images/placeholder-refund.png" style="height: 100px;margin: 8px;">
-                </div>
+                <input type="text" name="id_card_img" value=""
+                       class="layui-input layui-disabled upload-input-id_card_img" lay-verType="tips" lay-verify="required"
+                       required style="padding-right: 80px;" disabled="">
+                <button data-field="id_card_img" data-count="9" type="button" style="position: absolute;top: 0;right: 0px;cursor: pointer;"
+                        class="layui-btn icon-btn uploader">
+                    <i class="layui-icon">&#xe61d;</i>上传图片
+                </button>
+
+                <div class="cl imglist" id="id_card_img"></div>
             </div>
         </div>
         <div class="layui-form-item">
@@ -133,7 +136,7 @@
 
 <!-- js部分 -->
 <script>
-    layui.use(['layer', 'form', 'table', 'util', 'notice','md5', 'admin', 'setter', 'xmSelect','Equencing'], function () {
+    layui.use(['layer', 'form', 'table', 'util', 'notice','md5', 'admin', 'setter', 'xmSelect','Equencing','fileChoose'], function () {
         var $ = layui.jquery;
         var layer = layui.layer;
         var form = layui.form;
@@ -145,6 +148,7 @@
         var md5 = layui.md5;
         var xmSelect = layui.xmSelect;
         var Equencing = layui.Equencing;
+        var fileChoose = layui.fileChoose;
 
         form.render('select');
         // 渲染表格
@@ -269,19 +273,21 @@
         });
 
         // 显示表单弹窗
+        var uploader = null;
         function showEditModel(data) {
             admin.open({
                 id: "LAY_TaxiUser",
                 type: 1,
-                area: '520px', //宽高
+                area: '800px', //宽高
                 title: (data ? '修改' : '添加') + '司机信息',
                 content: $('#modelTaxiUser').html(),
                 success: function (layero, dIndex) {
+                    data.password = ''
                     $(layero).children('.layui-layer-content').css('overflow', 'visible');
 
                     if(data) {
-                        $(".img-preview-box.id_card_img").empty();
-                        $(".img-preview-box.id_card_img").append('<img class="input-img-preview" src="' + data.id_card_img + '" style="height: 100px;margin: 8px;"/>');
+                        //$(".img-preview-box.id_card_img").empty();//
+                       // $(".img-preview-box.id_card_img").append('<img class="input-img-preview" src="' + data.id_card_img + '" style="height: 100px;margin: 8px;"/>');
                         $(".img-preview-box.dr_license").empty();
                         $('.img-preview-box.dr_license').append('<img class="input-img-preview" src="' + data.dr_license + '" style="height: 100px;margin: 8px;"/>');
                     };
@@ -290,17 +296,31 @@
                     if (data && data.id_card_img.length > 0) {
                         $(".img-preview-box.id_card_img").empty();
                         $.each(JSON.parse(data.id_card_img), (i, t) => {
+                            console.log(t)
                             imgs.push(t)
                             //$(".img-preview-box.cover_img").append('<img class="input-img-preview" src="' + t + '" style="height: 100px;margin: 8px;"/>')
                         })
                     }
+                    console.log(imgs)
                     // 图片展示
                     // if(data) {
                     // var imgulp = Equencing.render({listid: 'cover_img', jsondata: false, imgsrcarr: imgs});
                     uploader = Equencing.render({
                         elem: "id_card_img",
                         data: imgs,
-                        count: 9,
+                        count: 2,
+                    });
+
+                    console.log(uploader)
+                    // 删除图片数据
+                    $(document).on('click', '.eq-item-del', function () {
+                        var elem = $(this).parents('.__item__').eq(0),
+                            index = elem.attr('item'),
+                            el = elem.attr('el'),
+                            ip = $('.upload-input-' + el )[0];
+
+                        // 删除对应数据
+                        uploader.delItem(index),ip.value = uploader.getData();
                     });
 
                     form.render('radio');
@@ -309,7 +329,10 @@
                     form.val('modelTaxiUserForm', data);
                     // 表单提交事件
                     form.on('submit(modelSubmitTaxiUser)', function (form) {
-
+                        // 排序新数据
+                        if(uploader){
+                            form.field.id_card_img = uploader.getData();
+                        }
                         if(form.field.password && form.field.confirm_password != form.field.password){
                             notice.msg('确认密码不正确', {icon: 2});
                             return false;
@@ -346,5 +369,43 @@
             }
             return false;
         }
+
+        // 整合图片排序上传方法
+        $(document).on('click', '.uploader', function () {
+            var t = $(this),
+                s =t.attr('data-field'),
+                c =t.attr('data-count') || 0,
+                n = $('.upload-input-' + s ),
+                j = $('.'+ s);
+
+            fileChoose.open({
+                headers: {
+                    'Authorization': setter.getToken()
+                },
+                listUrl: setter.baseServer + 'system/annex',
+                uploadUrl: setter.baseServer + 'system/annex/upload',
+                num: (c > 1) ? c : 1,
+                dialog: {
+                    offset: '60px'
+                },
+                response: {
+                    code: 10000,
+                    smUrl: 'thumbs'
+                },
+                onChoose: function (choose) {
+                    var urls = [];
+                    // 元数据
+                    if(n[0].value !== ""){
+                        urls = JSON.parse(n[0].value);
+                    }
+                    // 追加数据
+                    $.each(choose,(i,t) => {
+                        urls.push(t.url);
+                        uploader.addItem(t.url)
+                    });
+                    n[0].value = JSON.stringify(urls);
+                }
+            });
+        });
     });
 </script>