# 权益介绍页前后台需求文档

版本日期：2026-06-01

## 一、业务流程图

### 1.1 后台配置与发布流程

```mermaid
flowchart TD
    A["运营进入页面管理 / 权益介绍页"] --> B["选择客户层级 Tab"]
    B --> C["配置 Tab 名称、头图、标题、按钮文案、权益列表"]
    C --> D{"是否开启展示权益图片"}
    D -- "否" --> E["权益列表无需上传图片"]
    D -- "是" --> F["每条权益均需上传图片"]
    E --> G{"点击保存草稿或发布上线"}
    F --> G
    G -- "保存草稿" --> H{"草稿校验是否通过"}
    G -- "发布上线" --> I{"发布校验是否通过"}
    H -- "否" --> J["提示错误并停留当前配置 Tab"]
    I -- "否" --> J
    H -- "是" --> K["保存草稿配置"]
    I -- "是" --> L["生成或更新线上发布配置"]
    K --> M["可生成草稿预览链接"]
    L --> N["可生成正式 H5 / 小程序链接"]
```

### 1.2 移动端访问与渲染流程

```mermaid
flowchart TD
    A["客户打开权益介绍页"] --> B{"链接是否包含 draft=1"}
    B -- "是" --> C["读取草稿预览配置"]
    B -- "否" --> D["读取已发布配置"]
    C --> E{"页面配置是否存在"}
    D --> E
    E -- "否" --> F["展示页面不存在或配置异常提示"]
    E -- "是" --> G["读取客户当前 MSC / 客群标签"]
    G --> H{"是否 Premier / Elite / GPB"}
    H -- "否" --> I["展示顶部权益首页入口，默认选中卓越理财 Tab"]
    H -- "是" --> J["隐藏顶部权益首页入口，默认选中客户真实等级 Tab"]
    I --> K["渲染当前 Tab 介绍内容"]
    J --> K
    K --> L["按客户等级与当前 Tab 判断按钮解锁状态"]
    L --> M["渲染权益列表"]
```

### 1.3 按钮点击与跳转流程

```mermaid
flowchart TD
    A["用户点击权益介绍页按钮"] --> B{"按钮是否已解锁"}
    B -- "是" --> C["读取客户真实 MSC 对应权益首页"]
    C --> D["跳转权益首页"]
    B -- "否" --> E["拦截跳转"]
    E --> F{"是否配置达标提示弹窗能力"}
    F -- "是" --> G["展示半屏达标提示弹窗"]
    F -- "否" --> H["保持当前页并提示暂未达标"]
```

> 移动端原型中权益介绍页底部存在“精选活动/活动轮播图/轮播指示点”。该模块为二期内容，不在本期范围内；本期前台不展示，本期后台不配置，本期接口不返回或前端忽略该模块数据。

## 二、后台配置需求

### 2.1 后台入口与页面状态

后台入口：`定制功能 / 汇丰银行 / 页面管理 / 权益介绍页`

页面顶部操作：

| 功能  | 需求说明 | 边界规则 |
| --- | --- | --- |
| 获取链接 | 打开“获取页面链接”弹窗 | 未发布时不展示正式链接，仅展示草稿预览链接 |
| 保存草稿 | 保存三档权益介绍页配置为草稿 | 不影响当前线上版本 |
| 发布上线 | 将当前配置发布为正式版本 | 发布成功后正式链接读取新配置 |
| 状态展示 | 展示草稿、正式线上环境、有未发布的修改 | 已发布后编辑任意字段，状态切换为“有未发布的修改” |

页面状态规则：

| 状态  | 触发条件 | 后台展示 | 移动端影响 |
| --- | --- | --- | --- |
| 草稿  | 尚未发布或仅保存草稿 | 草稿（未发布） | 仅草稿预览链接可访问 |
| 已发布 | 发布上线成功且无未发布修改 | 正式线上环境 | 正式链接读取该版本 |
| 有未发布的修改 | 已发布配置被再次编辑但未发布 | 有未发布的修改 | 正式链接仍读取上一次发布版本；草稿预览读取最新草稿 |

