From 07810b68ec49533f35698108d03ec9c1254807e9 Mon Sep 17 00:00:00 2001
From: Helius <wangdoubleone@gmail.com>
Date: Tue, 31 May 2022 18:02:03 +0800
Subject: [PATCH] fix goods img del

---
 src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html |   96 ++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 80 insertions(+), 16 deletions(-)

diff --git a/src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html b/src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html
index 3410fd4..4743ccc 100644
--- a/src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html
+++ b/src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html
@@ -125,6 +125,7 @@
                                                                 style="margin-top: 10px;">
                                                         <div class="layui-upload-list" id="demo2"></div>
                                                     </blockquote>
+                                                    <div class="layui-word-aux">双击图片删除</div>
                                                 </div>
                                             </div>
                                         </div>
@@ -149,6 +150,7 @@
                                                                 style="margin-top: 10px;">
                                                         <div class="layui-upload-list" id="thumbsBanners"></div>
                                                     </blockquote>
+                                                    <div class="layui-word-aux">双击图片删除</div>
                                                 </div>
                                             </div>
                                         </div>
@@ -261,6 +263,13 @@
 
     .layui-table-cell {
         height: auto;
+    }
+
+    .layui-upload-list {
+        margin: 0 !important;
+    }
+    .multi-images {
+        margin: 0 5px !important;
     }
 </style>
 <script type="text/html" id="toolbar">
@@ -499,39 +508,90 @@
         //多图片上传
         upload.render({
             elem: '#thumbsBanner'
-            , url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
-            , multiple: true
-            , before: function (obj) {
+            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
+            ,multiple: true
+            ,before: function(obj){
                 //预读本地文件示例,不支持ie8
-                obj.preview(function (index, file, result) {
-                    $('#thumbsBanners').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width: 100px">')
+                obj.preview(function(index, file, result){
+                    $('#thumbsBanners').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img multi-images" style="width: 130px">')
                 });
             }
-            , done: function (res) {
+            ,done: function(res){
                 var thumbs = $("#thumbs").val();
-                if (thumbs == '') {
+                if(thumbs == ''){
                     $("#thumbs").val(res.data.src);
-                } else {
+                }else{
                     $("#thumbs").val(thumbs + ',' + res.data.src);
                 }
+
+                imgUnBind(".multi-images");
+                imgMultiBind();
             }
         });
+
+        function imgUnBind(className) {
+            $(className).each(function() {
+                $(this).unbind('dblclick');
+            })
+        }
+
+        function imgMultiBind() {
+            $(".multi-images").each(function(index, element) {
+                $(this).on("dblclick", function() {
+                    var imgThumb = $(".multi-images")[index];
+                    $(imgThumb).remove();
+
+                    var images = $("#thumbs").val();
+                    var imagesArr;
+                    if (images) {
+                        imagesArr = images.split(",");
+                        imagesArr.splice(index, 1);
+                        images = imagesArr.join(",");
+                    }
+                    $("#thumbs").val(images);
+
+                    imgUnBind(".multi-images");
+                    imgMultiBind();
+                });
+            })
+        }
 
         //图片上传
         upload.render({
             elem: '#test2'
-            , url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
-            , multiple: true
-            , before: function (obj) {
+            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
+            ,multiple: true
+            ,before: function(obj){
                 //预读本地文件示例,不支持ie8
-                obj.preview(function (index, file, result) {
-                    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width: 100px">')
+                obj.preview(function(index, file, result){
+                    if ($("#thumb").val()) {
+                        $('#demo2').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">')
+                    } else {
+                        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">')
+                    }
+
                 });
             }
-            , done: function (res) {
+            ,done: function(res){
                 $("#thumb").val(res.data.src);
+
+                imgUnBind(".single-image");
+                imgSingleBind();
             }
         });
+
+        function imgSingleBind() {
+            $(".single-image").each(function(index, element) {
+                $(this).on("dblclick", function() {
+                    var imgThumb = $(".single-image")[index];
+                    $(imgThumb).remove();
+                    $("#thumb").val("");
+
+                    imgUnBind(".single-image");
+                    imgSingleBind();
+                });
+            })
+        }
 
         function initValue() {
             var images = goodsInfo.images;
@@ -573,10 +633,14 @@
             }
 
             for (let i = 0; i < images.length; i++) {
-                $('#thumbsBanners').append('<img src="' + images[i] + '" alt="" class="layui-upload-img" style="width: 100px">')
+                $('#thumbsBanners').append('<img src="' + images[i] + '" alt="" class="layui-upload-img multi-images" style="width: 130px">')
             }
 
-            $('#demo2').append('<img src="' + goodsInfo.thumb + '" alt="" class="layui-upload-img" style="width: 100px">')
+            $('#demo2').append('<img src="' + goodsInfo.thumb + '" alt="" class="layui-upload-img single-image" style="width: 130px">')
+
+
+            imgSingleBind();
+            imgMultiBind();
 
             window.editor = E.createEditor({
                 html: goodsInfo.goodsDetails,

--
Gitblit v1.9.1