feat(mall): 添加小程序首页头部背景功能

Administrator

2025-05-22 f4297e7b0fbe68c528a4a16ecff3edcdb0cb8ba3

feat(mall): 添加小程序首页头部背景功能

- 新增 indexHeadPng 接口获取首页头部背景图片
- 在 CommonDictionaryEnum 中添加 VIDEO_URL_INDEX 枚举项
- 更新 indexVideo.html 页面，支持首页头部背景图片上传和显示

 src/main/java/cc/mrbird/febs/common/enumerates/CommonDictionaryEnum.java

@@ -5,6 +5,10 @@
@Getter
public enum CommonDictionaryEnum {
    /**
     * 小程序首页头部背景
     */
    VIDEO_URL_INDEX("VIDEO_URL_INDEX", "VIDEO_URL_INDEX"),
    /**
     * 新人礼设置
     */
    NEW_GIFT_SETTING("NEW_GIFT_SETTING", "NEW_GIFT_SETTING"),

 src/main/java/cc/mrbird/febs/mall/controller/CommonController.java

@@ -210,6 +210,20 @@
        return new FebsResponse().success().data(apiCommonSetVo);
    }


    @ApiOperation(value = "小程序首页头部背景")
    @GetMapping(value = "/indexHeadPng")
    public FebsResponse indexHeadPng() {
        String pngUrl = commonService.getDicByTypeAndCode(
                CommonDictionaryEnum.VIDEO_URL_INDEX.getType(),
                CommonDictionaryEnum.VIDEO_URL_INDEX.getCode()
        );
        if (pngUrl == null) {
            pngUrl = "";
        }
        return new FebsResponse().success().data(pngUrl);
    }

    @ApiOperation(value = "小程序开屏页设置")
    @ApiResponses({
            @ApiResponse(code = 200, message = "success", response = ApiIndexSetVo.class)

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

@@ -1,13 +1,29 @@
<div class="layui-fluid layui-anim febs-anim" id="index-video-set" lay-title="充值设置">
<div class="layui-fluid layui-anim febs-anim" id="index-video-set" lay-title="首页头部背景">
    <div class="layui-row layui-col-space8 febs-container">
        <form class="layui-form" action="" lay-filter="index-video-set-form">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频：</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn upload" id="upload" style="background-color: #009688; margin-bottom: 2px">上传文件</button>
                            <input type="text" name="videoUrl" autocomplete="off" value="" id="videoUrl" class="layui-input" readonly>
                        <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="videoUrlUploadButton">上传</button>
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            <div class="layui-upload-list" id="videoUrlUpload"></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="videoUrl" lay-verify="required" name="videoUrl" autocomplete="off" class="layui-input" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
@@ -52,6 +68,9 @@
            form.val("index-video-set-form", {
                "videoUrl": indexVideoSet.videoUrl,
            });

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

        form.on('submit(index-video-set-form-submit)', function (data) {
@@ -68,26 +87,20 @@

        bindUpload();
        function bindUpload() {
            //图片上传
            upload.render({
                elem: '.upload'
                elem: '#videoUrlUploadButton'
                ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
                ,accept: 'file'
                ,accept: 'file' //普通文件
                ,size: 102400 //限制文件大小，单位 KB
                ,before: function(obj){
                    layer.msg('上传中', {icon: 16, time: 0});
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#videoUrlUpload').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">')
                    });
                }
                ,done: function(res){
                    var item = this.item;
                    //如果上传失败
                    if(res.code !== 0){
                        return layer.msg('上传失败');
                    }

                    // $(item).parent().prev().find('input').val(res.data[0]);
                    $("#videoUrl").val(res.data.src);
                    layer.msg('上传完毕', {icon: 1});
                }
                ,error: function(err){
                    return layer.msg('上传失败');
                }
            });
        }