### 2.2 编辑页整体结构与操作

编辑页由五部分组成：

1.  顶部操作栏：页面状态、获取链接、保存草稿、发布上线。
2.  客户层级配置 Tab：卓越理财、卓越理财·尊尚、环球私人银行。
3.  Tab 名称配置。
4.  头部配置。
5.  按钮配置与权益列表配置。

客户层级 Tab：

| 层级  | 前端标识 | 默认名称 | 说明  |
| --- | --- | --- | --- |
| 卓越理财 | `premier` | 卓越理财 | Premier 客户对应等级 |
| 卓越理财·尊尚 | `elite` | 卓越理财·尊尚 | Premier Elite 客户对应等级 |
| 环球私人银行 | `global` | 环球私人银行 | GPB / PB 客户对应等级 |

操作规则：

| 操作  | 需求说明 | 校验与边界 |
| --- | --- | --- |
| 切换客户层级 Tab | 切换不同等级的配置表单 | 三档配置相互隔离，切换时不得串改其他等级数据 |
| 保存草稿 | 保存三档完整配置 | 校验“展示权益图片”开启后图片必填；保存成功提示“已保存权益介绍页配置草稿！” |
| 发布上线 | 发布三档完整配置 | 与保存草稿校验一致；发布成功提示“已发布权益介绍页配置！” |
| 获取链接 | 生成正式链接和草稿预览链接 | 未发布时仅展示草稿预览链接 |

保存范围：

1.  后台保存或发布时提交 `premier`、`elite`、`global` 三档完整配置。
2.  不允许仅保存当前后台 Tab，避免其他等级配置被覆盖或丢失。
3.  任意字段修改后，如当前状态为已发布，需切换为“有未发布的修改”。

### 2.3 获取页面链接

点击“获取链接”后展示链接弹窗，支持选择 Campaign ID、Channel ID，生成带投放参数的链接。

| 链接类型 | 展示条件 | 链接格式 | 用途  |
| --- | --- | --- | --- |
| 正式 H5 链接 | 页面状态为已发布 | `https://hsbc.com/home` | 正式投放 |
| 正式小程序链接 | 页面状态为已发布 | `hsbc-app://home` | 小程序或 App 内打开 |
| 草稿预览链接 | 页面存在草稿配置 | `https://test.hsbc.com/home?draft=1` | 内部测试预览 |

参数拼接规则：

| 参数  | 来源  | 规则  |
| --- | --- | --- |
| `draft` | 是否草稿预览 | 草稿预览链接固定为 `draft=1` |
| `CampaignId` | Campaign 下拉选择 | 选填；选择后拼接到链接 |
| `Channelid` | Channel 下拉选择 | 选填；选择后拼接到链接 |

边界规则：

1.  Campaign ID、Channel ID 清空时，不拼接对应参数。
2.  同时选择 Campaign ID、Channel ID 时，按 `CampaignId=xxx&Channelid=yyy` 拼接。
3.  草稿预览链接如同时存在投放参数，需保留 `draft=1`。
4.  复制链接成功后提示“链接已复制到剪贴板”。
5.  浏览器不支持剪贴板时，允许用户手动复制链接。

### 2.4 Tab 名称配置

| 字段  | 类型  | 必填规则 | 移动端消费规则 |
| --- | --- | --- | --- |
| Tab 名称 | 单行文本 | 非必填 | 作为移动端等级 Tab 名称；为空时使用默认名称 |

规则：

1.  后台当前层级 Tab 的标题优先展示已配置的 Tab 名称。
2.  Tab 名称为空时，后台和移动端均使用默认名称兜底。
3.  Tab 名称过长时，移动端需单行展示并省略或自适应压缩，不得挤压其他 Tab。
4.  后台不支持新增、删除或调整三档 Tab 顺序。

### 2.5 头部配置

后台配置：

