# 暖心食享餐饮专题页面操作说明

## 页面信息

- 页面名称：吃——暖心食享
- 路由：`/pages/food-benefits/food-benefits`
- 源码：`pages/food-benefits/food-benefits.uvue`
- 入口：人才权益页“暖心食享”分类。
- 当前状态：视觉与本地交互首版已完成，后台专题配置和商户接口待接入。

## 功能点

| 功能 | 当前实现 | 后续接口目标 |
| --- | --- | --- |
| 顶部主图 | 展示当前选中图册项的大图，**主图自身支持左右滑动**切换图册项，与下方缩略图双向联动（点缩略图主图滑过去、滑主图缩略图跟着走）。 | 使用后台返回的 HTTPS 图片 URL，并提供加载失败占位图。 |
| 横向图册 | 体验版使用 6 项重复演示数据验证横向滑动，仅由 2 张图片交替复用；点击或滑动结束后，中心项自动选中、放大并带动画吸附到容器中央。 | 后台返回图片、名称、排序和启用状态，正式版图片走后台/CDN。 |
| 动态菜名 | 主图上显示当前菜品名称，使用古典艺术行楷字体子集。 | 正式环境通过完整字体包或 CDN 字体覆盖后台任意名称字符。 |
| 专题描述 | 橙色渐变卡片显示后台返回的专题固定描述，不随图册选择变化。 | 后台返回专题级纯文本描述，并限制长度及换行数量。 |
| 餐饮服务列表 | 使用 12 条演示商户数据，首批展示 4 条，滚动到底部分批追加；包含首屏/下一页失败重试、加载动画、到底和空列表状态。 | 接入分类关联商户分页列表及可用状态。 |
| 商户详情 | 点击商户进入 `/pages/merchant/merchant`，当前同步传递餐饮类型、商户名称、图片、地址和优惠快照。 | 使用商户或权益 ID 请求真实详情，接口返回后覆盖路由快照。 |
| 返回 | 点击左上角返回按钮回到人才权益页。 | 无。 |

## 操作说明

1. 在人才权益页点击“暖心食享”进入本页。
2. 左右滑动顶部主图（或滑动下方缩略图带）浏览菜品图片。
3. 点击缩略图后，顶部主图、菜名和橙色描述卡同步切换。
4. 点击下方餐饮商户进入对应权益详情。
5. 点击左上角返回图标回到人才权益页。

## 异常处理

| 场景 | 页面处理要求 |
| --- | --- |
| 图册为空 | 展示专题默认图和“暂无图册内容”，隐藏缩略图区域。 |
| 图片加载失败 | 使用统一餐饮占位图，不能出现高度塌陷或黑块。 |
| 名称字符不在字体子集 | 回退系统中文字体；正式发布前接入完整字体。 |
| 描述为空 | 隐藏描述卡或展示后台确认的默认文案。 |
| 商户列表为空 | 展示“暂无相关餐饮服务”的空状态。 |
| 首屏加载失败 | 展示“餐饮服务加载失败”和重新加载，不误显示空状态。 |
| 下一页加载失败 | 保留已加载商户，底部显示“加载失败，点击重试”，重试前不推进页码。 |
| 商户已下架 | 列表显示不可用状态，不允许继续领取或核销。 |

## 资源与包体说明

- 餐饮图不再单独打一份兜底图：接口没配图、图片加载失败、以及本地演示数据统一用 `static/common/image-placeholder.png`（全站唯一兜底图，24KB），图册/商户/商品/支付/订单相关展示都用它。
- 完整餐饮素材继续保留在项目外 `icon/吃` 素材库，正式版由后台/CDN配置，不直接打入小程序代码包。
- 完整“古典艺术行楷简”字体约 5.35MB，**不放包内**（主包上限 2MB），已放服务器 `/data/talent-card/uploads/fonts/gudian-xingkai.ttf`（`/uploads/fonts/gudian-xingkai.ttf`），由 `App.uvue` 启动时用 `uni.loadFontFace({ family:'FoodCalligraphyFull', global:true })` 动态加载；专题页的 `.scene-name/.dish-name` 全局优先用它，加载失败或缺字回退到包内子集与系统字体。
- 当前菜名使用约 12KB 的 `food-calligraphy-subset.ttf` 子集，只用于设计稿演示字符。
- 后台动态名称的完整字体已走"服务器 + 动态加载"方案；上线前仍需验证字体授权、首次加载耗时（5.35MB）与失败回退，必要时换 WOFF/子集。