# P07 订单列表 · 设计说明（orders.vue）

> 单元：`orders` ｜ group=orders ｜ P07 ｜ 依据：pages.json unit#7 + 规格表 P07 + 执行方案 §5.7
> 实现：`vue/src/pages/orders.vue` ｜ 组内组件：`vue/src/components/orders/OrderCard.vue` ｜ 状态帧 fixtures：`design/fixtures/orders.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 状态 tab 6 | SegmentTabs：全部/待支付/待发货/待收货/已完成/售后（细分帧自动切对应 tab） | **6** | ✓ |
| ② 订单卡 | OrderCard 5 信息点：拍品图/标题两行截断/实付款金额(tabular)/状态徽章(图标+文字)/主操作按钮；附订单号等宽+一键复制+下单时间（D 维度） | **5 点** | ✓（2026-10-10 验收修复：+时间锚点、标题两行、done/aftersale 去重复 ghost、命中区 ≥44pt） |
| ③ 待支付倒计时条 | OrderCard 内 `payDeadlineTs` 驱动；剩余 **<1h 转红+「超时将违约」胶囊**（规格表「超时前 1h 转红」，与 CountDown 的 <10min 竞拍紧迫规则区分） | — | ✓ |
| 数据 | mock.orders 5 条覆盖 5 状态（456/68/168/899/289，与 items 同源） | — | ✓（方案写 6 条，mock 底稿 5 条，以底座数据源为准，已登记） |

## 2. 九维度 A–I

| 维 | 本页取值 |
|---|---|
| A 状态 | 11 帧见 §3。差异：5 细分状态各一帧；**取消订单＝灰卡保留可删**（canceled 语义实现于 OrderCard：未支付卡→取消订单→二次确认→灰卡保留+删除二次确认；交互路径可见，mock 无 canceled 行故无静态帧——需底座增补 fixture 才有状态板帧，已登记缺口） |
| B 交互反馈 | 卡片按压态；卡操作直达对应页；**危险动作全部二次确认弹窗**：确认收货（「确认后货款将打给卖家」）/取消订单（「保留可删」）/删除订单（「不可恢复」）；提醒发货=toast；下拉刷新「已更新」（正式端） |
| C 表单键盘 | **N/A：列表页无表单**（理由：本页无输入控件） |
| D 文本展示 | 金额 tabular（fmtMoney 两位小数千分位）；订单号等宽字体+一键复制（clipboard+toast 兜底）；标题单行截断；时间用 mock 相对文案 |
| E 弹层导航 | 二次确认 dialog ×3（居中弹窗）；guest=半屏登录引导 Sheet；tab 切换保持页内状态；无落地页入口不存在（全部操作有注册目标或 toast） |
| F 平台设备 | 按 §0.5：无支付/分享特有分支；安全区 env(safe-area-inset-bottom) 由舞台与组件继承 |
| G 性能 | 列表 10/页分页语义（「— 没有更多了 —」）；图片懒加载（img loading=lazy）；无首屏阻塞聚合 |
| H 无障碍 | 待支付紧迫双通道（红字+「超时将违约」文字胶囊）；状态双通道（Pill 图标+文字六 tone）；对比度全部用 token 实测 ≥4.5 色；卡可聚焦（role=button+keyup.enter）；**命中区 ≥44pt（验收修复）**：操作钮视觉 36px+命中扩展 ±4px、复制钮视觉 24px+扩展 ±10px（::after 透明扩展，视觉档位不变） |
| I 数据接口 | `GET /orders?tab`；取消=正式端订单状态机（本稿为内存副本演示）；字段映射见 docs/字段映射.md「orders/payStates/aftersale」 |

## 3. 状态帧（11 帧，板数 4）

normal（全部 tab 混合列表）/ unpaid / unsent（提醒发货）/ unreceived（确认收货）/ done（主操作「查看详情」单按钮，无重复 ghost）/ aftersale（售后进度行，同理单主操作）/ empty（该状态下暂无订单+去逛逛→bid）/ loading（单列订单骨架 ×3，非双列商品骨架）/ error（黄条+缓存列表）/ extreme（压测：金额 29,999.99+**超长标题两行截断（OrderCard clamp=2，与本文一致）**+待支付剩余 47 分钟红条演示）/ guest（照常渲染+登录引导 Sheet→login）。

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

| 决策点 | 支撑 |
|---|---|
| 这笔订单该我做什么 | 状态徽章+主操作按钮一一对应（去支付/提醒发货/确认收货/查看详情/售后进度/删除）+待支付倒计时条 |
| 钱什么时候到 | 卡面实付款直给；明细在 order-detail（金额明细透明） |

## 5. 占位与缺口

- 提醒发货=toast 占位（正式为订阅消息触达）。
- canceled 灰卡无静态帧（mock 无 canceled 行）——缺口已登记：需底座在 mock.js 增补方可入状态板；交互链路已真实可走。
- 「订单 6 条」与 mock 5 条的差额已登记（不改共享数据层）。