| 字段  | 类型  | 必填规则 | 规则  |
| --- | --- | --- | --- |
| 头图配图 | 图片上传 | 非必填 | 建议尺寸 `686px x 296px`；支持替换上传 |
| 主标题（粗体） | 单行文本 | 非必填 | 作为当前 Tab 内容主标题 |
| 副标题（小字） | 单行文本 | 非必填 | 作为当前 Tab 内容副标题 |

移动端展示：

1.  头图按移动端内容宽度铺满，保持视觉裁切，不得变形拉伸。
2.  头图为空或加载失败时，展示默认占位背景，不显示破图。
3.  主标题为空时不展示标题节点，副标题上移。
4.  副标题为空时不展示副标题节点。
5.  主标题、副标题过长时允许自然换行，但不得遮挡按钮或权益列表。

图片边界：

1.  上传新图片后覆盖旧图片。
2.  图片超过后端限制大小时，上传失败并提示“图片大小超出限制，请重新上传”。
3.  图片格式限制以统一上传组件为准，建议支持 JPG、JPEG、PNG。

### 2.6 按钮配置

后台配置：

| 字段  | 类型  | 必填规则 | 移动端消费规则 |
| --- | --- | --- | --- |
| 已解锁按钮文案 | 单行文本 | 非必填 | 已解锁状态按钮文案；为空时默认“进入权益专区” |
| 待解锁按钮文案 | 单行文本 | 非必填 | 锁定状态按钮文案；为空时默认“待解锁” |

按钮解锁规则由客户真实 MSC 与当前查看 Tab 共同决定，后台仅配置文案，不配置解锁关系。

| 客户真实等级 | 查看卓越理财 Tab | 查看尊尚 Tab | 查看私行 Tab |
| --- | --- | --- | --- |
| 无等级、潜客、仅持卡、运筹理财 | 锁定  | 锁定  | 锁定  |
| 卓越理财 | 已解锁 | 锁定  | 锁定  |
| 卓越理财·尊尚 | 已解锁 | 已解锁 | 锁定  |
| 环球私人银行 | 已解锁 | 已解锁 | 已解锁 |

交互规则：

1.  已解锁按钮点击后，进入客户真实 MSC 对应的权益首页。
2.  已解锁按钮跳转目标不取当前查看 Tab；例如尊尚客户查看卓越 Tab，点击后仍进入尊尚客户权益首页。
3.  锁定按钮点击后，前端拦截跳转。
4.  如本期接入达标提示弹窗，点击锁定按钮后展示半屏达标提示弹窗；弹窗内容不由权益介绍页后台配置。
5.  连续点击按钮时需防重复跳转。

### 2.7 权益列表配置

权益列表用于配置当前等级介绍页下方的权益说明，移动端按后台顺序自上而下展示。

后台能力：

| 功能  | 需求说明 | 边界规则 |
| --- | --- | --- |
| 添加权益 | 在当前列表末尾新增权益项 | 新增后序号自动追加 |
| 删除权益 | 删除单条权益 | 删除后序号自动重排 |
| 权益排序 | 输入目标序号后移动权益项 | 目标序号必须在当前列表范围内 |
| 展示权益图片 | 控制移动端权益列表是否展示图片 | 开关关闭时移动端展示圆点样式 |

权益字段：

| 字段  | 类型  | 必填规则 | 移动端消费规则 |
| --- | --- | --- | --- |
| 展示权益图片 | 复选框 / 开关 | 必填  | 控制当前层级权益列表视觉样式 |
| 权益图片 | 图片上传 | 条件必填 | 仅当“展示权益图片”开启时必填并展示 |
| 标题  | 单行文本 | 非必填 | 作为权益标题展示 |
| 描述  | 单行文本或多行文本 | 非必填 | 作为权益描述展示 |

图片开关规则：

| 开关状态 | 后台规则 | 移动端展示 |
| --- | --- | --- |
| 关闭  | 不要求上传权益图片；历史图片可清空或保留但不消费 | 不展示权益图片，统一展示圆点列表样式 |
| 开启  | 每条权益图片必填，建议尺寸 `100px x 100px` | 展示每条权益图片 |

校验规则：

