feat(mall): 会员等级添加会员中心图标功能

Administrator

2025-05-14 6dcec816433b277c7d121e97164f9fcdee23834e

feat(mall): 会员等级添加会员中心图标功能

- 在会员等级相关 DTO 和实体类中添加 headerPng 字段
- 更新会员等级添加和编辑页面，增加会员中心图标上传功能
- 在会员等级列表页面添加会员中心图标预览功能
- 优化商品编辑页面加载逻辑，确保初始化值正确显示

 src/main/java/cc/mrbird/febs/mall/dto/memberLevel/AdminMemberLevelAddDto.java

@@ -20,4 +20,6 @@
    private String content;

    private String iconPng;

    private String headerPng;
}

 src/main/java/cc/mrbird/febs/mall/dto/memberLevel/AdminMemberLevelUpdateDto.java

@@ -19,4 +19,6 @@
    private String content;

    private String iconPng;

    private String headerPng;
}

 src/main/java/cc/mrbird/febs/mall/entity/HappyMemberLevel.java

@@ -18,6 +18,7 @@
     `other_percent` decimal(20,2) DEFAULT NULL COMMENT '邀请好友下单后返积分比例',
     `content` text COMMENT '规则说明',
     `icon_png` varchar(200) DEFAULT NULL COMMENT '会员图标',
     `header_png` varchar(200) DEFAULT NULL COMMENT '会员社区头部图片',
     */

    private String name;
@@ -27,4 +28,5 @@
    private BigDecimal otherPercent;
    private String content;
    private String iconPng;
    private String headerPng;
}

 src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html

@@ -539,7 +539,10 @@
                autoRow: true,
            });

            initValue();

            setTimeout(() => {
                initValue();
            }, 500);
        })

        var carriageRule = xmSelect.render({

 src/main/resources/templates/febs/views/modules/levelView/levelAdd.html

@@ -40,6 +40,28 @@
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space10 layui-form-item">
                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label febs-form-item-require">会员中心：</label>
                                        <div class="layui-input-block">
                                            <div class="layui-upload">
                                                <button type="button" class="layui-btn layui-btn-normal layui-btn" id="headerPngUploadButton">上传</button>
                                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                                    <div class="layui-upload-list" id="headerPngUpload"></div>
                                                </blockquote>
                                            </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="headerPng" lay-verify="required" name="headerPng" autocomplete="off" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label febs-form-item-require">升级：</label>
                                    <div class="layui-form-mid">积分达到</div>
@@ -162,6 +184,23 @@
                $("#iconPng").val(res.data.src);
            }
        });

        //图片上传
        upload.render({
            elem: '#headerPngUploadButton'
            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,size: 10240 //限制文件大小，单位 KB
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#headerPngUpload').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">')
                });
            }
            ,done: function(res){
                $("#headerPng").val(res.data.src);
            }
        });
        formSelects.render();
        form.on('submit(member-level-form-submit)', function (data) {
            data.field.content = editor.txt.html();

 src/main/resources/templates/febs/views/modules/levelView/levelInfo.html

@@ -42,6 +42,29 @@
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-row layui-col-space10 layui-form-item">
                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label febs-form-item-require">会员中心：</label>
                                        <div class="layui-input-block">
                                            <div class="layui-upload">
                                                <button type="button" class="layui-btn layui-btn-normal layui-btn" id="headerPngUploadButton">上传</button>
                                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                                    <div class="layui-upload-list" id="headerPngUpload"></div>
                                                </blockquote>
                                            </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="headerPng" lay-verify="required" name="headerPng" autocomplete="off" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label febs-form-item-require">升级：</label>
                                    <div class="layui-form-mid">积分达到</div>
@@ -161,6 +184,23 @@
            }
        });

        //图片上传
        upload.render({
            elem: '#headerPngUploadButton'
            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,size: 10240 //限制文件大小，单位 KB
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#headerPngUpload').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">')
                });
            }
            ,done: function(res){
                $("#headerPng").val(res.data.src);
            }
        });

        form.render();
        inithappyMemberLevel();

@@ -179,6 +219,10 @@

            $('#iconPngUpload').append('<img src="' + happyMemberLevel.iconPng + '" alt="" class="layui-upload-img single-image" style="width: 130px">');
            $("#iconPng").val(happyMemberLevel.iconPng);


            $('#headerPngUpload').append('<img src="' + happyMemberLevel.headerPng + '" alt="" class="layui-upload-img single-image" style="width: 130px">');
            $("#headerPng").val(happyMemberLevel.headerPng);
            editor.txt.html(happyMemberLevel.content);

        }

 src/main/resources/templates/febs/views/modules/levelView/levelList.html

@@ -114,6 +114,22 @@
                    content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
                });
            }

            if (layEvent === 'seeHeaderPng') {
                var t = $view.find('#seeHeaderPng'+data.id+'');
                //页面层
                layer.open({
                    type: 1,
                    title: "会员图标",
                    skin: 'layui-layer-rim', //加上边框
                    area: ['100%', '100%'], //宽高
                    shadeClose: true, //开启遮罩关闭
                    end: function (index, layero) {
                        return false;
                    },
                    content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
                });
            }
            if (layEvent === 'levelInfoEvent') {
                febs.modal.open('编辑','modules/levelView/levelInfo/' + data.id, {
                    btn: ['提交', '取消'],
@@ -166,6 +182,14 @@
                                '</a>';
                        },
                    minWidth: 150,align: 'center'},
                    {field: 'iconPng',title: '会员中心',
                        templet: function (d) {
                            return '<a lay-event="seeHeaderPng">' +
                                '<img id="seeHeaderPng' + d.id + '" src="' + d.headerPng +
                                '" alt="图片" style="width: 50px; height: 50px; object-fit: cover; border-radius: 5px; cursor: pointer;">' +
                                '</a>';
                        },
                    minWidth: 150,align: 'center'},
                    {field: 'upgradeScore', title: '升级需要积分', minWidth: 150,align:'center'},
                    {field: 'minePercent', title: '自己返还比例', minWidth: 150,align:'center'},
                    {field: 'otherPercent', title: '好友返还比例', minWidth: 150,align:'center'},