# 人才权益页面操作说明

## 页面信息

- 页面名称：人才权益
- 路由：`/pages/benefits/benefits`
- 源码：`pages/benefits/benefits.uvue`
- 当前状态：设计图视觉首版已完成，业务数据与搜索接口待接入。

## 功能点

| 功能 | 当前实现 | 后续接口目标 |
| --- | --- | --- |
| 顶部展示 | 使用压缩后的夕阳城市顶图，自定义标题按微信胶囊位置适配；标题栏固定，页面上滑后渐显实体橙色背景。 | 顶图如需运营配置，可由后台返回 HTTPS 图片地址。 |
| 权益搜索 | 支持输入关键词和键盘搜索确认，当前仅显示本地提示。 | 携带关键词请求权益分页列表，并处理防重复提交。 |
| 权益分类 | 展示臻享礼遇、暖心食享、舒心安居、畅行无忧、悦览花城、惠享好物、怡乐生活、全部八个入口；点击“全部”进入搜索页的全部商家模式。 | 分类由后台返回 ID、名称、图标和排序；全部入口请求跨分类商家列表。 |
| 推荐权益 | 使用 12 条静态演示数据，首批展示 4 条，上滑到底每批追加 4 条；已包含首屏加载/失败/重试、加载更多/失败/重试、到底和空状态。 | 接入真实分页列表并沿用当前统一分页状态。 |
| 权益详情 | 点击推荐权益进入 `/pages/merchant/merchant`，当前携带餐饮类型、名称、图片、地址和优惠快照，详情不再回落到默认商户资料。 | 传递权益或商户 ID，详情页按 ID 请求真实数据；路由快照仅用于首屏展示。 |
| 底部导航 | 使用项目统一五项自定义导航，当前“人才权益”处于选中状态。 | 保持五个模块页面样式与安全区策略同步。 |

## 操作说明

1. 从首页或底部导航点击“人才权益”进入本页。
2. 在搜索框输入权益或商户关键词，点击“搜索”或键盘搜索键。
3. 点击七个专题分类进入对应权益页面；点击“全部”进入全部商家列表，列表按后台排序值展示。
4. 点击任一推荐权益进入权益/商户详情页面。
5. 使用底部导航切换首页、人才卡、人才政策和个人中心。

## 异常处理

| 场景 | 当前处理 | 接口接入要求 |
| --- | --- | --- |
| 搜索词为空 | 提示“请输入搜索内容”。 | 不发起请求，焦点保留在输入框。 |
| 推荐权益首屏加载失败 | 展示“推荐权益加载失败”和“重新加载”，不显示空状态或到底。 | 点击后重新请求第一页。 |
| 推荐权益下一页失败 | 保留已有权益，底部显示“加载失败，点击重试”，不推进页码。 | 点击后继续请求失败的下一页。 |
| 权益列表为空 | 当前使用静态演示数据。 | 展示“暂无相关权益”，允许清除筛选或返回全部分类。 |
| 图片加载失败 | 小程序使用本地压缩图片。 | 远程图失败时使用统一占位图，禁止页面塌陷。 |
| 登录失效 | 当前页面不校验令牌。 | 由统一请求层拦截 401，完成重新登录后恢复原页面。 |
| 权益已下架/不可用 | 当前未实现。 | 列表明确显示状态，详情页禁止继续领取或核销。 |

## 资源与包体注意事项

- 原始顶图 `icon/人才权益-顶图.png` 约 9.1MB，不能直接加入小程序包。
- 项目使用 `static/benefits-assets/benefits-hero.jpg`，尺寸 1080×607，约 140KB。
- 分类图标已从设计资源目录复制到 `static/benefits-assets/`，避免运行时依赖工作区外文件。
- 后续替换图片时先压缩并检查主包/分包体积，再在微信开发者工具中清除缓存复核。