feat(system): 优化支付链接图片上传功能

Administrator

10 hours ago dd390373a841d210878b4e38cda9ac73b6712dca

feat(system): 优化支付链接图片上传功能

- 修改图片上传预览方式，使用img标签直接显示
- 新增图片链接输入框用于显示图片路径
- 移除双击删除图片功能和相关样式
- 简化上传完成后的回调处理逻辑
- 更新表单初始化时的图片字段赋值方式
- 移除冗余的图片绑定和验证代码

 src/main/resources/templates/febs/views/modules/system/payLink.html

@@ -14,15 +14,20 @@
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">链接图片：</label>
                        <div class="layui-input-block">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="pay-link-img-upload">上传图片</button>
                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                    <div class="layui-upload-list" id="pay-link-img-preview"></div>
                                </blockquote>
                                <div class="layui-word-aux">双击图片删除</div>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="pay-link-img-upload">上传图片</button>
                            <div class="layui-input-block">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="xtLinkImgUrls" width="100%">
                                </div>
                            </div>
                            <input name="xtLinkImg" id="xtLinkImg" data-th-id="${payLink.xtLinkImg}" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">图片链接：</label>
                        <div class="layui-input-block">
                            <input type="text" id="xtLinkImg" name="xtLinkImg"
                                   autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>
                </div>
@@ -50,10 +55,6 @@
    .layui-upload-list {
        margin: 0 !important;
    }

    .pay-link-upload-img {
        width: 130px;
    }
</style>
<script data-th-inline="javascript" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'validate', 'febs', 'form', 'upload'], function () {
@@ -69,12 +70,11 @@

        if (payLink) {
            form.val("pay-link-form", {
                "xtLink": payLink.xtLink
                "xtLink": payLink.xtLink,
                "xtLinkImg": payLink.xtLinkImg
            });
            if (payLink.xtLinkImg) {
                $('#xtLinkImg').val(payLink.xtLinkImg);
                $('#pay-link-img-preview').html('<img src="' + payLink.xtLinkImg + '" class="layui-upload-img pay-link-upload-img">');
                imgBind();
                $('#xtLinkImgUrls').attr('src', payLink.xtLinkImg);
            }
        }

@@ -84,38 +84,18 @@
        upload.render({
            elem: '#pay-link-img-upload'
            ,url: ctx + 'admin/goods/uploadFileBase64'
            ,multiple: false
            ,before: function(obj){
                obj.preview(function(index, file, result){
                    $('#pay-link-img-preview').html('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img pay-link-upload-img">');
                    $('#xtLinkImgUrls').attr('src', result);
                });
            }
            ,done: function(res){
                console.log('upload done:', res);
                if (res && res.code === 0 && res.data && res.data.src) {
                    $('#xtLinkImg').val(res.data.src);
                    imgBind();
                }
            }
            ,error: function(){
                febs.alert.warn('图片上传失败');
                febs.alert.success(res.data.src);
                $("#xtLinkImg").val(res.data.src);
            }
        });

        function imgBind() {
            $(".pay-link-upload-img").off("dblclick").on("dblclick", function() {
                $(this).remove();
                $('#xtLinkImg').val("");
            });
        }

        form.on('submit(pay-link-form-submit)', function (data) {
            var imgVal = $('#xtLinkImg').val();
            if (!imgVal) {
                febs.alert.warn('请上传付款链接图片');
                return false;
            }
            data.field.xtLinkImg = imgVal;
            febs.post(ctx + 'admin/system/payLink', data.field, function (res) {
                febs.alert.success('保存成功');
            });