From f16f74cacb9ef0ae4be89ed15353b6a449479d8c Mon Sep 17 00:00:00 2001 From: Administrator <15274802129@163.com> Date: Wed, 28 May 2025 13:38:09 +0800 Subject: [PATCH] feat(mall): 添加轮播图背景图片功能 --- src/main/java/cc/mrbird/febs/mall/entity/PlatformBanner.java | 4 ++ src/main/java/cc/mrbird/febs/mall/service/impl/AdminBannerServiceImpl.java | 1 src/main/resources/mapper/modules/PlatformBannerMapper.xml | 2 src/main/resources/templates/febs/views/modules/banner/platformBannerDetail.html | 43 +++++++++++++++++++++ src/main/resources/templates/febs/views/modules/banner/platformBanner.html | 13 ++++++ src/main/resources/templates/febs/views/modules/banner/platformBannerAdd.html | 39 +++++++++++++++++++ 6 files changed, 101 insertions(+), 1 deletions(-) diff --git a/src/main/java/cc/mrbird/febs/mall/entity/PlatformBanner.java b/src/main/java/cc/mrbird/febs/mall/entity/PlatformBanner.java index e53c4d4..1f8ffb6 100644 --- a/src/main/java/cc/mrbird/febs/mall/entity/PlatformBanner.java +++ b/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; diff --git a/src/main/java/cc/mrbird/febs/mall/service/impl/AdminBannerServiceImpl.java b/src/main/java/cc/mrbird/febs/mall/service/impl/AdminBannerServiceImpl.java index 4bc711d..34f6edd 100644 --- a/src/main/java/cc/mrbird/febs/mall/service/impl/AdminBannerServiceImpl.java +++ b/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()); diff --git a/src/main/resources/mapper/modules/PlatformBannerMapper.xml b/src/main/resources/mapper/modules/PlatformBannerMapper.xml index 94dd598..4079ccf 100644 --- a/src/main/resources/mapper/modules/PlatformBannerMapper.xml +++ b/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> \ No newline at end of file diff --git a/src/main/resources/templates/febs/views/modules/banner/platformBanner.html b/src/main/resources/templates/febs/views/modules/banner/platformBanner.html index 902013a..ed817b8 100644 --- a/src/main/resources/templates/febs/views/modules/banner/platformBanner.html +++ b/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) { diff --git a/src/main/resources/templates/febs/views/modules/banner/platformBannerAdd.html b/src/main/resources/templates/febs/views/modules/banner/platformBannerAdd.html index 72275d5..a78bb2a 100644 --- a/src/main/resources/templates/febs/views/modules/banner/platformBannerAdd.html +++ b/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 () { diff --git a/src/main/resources/templates/febs/views/modules/banner/platformBannerDetail.html b/src/main/resources/templates/febs/views/modules/banner/platformBannerDetail.html index 58a1504..10156a1 100644 --- a/src/main/resources/templates/febs/views/modules/banner/platformBannerDetail.html +++ b/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) { -- Gitblit v1.9.1