# 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 图，底部显示详情图