Appearance
PRD：服务 services-hub
一句话：面向 C 端用户，集中展示三好卡兑换提示条、德系健康服务产品矩阵与富德优选商品入口，引导用户激活三好卡、了解并选购适合自己的健康服务。
0. 快速评审卡
| 项 | 内容 |
|---|---|
| 产品 | funde-client |
| 模块 | 服务 / 服务首页 |
| 页面/功能 | 服务 |
| 路由 | /services |
| 页面类型 | 聚合页 |
| 状态 | 已实现 / PRD 初版 |
| 产品负责人 | [待确认] |
| 研发负责人 | [待确认] |
| 测试负责人 | [待确认] |
| 关联原型 | funde-client/prototype/src/views/services/ServicesView.vue |
| 关联 page-spec | funde-client/docs/page-specs/services-hub.page.yaml |
| 关联 mock | funde-client/prototype/src/mock/services.json |
1. 为什么做
1.1 背景
服务首页是底部导航"服务"Tab 的根页面，是平台商业变现的核心入口。2026-06 本轮在原有结构基础上新增三好卡兑换提示条（顶部），弱化德好/德尊 featured 大卡（不再占满首屏），保留就医协助独立引导卡和 9 宫格产品矩阵。页面定位从纯内容分类页转向"服务销售主通道"，主线为：激活三好卡 → 了解/购买套餐 → 履约查看进度。
1.2 目标
- 业务目标：将未激活用户引导至 /activate 完成三好卡激活；将其余用户引导进入服务详情或购买链路，提升激活率与服务包转化率
- 用户/运营目标：浏览和了解富德健康服务体系，找到适合自己的健管服务包
- 交付目标：跑通"服务页提示条 → /activate → 激活成功"链路；跑通"服务详情/健康包详情"核心链路
1.3 不解决的问题
- 健康管理套餐主推区（第二批）：引流/基础/进阶三个套餐的独立主推区，规划中，暂不实现
- 个性化推荐排序：当前服务包排序为静态运营配置，暂不做用户偏好算法排序
- 限时活动横幅：运营活动 Banner 模块规划中，暂不实现
- 服务包对比入口（
/services/compare）：规划中，暂不实现 - 搜索功能：服务首页不提供搜索入口
2. 当前交付切片
这里只写当前准备评审、开发和测试的内容。
2.1 做什么
| 能力 | 说明 | 优先级 |
|---|---|---|
| 三好卡兑换提示条 | 顶部矮 banner，文案"已有三好卡？立即兑换健康管理服务"，点击跳转 /activate；已激活用户可隐藏 | P0 |
| 精选服务包展示 | 弱化德好/德尊大卡，降低视觉权重（缩小卡片高度），保留已购/未购状态区分；已购按钮文案"查看进度"，未购"了解详情" | P0 |
| 就医协助引导卡 | 独立卡片展示就医协助服务入口，标注三甲挂号协助、陪诊、绿通转诊等核心权益标签，点击跳转 /services/medical-assist | P0 |
| 德系产品矩阵 | 3×3 九宫格展示全部 9 个产品线，每格显示产品代码、名称、简短描述及服务层级，当前已购产品显示"使用中"角标；点击进入对应类目列表页 | P0 |
| 富德优选商品预览 | 底部展示最多 6 件商品缩略图，右上角提供"查看全部"入口跳转至商城列表页 | P1 |
2.2 暂不做
| 暂不做 | 原因 | 后续处理 |
|---|---|---|
| 健康管理套餐主推区（第二批） | 引流/基础/进阶三个套餐的独立主推区，规划中，暂不实现 | [待确认] |
| 个性化推荐排序 | 当前服务包排序为静态运营配置，暂不做用户偏好算法排序 | [待确认] |
| 限时活动横幅 | 运营活动 Banner 模块规划中，暂不实现 | [待确认] |
服务包对比入口（/services/compare） | 规划中，暂不实现 | [待确认] |
| 搜索功能 | 服务首页不提供搜索入口 | 套餐搜索入口统一放在套餐列表页右上角 |
2.3 后续候选
| 候选能力 | 触发条件 |
|---|---|
| 健康管理套餐主推区（引流套餐 ¥19.9、基础套餐 ¥199、进阶套餐 ¥980）独立展示区 | [待确认] |
| 基于用户健康档案与保单数据的个性化推荐模块 | [待确认] |
| 运营活动通栏 Banner 轮播 | [待确认] |
| 服务包购买前置引导（权益核销提醒） | [待确认] |
3. 谁来用，怎么用
| 角色 | 场景 | 目标 |
|---|---|---|
| C 端用户（持三好卡但未激活） | 用户进入服务 Tab，看到顶部三好卡兑换提示条 | 点击提示条进入 /activate，完成激活 |
| C 端用户（新用户或保单关联后首次访问） | 用户完成 Onboarding 后进入主界面，点击底部"服务"Tab | 快速了解平台提供的健康服务类型，找到与自身保单匹配的服务包 |
| C 端用户（已购买服务包） | 日常打开 App 进入服务 Tab，查看当前正在使用的服务包信息 | 确认服务状态，从卡片快速进入订单详情或健管师会话 |
| C 端用户 | 从服务首页下滑至富德优选区域，看到感兴趣的商品 | 进入商品详情或跳转商城完成选购 |
4. 主流程与页面入口
4.1 入口与出口
| 类型 | 内容 |
|---|---|
| 从哪里进入 | 底部 Tab 「服务」-> 服务首页 |
| 可以去哪里 | 服务分类列表、服务包详情、健管家服务详情、富德优选 |
| 依赖数据 | Vue Router /services、/services/:id、/services/list/:code、/mall、/services/pkg/:id、/orders、本地 mock prototype/src/mock/services.json、本地 mock prototype/src/mock/health-package-source.ts（独立维护的富德联好健康机构套餐副本，包含 12 条电商零售套餐）、用户权益服务（判断 current 状态） |
4.2 主流程
4.3 异常场景
| 场景 | 系统表现 | 提示 |
|---|---|---|
| 网络异常 | 服务包列表与矩阵数据加载失败时，显示骨架屏占位，底部提示"加载失败，下拉刷新重试" | - |
| 保单未关联 | 用户未绑定保单时，精选服务包区域不显示"使用中"角标，提示"完善保单信息解锁专属权益" | - |
| 某产品线暂无套餐 | 九宫格对应格正常显示，点击进入后显示"套餐即将开放，敬请期待"占位提示 | - |
5. 页面结构与字段
5.1 页面区块
| 区块 | 内容 | 说明 |
|---|---|---|
| 服务轮播 | van-swipe / banner | 三张轮播图自动播放；前两张进入对应套餐详情，第三张进入就医协助页。 |
| 德系产品矩阵 | fd-card / grid-3 | 3×3 九宫格，每格显示产品代码方块（主题色）、产品名称、简短描述、服务层级； 已购产品显示"使用中"角标；点击格子跳转对应产品线类目列表。 |
| 富德优选 | fd-card / grid-2 | 最多展示前 6 件电商零售套餐双列卡片；右上角"查看全部"入口跳转商城； 每件显示套餐封面、角标、套餐名称、一句话卖点、最低参考价格和购买入口；不展示规格字段； 购买入口采用卡片内紧凑主按钮，字号使用 --fd-caption，高度 34px，不使用 --fd-micro。 |
5.3 页面功能说明
列出本页全部功能点，含说明、跳转目标、特殊情况与业务限制。
| 功能 | 说明 | 跳转/触发 | 特殊情况 | 特殊限制 |
|---|---|---|---|---|
| 服务轮播 | 三张轮播图自动播放；前两张进入对应套餐详情，第三张进入就医协助页。 | tap:德好慢病管理服务→/services/dehao-m；tap:德尊长寿医学服务→/services/dezun-s；tap:就医协助服务→/services/medical-assist | - | - |
| 德系产品矩阵 | 3×3 九宫格，每格显示产品代码方块（主题色）、产品名称、简短描述、服务层级； 已购产品显示"使用中"角标；点击格子跳转对应产品线类目列表。 | tap→/services/list/:code | - | - |
| 富德优选 | 最多展示前 6 件电商零售套餐双列卡片；右上角"查看全部"入口跳转商城； 每件显示套餐封面、角标、套餐名称、一句话卖点、最低参考价格和购买入口；不展示规格字段； 购买入口采用卡片内紧凑主按钮，字号使用 --fd-caption，高度 34px，不使用 --fd-micro。 | tap→/services/pkg/:id；tap:查看全部→/mall | - | - |
5.4 后续字段候选
| 字段 | 为什么暂不进入当前交付 |
|---|---|
| personalized_recommendations | 个性化推荐算法接入后补充 |
6. 业务规则
| ID | 规则 | 说明 |
|---|---|---|
| R1 | 顶部轮播固定三张：前两张进入对应套餐详情，第三张进入就医协助页 | 当前交付切片需遵守 |
| R2 | 九宫格展示全部 9 个产品线，静态顺序，点击跳转 /services/list/:code | 当前交付切片需遵守 |
| R3 | 九宫格本身仍读取 services.json 的 9 大产品线；点击后的套餐列表不按德系名称推断分类，仅在路由参数命中后台健康管理二级业务分类时定位，否则默认第一个有上架套餐的健康管理分类 | 当前交付切片需遵守 |
| R4 | 富德优选读取移动端独立维护的富德联好健康上架电商零售套餐 mock；选择套餐页中的机构切换由该页面独立处理。套餐名称、业务分类、套餐类型、参考价格、展示范围和上架状态须与后台演示数据保持一致，但不进行运行时数据联动 | 当前交付切片需遵守 |
| R5 | 优选商品预览最多展示富德联好健康下前 6 件已上架电商零售套餐，"查看全部"跳转 /mall；套餐封面统一使用缺省图，不展示 emoji | 当前交付切片需遵守 |
| R6 | 页面为 Tab 根页面，不显示返回按钮，顶部显示"健康服务"标题和副标题 | 当前交付切片需遵守 |
| R7 | 服务首页右上角不展示搜索入口；套餐搜索入口统一放在套餐列表页右上角 | 当前交付切片需遵守 |
7. 数据、接口与权限
7.1 数据来源
| 类型 | 来源 |
|---|---|
| 产品级页面清单 | funde-client/docs/v0.1/05-page-inventory.md |
| 产品级页面补充 | funde-client/docs/v0.1/pages/services/index.md |
| Page Spec | funde-client/docs/page-specs/services-hub.page.yaml |
| 页面实现 | funde-client/prototype/src/views/services/ServicesView.vue |
| Mock 数据 | funde-client/prototype/src/mock/services.json |
| 路由源 | funde-client/prototype/src/router/index.ts |
| source_route | /services |
7.2 接口说明
| 接口 | 用途 | 备注 |
|---|---|---|
| 获取服务列表 | 返回服务分类和推荐服务 | 当前使用本地 mock/services.json |
7.3 权限
| 操作 | 权限要求 | 当前处理 |
|---|---|---|
| 浏览服务首页 | 登录用户 | 可查看所有服务分类 |
| 购买服务 | 登录用户 | 点击进入服务详情或确认订单 |
8. 验收标准
| 编号 | 验收项 | 预期结果 |
|---|---|---|
| AC1 | 顶部三好卡兑换提示条可见，点击跳转 /activate；stores/demo.ts cardActivated 为 true 时可隐藏 | 顶部三好卡兑换提示条可见，点击跳转 /activate；stores/demo.ts cardActivated 为 true 时可隐藏 |
| AC2 | 精选服务包卡片正确显示已购/未购状态，已购展示"使用中"角标和"查看进度"按钮，未购展示"了解详情"按钮 | 精选服务包卡片正确显示已购/未购状态，已购展示"使用中"角标和"查看进度"按钮，未购展示"了解详情"按钮 |
| AC3 | 点击已购服务包"查看进度"跳转至 /orders | 点击已购服务包"查看进度"跳转至 /orders |
| AC4 | 点击未购服务包"了解详情"跳转至 /services/:id | 点击未购服务包"了解详情"跳转至 /services/:id |
| AC5 | 就医协助卡"了解详情"可点击，跳转 /services/medical-assist | 就医协助卡"了解详情"可点击，跳转 /services/medical-assist |
| AC6 | 九宫格共展示 9 个产品格，点击任一格跳转至 /services/list/:code | 九宫格共展示 9 个产品格，点击任一格跳转至 /services/list/:code |
| AC7 | 富德优选预览最多展示 6 件商品，点击单件跳转 /mall/:id，"查看全部"跳转 /mall | 富德优选预览最多展示 6 件商品，点击单件跳转 /mall/:id，"查看全部"跳转 /mall |
| AC8 | 页面在大字号模式下（正文 18sp）布局不错位，关键信息可读 | 页面在大字号模式下（正文 18sp）布局不错位，关键信息可读 |
9. 待确认问题
| 问题 | 影响 | 负责人 |
|---|---|---|
| 三好卡兑换提示条在"已激活"状态下是否完全隐藏，或改为显示"查看我的服务"；负责人 | 产品 | [待确认] |
| 精选服务包展示数量 | 当前展示 2 张卡片是否合理，是否需要支持运营动态配置数量 | 运营 |
10. 变更记录
| 日期 | 变更 | 作者 |
|---|---|---|
| 2026-06-19 | 按需求源 PRD 模板创建 | Codex |
| 2026-06-27 | 新增三好卡兑换提示条 | 弱化精选服务包大卡视觉权重；就医协助引导卡点击目标更新为 /services/medical-assist；同步 page-spec；Codex |