主题
前台 · 交易流程（购物车 / 确认订单 / 支付）
覆盖页面：
/portal/cart、/portal/checkout、/portal/pay/:orderId设计目标：让"买"这个动作尽可能顺滑，每一步都减少流失
一、购物车（/portal/cart）
1.1 页面定位
- 角色：交易蓄水池，用户暂存商品、凑单、比价的地方
- 用户决策：买哪几件？凑不凑满减？现在结算还是再逛逛？
- 核心指标：购物车→结算转化率、客单价
1.2 页面结构
┌─────────────────────────────────────┐
│ 购物车（N件商品） [管理/编辑] │
├─────────────────────────────────────┤
│ ☑ [图] 商品名 规格 │
│ ¥价格 [-]1[+] 小计¥xx │
│ ☐ [图] 商品名 规格 │
│ ¥价格 [-]2[+] 小计¥xx │
│ ── 失效商品 ────────────────── │
│ [图] 商品名（已下架/无货）[找相似] │
├─────────────────────────────────────┤
│ 底部结算栏（吸底）： │
│ ☑全选 合计：¥xxx（不含运费） │
│ [结算(N)] │
└─────────────────────────────────────┘1.3 功能模块
商品项
- 勾选框：单选，勾选后计入合计
- 商品图+名称+规格：点击跳转商品详情
- 数量步进器：[-][+] 调整，实时刷新小计；不超过库存
- 左滑删除（移动端）/ 删除按钮（管理模式下）
编辑模式（管理）
- 点击"管理"切换为批量操作模式：底部栏变为 [移入收藏] [删除]
- 支持多选批量删除
失效商品区
- 下架/缺货商品沉底到"失效商品"区，灰色展示，不可勾选
- 提供"找相似"入口（跳搜索页）+ "清空失效商品"
底部结算栏
- 全选/反选
- 合计金额 = 已勾选商品小计之和（不含运费，运费在结算页计算）
- 结算按钮显示已勾选件数："结算(3)"
- 未勾选任何商品时结算按钮禁用
1.4 业务规则
| 规则 | 说明 |
|---|---|
| 登录态 | 购物车需登录；游客加购时引导登录 |
| 库存变化 | 进入购物车时校验库存，不足则标记提示"库存不足" |
| 价格变化 | 加购后价格变动，展示最新价格（以后端为准） |
| 数量上限 | 单商品数量 ≤ 库存且 ≤ 99 |
1.5 状态设计
| 状态 | 表现 |
|---|---|
| 空购物车 | 插画 + "购物车还是空的" + [去逛逛] 按钮跳首页 |
| 加载中 | 骨架屏 |
| 勾选超库存 | 提示"该商品库存不足，已调整数量" |
1.6 验收标准
- AC-CART01：购物车正确展示商品、规格、单价、小计
- AC-CART02：勾选/全选后合计金额实时正确计算
- AC-CART03：数量调整不超库存，超出自动修正并提示
- AC-CART04：失效商品沉底不可勾选，可清空
- AC-CART05：空购物车展示引导文案与"去逛逛"入口
二、确认订单（/portal/checkout）
2.1 页面定位
- 角色：下单前最后一次确认，转化漏斗的最后一道关卡
- 用户决策：地址对不对？用哪张券？要不要用积分？确认付款吗？
- 核心指标：订单提交率（进入结算页→提交成功）
2.2 页面结构
┌─────────────────────────────────────┐
│ ① 收货地址卡片 │
│ 收货人 手机 地址全文 > │
│ （无地址时：+新建收货地址） │
├─────────────────────────────────────┤
│ ② 商品清单 │
│ [图] 商品名 规格 ¥价 ×数量 │
│ （多商品依次列出） │
├─────────────────────────────────────┤
│ ③ 优惠券 │
│ 可用 N 张 > （弹层选择，默认最优） │
│ -¥20.00 │
├─────────────────────────────────────┤
│ ④ 积分抵扣 │
│ 本次可用 xxx 积分 [开关] -¥x.xx │
├─────────────────────────────────────┤
│ ⑤ 金额明细 │
│ 商品金额 ¥xxx │
│ 运费 ¥xx │
│ 优惠券 -¥xx │
│ 积分抵扣 -¥x.xx │
├─────────────────────────────────────┤
│ ⑥ 买家留言（可选输入框） │
├─────────────────────────────────────┤
│ 底部提交栏（吸底）： │
│ 实付款：¥xxx [提交订单] │
└─────────────────────────────────────┘2.3 功能模块
① 收货地址
- 默认展示用户的默认地址
- 点击地址卡片 → 地址选择页（可切换/新建/编辑）
- 无地址时：卡片显示"+ 新建收货地址"，必须先建地址才能下单
- 地址选择后返回本页刷新
③ 优惠券选择（核心）
- 点击打开半屏弹层，列出本单可用优惠券
- 默认自动选中抵扣金额最大的一张（PM 原则：帮用户做最优决策）
- 不可用券置底灰色展示并说明原因（"未满¥100"）
- 可选择"不使用优惠券"
- 选中后回到结算页显示抵扣金额
④ 积分抵扣
- 开关式：默认关闭
- 展示"本次最多可用 N 积分，抵扣 ¥x.xx"
- 开启后金额明细实时联动
- 积分不足时开关禁用并说明
⑤ 金额明细（实时计算）
实付款 = 商品金额 + 运费 - 优惠券 - 积分抵扣- 任何选择变化（地址/券/积分）都实时重算
- 实付款不得为负（最低 ¥0.00）
2.4 业务规则
| 规则 | 说明 |
|---|---|
| 入口 | 购物车勾选结算 / 商品详情立即购买 |
| 库存锁定 | 提交订单时后端校验并锁定库存，失败提示"手慢了，商品已售罄" |
| 优惠券互斥 | 一单只能用一张优惠券 |
| 运费计算 | 按商品运费模板 + 收货地址计算，满额免邮时显示"已免邮" |
| 提交防重 | 提交按钮点击后立即 loading 禁用，防重复下单 |
2.5 状态设计
| 状态 | 表现 |
|---|---|
| 无地址 | 地址卡片引导新建，提交按钮禁用 |
| 提交中 | 按钮 loading"提交中..." |
| 库存不足 | 弹窗说明哪个商品缺货，返回购物车 |
| 提交成功 | 跳转支付页 |
2.6 验收标准
- AC-CO01：默认地址正确展示，可切换/新建地址
- AC-CO02：优惠券弹层正确区分可用/不可用，默认选中最优券
- AC-CO03：积分开关开启后金额明细正确联动
- AC-CO04：实付款 = 商品+运费-券-积分，实时计算无误差
- AC-CO05：提交订单成功后跳转支付页，库存正确扣减
三、支付（/portal/pay/:orderId）
3.1 页面定位
- 角色：转化终点，用户完成付款动作
- 用户决策：用什么方式付？现在就付吗？
- 核心指标：支付成功率、支付时长
3.2 页面结构
┌─────────────────────────────────────┐
│ ① 订单信息 │
│ 订单号：20260715xxxx │
│ 应付金额：¥xxx（大字居中） │
│ 支付剩余时间：14:59（倒计时） │
├─────────────────────────────────────┤
│ ② 支付方式（单选列表） │
│ ◉ 支付宝 │
│ ○ 微信支付 │
├─────────────────────────────────────┤
│ ③ [确认支付 ¥xxx]（主按钮） │
└─────────────────────────────────────┘3.3 功能模块
① 订单信息
- 展示订单号、应付金额
- 支付倒计时：订单创建后 15 分钟内需支付，倒计时结束订单自动取消
- 倒计时归零：页面提示"订单已超时关闭" + [重新购买] 按钮
② 支付方式
- 单选列表，默认选中第一项（支付宝）
- 支付方式带图标，提升识别度
- 本期支持：支付宝（模拟）、微信支付（模拟）
③ 确认支付
- 点击后调起支付（本期为模拟支付，直接调用后端支付接口）
- 支付中：按钮 loading，防止重复点击
- 支付成功 → 跳转支付成功页（或订单详情，带成功态）
- 支付失败 → 提示失败原因，可重试
3.4 业务规则
| 规则 | 说明 |
|---|---|
| 订单状态 | 仅"待付款"订单可支付；已支付/已取消订单访问此页给出提示 |
| 超时取消 | 15 分钟未支付自动取消订单并释放库存 |
| 重复支付 | 后端幂等控制，已支付订单再次支付直接返回成功态 |
| 支付后跳转 | 支付成功展示结果页，提供 [查看订单] [继续逛逛] |
3.5 支付结果页设计
┌─────────────────────────────────────┐
│ ✅ 支付成功 │
│ 实付 ¥xxx │
│ [查看订单] [继续逛逛] │
└─────────────────────────────────────┘- 失败态：❌ 支付失败 + 原因 + [重新支付] [联系帮助]
3.6 验收标准
- AC-PAY01：正确展示订单号、应付金额、支付方式
- AC-PAY02：支付倒计时正确，超时后订单关闭并提示
- AC-PAY03：支付成功后跳转结果页，订单状态变为待发货
- AC-PAY04：已支付/已取消订单不可重复支付，给出明确提示
- AC-PAY05：支付按钮防重复提交
四、体验优化（用户视角）
交易流程每减少一步操作、每多一分确定性，都能直接提升转化。按优先级排列。
购物车
| 优先级 | 优化点 | 说明 |
|---|---|---|
| P0 | 凑单免邮进度条 | 底部结算栏上方展示"再买¥xx 可免邮"进度条，点击去凑单（提升客单价最直接手段） |
| P1 | 降价提示 | 加购后商品降价，商品项显示"比加入时降¥xx"红色标签，刺激结算 |
| P1 | 优惠预计提示 | 合计旁展示"已优惠¥xx"（券+满减预估），让用户感知划算 |
| P2 | 常购清单 | 购物车空时推荐"猜你想买"（基于历史订单） |
确认订单
| 优先级 | 优化点 | 说明 |
|---|---|---|
| P0 | 地址快选 | 地址卡片点击后弹层展示常用地址列表（默认地址置顶），一键切换，减少跳转 |
| P1 | 送达时间预估 | 根据地址展示"预计 x月x日 送达"，降低不确定性 |
| P1 | 留言快捷标签 | 买家留言提供常用标签（"放丰巢""周末送货""需要发票"），点击填入 |
| P2 | 发票信息 | 支持选择个人/企业发票（本期可预留入口） |
| P2 | 安全信任标 | 提交栏旁展示"支付安全保障"标识，降低付款顾虑 |
支付
| 优先级 | 优化点 | 说明 |
|---|---|---|
| P0 | 支付状态轮询 | 调起支付后轮询订单状态，用户从支付 App 返回时自动刷新结果，避免"付了但页面没变" |
| P1 | 支付遇困入口 | 支付页底部"遇到问题？查看支付帮助"，减少支付中断流失 |
| P1 | 订单挽回 | 待支付订单在购物车/首页以弱提示提醒（"有订单未支付"），15分钟内挽回 |
| P2 | 支付方式记忆 | 记住上次使用的支付方式，默认选中 |
设计要点：
- 凑单免邮与地址快选是交易链路中 ROI 最高的两个优化，优先落地
- 支付轮询是模拟支付场景下保证体验闭环的关键，不可省略
- 所有金额变动（券/积分/运费）必须实时重算并展示明细，不允许"提交后才发现价格不对"