主题
04 商品展示
版本：v3.0
所属端：前台商城
文档状态：已交付
1. 概述
1.1 背景与目标
商品详情页是用户做出购买决策的核心页面，直接影响转化率。用户从搜索、分类、推荐等入口进入详情页，在此完成"了解商品→选择规格→加入购物车"的决策链路。
本模块的设计目标：
- 完整呈现商品信息（图片、价格、描述、参数），帮助用户充分了解商品
- 支持多规格商品（SPU/SKU模型），用户可选择具体规格后加购
- 提供流畅的加购和立即购买体验
- 展示商品评论，辅助用户决策
- 支持商品收藏，方便用户后续回访
1.2 目标用户
| 角色 | 使用场景 |
|---|---|
| 游客 | 浏览商品详情，了解商品信息（加购需登录） |
| 会员 | 浏览详情、选择规格、加入购物车、立即购买、收藏商品、发表评论 |
1.3 功能范围
| 功能模块 | 说明 | 优先级 |
|---|---|---|
| 商品图片轮播 | 主图+画册图片轮播展示 | P0 |
| 价格展示 | 销售价/促销价/原价/会员价 | P0 |
| 商品基本信息 | 名称、副标题、品牌、分类、货号 | P0 |
| 规格选择（SKU） | 多规格选择，联动价格和库存 | P0 |
| 数量选择与加购 | 选择数量后加入购物车 | P0 |
| 商品详情（富文本） | 图文详情描述 | P0 |
| 商品参数 | 结构化参数表格 | P1 |
| 商品评论 | 评论列表、评分统计、筛选 | P1 |
| 商品收藏 | 收藏/取消收藏 | P1 |
| 服务保障标签 | 无忧退货、快速退款、免费包邮 | P1 |
2. 功能详细设计
2.1 商品图片轮播
页面结构
详情页顶部为图片轮播区域，展示商品主图和画册图片。底部有图片指示器（当前第几张/共几张），支持左右切换。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-PROD-01 | 轮播图由商品主图和画册图片组成，按上传顺序展示 |
| BR-PROD-02 | 仅有主图时隐藏指示器 |
2.2 价格展示
页面结构
图片区域下方为价格区域，展示：当前售价（大字体突出）、原价（划线价）、促销标签（如有）、销量、库存状态。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-PROD-03 | 有促销价且在有效期内时，展示促销价，原价以划线形式展示 |
| BR-PROD-04 | 无促销时，展示销售价 |
| BR-PROD-05 | 会员价：根据当前会员等级展示对应会员价（已登录时） |
| BR-PROD-06 | 多规格商品：选择具体SKU后，价格联动为该SKU的价格 |
| BR-PROD-07 | 促销类型包括：促销价、会员价、阶梯价、满减、限时购 |
2.3 商品基本信息
页面结构
展示商品名称、副标题（卖点）、品牌名称、所属分类、货号等基本信息。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-PROD-08 | 商品不存在或已删除时，展示"商品不存在"空态页 |
| BR-PROD-09 | 商品已下架时，展示"商品已下架"提示，禁用加购和购买按钮 |
| BR-PROD-10 | 库存为0时，展示"已售罄"标签，禁用加购按钮 |
2.4 规格选择（SKU）
页面结构
商品信息下方为规格选择区域。每个规格维度（如"颜色"、"容量"）展示为一行标签按钮，用户点击选择。选中后联动更新价格、库存和商品图片。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-PROD-11 | 多规格商品必须选择完所有规格维度后才能加购 |
| BR-PROD-12 | 选择规格后，价格和库存联动为对应SKU的数据 |
| BR-PROD-13 | 某规格组合库存为0时，该组合不可选（置灰） |
| BR-PROD-14 | 单规格商品不展示规格选择器，直接展示价格和库存 |
交互说明
| 用户操作 | 系统反馈 |
|---|---|
| 点击规格标签 | 选中该规格值，联动更新价格/库存/图片 |
| 再次点击已选中标签 | 取消选择 |
| 未选完规格点击加购 | 提示"请选择完整规格" |
2.5 数量选择与加购
页面结构
规格选择下方为数量选择器（减号/输入框/加号）和操作按钮（加入购物车、立即购买）。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-PROD-15 | 数量最小为1，最大为当前库存（或SKU库存） |
| BR-PROD-16 | 游客点击加购或购买时，引导至登录页，登录后返回 |
| BR-PROD-17 | 加购成功后提示"已加入购物车"，购物车角标数量+1 |
| BR-PROD-18 | 加购时实时校验库存，库存不足则提示"库存不足（剩余X件）" |
| BR-PROD-19 | 立即购买：跳转确认订单页，携带商品和数量信息 |
2.6 商品详情与参数
页面结构
页面下方为Tab区域，包含"商品详情"和"商品参数"两个Tab。
- 商品详情：展示图文富文本描述
- 商品参数：以表格形式展示结构化参数（参数名:参数值）
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-PROD-20 | 商品详情为后台编辑的富文本内容，前台原样渲染 |
| BR-PROD-21 | 商品参数取商品属性中"参数"类型的属性及其值 |
| BR-PROD-22 | 无参数数据时隐藏"商品参数"Tab |
2.7 商品评论
页面结构
评论区域包含：评论统计（总评分、好评率、评论总数）、筛选标签（全部/有图/好评/中评/差评）、评论列表（用户头像、昵称、星级、内容、图片、购买规格、时间、商家回复）。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-PROD-23 | 仅展示"显示"状态的评论 |
| BR-PROD-24 | 默认按评论时间倒序排列 |
| BR-PROD-25 | 好评：4~5星；中评：3星；差评：1~2星 |
| BR-PROD-26 | 有图筛选：仅展示附带图片的评论 |
| BR-PROD-27 | 商家回复展示在对应评论下方 |
2.8 商品收藏
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-PROD-28 | 会员可收藏/取消收藏商品 |
| BR-PROD-29 | 已收藏状态展示"已收藏"标识 |
| BR-PROD-30 | 游客点击收藏时引导登录 |
2.9 服务保障
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-PROD-31 | 根据商品配置的服务标签展示对应保障项 |
| BR-PROD-32 | 服务标签包括：无忧退货、快速退款、免费包邮 |
3. 接口能力
| 能力名称 | 说明 | 是否需登录 |
|---|---|---|
| 商品详情查询 | 返回商品完整展示信息，含规格列表、属性参数、SKU库存 | 否 |
| 商品评论列表 | 按商品查询评论，支持筛选和分页 | 否 |
| 商品收藏/取消收藏 | 会员收藏或取消收藏商品 | 是 |
| 加入购物车 | 将指定商品（含规格）加入会员购物车 | 是 |
商品详情查询
- 输入：商品ID
- 输出：商品名称、副标题、主图、画册图片、销售价、原价、促销价、促销类型、库存、销量、货号、品牌、分类、服务标签、赠送积分/成长值、是否有库存、规格属性列表、SKU列表（每个SKU含编码、价格、库存、规格组合）
4. 核心数据实体
| 实体 | 业务含义 | 关键属性 |
|---|---|---|
| 商品（SPU） | 标准产品单元，如"iPhone 14" | 名称、副标题、主图、画册、价格、原价、库存、销量、品牌、分类、上下架状态、详情描述 |
| SKU | 具体规格组合，如"iPhone 14 午夜色 128G" | SKU编码、价格、库存、销量、规格组合数据、SKU图片 |
| 商品属性 | 商品的规格或参数定义 | 属性名称、属性类型（规格/参数）、录入方式、可选值 |
| 属性值 | 某商品某属性的具体取值 | 关联商品、关联属性、属性值 |
| 商品评论 | 会员对已购商品的评价 | 评分、内容、图片、购买规格、商家回复 |
| 会员价 | 不同会员等级对应的商品价格 | 关联商品、会员等级、会员价格 |
实体关系：一个商品（SPU）包含多个SKU，每个SKU对应一组规格组合；商品关联多个属性值；评论关联商品和会员。
5. 验收标准
| 编号 | 验收条件 |
|---|---|
| AC-PROD-01 | 商品详情页正确展示所有基本信息（名称、价格、图片、品牌、分类） |
| AC-PROD-02 | 图片轮播正常展示主图和画册图片 |
| AC-PROD-03 | 有促销价时优先展示促销价，原价划线 |
| AC-PROD-04 | 多规格商品展示规格选择器，选择后价格/库存联动 |
| AC-PROD-05 | 未选完规格时不可加购，给予提示 |
| AC-PROD-06 | 加入购物车功能正常，成功后有反馈 |
| AC-PROD-07 | 游客加购时引导登录 |
| AC-PROD-08 | 已下架商品展示下架提示，禁用操作按钮 |
| AC-PROD-09 | 库存为0时展示已售罄，禁用加购 |
| AC-PROD-10 | 商品详情富文本正确渲染 |
| AC-PROD-11 | 商品参数表格正确展示 |
| AC-PROD-12 | 商品评论列表正确展示，筛选功能正常 |
| AC-PROD-13 | 收藏/取消收藏功能正常 |
| AC-PROD-14 | 商品不存在时展示空态页 |