rongshu/工作空间/产研/权益/汇丰全行/需求文档/权益介绍页移动端.md

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

版本日期：2026-06-01

一、业务流程图

1.1 后台配置与发布流程

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 移动端访问与渲染流程

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 按钮点击与跳转流程

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 配置数据结构

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

{
  "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	异常提示	配置不存在、未发布、接口失败时展示错误或重试提示