P18 商品详情页

P18 商品详情页

页面概述

页面名称：商品详情页
页面目标：呈现商品信息并驱动积分兑换或支付购买
适用角色：全部用户；兑换/购买需登录
页面入口：P12

页面组成

1. 主图区

字段：imageList
说明：商品轮播图

2. 基础信息区

字段：title、highlight、cashPrice、pointsPrice、linePrice
说明：标题下展示价格、兑换所需积分及划线价

3. SKU 选择区

字段：skuLevel1
说明：仅支持一级 SKU 选择，不使用二级 SKU

4. 兑换/购买信息区

字段：settleType、settleAmount、currentPoints
说明：展示本次结算方式、结算金额（积分或现金）及当前账户积分

5. 门店信息区

字段：storeLogo、storeName、address
说明：展示门店信息并支持导航；当前页不展示距离字段

6. 履约说明区

字段：deliveryModes、freightRule、afterSaleInfo、redeemInfo
说明：展示配送、运费、售后说明及兑换后领取信息

7. 详情图区

字段：detailImages、richText
说明：展示商品详情内容

按钮与交互

按钮	显示条件	动作
门店导航	`store` 信息完整	打开地图导航
立即兑换/购买	商品上架且有库存	打开 P19
分享	固定显示	打开 P11

交互逻辑

页面进入后拉取：
- 商品详情
- 门店信息
- 库存快照
支持门店导航能力

校验规则

店铺信息不完整时，隐藏导航按钮
库存为 0 时，不可购买

状态与异常处理

空状态/加载失败/失效态：商品失效时展示：商品已下架
异常提示：导航失败时提示：当前无法打开导航，请稍后再试

页面跳转关系

P18 -> P19
P18 -> P11

埋点建议

merch_goods_detail_show
merch_nav_click
merch_buy_click
merch_share_click

实现要点

商品详情页需同时承载信息展示与交易转化能力
结算方式需兼容积分兑换与现金购买
SKU 方案限定为一级 SKU，避免复杂规格组合逻辑
门店模块仅展示基础信息与导航入口，不展示距离信息