Appearance
PRD：体检预约列表 appointments-exam-list
一句话：面向 C 端用户，基于用户权益和所在城市，展示可预约的合作体检机构列表，供用户筛选并进入机构预约体检。
0. 快速评审卡
| 项 | 内容 |
|---|---|
| 产品 | funde-client |
| 模块 | 服务 / 体检预约 |
| 页面/功能 | 体检预约列表 |
| 路由 | /appointments/exams |
| 页面类型 | 列表页 |
| 状态 | 已实现 / PRD 初版 |
| 产品负责人 | [待确认] |
| 研发负责人 | [待确认] |
| 测试负责人 | [待确认] |
| 关联原型 | funde-client/prototype/src/views/appointments/ExamAppointmentListView.vue |
| 关联 page-spec | funde-client/docs/page-specs/appointments-exam-list.page.yaml |
| 关联 mock | funde-client/prototype/src/mock/exam-appointments.json |
1. 为什么做
1.1 背景
体检预约列表（路由 /appointments/exams）是用户使用体检权益的核心入口。当用户的健康服务包含体检权益时，可从首页快捷入口"预约体检"、服务首页或"我的 → 我的预约"进入此页。页面上方展示当前权益下可预约体检套餐（无可用套餐时不展示该区块）；下方展示推荐体检套餐列表，含名称、价格、介绍与「去」按钮，点击进入对应机构的预约详情页。
1.2 目标
- 业务目标：提升体检权益的核销率，让用户顺畅完成体检预约，体现服务包的实际价值
- 用户/运营目标：查看体检预约记录，了解预约状态和体检时间
- 交付目标：跑通"权益确认 → 浏览机构列表 → 进入机构详情预约"核心链路
1.3 不解决的问题
- 「免费」封面角标：套餐卡片不展示「免费」标签
- 精选榜单底栏：套餐卡片不展示运营榜单标签与入选文案
- 地图模式：暂不提供地图视图，仅列表模式
- 机构收藏/历史记录：暂不实现
- 实时号源联动：当前可预约时段为 mock 数据，实时号源接口规划中
2. 当前交付切片
这里只写当前准备评审、开发和测试的内容。
2.1 做什么
| 能力 | 说明 | 优先级 |
|---|---|---|
顶栏右上角「使用记录」进入 /appointments/exams/usage-records；列表页状态 Tab | 全部、待安排、待确认、待服务、服务中、已完成、已取消、已过期 | P1 |
待确认记录卡片不展示「查看详情」，提供「去确定」进入待确认详情页（/appointments/exams/usage-records/:recordId/confirm），展示服务名称、服务机构、机构地址（含导航到机构）、服务人员姓名与手机号（含「拨打电话」）、时间、服务说明；与就医协助使用记录流程一致，但服务信息不含科室与医生 | 待确认记录卡片不展示「查看详情」，提供「去确定」进入待确认详情页（/appointments/exams/usage-records/:recordId/confirm），展示服务名称、服务机构、机构地址（含导航到机构）、服务人员姓名与手机号（含「拨打电话」）、时间、服务说明；与就医协助使用记录流程一致，但服务信息不含科室与医生 | P1 |
待服务记录卡片提供「查看详情」进入待服务详情页（/appointments/exams/usage-records/:recordId/pending-service），字段同待确认；详情页可「取消服务」，二次确认文案说明安排不再保留且消耗本次服务权益（标红提示），确认后记录变为已取消 | 待服务记录卡片提供「查看详情」进入待服务详情页（/appointments/exams/usage-records/:recordId/pending-service），字段同待确认；详情页可「取消服务」，二次确认文案说明安排不再保留且消耗本次服务权益（标红提示），确认后记录变为已取消 | P1 |
服务中记录卡片提供「查看详情」进入服务中详情页（/appointments/exams/usage-records/:recordId/in-service），布局同待服务，无取消按钮 | 服务中记录卡片提供「查看详情」进入服务中详情页（/appointments/exams/usage-records/:recordId/in-service），布局同待服务，无取消按钮 | P1 |
已完成记录卡片提供「查看详情」进入已完成详情页（/appointments/exams/usage-records/:recordId/completed），布局同服务中，服务信息增加「完成时间」 | 已完成记录卡片提供「查看详情」进入已完成详情页（/appointments/exams/usage-records/:recordId/completed），布局同服务中，服务信息增加「完成时间」 | P1 |
已取消记录卡片提供「查看详情」进入已取消详情页（/appointments/exams/usage-records/:recordId/cancelled），布局同待服务但无取消操作；展示取消前安排信息与服务信息中的「取消时间」；用户在待服务详情取消后 runtime 写入 cancelledAt | 已取消记录卡片提供「查看详情」进入已取消详情页（/appointments/exams/usage-records/:recordId/cancelled），布局同待服务但无取消操作；展示取消前安排信息与服务信息中的「取消时间」；用户在待服务详情取消后 runtime 写入 cancelledAt | P1 |
已过期记录卡片提供「查看详情」进入已过期详情页（/appointments/exams/usage-records/:recordId/expired），布局同已取消；展示过期前安排信息与「过期时间」，无取消按钮 | 已过期记录卡片提供「查看详情」进入已过期详情页（/appointments/exams/usage-records/:recordId/expired），布局同已取消；展示过期前安排信息与「过期时间」，无取消按钮 | P1 |
| 可预约体检套餐区 | 区块标题为「可预约体检套餐」，右侧以胶囊展示权益名称；套餐以分组白底列表展示。卡片含封面角标（不含「免费」、不叠检查项）、标题、简介、套餐价、「去预约」按钮，不展示券后价。点击整卡或「去预约」时：App 进入体检预约人工会话 /conversations/conv-004；小程序弹窗提示须下载 App 才能预约体检 | P0 |
| 推荐体检套餐列表 | 区块标题为「推荐体检套餐」，右侧入口为「更多 ›」，点击进入 /mall；卡片展示券后价与「去购买」按钮，点击「去购买」进入现有商品详情 /services/pkg/:productId 并走下单流程；点击整卡进入机构预约详情并携带套餐 ID | P0 |
2.2 暂不做
| 暂不做 | 原因 | 后续处理 |
|---|---|---|
| 「免费」封面角标 | 套餐卡片不展示「免费」标签 | [待确认] |
| 精选榜单底栏 | 套餐卡片不展示运营榜单标签与入选文案 | [待确认] |
| 地图模式 | 暂不提供地图视图，仅列表模式 | [待确认] |
| 机构收藏/历史记录 | 暂不实现 | [待确认] |
| 实时号源联动 | 当前可预约时段为 mock 数据，实时号源接口规划中 | [待确认] |
2.3 后续候选
| 候选能力 | 触发条件 |
|---|---|
| 地图视图切换 | [待确认] |
| 按评分/距离/剩余名额排序 | [待确认] |
| 历史预约机构快捷入口 | [待确认] |
3. 谁来用，怎么用
| 角色 | 场景 | 目标 |
|---|---|---|
| C 端用户（健康服务包含体检权益） | 从首页"预约体检"快捷入口或服务 Tab 进入，查看附近可预约机构列表 | 找到距离近、评分高、可预约时段合适的机构，进入预约 |
| C 端用户 | 默认列表中三甲医院排名靠后，用户点击"三甲医院"筛选条快速过滤 | 快速定位特定等级的体检机构 |
4. 主流程与页面入口
4.1 入口与出口
| 类型 | 内容 |
|---|---|
| 从哪里进入 | 首页快捷入口 / 我的预约 -> 体检预约列表 |
| 可以去哪里 | 体检预约详情 |
| 依赖数据 | Vue Router /appointments/exams、/appointments/exams/usage-records、/appointments/exams/:id、/conversations/conv-004、/services/pkg/:id、/mall、本地 mock prototype/src/mock/exam-appointments.json、用户权益服务（benefitStatus）、定位服务（distance） |
4.2 主流程
4.3 异常场景
| 场景 | 系统表现 | 提示 |
|---|---|---|
| 权益已使用/过期 | Hero 卡展示"权益已用尽"或"权益已过期"状态，机构列表灰显或隐藏，提示"当前无可用体检权益" | - |
| 城市无合作机构 | 列表显示空状态，提示"当前城市暂无合作机构，如需协助请联系健管师" | - |
| 网络异常 | 显示骨架屏，提示"加载失败，下拉刷新" | - |
| 定位权限未授予 | 距离字段显示"距离获取失败"，排序退化为固定顺序 | - |
5. 页面结构与字段
5.1 页面区块
| 区块 | 内容 | 说明 |
|---|---|---|
| 可预约体检套餐 | fd-card / list | 仅 bookable 且权益可预约时展示；无数据时整块隐藏。分组白底列表；卡片含封面角标（不含「免费」、不叠检查项）、标题、简介、套餐价、「去预约」按钮，不展示券后价。 |
| 推荐体检套餐 | fd-card / list | 右侧入口文案为「更多 ›」，点击进入商城。卡片「去购买」进入现有商品详情并走下单。卡片含封面角标不含「免费」、检查项摘要、标题、亮点、券后价，不含精选榜单底栏。 |
5.3 页面功能说明
列出本页全部功能点，含说明、跳转目标、特殊情况与业务限制。
| 功能 | 说明 | 跳转/触发 | 特殊情况 | 特殊限制 |
|---|---|---|---|---|
| 可预约体检套餐 | 仅 bookable 且权益可预约时展示；无数据时整块隐藏。分组白底列表；卡片含封面角标（不含「免费」、不叠检查项）、标题、简介、套餐价、「去预约」按钮，不展示券后价。 | tap→App → /conversations/conv-004 ；小程序 → 下载 App 提示；tap:去预约→App → /conversations/conv-004 ；小程序 → 下载 App 提示 | - | - |
| 推荐体检套餐 | 右侧入口文案为「更多 ›」，点击进入商城。卡片「去购买」进入现有商品详情并走下单。卡片含封面角标不含「免费」、检查项摘要、标题、亮点、券后价，不含精选榜单底栏。 | tap:更多→/mall；tap:去购买→/services/pkg/:productId；tap→/appointments/exams/:institutionId?package= | - | - |
5.4 后续字段候选
| 字段 | 为什么暂不进入当前交付 |
|---|---|
| [待确认]、[待确认] | 进入后续字段口径确认 |
6. 业务规则
| ID | 规则 | 说明 |
|---|---|---|
| R1 | 点击「去预约」须判断打开端 | App 进入体检预约人工会话；小程序仅提示下载 App，不进入预约流程 |
7. 数据、接口与权限
7.1 数据来源
| 类型 | 来源 |
|---|---|
| 产品级页面补充 | funde-client/docs/v0.1/pages/services/appointments.md |
| Page Spec | funde-client/docs/page-specs/appointments-exam-list.page.yaml |
| 页面实现 | funde-client/prototype/src/views/appointments/ExamAppointmentListView.vue |
| Mock 数据 | funde-client/prototype/src/mock/exam-appointments.json |
| 路由源 | funde-client/prototype/src/router/index.ts |
| source_route | /appointments/exams |
7.2 接口说明
| 接口 | 用途 | 备注 |
|---|---|---|
| 获取体检预约列表 | 展示所有预约记录 | 当前使用 mock/exam-appointments.json |
7.3 权限
| 操作 | 权限要求 | 当前处理 |
|---|---|---|
| 查看体检预约 | 登录用户 | 展示本人预约记录 |
8. 验收标准
| 编号 | 验收项 | 预期结果 |
|---|---|---|
| AC1 | 顶部 Hero 卡正确展示城市、权益名称、可预约机构数、权益状态和提示文案 | 顶部 Hero 卡正确展示城市、权益名称、可预约机构数、权益状态和提示文案 |
| AC2 | 机构列表展示，每张卡片包含名称、距离、等级、评分、区域、地址、时段、标签 | 机构列表展示，每张卡片包含名称、距离、等级、评分、区域、地址、时段、标签 |
| AC3 | "报告自动同步"标签绿色高亮展示 | "报告自动同步"标签绿色高亮展示 |
| AC4 | 点击机构卡片跳转 /appointments/exams/:id | 点击机构卡片跳转 /appointments/exams/:id |
| AC5 | 筛选条可点击切换激活状态（当前版本 UI 可交互即可，过滤逻辑可为 mock） | 筛选条可点击切换激活状态（当前版本 UI 可交互即可，过滤逻辑可为 mock） |
| AC6 | 大字号模式下机构名称 18sp 可读，卡片布局不错位 | 大字号模式下机构名称 18sp 可读，卡片布局不错位 |
9. 待确认问题
| 问题 | 影响 | 负责人 |
|---|---|---|
| 权益不足时是否显示机构列表 | 即使无可用权益，用户是否可浏览机构列表（为未来权益购买提供参考） | 产品 |
| 定位权限申请时机 | 首次进入本页面是否主动申请定位权限，还是仅在用户点击"按距离排序"时触发 | 产品/前端 |
10. 变更记录
| 日期 | 变更 | 作者 |
|---|---|---|
| 2026-09-17 | 使用记录增加已过期状态、Tab 与 expired 详情 | Cursor |
| 2026-09-16 | 使用记录状态 Tab 调整为全部、待安排、待确认、待服务、服务中、已完成、已取消 | Cursor |
| 2026-09-16 | 使用记录列表页增加状态 Tab（全部 / 服务中 / 已完成 / 已取消） | Cursor |
| 2026-09-16 | 使用记录入口移至顶栏右上角 | Cursor |
| 2026-09-16 | 主页面使用记录改为仅入口行，明细在列表页查看 | Cursor |
| 2026-09-16 | 使用记录「全部 ›」改为进入 /appointments/exams/usage-records 列表页 | Cursor |
| 2026-09-16 | 新增「使用记录」区块，展示最近体检使用记录 | Cursor |
| 2026-09-16 | 上方区块标题改为「可预约体检套餐」，下方区块标题改为「推荐体检套餐」，右侧入口改为「更多 ›」并跳转 /mall | 可预约区改为分组白底列表（简介 + 套餐价 +「去预约」，封面不叠检查项），套餐价不为 0；「去预约」在 App 进入 /conversations/conv-004，在小程序提示下载 App；推荐卡片「去购买」进入 /services/pkg/:productId 下单；去掉套餐卡片「精选榜单」底栏与「免费」封面角标；Cursor |
| 2026-06-19 | 按需求源 PRD 模板创建 | Codex |