P19 周边订单确认页

页面概述

• 页面名称：订单确认页
• 页面目标：完成订单确认，并支持 积分兑换 或 支付购买 两种结算类型
• 适用角色：已登录并绑定手机号用户
• 页面入口：P18

页面组成

1. 商品简略信息

• 字段：goodsImage、title、buyCount
• 说明：展示商品摘要，首期 buyCount 固定为 1

2. 店铺信息区

• 字段：storeLogo、storeName、storeAddress、distance
• 说明：用于展示自提门店信息，并提供导航说明

3. 履约方式区

• 字段：deliveryMode、supportedModes
• 说明：支持 自提 或 邮寄

4. 地址区

• 字段：consignee、mobile、addressText
• 说明：仅在 邮寄模式 下展示

5. 结算类型区

• 字段：settleType
• 说明：支持 积分兑换 / 支付购买

6. 金额/积分明细区

• 字段：settleType、goodsAmount、freightAmount、totalAmount、settleAmount、currentPoints
• 说明：
  • 根据结算类型展示消耗积分或支付金额
  • 展示用户当前积分

7. 底部结算栏

• 字段：settleSummary、payAction
• 说明：
  • 左侧展示消耗积分或支付金额
  • 右侧展示支付按钮

按钮与交互

按钮	显示条件	动作
门店导航	自提模式可见	打开地图
选择地址	邮寄模式可见	打开 P31
立即支付	固定显示	创建订单并唤起微信支付

业务规则

交互逻辑

• 提交前锁库存
• 支付完成后：
  • 自提：进入待核销
  • 邮寄：进入待发货

校验规则

• 库存充足
• 地址必填
• 订单防重复
• 支付签名有效

状态处理

加载态

• 下单中按钮显示 loading

异常提示

• 支付签起失败提示：支付发起失败，请稍后重试

页面跳转

• P19 -> P20 / P31

埋点建议

• merch_order_confirm_show
• merch_order_submit_click
• merch_order_submit_success