主题
前台 · 商品详情页
页面路由：
/portal/product/:id优先级：P0（转化核心页）
1. 页面定位
- 角色：购买决策的核心战场，用户在此完成"要不要买、买哪个、买几个"的决策
- 用户决策：这个商品值不值？规格怎么选？现在买还是加购物车？
- 核心指标：加购率、立即购买转化率、页面停留时长、跳出率
2. 页面结构
2.1 移动端（主形态）
┌─────────────────────────────────────┐
│ ① 商品主图轮播（1:1，多图可滑动） │
├─────────────────────────────────────┤
│ ② 价格区 │
│ ¥现价(大字) 划线原价 [优惠券标签] │
│ 已售xxx 库存xxx │
├─────────────────────────────────────┤
│ ③ 标题区 │
│ 商品名(2行) + 副标题/卖点 │
├─────────────────────────────────────┤
│ ④ 促销/优惠条 │
│ 领券 > / 积分抵扣说明 │
├─────────────────────────────────────┤
│ ⑤ 规格选择条 │
│ 已选：颜色/版本/数量 > (弹规格面板) │
├─────────────────────────────────────┤
│ ⑥ 配送/服务条 │
│ 配送至xx 运费xx 服务：7天无理由 > │
├─────────────────────────────────────┤
│ ⑦ 商品详情（Tab 切换） │
│ [商品介绍] [规格参数] [包装/售后] │
│ 富文本图文详情 │
├─────────────────────────────────────┤
│ ⑧ 底部吸底操作栏（固定） │
│ [客服][收藏] [加入购物车][立即购买] │
└─────────────────────────────────────┘2.2 桌面端
┌──────────────────────┬──────────────────────┐
│ ① 主图轮播（左，480px）│ ②价格 ③标题 ④优惠 │
│ │ ⑤规格选择 ⑥配送服务 │
│ │ 数量选择 │
│ │ [加入购物车][立即购买] │
├──────────────────────┴──────────────────────┤
│ ⑦ 商品详情 Tab（通栏） │
└─────────────────────────────────────────────┘3. 功能模块设计
3.1 主图轮播（①）
- 商品相册多图，1:1 展示，左右滑动切换
- 指示器：圆点或 "当前/总数"（如 1/5）
- 支持点击进入图片全屏预览（可选）
- 视频封面优先展示（如有视频）
3.2 价格区（②）
- 现价：24px 加粗品牌色，格式 ¥1,299.00
- 原价：灰色删除线（仅原价>现价时展示）
- 优惠标签：如"领券满100减20"，点击打开优惠券领取面板
- 辅助信息：已售数量、库存（库存≤10 显示"仅剩N件"红色提示）
3.3 规格选择（⑤）—— 核心交互
触发：点击"已选"条或底部"加入购物车/立即购买"均弹出规格面板（半屏弹层）
规格面板内容：
┌─────────────────────────────────────┐
│ [缩略图] ¥价格(随选择变化) │
│ 库存：N 已选：红色 / 128G │
│ │
│ 颜色 [红色] [蓝色] [黑色] │ 规格值胶囊按钮
│ 版本 [128G] [256G] │
│ │
│ 数量 [-] 1 [+] │
│ │
│ [确定] │
└─────────────────────────────────────┘业务规则：
- 多规格商品：必须选完所有规格维度才能确定 SKU 与价格
- 未选完规格点"确定"：提示"请选择完整规格"并高亮未选维度
- 规格值无库存：置灰不可点（如"蓝色-256G"无货）
- 数量：默认 1，[-][+] 调整，不超过库存；输入框可直接输入
- 单规格商品：不展示规格维度，仅展示数量选择
3.4 底部操作栏（⑧，移动端吸底）
| 按钮 | 行为 |
|---|---|
| 客服 | 跳转客服会话（本期：提示"请联系在线客服"或跳转帮助中心） |
| 收藏 | 切换收藏状态，未登录先引导登录；已收藏显示实心图标 |
| 加入购物车 | 打开规格面板 → 选完确定 → 加购成功轻提示 + 购物车角标+1 |
| 立即购买 | 打开规格面板 → 选完确定 → 直接跳确认订单页（跳过购物车） |
状态：
- 商品下架：底部栏显示"该商品已下架"，按钮全部禁用
- 库存为 0：加购/购买按钮置灰显示"已售罄"
3.5 商品详情 Tab（⑦）
| Tab | 内容 |
|---|---|
| 商品介绍 | 富文本图文详情（后台配置的 detailHtml），图片自适应宽度、懒加载 |
| 规格参数 | 结构化参数表格（品牌/型号/材质/产地等，来自商品属性） |
| 售后保障 | 退换货政策、包装清单（静态文案 + 后台可配） |
- 移动端 Tab 吸顶（滚动到详情区时固定在顶部）
- 桌面端 Tab 在详情区顶部
4. 业务规则汇总
| 规则 | 说明 |
|---|---|
| 浏览记录 | 进入详情页自动记录浏览历史（登录用户） |
| 价格展示 | 多规格商品未选规格时展示区间价"¥1,299 - ¥1,599" |
| 库存校验 | 加购/下单时后端二次校验库存，前端展示仅为参考 |
| 下架商品 | 可访问但不可交易，展示下架提示 |
| 商品不存在 | 显示"商品不存在或已删除" + 推荐相似商品 |
5. 状态设计
| 状态 | 表现 |
|---|---|
| 加载中 | 主图灰块 + 内容区骨架屏 |
| 商品下架 | 顶部灰色横幅"该商品已下架"，交易按钮禁用 |
| 商品不存在 | 空状态页 + "看看其他商品"推荐流 |
| 加购成功 | 轻提示"已加入购物车" + 顶部购物车角标动画 |
| 收藏成功 | 轻提示"收藏成功"，图标变实心 |
6. 体验优化（用户视角）
按优先级排列。P0=影响转化必须做，P1=显著提升体验，P2=锦上添花。
| 优先级 | 优化点 | 说明 |
|---|---|---|
| P0 | 商品评价区 | 详情页最缺的决策依据。展示好评率 + 评价标签（如"质量好""物流快"）+ 精选评价（带图优先），点击展开全部评价。无评价时显示"暂无评价，买了的人来说说" |
| P0 | 相似/关联推荐 | 详情页底部"看了又看"（同分类相似商品）+ "搭配购"（常一起买），提升连带率与跳出后的承接 |
| P1 | 问大家 Q&A | 用户提问 + 已买用户回答，解决详情页没覆盖的疑虑（如"实际续航如何"） |
| P1 | 降价/到货通知 | 售罄商品提供"到货提醒"（订阅后到货推送）；收藏用户可订阅降价通知 |
| P1 | 分享 | 底部栏或右上角分享按钮，生成商品海报/链接，社交裂变 |
| P1 | 浏览历史条 | 详情页底部"最近浏览"横向滑动条，方便比价后回跳 |
| P2 | 主图视频 | 有视频时首帧自动播放（静音），提升停留时长 |
| P2 | 桌面端图片放大镜 | 悬停主图显示局部放大，PC 端提升细节查看体验 |
| P2 | 评价筛选 | 按"有图/好评/中评/差评/追评"筛选评价 |
设计要点：
- 评价区放在"商品详情 Tab"之上（移动端），因为评价比图文详情更影响决策
- 好评率用进度条 + 百分比双通道展示（不只用颜色）
- 推荐位商品复用全站商品卡片，控制推荐数量（看了又看 ≤8 个）
7. 验收标准
- AC-P01：商品主图多图轮播，价格/标题/销量/库存正确展示
- AC-P02：多规格商品可完整选择规格，价格随 SKU 联动变化
- AC-P03：无库存规格值置灰不可选，数量不可超过库存
- AC-P04：加入购物车成功后购物车角标 +1，立即购买直达确认订单页
- AC-P05：下架/售罄商品交易按钮禁用且有明确提示
- AC-P06：规格参数 Tab 正确展示商品属性表格
- AC-P07：登录用户浏览商品后，浏览历史中出现该商品