Appearance
P25 订单详情页
P25 订单详情页
页面概述
- 页面名称：订单详情页
- 页面目标：展示订单状态、履约信息、可执行操作与客服入口
- 适用角色：已登录用户
- 页面入口：P24、支付结果页
页面组成
1. 状态区
| 字段 | 说明 |
|---|---|
orderStatusText | 订单当前状态 |
countdown | 倒计时信息 |
statusDesc | 状态说明 |
2. 商品信息区
| 字段 | 说明 |
|---|---|
goodsImage | 商品图片 |
title | 商品标题 |
buyCount | 购买数量 |
3. 履约信息区
根据自提 / 邮寄方式差异化展示。
| 字段 | 说明 |
|---|---|
writeoffQrCode | 核销二维码 |
writeoffCodeNo | 核销码编号 |
storeInfo | 门店信息 |
addressInfo | 地址信息 |
logisticsNo | 物流单号 |
4. 金额明细区
按结算类型展示消耗积分或支付金额信息，字段口径与 P19 对齐。
| 字段 | 说明 |
|---|---|
settleType | 结算类型 |
goodsAmount | 商品金额 |
freightAmount | 运费金额 |
settleAmount | 结算金额 |
totalAmount | 订单总金额 |
currentPoints | 当前积分 |
5. 操作区
| 字段 | 说明 |
|---|---|
payButton | 支付按钮 |
confirmReceiptButton | 确认收货按钮 |
serviceEntryButton | 客服入口按钮 |
按钮与动作
| 按钮 | 显示条件 | 动作 |
|---|---|---|
| 立即支付 | 待支付 | 调起支付 |
| 查看核销码 | 待核销 / 已完成自提 | 展示二维码 |
| 确认收货 | 已发货 | 调用确认收货接口 |
| 联系客服 | 固定显示 | 打开 P32 |
| 保存客服二维码 | P32 有二维码 | 保存到相册后线下添加企微咨询 |
交互逻辑
- 详情页根据订单类型、配送方式、订单状态动态渲染。
- 支付成功后自动回刷订单状态。
校验规则
- 用户仅可查看自己的订单。
- 核销码仅对自提订单展示。
- 确认收货操作需二次确认。
状态与异常处理
空状态 / 加载中 / 失败态
- 当订单不存在或用户无权限时，展示：
订单不存在或已失效
异常提示
- 当订单状态已变更时，提示：
订单状态已更新，请刷新后查看
页面跳转关系
P25 -> P31P25 -> P32P25 -> 微信支付
埋点建议
| 事件名 | 说明 |
|---|---|
order_detail_show | 订单详情页展示 |
order_pay_click | 点击立即支付 |
order_confirm_receipt_click | 点击确认收货 |
order_service_click | 点击联系客服 |