outsource/HaniBlindBox

Fork 0

zpc 1bebd937bc 21

2026-03-01 14:43:44 +08:00

3.8 KiB

Raw Blame History

Task 6: 商城商品详情页Banner图配置 - 实施完成

概述

为商城类型盒子添加独立的商品详情页Banner图字段 imgurl_banner，解决当前 imgurl_detail 同时用于顶部Banner和底部详情图的问题。

字段用途说明

imgurl → 列表页封面图（小图）
imgurl_banner → 详情页顶部Banner图（新增）
imgurl_detail → 详情页底部详情图

已完成的修改

1. 数据库 ✅

文件: server/HoneyBox/scripts/add_imgurl_banner.sql

添加 imgurl_banner 字段（NVARCHAR(500) NULL）
包含字段存在性检查，避免重复添加

执行方式:

# 在 SQL Server Management Studio 或命令行执行
sqlcmd -S localhost -d honey_box -i server/HoneyBox/scripts/add_imgurl_banner.sql

2. 后端实体 ✅

文件: server/HoneyBox/src/HoneyBox.Model/Entities/Good.cs

添加 ImgUrlBanner 属性（string?）

3. 后端 DTO ✅

文件: server/HoneyBox/src/HoneyBox.Model/Models/Goods/GoodsModels.cs

GoodsInfoDto 添加 imgurl_banner 字段
使用 [JsonPropertyName("imgurl_banner")] 保持 snake_case 格式

4. 后台管理配置 ✅

文件: server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/goods/config/typeFieldConfig.ts

GoodsTypeFieldConfig 接口添加 showBannerImage 字段
商城类型（type=10）配置 showBannerImage: true
其他类型保持 showBannerImage: false

5. 后台管理 - 新增对话框 ✅

文件: server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/goods/components/GoodsAddDialog.vue

添加 Banner 图上传组件（仅商城类型显示）
添加表单验证规则
添加到提交数据中

6. 后台管理 - 编辑对话框 ✅

文件: server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/goods/components/GoodsEditDialog.vue

添加 Banner 图上传组件（仅商城类型显示）
添加表单验证规则
加载和保存 Banner 图数据

7. 小程序前端 ✅

文件: honey_box/pages/mall/detail.vue

修改顶部 Banner 图片源：从 imgurl_detail || imgurl 改为 imgurl_banner || imgurl
底部详情图继续使用 imgurl_detail

数据库迁移 SQL

-- 为 goods 表添加 imgurl_banner 字段
-- 用于商城详情页顶部 banner 图

USE honey_box;
GO

-- 添加 imgurl_banner 字段
IF NOT EXISTS (
    SELECT * FROM sys.columns 
    WHERE object_id = OBJECT_ID(N'dbo.goods') 
    AND name = 'imgurl_banner'
)
BEGIN
    ALTER TABLE dbo.goods 
    ADD imgurl_banner NVARCHAR(500) NULL;
    
    PRINT 'Column imgurl_banner added successfully.';
END
ELSE
BEGIN
    PRINT 'Column imgurl_banner already exists.';
END
GO

PRINT 'Migration completed.';
GO

使用说明

后台管理操作

进入"商品管理" → "盒子管理"
新增或编辑商城类型（type=10）的盒子
会看到三个图片上传字段：
- 盒子封面图：列表页显示的小图
- 盒子详情图：详情页底部的详情图
- 商品详情页Banner图：详情页顶部的大图（新增）
上传对应图片后保存

前端显示逻辑

详情页顶部：优先显示 imgurl_banner，如果没有则显示 imgurl（封面图）
详情页底部：显示 imgurl_detail（详情图）

注意事项

只有商城类型（type=10）的盒子会显示 Banner 图上传字段
Banner 图字段为可选（NULL），不影响现有数据
如果不上传 Banner 图，前端会自动使用封面图作为兜底
Mapster 会自动映射新字段，无需额外配置

测试建议

执行 SQL 脚本添加字段
重启后端服务（如果需要）
在后台管理中编辑一个商城类型盒子，上传 Banner 图
在小程序中查看该商品详情页，确认顶部显示 Banner 图，底部显示详情图

3.8 KiB Raw Blame History Unescape Escape