# P07 在线支付结果与取消失败重试 · 设计说明（payment-result.vue）

> 单元：`payment-result` ｜ group=orders（辅助）｜ P07 ｜ 依据：pages.json unit#11 + 规格表 §0.5「支付中断/取消→订单保留可重付；失败→错误弹层+重试」+ 执行方案 §5.11
> 实现：`vue/src/pages/payment-result.vue` ｜ 五分支即本页主体（mock.payStates 顺序为契约）｜ fixtures：`design/fixtures/orders.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 结果图标+主文案 | 五分支各自色底圆图标+标题+说明（双通道：图标+色彩+文字；成功绿/处理中蓝/取消橙/失败红/超时灰） | — | ✓ |
| ② 支付金额 | 「在线支付」+大金额（A1001 实付款 456，与订单卡/详情金额明细三处同源）+订单号等宽+商品名 | — | ✓ |
| ③ 分支操作区 | 成功=查看订单→order-detail+继续逛逛→home；处理中=确认中禁用按钮；取消=**继续支付**（演示流转）+查看订单；失败=**重试支付**（演示流转）+查看订单；超时=回到首页→home | **5 分支/每分支主操作 ≥1** | ✓ |
| 附加卡 | pending=轮询点动画+「请勿关闭页面」+自动跳转说明；cancel=「订单已保留」Pill+待支付倒计时（payDeadlineTs 同源，<1h 红移）+违约说明；fail=失败原因明细（余额不足·示意） | — | ✓ |
| 渠道与演示说明 | 「支付渠道：在线支付（小程序端与 H5 端仅调起方式不同，界面统一）」+原型演示声明 | — | ✓ |

## 2. 九维度 A–I

| 维 | 本页取值 |
|---|---|
| A 状态 | 五分支帧即主体（success/pending/cancel/fail/timeout）；guest **N/A**（na_reason：支付必登录，入口链路含登录前置）；loading **N/A**（na_reason：轮询即加载态，已由 pending 帧承载——pages.json 原文）；'normal' 页内回退 success（pages.json 未声明 normal 帧） |
| B 交互反馈 | **pending 禁返回绕过**（隐藏返回键+文案「暂禁返回，防止重复支付」）；重试/继续支付防连点（流转期间按钮态切换）；成功/失败图标+文字双通道；分支元数据以 payStates 为契约、run 期缺支告警 |
| C 表单键盘 | **N/A：无表单**（pages.json dims 原文） |
| D 文本展示 | 金额 26px tabular 与订单一致；订单号等宽；失败原因/违约说明逐条列明 |
| E 弹层导航 | pending 弹层语义禁返回（§0.5 支付中断分支）；其余分支返回→orders；「取消≠丢单」：cancel 分支明示订单保留+倒计时内可重付 |
| F 平台设备 | 小程序/H5 支付渠道差异只影响调起，界面统一「在线支付」（pages.json dims 原文，页脚注明）；按 §0.5 |
| G 性能 | 轮询间隔示意（pending 动画帧）；正式端轮询 /pay-status（占位） |
| H 无障碍 | 五分支色底全部配 icon+文字（不单靠颜色）；spin 带 aria-label；对比度全 token 实测色（warn-ink/price-deep/accent-deep ≥4.5） |
| I 数据接口 | `GET /order/{id}/pay-status`（占位，pages.json dims 原文）；本页不接真实支付，演示流转为页内 pending→success（1.6s） |

## 3. 状态帧（5 帧，板数 2）

success（绿✓+担保语义文案「货款由平台担保冻结，卖家发货、你确认收货后结算」）/ pending（spinner+轮询点+禁返回）/ cancel（订单已保留+待支付倒计时+继续支付）/ fail（失败原因明细+重试支付）/ timeout（订单已关闭+违约说明【占位：扣信用/保证金】+回到首页）。

## 4. 决策触点 ↔ 字段/组件

| 决策点 | 支撑 |
|---|---|
| 支付中断后「钱/订单怎么样了」 | 五分支各自直给：钱（金额卡常驻）+订单（保留/关闭语义+查看订单入口） |

## 5. 数据一致性说明

- 金额=orders[0]（A1001 unpaid）amount=456——订单卡、订单详情金额明细、本页三处同源（fmtMoney 推导）。
- cancel 分支倒计时复用 A1001.payDeadlineTs（与订单列表待支付卡同源）。

## 6. 占位与缺口

- 失败原因「余额不足」＝示意（以支付渠道提示为准）；违约处理【占位：扣信用/保证金】。
- 本页为界面示意，不接任何真实支付；重试/继续支付的 pending→success 为页内演示流转（1.6s），已页脚声明。
- 无新增素材缺口（纯图标+文字，无图片位）。