Appearance
PRD：富德优选 mall-hub
一句话：面向 C 端用户，展示富德健康监制的精选商品（营养补充、功能食品、健康器械），支持分类筛选与购买跳转。
0. 快速评审卡
| 项 | 内容 |
|---|---|
| 产品 | funde-client |
| 模块 | 服务 / 富德优选 |
| 页面/功能 | 富德优选 |
| 路由 | /mall |
| 页面类型 | 聚合页 |
| 状态 | 已实现 / PRD 初版 |
| 产品负责人 | [待确认] |
| 研发负责人 | [待确认] |
| 测试负责人 | [待确认] |
| 关联原型 | funde-client/prototype/src/views/services/HealthMallView.vue |
| 关联 page-spec | funde-client/docs/page-specs/mall-hub.page.yaml |
| 关联 mock | funde-client/prototype/src/mock/services.json |
1. 为什么做
1.1 背景
富德优选商城（路由 /mall）是服务模块的补充消费通道，承接来自服务首页"富德优选"区域的"查看全部"入口，也可从其他页面直接跳转。商城聚焦健康相关实物商品（非虚拟服务），涵盖营养补充、功能食品、健康器械三大品类，均为德好健康监制或精选，强调正品保障。当前原型已实现分类 Tab 筛选、双栏商品网格、底部保障说明。
1.2 目标
- 业务目标：通过商品销售为平台创造额外营收，同时强化"全程健康管理"的服务延伸价值
- 用户/运营目标：浏览富德优选商品，找到适合自己的健康商品
- 交付目标：跑通"商城列表 → 商品详情 → 购买"链路
1.3 不解决的问题
- 搜索功能：暂不在商城提供商品搜索
- 排序筛选（价格、销量）：暂不实现
- 购物车：暂不实现，购买直接进入商品详情页完成操作
- 分页/无限加载：当前原型商品列表一次性加载，暂不分页
2. 当前交付切片
这里只写当前准备评审、开发和测试的内容。
2.1 做什么
| 能力 | 说明 | 优先级 |
|---|---|---|
| 分类 Tab 筛选 | 顶部横向滚动 Tab，包含"全部"、"营养补充"、"功能食品"、"健康器械"，激活态显示主题色背景；切换 Tab 时实时过滤商品列表 | P0 |
| 双栏商品网格 | 每行展示 2 件商品，每张商品卡片包含商品封面图区（含角标标签）、商品名称、简短描述、规格/包装说明、价格、购买按钮；点击卡片或购买按钮跳转商品详情页 | P0 |
| 底部保障说明 | 页面末尾展示"正品保障 · 德好健康监制 · 7 天无忧退换"文字标注 | P1 |
2.2 暂不做
| 暂不做 | 原因 | 后续处理 |
|---|---|---|
| 搜索功能 | 暂不在商城提供商品搜索 | [待确认] |
| 排序筛选（价格、销量） | 暂不实现 | [待确认] |
| 购物车 | 暂不实现，购买直接进入商品详情页完成操作 | [待确认] |
| 分页/无限加载 | 当前原型商品列表一次性加载，暂不分页 | [待确认] |
2.3 后续候选
| 候选能力 | 触发条件 |
|---|---|
| 基于用户健康档案的个性化商品推荐 | [待确认] |
| 优惠券/积分抵扣功能 | [待确认] |
| 限时特价活动模块 | [待确认] |
3. 谁来用，怎么用
| 角色 | 场景 | 目标 |
|---|---|---|
| C 端用户 | 在服务首页优选商品区域点击"查看全部" | 浏览全部商品，找到感兴趣的产品 |
| C 端用户 | 进入商城后，点击"健康器械"分类 Tab 筛选家用监测设备 | 快速定位特定类型商品 |
4. 主流程与页面入口
4.1 入口与出口
| 类型 | 内容 |
|---|---|
| 从哪里进入 | 服务首页 -> 富德优选 / 底部 Tab 服务 -> 富德优选 |
| 可以去哪里 | 商品详情 |
| 依赖数据 | Vue Router /mall、/services/pkg/:id、本地派生 mock prototype/src/mock/health-package-source.ts（从后台套餐模板默认数据派生富德联好健康机构套餐；当前包含 12 条电商零售套餐） |
4.2 主流程
4.3 异常场景
| 场景 | 系统表现 | 提示 |
|---|---|---|
| 某分类暂无商品 | 切换 Tab 后显示空状态提示"该分类暂无商品，敬请期待" | - |
| 网络异常 | 显示骨架屏，提示"加载失败，下拉刷新" | - |
| 商品下架 | 该商品不出现在列表中，跳转详情时显示"商品已下架" | - |
5. 页面结构与字段
5.1 页面区块
| 区块 | 内容 | 说明 |
|---|---|---|
| cat-tabs | fd-segment / list | 顶部横向滚动 Tab，包含“全部、绿色食品、营养补剂、中医养生、健康设备”； 激活态显示主题色背景；切换后实时过滤零售套餐列表。 |
| product-grid | fd-card / grid-2 | 每行 2 件套餐卡片，每张包含：统一缺省封面图区（有有效角标时展示角标标签）、套餐名称、 一句话卖点、最低参考价格（¥金额元起）和购买按钮；不展示规格/包装说明。 点击卡片或购买按钮均跳转统一套餐详情。 |
5.3 页面功能说明
列出本页全部功能点，含说明、跳转目标、特殊情况与业务限制。
| 功能 | 说明 | 跳转/触发 | 特殊情况 | 特殊限制 |
|---|---|---|---|---|
| cat-tabs | 顶部横向滚动 Tab，包含“全部、绿色食品、营养补剂、中医养生、健康设备”； 激活态显示主题色背景；切换后实时过滤零售套餐列表。 | - | - | - |
| product-grid | 每行 2 件套餐卡片，每张包含：统一缺省封面图区（有有效角标时展示角标标签）、套餐名称、 一句话卖点、最低参考价格（¥金额元起）和购买按钮；不展示规格/包装说明。 点击卡片或购买按钮均跳转统一套餐详情。 | tap→/services/pkg/:id；tap:购买→/services/pkg/:id | - | - |
5.4 后续字段候选
| 字段 | 为什么暂不进入当前交付 |
|---|---|
| [待确认]、[待确认] | 进入后续字段口径确认 |
6. 业务规则
| ID | 规则 | 说明 |
|---|---|---|
| R1 | 分类 Tab 切换仅过滤本地数据，不触发接口请求 | 当前交付切片需遵守 |
| R2 | “全部”只展示富德联好健康机构下业务分类为“电商零售”的上架套餐 | 当前交付切片需遵守 |
| R3 | 分类 Tab 读取业务分类“电商零售”下的二级分类，固定展示“全部、绿色食品、营养补剂、中医养生、健康设备” | 当前交付切片需遵守 |
| R4 | “健康设备”Tab 包含商品分类为“健康设备”或“家用健康设备”的电商零售套餐 | 当前交付切片需遵守 |
| R5 | 点击套餐卡片或购买按钮均跳转 /services/pkg/:id（在统一套餐详情页完成下单） | 当前交付切片需遵守 |
| R6 | 商品角标标签（如"热销"）为运营配置字段，无标签时不展示；字段值为“无”时按无标签处理，不展示角标 | 当前交付切片需遵守 |
7. 数据、接口与权限
7.1 数据来源
| 类型 | 来源 |
|---|---|
| 产品级页面补充 | funde-client/docs/v0.1/pages/services/mall.md |
| Page Spec | funde-client/docs/page-specs/mall-hub.page.yaml |
| 页面实现 | funde-client/prototype/src/views/services/HealthMallView.vue |
| Mock 数据 | funde-client/prototype/src/mock/services.json |
| 路由源 | funde-client/prototype/src/router/index.ts |
| source_route | /mall |
7.2 接口说明
| 接口 | 用途 | 备注 |
|---|---|---|
| 获取商城商品列表 | 展示商品分类和商品卡片 | 当前使用 mock/services.json |
7.3 权限
| 操作 | 权限要求 | 当前处理 |
|---|---|---|
| 浏览商城 | 登录用户 | 可查看所有商品 |
8. 验收标准
| 编号 | 验收项 | 预期结果 |
|---|---|---|
| AC1 | 页面进入时默认激活"全部"Tab，展示全部商品的双栏网格 | 页面进入时默认激活"全部"Tab，展示全部商品的双栏网格 |
| AC2 | 点击各分类 Tab 后，商品列表实时过滤，仅展示对应分类商品 | 点击各分类 Tab 后，商品列表实时过滤，仅展示对应分类商品 |
| AC3 | 商品卡片正确显示名称、描述、规格、价格和角标（有角标时显示） | 商品卡片正确显示名称、描述、规格、价格和角标（有角标时显示） |
| AC4 | 点击商品卡片或购买按钮，跳转 /mall/:id | 点击商品卡片或购买按钮，跳转 /mall/:id |
| AC5 | 页面底部显示保障说明文字 | 页面底部显示保障说明文字 |
| AC6 | 大字号模式下商品名称 18sp 可读，双栏布局不错位 | 大字号模式下商品名称 18sp 可读，双栏布局不错位 |
9. 待确认问题
| 问题 | 影响 | 负责人 |
|---|---|---|
| 商品下单流程 | 当前点击"购买"跳转商品详情页，是否需要在详情页也提供直接的确认下单路径 | 产品 |
| 商品分类是否动态可配 | 当前分类为前端硬编码，是否需要从接口动态获取 | 后端 |
10. 变更记录
| 日期 | 变更 | 作者 |
|---|---|---|
| 2026-06-19 | 按需求源 PRD 模板创建 | Codex |