113 lines
3.8 KiB
Markdown
113 lines
3.8 KiB
Markdown
# 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）
|
||
- 包含字段存在性检查，避免重复添加
|
||
|
||
**执行方式**:
|
||
```bash
|
||
# 在 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
|
||
|
||
```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
|
||
```
|
||
|
||
## 使用说明
|
||
|
||
### 后台管理操作
|
||
1. 进入"商品管理" → "盒子管理"
|
||
2. 新增或编辑商城类型（type=10）的盒子
|
||
3. 会看到三个图片上传字段：
|
||
- **盒子封面图**：列表页显示的小图
|
||
- **盒子详情图**：详情页底部的详情图
|
||
- **商品详情页Banner图**：详情页顶部的大图（新增）
|
||
4. 上传对应图片后保存
|
||
|
||
### 前端显示逻辑
|
||
- 详情页顶部：优先显示 `imgurl_banner`，如果没有则显示 `imgurl`（封面图）
|
||
- 详情页底部：显示 `imgurl_detail`（详情图）
|
||
|
||
## 注意事项
|
||
1. 只有商城类型（type=10）的盒子会显示 Banner 图上传字段
|
||
2. Banner 图字段为可选（NULL），不影响现有数据
|
||
3. 如果不上传 Banner 图，前端会自动使用封面图作为兜底
|
||
4. Mapster 会自动映射新字段，无需额外配置
|
||
|
||
## 测试建议
|
||
1. 执行 SQL 脚本添加字段
|
||
2. 重启后端服务（如果需要）
|
||
3. 在后台管理中编辑一个商城类型盒子，上传 Banner 图
|
||
4. 在小程序中查看该商品详情页，确认顶部显示 Banner 图，底部显示详情图
|