1.  当某档“展示权益图片”开启时，该档所有权益项必须上传图片。
2.  任一权益缺图时，保存草稿和发布上线均阻断。
3.  缺图提示格式：“{Tab名称} 第 {序号} 个权益未上传图片，请补充后再保存。”
4.  缺图时后台自动切换到对应客户层级 Tab。

移动端展示边界：

1.  标题为空且描述有值时，仅展示描述。
2.  描述为空且标题有值时，仅展示标题。
3.  标题和描述均为空时，该权益项不展示，避免出现空行。
4.  当前 Tab 无权益项时，移动端隐藏权益列表区域，保留头图、标题、副标题和按钮。
5.  权益图片加载失败时展示默认图标或圆点兜底，不显示破图。

### 2.8 配置数据结构

后台按三档层级存储权益介绍页配置。

```json
{
  "premier": {
    "tabName": "卓越理财",
    "privilegeImageEnabled": false,
    "buttons": {
      "unlocked": "进入权益专区",
      "locked": "待解锁"
    },
    "header": {
      "imageUrl": "",
      "mainTitle": "卓越理财",
      "subTitle": "为您和您的家人提供尊崇专属礼遇和权益"
    },
    "privileges": [
      {
        "imageUrl": "",
        "title": "国际教育",
        "desc": "享专属国际化学校优惠及背景提升项目"
      }
    ]
  },
  "elite": {},
  "global": {}
}
```

数据规则：

1.  `premier`、`elite`、`global` 为固定键，不允许运营新增或删除。
2.  `privilegeImageEnabled` 为当前层级列表级开关，不是单条权益字段。
3.  前台不应依赖后台返回客户等级权重，解锁关系需由前端或服务端统一维护。
4.  接口返回二期轮播字段时，本期前端忽略。

## 三、移动端展示需求

### 3.1 页面访问

移动端通过固定权益介绍页入口或后台生成链接访问权益介绍页。

| 场景  | 处理规则 |
| --- | --- |
| 页面配置不存在 | 展示页面不存在或配置异常提示 |
| 页面未发布且非草稿预览 | 展示页面不存在或配置异常提示 |
| 草稿预览链接 | 读取草稿配置，仅用于内部测试 |
| 正式链接 | 读取最近一次发布配置 |
| 配置接口失败 | 展示错误提示并支持重试，不展示上一客户缓存数据 |

### 3.2 页面骨架

| 区域  | 规则  |
| --- | --- |
| 状态栏 | 使用小程序或 App 容器原生状态栏 |
| 导航栏 | 标题固定为“权益介绍页”；返回按钮返回上一页 |
| 顶部固定入口 | 仅无三档等级客户展示 |
| 等级 Tab | 固定展示三档，名称读取后台配置 |
| 内容区 | 白底，自上而下渲染头图、标题、副标题、按钮、权益列表 |
| 安全区 | iOS 底部安全区需留白，避免内容被遮挡 |

页面结构：

1.  页面导航栏：标题“权益介绍页”，左侧返回按钮。
2.  顶部固定入口：仅无三档等级客户展示。
3.  等级 Tab：卓越理财、卓越理财·尊尚、环球私人银行。
4.  当前 Tab 的头图。
5.  当前 Tab 的主标题、副标题。
6.  进入权益首页按钮。
7.  当前 Tab 的权益列表。

### 3.3 客户等级与默认展示

客户等级映射：

| 客群  | 前端标识 | 权重  | 默认展示 |
| --- | --- | --- | --- |
| 潜客  | `prospect` | 0   | 卓越理财 Tab，展示顶部入口 |
| 仅持有信用卡客户 | `credit_only` | 0   | 卓越理财 Tab，展示顶部入口 |
| 运筹理财 | `advance` | 0   | 卓越理财 Tab，展示顶部入口 |
| 卓越理财 | `premier` | 1   | 卓越理财 Tab，隐藏顶部入口 |
| 卓越理财·尊尚 | `elite` | 2   | 卓越理财·尊尚 Tab，隐藏顶部入口 |
| 环球私人银行 | `global` | 3   | 环球私人银行 Tab，隐藏顶部入口 |

