From 750512ebfaca1cc3a2f0001966fcbd1db681d6a9 Mon Sep 17 00:00:00 2001 From: Administrator <15274802129@163.com> Date: Fri, 25 Jul 2025 11:38:54 +0800 Subject: [PATCH] feat(socialCircle): 添加删除圈子背景图片功能 --- src/main/resources/templates/febs/views/modules/socialCircle/groupAdd.html | 63 +++++++++++++++++++++++++++++++ 1 files changed, 62 insertions(+), 1 deletions(-) diff --git a/src/main/resources/templates/febs/views/modules/socialCircle/groupAdd.html b/src/main/resources/templates/febs/views/modules/socialCircle/groupAdd.html index 902feae..7877b16 100644 --- a/src/main/resources/templates/febs/views/modules/socialCircle/groupAdd.html +++ b/src/main/resources/templates/febs/views/modules/socialCircle/groupAdd.html @@ -25,6 +25,29 @@ <input type="text" name="name" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div> + + <div class="layui-row layui-col-space10 layui-form-item"> + <div class="layui-col-lg6"> + <label class="layui-form-label">背景图片:</label> + <div class="layui-input-block"> + <div class="layui-upload"> + <button type="button" class="layui-btn layui-btn-normal layui-btn" id="bannerImgUploadButtonBack">上传</button> + <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> + <div class="layui-upload-list" id="bannerImgUploadBack"></div> + </blockquote> + <div class="layui-word-aux">双击图片删除</div> + </div> + </div> + </div> + </div> + <div class="layui-row layui-col-space10 layui-form-item febs-hide"> + <div class="layui-col-lg6"> + <label class="layui-form-label">背景图片链接:</label> + <div class="layui-input-block"> + <input type="text" id="backImage" name="backImage" autocomplete="off" class="layui-input" readonly> + </div> + </div> + </div> </div> </div> @@ -56,17 +79,55 @@ </style> <!-- 表格操作栏 end --> <script data-th-inline="javascript"> - layui.use(['febs', 'form', 'validate'], function () { + layui.use(['febs', 'form', 'validate', 'upload'], function () { var $ = layui.jquery, febs = layui.febs, layer = layui.layer, form = layui.form, $view = $('#groupSc-add'), + upload = layui.upload, validate = layui.validate; + //图片上传 + upload.render({ + elem: '#bannerImgUploadButtonBack' + ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 + ,accept: 'file' //普通文件 + ,size: 10240 //限制文件大小,单位 KB + ,before: function(obj){ + //预读本地文件示例,不支持ie8 + obj.preview(function(index, file, result){ + $('#bannerImgUploadBack').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">') + }); + } + ,done: function(res){ + $("#backImage").val(res.data.src); + imgUnBind(".single-image"); + imgSingleBind(); + } + }); + form.render(); + function imgUnBind(className) { + $(className).each(function() { + $(this).unbind('dblclick'); + }) + } + function imgSingleBind() { + $(".single-image").each(function(index, element) { + $(this).on("dblclick", function() { + var imgThumb = $(".single-image")[index]; + $(imgThumb).remove(); + $("#backImage").val(""); + + imgUnBind(".single-image"); + imgSingleBind(); + }); + }) + } + form.on('submit(groupSc-add-form-submit)', function (data) { $.ajax({ 'url':ctx + 'admin/socialCircle/addGroup', -- Gitblit v1.9.1