feat(mall): 添加轮播图背景图片功能

Administrator

9 days ago f16f74cacb9ef0ae4be89ed15353b6a449479d8c

feat(mall): 添加轮播图背景图片功能

- 在 PlatformBanner 模型中添加 imageBackUrl 字段，用于存储背景图片链接
- 在 AdminBannerServiceImpl 中实现背景图片的保存逻辑
- 在平台轮播图页面中添加背景图片的展示和上传功能
- 优化轮播图列表的显示顺序，按类型和排序字段进行排序

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

@@ -23,6 +23,10 @@
     */
    private String imageUrl;
    /**
     * 背景图片链接
     */
    private String imageBackUrl;
    /**
     * 是否可跳转 1-是2-否
     */
    private String isJump;

 src/main/java/cc/mrbird/febs/mall/service/impl/AdminBannerServiceImpl.java

@@ -61,6 +61,7 @@
    public void platformBannerAdd(@Valid PlatformBanner platformBannerEntity) {
        PlatformBanner platformBannerEntityAdd = new PlatformBanner();
        platformBannerEntityAdd.setImageUrl(platformBannerEntity.getImageUrl());
        platformBannerEntityAdd.setImageBackUrl(platformBannerEntity.getImageBackUrl());
        platformBannerEntityAdd.setIsInside(platformBannerEntity.getIsInside());
        platformBannerEntityAdd.setIsJump(platformBannerEntity.getIsJump());
        platformBannerEntityAdd.setIsTop(platformBannerEntity.getIsTop());

 src/main/resources/mapper/modules/PlatformBannerMapper.xml

@@ -14,7 +14,7 @@
                </if>
            </if>
        </where>
        order by sort desc
        order by type asc,sort asc
    </select>

</mapper>

 src/main/resources/templates/febs/views/modules/banner/platformBanner.html

@@ -36,6 +36,18 @@
    </div>
</div>

<script type="text/html" id="typeName">
    {{#
    var type = {
    4: {title: '社区首页', color: 'red' },
    3: {title: '商城首页', color: 'gray' },
    2: {title: '开屏页', color: 'green' },
    1: {title: '小程序首页' , color: 'blue'},
    }[d.type];
    }}
    <span class="layui-badge febs-bg-{{type.color}}">{{ type.title }}</span>
</script>

<script type="text/html" id="isJump">
    {{#
    var isJump = {
@@ -218,6 +230,7 @@
                cols: [[
                    {field: 'id', title: '', minWidth: 10,align:'left'},
                    {title: '操作', toolbar: '#user-option', minWidth: 140, fixed : 'right'},
                    {title: '分类', templet: '#typeName', minWidth: 60,align:'center'},
                    {field: 'name', title: '标题', minWidth: 120,align:'center'},
                    {field: 'imageUrl',title: '图片',
                        templet: function (d) {

 src/main/resources/templates/febs/views/modules/banner/platformBannerAdd.html

@@ -62,6 +62,28 @@

                                <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>
                                        </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="imageBackUrl" name="imageBackUrl" autocomplete="off" class="layui-input" readonly>
                                        </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">
                                            <input type="radio" name="isTop" value="1" title="是" checked="">
@@ -171,6 +193,23 @@
                $("#imageUrl").val(res.data.src);
            }
        });

        //图片上传
        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){
                $("#imageBackUrl").val(res.data.src);
            }
        });
        formSelects.render();
        form.on('submit(banner-add-form-submit)', function (data) {
            febs.post(ctx + 'admin/banner/platformBannerAdds', data.field, function () {

 src/main/resources/templates/febs/views/modules/banner/platformBannerDetail.html

@@ -64,6 +64,28 @@

                                <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>
                                        </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="imageBackUrl" name="imageBackUrl" autocomplete="off" class="layui-input" readonly>
                                        </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">
                                            <input type="radio" name="isTop" value="1" title="是" checked="">
@@ -159,6 +181,23 @@
            }
        });

        //图片上传
        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){
                $("#imageBackUrl").val(res.data.src);
            }
        });

        form.render();
        //(下拉框)
        $.get(ctx + 'admin/banner/typeAll', function (res) {
@@ -183,6 +222,7 @@
                "id": banner.id,
                "name": banner.name,
                "imageUrl": banner.imageUrl,
                "imageBackUrl": banner.imageBackUrl,
                "isInside": banner.isInside,
                "jumpUrl": banner.jumpUrl,
                "isTop": banner.isTop,
@@ -193,6 +233,9 @@

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

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

        form.on('submit(banner-info-form-submit)', function (data) {