边界规则：

1.  客户等级读取失败或无法识别时，按无等级处理。
2.  无等级客户默认选中第一个 Tab，即卓越理财。
3.  切换 Tab 只改变当前查看内容，不改变客户真实等级。
4.  后台配置顺序不影响移动端展示顺序。

### 3.4 顶部固定入口

展示对象：

| 客户类型 | 是否展示 |
| --- | --- |
| 潜客、仅持卡、运筹理财、未知等级 | 展示  |
| 卓越理财、卓越理财·尊尚、环球私人银行 | 隐藏  |

展示内容：

| 字段  | 文案  | 来源  |
| --- | --- | --- |
| 标题  | 权益首页 | 前端固定 |
| 副标题 | 一键查看您的所有权益 | 前端固定 |
| 操作文案 | 立即查看 | 前端固定 |

交互规则：

1.  点击后进入客户真实 MSC 对应的权益首页。
2.  对无三档等级客户，进入对应权益首页兜底版本。
3.  该入口不支持后台隐藏、改名或换图。
4.  跳转失败时提示“暂时无法查看，请稍后再试”。

### 3.5 等级 Tab 与内容切换

展示规则：

1.  固定展示三档 Tab：卓越理财、卓越理财·尊尚、环球私人银行。
2.  Tab 名称读取后台 `tabName`，为空时使用默认名称。
3.  当前 Tab 需展示高亮文字和下划线。

交互规则：

1.  支持点击 Tab 切换内容。
2.  如后续支持左右滑动切换，滑动结果需与点击 Tab 完全一致。
3.  切换后需刷新头图、主标题、副标题、按钮状态、权益列表。
4.  Tab 名称过长时需单行省略或自适应压缩。

### 3.6 头部视觉区

移动端消费字段：

| 字段  | 来源  | 展示规则 |
| --- | --- | --- |
| 头图  | `header.imageUrl` | 宽度铺满，按视觉区域裁切 |
| 主标题 | `header.mainTitle` | 头图下方展示，支持换行 |
| 副标题 | `header.subTitle` | 主标题下方展示，支持换行 |

边界规则：

1.  头图为空或加载失败时展示默认占位。
2.  主标题为空时隐藏标题节点。
3.  副标题为空时隐藏副标题节点。
4.  文案过长时自然换行，不遮挡按钮和权益列表。

### 3.7 按钮展示与跳转

按钮状态：

| 客户真实等级 | 卓越理财 Tab | 尊尚 Tab | 私行 Tab |
| --- | --- | --- | --- |
| 无等级、潜客、仅持卡、运筹理财 | 锁定  | 锁定  | 锁定  |
| 卓越理财 | 已解锁 | 锁定  | 锁定  |
| 卓越理财·尊尚 | 已解锁 | 已解锁 | 锁定  |
| 环球私人银行 | 已解锁 | 已解锁 | 已解锁 |

展示规则：

1.  已解锁状态展示后台 `buttons.unlocked`，为空时默认“进入权益专区”。
2.  锁定状态展示后台 `buttons.locked`，为空时默认“待解锁”。
3.  已解锁和锁定状态需有明显视觉区分。

点击规则：

1.  已解锁按钮点击后，跳转至客户真实 MSC 对应的权益首页。
2.  当前正在查看的 Tab 不作为跳转目标。
3.  锁定按钮点击后不跳转，可展示达标提示弹窗。
4.  连续点击需防重复跳转。

### 3.8 权益列表展示

移动端消费字段：

| 字段  | 来源  | 展示规则 |
| --- | --- | --- |
| 是否展示图片 | `privilegeImageEnabled` | 控制列表视觉样式 |
| 图片  | `privileges[].imageUrl` | 开关开启时展示 |
| 标题  | `privileges[].title` | 作为权益标题 |
| 描述  | `privileges[].desc` | 作为权益描述 |

展示规则：

