Appearance
PRD：我的订单 orders-list
一句话：面向 C 端用户，以多 Tab 状态分类展示用户全部健康服务订单，支持快速定位特定状态订单并进入详情查看履约进度。
0. 快速评审卡
| 项 | 内容 |
|---|---|
| 产品 | funde-client |
| 模块 | 服务 / 订单列表 |
| 页面/功能 | 我的订单 |
| 路由 | /orders |
| 页面类型 | 列表页 |
| 状态 | 已实现 / PRD 初版 |
| 产品负责人 | [待确认] |
| 研发负责人 | [待确认] |
| 测试负责人 | [待确认] |
| 关联原型 | funde-client/prototype/src/views/orders/OrderListView.vue |
| 关联 page-spec | funde-client/docs/page-specs/orders-list.page.yaml |
| 关联 mock | funde-client/prototype/src/mock/orders.json |
1. 为什么做
1.1 背景
订单列表页（路由 /orders）是用户管理已购健康服务的核心页面，可从"我的"个人中心、服务首页已购服务包"查看进度"按钮、服务详情"立即下单"、商品详情"立即购买"等多个入口进入。页面通过 Tab 分类（全部/待使用/使用中/已完成/待评价）帮助用户快速定位所需订单，并以卡片形式展示订单的关键信息。支持通过 URL query 参数（?tab=）直接定位到特定 Tab。当前原型已实现全部 5 个 Tab、订单卡片列表、按状态过滤、剩余天数提示、空状态占位。
1.2 目标
- 业务目标：帮助用户便捷追踪订单履约状态，降低用户因信息不透明产生的服务咨询量
- 用户/运营目标：查看所有服务订单状态，管理正在履约的服务
- 交付目标：跑通"进入订单列表 → 切换 Tab → 点击订单卡片 → 进入订单详情"完整链路
1.3 不解决的问题
- 订单搜索：暂不提供
- 订单删除/归档：暂不实现
- 支付宝/微信支付：支付页（
/orders/payment）规划中，暂不实现 - 批量操作：暂不实现
2. 当前交付切片
这里只写当前准备评审、开发和测试的内容。
2.1 做什么
| 能力 | 说明 | 优先级 |
|---|---|---|
| 顶部 Tab 导航 | 5 个 Tab（全部、待使用、使用中、已完成、待评价），激活 Tab 主题色（#ff7a50）高亮下划线；支持通过路由 query ?tab= 参数直接定位 | P0 |
| 订单卡片列表 | 每张卡片展示： | P0 |
| 服务名称（大字号加粗） | 服务名称（大字号加粗） | P1 |
| 订单状态标签（按状态显示不同背景色 | 待使用橙色、使用中蓝色、待评价黄色、已完成绿色） | P1 |
| 服务标签（副标题描述） | 服务标签（副标题描述） | P1 |
服务起止日期区间（startDate — endDate） | 服务起止日期区间（startDate — endDate） | P1 |
| 订单金额（橙色大字） | 订单金额（橙色大字） | P1 |
剩余天数提示（仅 daysLeft > 0 时展示，带时钟图标） | 剩余天数提示（仅 daysLeft > 0 时展示，带时钟图标） | P1 |
| 点击整张卡片跳转订单详情 | 点击整张卡片跳转订单详情 | P1 |
| 空状态占位 | 当前 Tab 无订单时，显示订单图标和"暂无订单"文字 | P0 |
2.2 暂不做
| 暂不做 | 原因 | 后续处理 |
|---|---|---|
| 订单搜索 | 暂不提供 | [待确认] |
| 订单删除/归档 | 暂不实现 | [待确认] |
| 支付宝/微信支付 | 支付页（/orders/payment）规划中，暂不实现 | [待确认] |
| 批量操作 | 暂不实现 | [待确认] |
2.3 后续候选
| 候选能力 | 触发条件 |
|---|---|
| 订单搜索与关键词过滤 | [待确认] |
| 待评价订单批量评价入口 | [待确认] |
| 订单状态变更 Push 通知联动 | [待确认] |
3. 谁来用，怎么用
| 角色 | 场景 | 目标 |
|---|---|---|
| C 端用户（已购服务） | 从"我的"个人中心点击"服务履约"区域的状态入口（如"使用中"）直接进入对应 Tab | 快速看到当前正在进行的服务，点击进入详情查看履约时间线 |
| C 端用户（刚完成购买） | 从服务详情或商品详情点击"立即下单/购买"跳转至订单列表 | 确认订单已生成，查看服务起止时间和状态 |
| C 端用户（服务已完成） | 收到 Push 通知"服务已完成，请评价"后跳转至订单列表"待评价"Tab | 对刚完成的服务进行评价 |
4. 主流程与页面入口
4.1 入口与出口
| 类型 | 内容 |
|---|---|
| 从哪里进入 | 服务首页 / 我的 -> 订单列表 |
| 可以去哪里 | 订单详情、服务首页 |
| 依赖数据 |
4.2 主流程
4.3 异常场景
| 场景 | 系统表现 | 提示 |
|---|---|---|
| 网络异常 | 显示骨架屏，提示"加载失败，下拉刷新" | - |
| 某 Tab 无订单 | 显示订单图标 + "暂无订单"文字 | - |
| 订单数量较多 | 当前版本一次性加载，后续需分页或虚拟滚动优化 | - |
5. 页面结构与字段
5.1 页面区块
| 区块 | 内容 | 说明 |
|---|---|---|
| status-tabs | van-tabs | 全部、待支付、待发货、待收货、使用中、已逾期、退款/售后、已完成；支持 query.tab 初始化，Tab 切换同步回写 query.tab。旧的 pending_receipt_in_progress 链接进入待收货 Tab。 |
| order-list | OrderListCard | 卡片固定展示服务机构、状态标签、套餐占位图、套餐名称、一句话卖点和金额；底部最多两个操作按钮。 |
| back-to-top | custom | 当前 Tab 列表向下滚动超过一屏后，在右下角、底部导航上方显示“顶部”圆形浮动按钮；点击平滑回到当前 Tab 顶部。切换 Tab、加载中和加载失败时隐藏；减少动态效果模式下即时回顶。 |
| after-sale-card | OrderListCard | 退款/售后 Tab 卡片仍使用订单卡骨架；仅展示退款/售后；有已发货设备类或零售类时显示去退货。 |
| empty-state | custom | 普通 Tab 显示暂无订单；退款/售后 Tab 显示暂无退款/售后记录。 |
5.3 页面功能说明
列出本页全部功能点，含说明、跳转目标、特殊情况与业务限制。
| 功能 | 说明 | 跳转/触发 | 特殊情况 | 特殊限制 |
|---|---|---|---|---|
| status-tabs | 全部、待支付、待发货、待收货、使用中、已逾期、退款/售后、已完成；支持 query.tab 初始化，Tab 切换同步回写 query.tab。旧的 pending_receipt_in_progress 链接进入待收货 Tab。 | - | - | - |
| order-list | 卡片固定展示服务机构、状态标签、套餐占位图、套餐名称、一句话卖点和金额；底部最多两个操作按钮。 | tap_card→/orders/:id | - | - |
| back-to-top | 当前 Tab 列表向下滚动超过一屏后，在右下角、底部导航上方显示“顶部”圆形浮动按钮；点击平滑回到当前 Tab 顶部。切换 Tab、加载中和加载失败时隐藏；减少动态效果模式下即时回顶。 | - | - | - |
| after-sale-card | 退款/售后 Tab 卡片仍使用订单卡骨架；仅展示退款/售后；有已发货设备类或零售类时显示去退货。 | tap_card→/orders/:id | - | - |
| empty-state | 普通 Tab 显示暂无订单；退款/售后 Tab 显示暂无退款/售后记录。 | - | - | - |
5.4 后续字段候选
| 字段 | 为什么暂不进入当前交付 |
|---|---|
| [待确认]、[待确认] | 进入后续字段口径确认 |
6. 业务规则
| ID | 规则 | 说明 |
|---|---|---|
| R1 | 状态 Tab | 固定展示全部、待支付、待发货、待收货、使用中、已逾期、退款/售后、已完成；页面加载读取 route.query.tab，旧的待收货/使用中共享链接进入待收货 |
| R2 | 待支付 | 待支付订单仅保存选择快照与试算金额，展示继续支付和取消订单；取消成功进入全部中的已取消订单，不再保留在待支付 |
| R3 | 待发货与待收货 | 待发货订单可按规则取消或申请退款；待收货中的快递商品可查看物流轨迹，机构自提不显示物流单号 |
| R4 | 使用中与已逾期 | 综合服务、体验套餐按服务期展示；已逾期订单进入续费或结算处理，不混入已完成 |
| R5 | 退款/售后 | 退款审核仅在全部查看，退款/售后仅展示退款处理中订单；退款结果以后台审核为准，不承诺自动退还优惠资产 |
| R6 | 已完成 | 展示已完成订单；退款完成后订单主状态回流已完成，详情仅保留退款历史字段 |
| R7 | 资产核销 | 优惠券或权益卡仅在支付成功后核销，待支付、取消和支付失败均不得占用资产 |
| R8 | 排序 | 各 Tab 按订单更新时间倒序，无更新时间时按下单时间倒序，同时间按订单号倒序 |
7. 数据、接口与权限
7.1 数据来源
| 类型 | 来源 |
|---|---|
| 功能级 PRD 初稿 | funde-client/app端prd初稿/05_用户_我的订单_v1.0.md |
| 产品级页面补充 | funde-client/docs/v0.1/pages/services/orders.md |
| Page Spec | funde-client/docs/page-specs/orders-list.page.yaml |
| 页面实现 | funde-client/prototype/src/views/orders/OrderListView.vue |
| Mock 数据 | funde-client/prototype/src/mock/orders.json |
| 路由源 | funde-client/prototype/src/router/index.ts |
| source_route | /orders |
7.2 接口说明
| 接口 | 用途 | 备注 |
|---|---|---|
| 获取订单列表 | 按状态分页返回订单 | 当前使用 mock/orders.json |
7.3 权限
| 操作 | 权限要求 | 当前处理 |
|---|---|---|
| 查看订单列表 | 登录用户 | 展示本人所有订单 |
8. 验收标准
| 编号 | 验收项 | 预期结果 |
|---|---|---|
| AC1 | 页面顶部展示 5 个 Tab（全部、待使用、使用中、已完成、待评价），激活 Tab 显示橙色下划线 | 页面顶部展示 5 个 Tab（全部、待使用、使用中、已完成、待评价），激活 Tab 显示橙色下划线 |
| AC2 | URL 携带 ?tab=in_progress 等参数时，页面加载直接激活对应 Tab | URL 携带 ?tab=in_progress 等参数时，页面加载直接激活对应 Tab |
| AC3 | 订单卡片正确展示服务名称、状态标签、服务标签、日期区间和金额 | 订单卡片正确展示服务名称、状态标签、服务标签、日期区间和金额 |
| AC4 | 状态标签颜色与规则一致（待使用橙色、使用中蓝色、待评价黄色、已完成绿色） | 状态标签颜色与规则一致（待使用橙色、使用中蓝色、待评价黄色、已完成绿色） |
| AC5 | daysLeft > 0 的订单显示"剩余 N 天"文字（带时钟图标） | daysLeft > 0 的订单显示"剩余 N 天"文字（带时钟图标） |
| AC6 | 当前 Tab 无订单时显示空状态 | 当前 Tab 无订单时显示空状态 |
| AC7 | 点击订单卡片跳转 /orders/:id | 点击订单卡片跳转 /orders/:id |
| AC8 | Tab 切换流畅，不出现闪烁 | Tab 切换流畅，不出现闪烁 |
| AC9 | 大字号模式下服务名称 18sp 以上可读 | 大字号模式下服务名称 18sp 以上可读 |
9. 待确认问题
| 问题 | 影响 | 负责人 |
|---|---|---|
| 订单来源范围 | 当前订单列表同时包含服务包订单和商品订单，两类订单展示字段和状态机是否统一 | 产品/后端 |
| "待评价"Tab 的评价入口 | 点击"待评价"订单卡片后，进入订单详情还是直接进入评价表单 | 产品 |
10. 变更记录
| 日期 | 变更 | 作者 |
|---|---|---|
| 2026-07-22 | 将《05 用户 我的订单》初稿规则整理为页面级可生成格式，业务口径不变 | Codex |
| 2026-06-19 | 按需求源 PRD 模板创建 | Codex |