# P07 售后申请 · 设计说明（aftersale.vue）

> 单元：`aftersale` ｜ group=orders（辅助）｜ P07 ｜ 依据：pages.json unit#10 + 规格表 P07 售后段 + 执行方案 §5.10
> 实现：`vue/src/pages/aftersale.vue` ｜ 整页表单（非 overlay）｜ fixtures：`design/fixtures/orders.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 窗口提示条 | 「待收货及完成后 7 天内【占位】可申请售后，请尽量附凭证照片」浅粉提示条（「附凭证照片」nowrap 整体断行——验收修复行尾孤字「片」） | — | ✓ |
| 上下文订单行 | **A1003 雾隐学园·绫 夏日制服ver.（待收货，窗口内可申请）**（订单号等宽+标题+实付款+「售后申请」红 Pill）。**验收修复（B 级错配）**：aftersaleRecord.desc 为裙装描述（「裙摆有色差」）与其 orderId 指向的 A1005（MECHA-07 机甲）不相容——共享底稿内部矛盾本组无权改 mock，按验收给的「换挂裙装订单」修法切到绫；record.orderId 待底座统一（见 §6） | — | ✓ |
| ② 理由单选 4 | 未发货/货不对板/少件/其他 chips（选中=樱粉描边+勾图标双通道；必选校验；**再次点击已选项可取消选择——必选拦截交互可达（验收修复）**） | **4** | ✓ |
| ③ 描述 | textarea 200 字+计数（n/200） | 字段 | ✓ |
| ④ 凭证图 ≤3 | n/3 计数；已传=示意占位块（.ph+角标，用户上传内容不冒充实拍）；添加口（虚线相机）；满 3 隐藏添加+上限红字 | — | ✓ |
| ⑤ 流程说明 | 申请→双方协商→平台裁定（编号节点+连接线，简化版）+「协商不一致可申请平台裁定【占位：裁定时效后台配置】」 | 3 步 | ✓ |
| ⑥ 提交按钮 | AppButton block；submitting=loading 锁 | — | ✓ |

## 2. 九维度 A–I

| 维 | 本页取值 |
|---|---|
| A 状态 | 5 帧（normal/submitting/success/error/extreme）；guest **N/A**（na_reason：入口仅订单买家本人，越权不可达——pages.json 原文） |
| B 交互反馈 | 提交 loading 锁；理由未选提交→字段红字+toast 定位；error 表单保留可重试；success=结果卡+返回详情按钮 |
| C 表单键盘 | 理由必选（提交校验「请选择售后理由」；**再次点击已选 chip 可取消选择，拦截交互可达——验收修复**，原版草稿预选+单选无取消路径致该态不可达）；描述 200 字上限+计数器；凭证 ≤3 张上限（超限 toast+红字）；无金额输入 |
| D 文本展示 | 计数器 n/200、n/3；金额 fmtMoney；按 §0.3 |
| E 弹层导航 | 凭证图点击→image-preview 复用大图预览（pages.json dims 原文）；返回→order-detail |
| F 平台设备 | 按 §0.5；图片压缩上传语义（正式端） |
| G 性能 | 凭证压缩上传（pages.json dims 原文）；本稿为占位块无真实上传 |
| H 无障碍 | 必选星标+红字错误「!」图标双通道；凭证块带 aria-label；对比度全 token 实测色；**命中区 ≥44pt（验收修复）**：理由 chip 视觉 32px+命中扩展 ±6px（::after）；**字号下限（验收修复）**：流程注释/success 说明等 10px 全部升 var(--fs-note)=11px（最小字档） |
| I 数据接口 | `POST /order/{id}/aftersale`（原型为 notify 演示）；草稿回显=aftersaleRecord（理由/描述/凭证数同源） |

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

normal（表单+草稿回显；**再次点击已选理由可取消→提交即出必选拦截红字**）/ submitting（loading 锁）/ success（「申请已提交，等待卖家响应」结果卡+流程节点第 1 步完成+返回订单详情按钮）/ error（黄条+表单保留）/ extreme（凭证 3/3 满+上限红字）。

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

| 决策点 | 支撑 |
|---|---|
| 选对售后理由+留证 | 理由 4 选项直给+凭证 ≤3 槽位+窗口期提示条常驻 |

## 5. 数据一致性说明

- **上下文订单=A1003（绫 夏日制服ver.，待收货）**（验收修复）：aftersaleRecord.desc（「实物裙摆有色差…」）为裙装类描述，与其 orderId 指向的 A1005（MECHA-07 机甲模型）不相容；描述内容适配裙装商品，故演示上下文按验收修法「换挂裙装订单」取待收货的绫（窗口内可申请）。record 的 reason/imgs/step 仍为本表单草稿与成功帧回显来源。
- success 帧展示 aftersaleRecord 的理由/凭证数（提交回显语义）。

## 6. 占位与缺口

- **共享底稿待修项（本组无权改 mock.js，升级底座）**：mock.js aftersaleRecord.orderId='A1005' 与其 desc（裙装描述）不相容——建议底座二选一：①orderId 改 'A1003'；②desc 改为机甲相容文案（如「实物漆面有色差」）。本页已按修法②的等价路径（换挂裙装订单）消除界面层错配。
- 售后窗口 7 天【占位】；裁定时效【占位·后台配置】。
- 凭证图为 .ph 示意占位（用户上传内容无登记素材；素材缺口不涉新增生图）。
- 简化流程（不做强仲裁介入）与需求卡⑥边界一致。

- 售后窗口 7 天【占位】；裁定时效【占位·后台配置】。
- 凭证图为 .ph 示意占位（用户上传内容无登记素材；素材缺口不涉新增生图）。
- 简化流程（不做强仲裁介入）与需求卡⑥边界一致。