1.  权益列表按后台配置顺序展示。
2.  `privilegeImageEnabled=false` 时，展示圆点列表样式。
3.  `privilegeImageEnabled=true` 时，展示每条权益图片。
4.  图片加载失败时展示默认图标或圆点兜底。
5.  当前 Tab 无权益项时，隐藏权益列表区域。
6.  标题和描述均为空的权益项不展示。

### 3.9 异常与兜底

| 场景  | 处理规则 |
| --- | --- |
| 客户等级未知 | 按无等级处理 |
| 单个 Tab 配置缺失 | 使用默认 Tab 名称，内容区展示空态 |
| 图片加载失败 | 展示占位，不显示破图 |
| 权益首页跳转失败 | 提示“暂时无法查看，请稍后再试” |
| 接口返回额外字段 | 前端忽略，不影响页面展示 |
| 接口返回二期轮播字段 | 本期前端忽略 |

## 四、验收标准

### 4.1 后台验收

| 编号  | 验收项 | 通过标准 |
| --- | --- | --- |
| A1  | 页面入口 | 可从页面管理进入“权益介绍页”配置页 |
| A2  | 三档配置隔离 | 切换卓越、尊尚、私行 Tab 时，各档配置互不串改 |
| A3  | 保存完整配置 | 保存草稿时提交三档完整配置，保存成功后提示成功 |
| A4  | 发布上线 | 发布成功后状态为“正式线上环境”，正式链接读取新配置 |
| A5  | 未发布修改 | 已发布后编辑任意字段，状态变为“有未发布的修改” |
| A6  | Tab 名称兜底 | Tab 名称为空时，后台和移动端均使用默认名称 |
| A7  | 头图上传 | 支持上传和替换头图，并展示建议尺寸 |
| A8  | 按钮文案配置 | 已解锁、待解锁按钮文案可分别配置 |
| A9  | 权益添加删除 | 可添加、删除权益项，删除后序号自动重排 |
| A10 | 权益排序 | 输入合法目标序号后，权益项移动到目标位置 |
| A11 | 图片开关关闭 | 关闭“展示权益图片”后，权益图片非必填 |
| A12 | 图片开关开启 | 开启“展示权益图片”后，任一权益缺图均阻断保存和发布 |
| A13 | 缺图提示 | 缺图时提示具体 Tab 与权益序号，并切换到对应 Tab |
| A14 | 获取链接 | 已发布时展示正式 H5、小程序和草稿预览链接 |
| A15 | 链接参数 | Campaign ID、Channel ID 能正确拼接到链接 |

### 4.2 移动端验收

| 编号  | 验收项 | 通过标准 |
| --- | --- | --- |
| M1  | 无等级客户默认展示 | 潜客、仅持卡、运筹客户展示顶部入口，默认选中卓越理财 Tab |
| M2  | 高阶客户默认展示 | 卓越、尊尚、私行客户分别默认选中自身等级 Tab，并隐藏顶部入口 |
| M3  | 未知等级兜底 | 客户等级未知时按无等级展示 |
| M4  | Tab 切换 | 点击 Tab 后头图、标题、副标题、按钮状态、权益列表同步刷新 |
| M5  | 按钮解锁 | 按客户等级向下兼容解锁，越级 Tab 按钮锁定 |
| M6  | 跳转目标 | 已解锁按钮始终进入客户真实 MSC 对应权益首页 |
| M7  | 锁定按钮 | 锁定按钮不跳转，可展示达标提示 |
| M8  | 顶部入口 | 无等级客户点击顶部入口进入权益首页兜底版本 |
| M9  | 头图兜底 | 头图为空或加载失败时不显示破图 |
| M10 | 权益圆点样式 | 后台关闭展示权益图片时，移动端展示圆点列表 |
| M11 | 权益图片样式 | 后台开启展示权益图片且图片齐全时，移动端展示图片 |
| M12 | 空权益项 | 标题和描述均为空的权益项不展示 |
| M13 | 空权益列表 | 当前 Tab 无权益项时隐藏列表区域 |
| M14 | 二期轮播排除 | 页面不展示精选活动/活动轮播图 |
| M15 | 异常提示 | 配置不存在、未发布、接口失败时展示错误或重试提示 |