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