# 享—臻享礼遇页面操作说明

## 页面信息

- 页面名称：享—臻享礼遇
- 路由：`/pages/premium-benefits/premium-benefits`
- 源码：`pages/premium-benefits/premium-benefits.uvue`
- 入口：人才权益页面点击“臻享礼遇”。
- 当前状态：视觉与本地交互首版已完成，真实专题配置和综合服务接口待接入。

## 功能点

| 功能 | 当前实现 | 后续接口目标 |
| --- | --- | --- |
| 沉浸式头图 | 顶图全屏展示，导航初始透明；页面上滑后渐显实体橙色背景。 | 后台返回专题头图 URL。 |
| 横向图册 | 支持滑动和点击切换，选中图册放大并自动居中，名称使用项目内置展示字体。 | 后台返回图片 URL、展示名称、排序和启用状态。 |
| 主图滑动 | 顶部主图为轮播，可直接左右滑动切换图册项，与横向图册、名称同步。 | 图册数据同专题接口。 |
| 专题介绍 | 橙色介绍卡悬浮在头图与列表间，纯文本内容自然撑高。 | 后台返回安全纯文本介绍。 |
| 服务分类 | 支持免费体检、配偶推荐就业、金融服务、行政审批、学生托付五类横向切换。 | 后台返回分类 ID、名称、排序和启用状态。 |
| 服务列表 | 展示机构图片、名称、权益标签和地址。 | 后台分页返回服务 ID、分类 ID、机构信息、权益摘要、地址和状态。 |
| 分页状态 | 默认每批加载 4 条，提供首屏/下一页失败重试、加载中、到底和空状态，切换分类会清理旧错误。 | 以后端 `hasNext` 或 `total` 判断是否到底，加载失败时保留已有内容并允许重试。 |

## 操作说明

1. 用户从人才权益点击“臻享礼遇”进入页面。
2. 横向滑动或点击图册，切换主图和展示名称。
3. 横向滑动服务分类并选择目标分类。
4. 上滑浏览服务机构，触底后加载下一页。
5. 点击服务项进入对应服务详情，具体详情类型以后端业务类型为准；免费体检分类当前进入体检医院详情（merchant 体检模式），配偶推荐就业进入权益说明页，金融服务进入金融服务商家详情页，行政审批进入行政审批详情页，学生托付进入学生托付详情页（子女托管），其余分类暂为通用商户展示。

## 异常处理

| 场景 | 页面处理要求 |
| --- | --- |
| 图册为空 | 使用后台默认图或统一占位图，不显示空白头图。 |
| 分类无服务 | 展示“暂无相关臻享服务”。 |
| 列表加载失败 | 保留已有列表，展示重试入口，不得误显示到底。 |
| 服务停用 | 不展示或明确标记停用，禁止进入可办理状态。 |
| 图片加载失败 | 使用统一机构占位图，保持列表尺寸稳定。 |

## 接口预留

- 专题配置：专题 ID、标题、头图、介绍纯文本、图册数组（图片 URL、名称、排序、启用状态）。
- 分类配置：分类 ID、分类名称、业务类型（体检/就业/金融/行政审批/学生托付）、排序和启用状态。
- 服务分页：专题 ID、分类 ID、页码/游标、服务 ID、机构名称、封面、权益标签、地址、经纬度、联系电话、可用状态和分页信息。
- 详情跳转：业务类型、服务 ID 和目标路由；前端不得仅依赖机构名称判断详情类型。