Appearance
PRD：首页 home
一句话：面向 C 端用户的登录后首页。顶栏共用机构、切换、搜索和购物车；内容 Tab 为首页、健康服务、富德优选、健康知识。首页 Tab 用五个服务入口、最新预约、会员套餐、管家团队和今日任务，让用户知道去哪办、今天做什么、找谁。
0. 快速评审卡
| 项 | 内容 |
|---|---|
| 产品 | funde-client |
| 模块 | 首页 / 个性化健康门户 |
| 页面/功能 | 首页 |
| 路由 | /home |
| 页面类型 | 聚合页 |
| 状态 | 已实现 |
| 产品负责人 | [待确认] |
| 研发负责人 | [待确认] |
| 测试负责人 | [待确认] |
| 关联原型 | funde-client/prototype/src/views/home/HomeView.vue |
| 关联 page-spec | funde-client/docs/page-specs/home.page.yaml |
| 关联 mock | funde-client/prototype/src/mock/home.json |
1. 为什么做
1.1 背景
首页是客户端默认入口。当前页面不再放健康评分和三好卡状态卡，改为服务入口和待办聚合：我的活动、康养小屋、预约体检、就医协助、激活兑换，以及跨业务的「您的最新预约」。
1.2 目标
- 业务目标：把到店、体检、就医协助和会员套餐从首页接出去，并在健康服务、富德优选里选套餐和商品
- 用户/运营目标：看到即将使用的预约，完成今日任务，或在健康服务里按分类选套餐
- 交付目标：跑通四个内容 Tab、五个入口、最新预约分流、套餐详情、团队会话、任务和文章
1.3 不解决的问题
- 健康评分、风险提示和体征卡片：[待确认]
- 三好卡激活状态卡：[待确认]
- 服务权益进度楼层：[待确认]
- 首页个性化推荐和卡片排序：[待确认]
- 轮播图上叠加标题文案：[待确认]
- 团队在线状态实时刷新：[待确认]
2. 当前交付切片
这里只写当前准备评审、开发和测试的内容。
2.1 做什么
| 能力 | 说明 | 优先级 |
|---|---|---|
| 顶栏与内容 Tab | 机构、切换、搜索、购物车对四个 Tab 共用。内容 Tab 为首页、健康服务、富德优选、健康知识 | P0 |
| 健康服务 Tab | 服务 Banner 加左分类右套餐。不重复机构、搜索、购物车和九宫格 | P0 |
| 富德优选 Tab | 展示全部「富德联好健康 + 电商零售」可售套餐，分类加两列商品，不截前六条，没有「查看全部」 | P0 |
| 品牌头 | 「富德联好健康」「健康生命 · 美好生活」 | P0 |
| 头图轮播 | 运营配图自动切换 | P0 |
| 快捷入口 | 我的活动、康养小屋、预约体检、就医协助、激活兑换。「我的活动」在康养小屋左侧 | P0 |
| 您的最新预约 | 横向滑动待服务卡片；没有记录时整块不展示 | P0 |
| 会员健康服务 | 最多 3 个套餐，1 大 2 小；「查看更多」进会员专区 | P0 |
| 管家团队 | 展示服务剩余天数、医生/营养师/健管师，可发消息 | P0 |
| 今日健康任务 | 进度、积分、最多 4 条任务和「去完成」；「查看全部」进任务页 | P0 |
| 健康陪伴 | 文章列表，「更多」进资讯列表，单篇进文章详情 | P0 |
2.2 暂不做
| 暂不做 | 原因 | 后续处理 |
|---|---|---|
| 健康评分、风险提示和体征卡片 | [待确认] | [待确认] |
| 三好卡激活状态卡 | [待确认] | [待确认] |
| 服务权益进度楼层 | [待确认] | [待确认] |
| 首页个性化推荐和卡片排序 | [待确认] | [待确认] |
| 轮播图上叠加标题文案 | [待确认] | [待确认] |
| 团队在线状态实时刷新 | [待确认] | [待确认] |
2.3 后续候选
| 候选能力 | 触发条件 |
|---|---|
| 补文章详情页 page-spec | 进入下一轮页面细化时评估 |
| 确认首页聚合接口字段结构 | 进入下一轮页面细化时评估 |
| 确认服务包与团队角色动态规则 | 进入下一轮页面细化时评估 |
3. 谁来用，怎么用
| 角色 | 场景 | 目标 |
|---|---|---|
| C 端用户 | 打开首页后切到「健康服务」或「富德优选」 | 按分类进入套餐详情，搜索和购物车仍用首页顶栏 |
| C 端用户 | 打开 App 想看当天活动、预约体检或找驿站 | 从金刚区进入对应页面 |
| 已有待服务预约的用户 | 首页看到「您的最新预约」 | 点「去使用」进入门店或待服务详情 |
| C 端用户 | 看到未完成任务 | 点「去完成」进入对应业务页 |
4. 主流程与页面入口
4.1 入口与出口
| 类型 | 内容 |
|---|---|
| 从哪里进入 | 登录成功 -> 首页 |
| 可以去哪里 | 我的活动、康养小屋、消息会话、体检预约、就医协助详情、激活兑换、套餐详情、服务页、文章详情 |
| 依赖数据 | Vue Router /home、/messages、/appointments/exams、/health/metrics、/me/membership、/services、本地 mock prototype/src/mock/home.json、未来后端首页聚合接口 |
4.2 主流程
4.3 异常场景
| 场景 | 系统表现 | 提示 |
|---|---|---|
| 没有待服务预约 | 不展示「您的最新预约」 | - |
| 没有会员套餐 | 不展示「会员健康服务」 | - |
| 已完成任务 | 不显示「去完成」，再点整行也不跳转 | - |
| 滑动预约卡片时误触 | 滑动过程中不进入详情 | - |
5. 页面结构与字段
5.1 页面区块
| 区块 | 内容 | 说明 |
|---|---|---|
| 顶部机构栏与内容 Tab | sticky-header / institution-row-plus-tabs | 标准首页顶部固定两行。第一行是当前机构图标、名称、地址和「切换」，右侧是搜索和购物车。 搜索进入 /services/search，范围与套餐搜索页一致，按健康服务、富德优选、健康知识分组查询。 第二行是首页、健康服务、富德优选、健康知识。健康服务 Tab 为服务 Banner 加左分类右套餐， 不重复机构、搜索和购物车。富德优选 Tab 顶部为 Banner，其下为分类加两列商品。健康知识 Tab 顶部为 Banner，其下直接展示健康陪伴文章列表，不含「更多」。 健康服务 Tab 的 Banner 随页面上滚。Banner 滚出后，左侧分类吸顶，之后只滚动右侧套餐列表。富德优选 Banner 随内容上滚，滚到分类栏后分类吸顶，下面只滚商品。健康知识的 Banner 随内容滚动。 会员健康服务仍在首页 Tab。长辈模式首页使用同一套四格，字号和图标按长辈模式放大。 |
| 健康快照 | custom-hero / hero | 展示问候语、健管师、服务剩余天数、健康评分、风险等级、风险提示和体征指标卡片。 |
| 您的最新预约 | service-appt-swipe / horizontal-cards | 有数据时展示横向滑动卡片：服务名、预约/到院时间、机构名称与地址、底部提示与「去使用」。 数据源为康养小屋待服务记录、体检与就医协助使用记录中「待服务」态，与各自列表 mock 同源；不展示「全部预约」入口。 |
| 快捷入口 | fd-card / grid-5 | 五个入口从左到右为：我的活动、康养小屋、预约体检、就医协助、激活兑换。 「我的活动」直达当日首场进行中活动的活动现场页。 其下整行是咨询客服，卡片上不展示电话号码。点击拨打后弹出客服电话 0755-61909838，再点立即拨打。标准模式和长辈模式同一位置。 |
| 会员健康服务 | membership-card-grid / one-main-two-sub-cards | 仅展示富德联好健康机构下、业务分类为会员综合服务且当前可展示的套餐；首页固定展示排序前三条，采用一张主卡加两张并列小卡布局，第四条及以后仅在会员专区展示。 卡片统一白底、圆角和轻阴影，不使用描边；信息顺序与富德优选一致：名称、短介绍、底部价格。推荐或热销标记固定在卡片右上角；本期不展示已开通标记和权益数量。 推荐优先于热销，其后按配置排序号升序、创建时间倒序；无标记排在推荐和热销之后。不展示订单状态、续费入口、商品项数量或其他用户订单信息。 |
| 我的富德联好健康管家团队 | fd-card / list | 展示医生、营养师、健管师的头像、姓名、职称、专长和状态，支持发消息。 |
| 今日健康任务 | fd-card / list | 展示任务标题、说明、完成状态；右侧「去完成」跳转业务页；标题栏进入任务详情页。 |
| 健康陪伴 | article-row / list | 文章列表在「健康知识」Tab，顶部为 Banner，其下直接展示健康陪伴全部文章，不在首页 Tab 底部，也不再放「更多」。点击文章进入详情。 |
5.3 页面功能说明
列出本页全部功能点，含说明、跳转目标、特殊情况与业务限制。
| 功能 | 说明 | 跳转/触发 | 特殊情况 | 特殊限制 |
|---|---|---|---|---|
| 顶部机构栏与内容 Tab | 标准首页顶部固定两行。第一行是当前机构图标、名称、地址和「切换」，右侧是搜索和购物车。 搜索进入 /services/search，范围与套餐搜索页一致，按健康服务、富德优选、健康知识分组查询。 第二行是首页、健康服务、富德优选、健康知识。健康服务 Tab 为服务 Banner 加左分类右套餐， 不重复机构、搜索和购物车。富德优选 Tab 顶部为 Banner，其下为分类加两列商品。健康知识 Tab 顶部为 Banner，其下直接展示健康陪伴文章列表，不含「更多」。 健康服务 Tab 的 Banner 随页面上滚。Banner 滚出后，左侧分类吸顶，之后只滚动右侧套餐列表。富德优选 Banner 随内容上滚，滚到分类栏后分类吸顶，下面只滚商品。健康知识的 Banner 随内容滚动。 会员健康服务仍在首页 Tab。长辈模式首页使用同一套四格，字号和图标按长辈模式放大。 | tap:切换→/profile-setup/institution；tap:搜索→/services/search；tap:购物车→/services/cart | - | - |
| 健康快照 | 展示问候语、健管师、服务剩余天数、健康评分、风险等级、风险提示和体征指标卡片。 | tap→/health/metrics | - | - |
| 您的最新预约 | 有数据时展示横向滑动卡片：服务名、预约/到院时间、机构名称与地址、底部提示与「去使用」。 数据源为康养小屋待服务记录、体检与就医协助使用记录中「待服务」态，与各自列表 mock 同源；不展示「全部预约」入口。 | tap:康养待服务卡→/wellness-cabins/:cabinId；tap:体检待服务卡→/appointments/exams/usage-records/:id/pending-service；tap:就医协助待服务卡→/services/medical-assist/usage-records/:id/pending-service | - | - |
| 快捷入口 | 五个入口从左到右为：我的活动、康养小屋、预约体检、就医协助、激活兑换。 「我的活动」直达当日首场进行中活动的活动现场页。 其下整行是咨询客服，卡片上不展示电话号码。点击拨打后弹出客服电话 0755-61909838，再点立即拨打。标准模式和长辈模式同一位置。 | tap:我的活动→/home/activities/:id；tap:康养小屋→/wellness-cabins；tap:预约体检→/appointments/exams；tap:就医协助→/services/medical-assist；tap:激活兑换→/activate | - | - |
| 会员健康服务 | 仅展示富德联好健康机构下、业务分类为会员综合服务且当前可展示的套餐；首页固定展示排序前三条，采用一张主卡加两张并列小卡布局，第四条及以后仅在会员专区展示。 卡片统一白底、圆角和轻阴影，不使用描边；信息顺序与富德优选一致：名称、短介绍、底部价格。推荐或热销标记固定在卡片右上角；本期不展示已开通标记和权益数量。 推荐优先于热销，其后按配置排序号升序、创建时间倒序；无标记排在推荐和热销之后。不展示订单状态、续费入口、商品项数量或其他用户订单信息。 | tap:会员卡→/services/pkg/:packageId；tap:更多套餐→/services/membership | - | - |
| 我的富德联好健康管家团队 | 展示医生、营养师、健管师的头像、姓名、职称、专长和状态，支持发消息。 | tap→/conversations/:id | - | - |
| 今日健康任务 | 展示任务标题、说明、完成状态；右侧「去完成」跳转业务页；标题栏进入任务详情页。 | tap→/home/tasks；tap→actionRoute | - | - |
| 健康陪伴 | 文章列表在「健康知识」Tab，顶部为 Banner，其下直接展示健康陪伴全部文章，不在首页 Tab 底部，也不再放「更多」。点击文章进入详情。 | tap→/articles/:id | - | - |
5.4 后续字段候选
| 字段 | 为什么暂不进入当前交付 |
|---|---|
| risk_model_version | 健康评分算法版本确认后补充 |
| service_package_id | 服务权益和团队角色动态化后补充 |
| task_plan_id | 今日任务与健康计划模型打通后补充 |
| content_strategy_id | 首页内容推荐策略确认后补充 |
6. 业务规则
| ID | 规则 | 说明 |
|---|---|---|
| R1 | 首页是登录后的默认入口，路由为 /home | 当前交付切片需遵守 |
| R2 | 首页必须显示底部 Tab Bar，当前 tab 为 home | 当前交付切片需遵守 |
| R3 | 风险提示必须配套行动建议 | 当前交付切片需遵守 |
| R4 | 快捷入口跳转必须稳定，不使用外链 | 当前交付切片需遵守 |
| R5 | 服务团队为空时需要展示服务开通引导 | 当前交付切片需遵守 |
7. 数据、接口与权限
7.1 数据来源
| 类型 | 来源 |
|---|---|
| 功能级 PRD 初稿 | funde-client/app端prd初稿/08_首页_会员健康服务_v1.0.md |
| 功能级 PRD | funde-client/app端prd（饶璐）/06_用户_套餐购买支付链路_v1.0.md |
| 产品级功能架构 | funde-client/docs/v0.1/02-feature-architecture.md |
| 产品级信息架构 | funde-client/docs/v0.1/03-information-architecture.md |
| 产品级页面清单 | funde-client/docs/v0.1/05-page-inventory.md |
| 产品级页面补充 | funde-client/docs/v0.1/pages/home/index.md |
| Page Spec | funde-client/docs/page-specs/home.page.yaml |
| 页面实现 | funde-client/prototype/src/views/home/HomeView.vue |
| Mock 数据 | funde-client/prototype/src/mock/home.json |
| 路由源 | funde-client/prototype/src/router/index.ts |
| 应用入口 | funde-client/prototype/src/MobileApp.vue |
| 预览外壳 | funde-client/prototype/src/frame-main.ts |
| source_route | /home |
7.2 接口说明
| 接口 | 用途 | 备注 |
|---|---|---|
| 获取首页聚合数据 | 一次性返回首页核心区块数据 | 当前原型使用本地 mock |
| 获取健康快照 | 返回健康评分、风险等级、风险提示和体征指标 | 真实开发需明确评分算法来源 |
| 获取健管团队 | 展示服务团队成员和状态 | 团队角色应按服务权益动态返回 |
| 获取今日任务 | 展示任务摘要、完成状态和积分 | 完整任务闭环后续定义 |
| 获取权益履约 | 展示服务包、履约进度和剩余天数 | 依赖订单和权益系统 |
| 获取健康内容推荐 | 展示健康陪伴文章 | 当前不展开文章详情 |
7.3 权限
| 操作 | 权限要求 | 当前处理 |
|---|---|---|
| 访问首页 | 登录用户 | 登录后可访问 /home |
| 查看健康快照 | 本人健康数据授权 | 展示本人健康评分和体征摘要 |
| 联系团队 | 已配置服务团队或已签约服务 | 点击发消息进入会话 |
| 查看权益 | 已开通服务或会员权益 | 点击进入会员权益或服务页 |
8. 验收标准
| 编号 | 验收项 | 预期结果 |
|---|---|---|
| AC1 | 页头为「富德联好健康」和「健康生命 · 美好生活」 | 页头为「富德联好健康」和「健康生命 · 美好生活」 |
| AC2 | 五个入口从左到右分别进入我的活动、康养小屋、预约体检、就医协助、激活兑换 | 五个入口从左到右分别进入我的活动、康养小屋、预约体检、就医协助、激活兑换 |
| AC3 | 有待服务预约时出现横向卡片，康养进门店，体检和就医协助进待服务详情 | 有待服务预约时出现横向卡片，康养进门店，体检和就医协助进待服务详情 |
| AC4 | 没有待服务预约时不出现该区块 | 没有待服务预约时不出现该区块 |
| AC5 | 会员服务最多展示 3 个套餐，可进详情和会员专区 | 会员服务最多展示 3 个套餐，可进详情和会员专区 |
| AC6 | 团队可发消息；剩余天数仅展示 | 团队可发消息；剩余天数仅展示 |
| AC7 | 今日任务展示进度、分值和「去完成」；已完成任务不能再跳转 | 今日任务展示进度、分值和「去完成」；已完成任务不能再跳转 |
| AC8 | 健康陪伴可进列表和文章详情 | 健康陪伴可进列表和文章详情 |
| AC9 | 页面显示底部 Tab | 页面显示底部 Tab |
9. 待确认问题
| 问题 | 影响 | 负责人 |
|---|---|---|
| 头图轮播是否要在配图上展示标题和副标题 | [待确认] | [待确认] |
| 「服务剩余 N 天」后续是否进入权益或会员页 | [待确认] | [待确认] |
10. 变更记录
| 日期 | 变更 | 作者 |
|---|---|---|
| 2026-10-21 | 首页增加健康服务和富德优选内容 Tab，机构、搜索、购物车留在顶栏 | 饶璐口径 |
| 2026-10-17 | 金刚区「我的活动」取消列表页，直达活动现场 /home/activities/:id | [待确认] |
| 2026-10-17 | 金刚区入口名称由「今日活动」改为「我的活动」 | [待确认] |
| 2026-10-16 | 金刚区在康养小屋左侧增加「今日活动」，进入当日进行中活动列表。入口名称由「我的活动」改为「今日活动」 | [待确认] |
| 2026-10-09 | 按当前首页内容重写，并补充字段功能说明。健康快照、三好卡状态卡、服务权益进度不在本页展示 | [待确认] |
| 2026-09-21 | 首页最新预约康养小屋状态由待核销改为待服务 | [待确认] |
| 2026-07-22 | 将会员健康服务规则整理为页面级可生成格式，业务口径不变 | Codex |
| 2026-06-18 | 建立客户端首页源 PRD | Codex |
| 2026-06-23 | 新增三好卡激活状态卡、推荐套餐区 | 金刚区入口更新为咨询/预约/就医协助/激活兑换；同步 page-spec；Codex |
| 2026-07-17 | 推荐套餐区改为会员健康服务横滑卡，仅读取富德健康机构会员综合服务上架套餐 | 新增会员专区和已开通标记规则；Codex |