# P07 订单详情 · 设计说明（order-detail.vue） > 单元：`order-detail` ｜ group=orders ｜ P07 ｜ 依据：pages.json unit#8 + 规格表 P07 + 执行方案 §5.8（含「评价」占位 notes） > 实现：`vue/src/pages/order-detail.vue` ｜ 复用：`components/orders/OrderCard.vue`（摘要形态 actions=false + link=item）｜ fixtures：`design/fixtures/orders.states.json` ## 1. 区块与密度对照 | 区块 | 实现落点 | 密度 | 达成 | |---|---|---|---| | ① 状态进度条 5 节点 | 中标→支付→发货→收货→评价；节点=图标+文字双通道（完成绿勾底/当前樱粉渐变/未来灰）；aftersale 帧冻结于收货+「售后中」徽章行 | **5 节点** | ✓ | | ② 拍品摘要卡 | OrderCard 摘要形态，点卡→item（P03） | — | ✓ | | ③ 金额明细 | 成交价(amount−freight)/运费(0→「包邮」绿字)/实付款(amount)；**卖家视角 chip 切换**追加平台服务费（费率解析自 feeNote.rate=5% 占位·后台可配）+预计结算到账 | **行 ≥3（买家 3 行/卖家 5 行）** | ✓ | | ④ 物流单号 | 等宽字体+一键复制（有 shipNo 的订单展示：A1003 SF0001112223） | — | ✓ | | ⑤ 操作区 | 视角 chip（买家/卖家；unsent 帧默认卖家）；买家=去支付/提醒发货/确认收货(二次确认)+申请售后/评价(toast 占位)+申请售后；卖家=去发货（unsent） | — | ✓ | | ⑥ 超时规则说明 | 支付 24h/发货 72h/自动确认 7 天【全占位，后台可配】浅粉说明卡 | — | ✓ | | ⑦ 售后进度卡（aftersale 帧） | aftersaleRecord 同源：理由/凭证数/当前步（申请→双方协商→平台裁定） | 3 步 | ✓ | ## 2. 九维度 A–I | 维 | 本页取值 | |---|---| | A 状态 | 7 帧（五状态+error+guest）；**normal 不在 pages.json 声明 → 页内回退 unreceived（最富帧：含物流/确认收货/售后全区块）**；error 帧=黄条+**缓存内容照常渲染**（2026-10-10 验收修复：此前 v-else 把缓存区藏掉致「已保留缓存」与空白页矛盾）；买卖家双视角=页内 chip（非状态帧），unsent 帧默认卖家使「去发货」进状态板成帧 | | B 交互反馈 | **确认收货二次确认弹窗「确认后货款将打给卖家」**→确认后本帧内推进为 done（内存副本，演示状态机）；申请售后→aftersale；「评价」＝toast「原型示意」（本轮 35 单元无落地页，执行方案 §5.8 notes，不挂 navigate；占位清单登记）；去支付→payment-result；去发货→shipping；unpaid 帧**本单支付剩余倒计时条**（验收补强：<1h 红移+「超时将违约」，与列表卡同规则同数据源） | | C 表单键盘 | **N/A：输入在 shipping 独立单元**（执行方案 §5.8 dims 原文） | | D 文本展示 | 金额明细分列两端对齐（label 左/值右，tabular）；单号等宽+复制；订单号等宽（OrderCard 内）；超时规则括注整体断行（span.nb white-space:nowrap，防行尾孤字「金）」——验收修复） | | E 弹层导航 | 确认收货 dialog；填单号半屏＝shipping 独立单元（本页跳转进入）；返回→orders | | F 平台设备 | 按 §0.5；本页无支付调起（去支付跳 payment-result 承担渠道差异） | | G 性能 | 按 §0.6：单订单聚合一次拉齐语义；图片懒加载 | | H 无障碍 | 进度节点当前步双通道（樱粉面+加粗文字）；售后中=红 Pill+文字；对比度全 token 实测色；视角 chip 带 role=tablist/aria-label | | I 数据接口 | `GET /order/{id}`、`POST /order/{id}/confirm`（确认收货，原型为 notify+内存推进）；服务费率=GET /config/fees 语义（feeNote） | ## 3. 状态帧（7 帧，板数 3） unpaid（进度当前=支付；去支付+**本单支付剩余倒计时条**）/ unsent（**默认卖家视角：去发货成帧**；买家视角=提醒发货）/ unreceived（normal 回退帧：物流单号+确认收货+申请售后）/ done（评价 toast 占位+申请售后；运费行显示非包邮）/ aftersale（进度冻结+售后进度卡）/ error（黄条+**缓存内容照常渲染**，缓存=回退帧 A1001 上下文）/ guest（必登录：整页登录引导，不泄露订单内容）。 ## 4. 决策触点 ↔ 字段/组件 | 决策点 | 支撑 | |---|---| | 下一步动作 | 进度条当前节点+操作区主按钮（买卖家视角分别直给） | | 钱什么时候到 | 金额明细三行透明；卖家视角直接显示扣 5% 服务费后的预计结算到账 | ## 5. 数据一致性说明 - 金额明细恒等式：成交价+运费=实付款（A1004：891+8=899 ✓；freight=0 显示「包邮」）。 - 执行方案 §5.8 拟真数据「order 1001-A 白鹭已发货带单号」与 mock A1001=unpaid 不一致——以 mock 底稿为准（五状态各取对应 fixture），差额登记于 fixtures JSON。 - 服务费 22.80/结算 433.20（A1001）由费率×金额推导，无字面量。 ## 6. 占位与缺口 - 「评价」无落地页=toast 占位（评价半屏表单记入 docs 占位清单，开发阶段按互评流程补设计，不静默缺失）。 - 超时规则 24h/72h/7 天全占位；服务费率 5% 占位后台可配。 - 确认收货后的状态推进为内存副本演示，不回写共享 mock（本组禁改共享层）。 ## 7. 2026-10-10 五页剩余问题修复记录（决定性） - **登录态六帧主体空白根因**：内容外包了一层无指令的裸 `