版本日期:2026-06-01
本文档描述“权益首页”的前台展示与后台配置需求。
参考范围:
| 类型 | 文件或原型 | 说明 |
|---|---|---|
| 前台原型 | 工作空间/产研/权益/汇丰全行/产品原型/h5-demo/移动端.html |
以文件中的“权益首页”页面为准,即 zone-view 视图 |
| 后台原型 | 工作空间/产研/权益/汇丰全行/产品原型/pc-demo |
以“页面管理 / 权益首页配置”及权益、信用卡权益显示页面配置为准 |
| 结构参考 | 工作空间/产研/权益/汇丰全行/需求文档/组装页.md |
文档结构、流程图和验收口径参考 |
本期权益首页包含以下模块:
移动端原型中,卓越理财和卓越理财尊尚客户身份卡片里出现的“合格(上月日均余额)”字段属于二期范围,本期不展示、不配置、不开发、不验收。
具体处理规则:
| 场景 | 本期处理 |
|---|---|
| 卓越理财身份区域 | 不展示“合格(上月日均余额)” |
| 卓越理财尊尚身份区域 | 不展示“合格(上月日均余额)” |
| 后台配置 | 不提供“显示合格状态”配置项 |
| 接口字段 | 即使后端返回合格相关字段,本期前端也不消费 |
| 验收 | 不以合格文案、合格状态、上月日均余额达标为验收项 |
当前后台原型
PageZoneConfig.vue已在数据归一化时删除showQualifyStatus、qualifyStatusText等旧字段,正式需求以本期范围为准。
flowchart TD
A["运营进入 页面管理 / 权益首页配置"] --> B["加载当前草稿或线上配置"]
B --> C["维护客户身份、广告轮播、常用兑换、积分规则配置"]
C --> D{"点击保存草稿或发布上线"}
D -- "保存草稿" --> E{"草稿校验是否通过"}
D -- "发布上线" --> F{"发布校验是否通过"}
E -- "否" --> G["提示错误并停留当前页面"]
F -- "否" --> G
E -- "是" --> H["保存草稿版本"]
F -- "是" --> I["生成或更新正式线上版本"]
H --> J["页面状态展示为草稿"]
I --> K["页面状态展示为正式线上环境"]
K --> L["可生成正式链接和草稿预览链接"]
flowchart TD
A["客户进入权益首页"] --> B{"是否草稿预览链接"}
B -- "是" --> C["读取草稿配置"]
B -- "否" --> D["读取已发布配置"]
C --> E{"配置是否存在"}
D --> E
E -- "否" --> F["展示页面不存在或已下线"]
E -- "是" --> G["获取登录客户身份、客户标签、权益资格、积分账户和信用卡信息"]
G --> H["按客户 MSC Group 匹配身份模块"]
H --> I["过滤专属礼遇、信用卡权益、广告和积分模块"]
I --> J["按页面固定顺序渲染可展示模块"]
flowchart TD
A["用户点击广告或常用兑换项"] --> B{"配置的跳转类型"}
B -- "H5链接跳转" --> C["读取 H5 URL"]
B -- "固定链接跳转" --> D["读取固定链接字典"]
B -- "小程序跳转" --> E["读取 AppID 和页面路径"]
C --> F{"是否外部域名"}
D --> F
F -- "否" --> G["直接跳转"]
F -- "是" --> H["展示离开汇丰中国确认弹窗"]
H --> I{"用户确认继续前往"}
I -- "否" --> J["关闭弹窗,停留当前页"]
I -- "是" --> G
E --> K{"当前环境是否支持小程序跳转"}
K -- "是" --> L["跳转到指定小程序页面"]
K -- "否" --> M["展示无法打开或使用 H5 兜底"]
后台入口:定制功能 / 汇丰银行 / 页面管理 / 权益首页配置
页面顶部操作区包含:
| 功能 | 需求说明 | 边界规则 |
|---|---|---|
| 页面状态 | 展示草稿、正式线上环境、有未发布的修改 | 已发布配置被编辑后,状态变为“有未发布的修改”;正式移动端仍读取上一次发布版本 |
| 获取链接 | 打开链接弹窗 | 可生成草稿预览链接;仅正式线上环境展示正式 H5 和正式小程序链接 |
| 保存草稿 | 保存当前配置为草稿 | 校验已填写模块的基础必填项;不影响线上版本 |
| 发布上线 | 将当前草稿发布为正式版本 | 需通过发布校验;发布后移动端正式入口读取最新配置 |
页面状态规则:
| 状态 | 触发条件 | 后台展示 | 移动端影响 |
|---|---|---|---|
| 草稿 | 尚未发布,或仅保存草稿 | 草稿(未发布) | 仅草稿预览链接可访问 |
| 正式线上环境 | 发布上线成功且无后续修改 | 正式线上环境 | 正式链接读取该版本 |
| 有未发布的修改 | 已发布后再次编辑但未发布 | 有未发布的修改 | 正式链接仍读取上一次发布版本;草稿预览读取最新草稿 |
点击“获取链接”后展示链接弹窗,支持选择 Campaign ID 和 Channel ID。
| 链接类型 | 展示条件 | 链接格式 | 用途 |
|---|---|---|---|
| 正式 H5 链接 | 页面状态为正式线上环境 | https://hsbc.com/zone |
正式投放 |
| 正式小程序或 App 链接 | 页面状态为正式线上环境 | hsbc-app://zone |
App 或小程序容器内打开 |
| 草稿预览链接 | 页面存在草稿配置 | https://test.hsbc.com/zone?draft=1 |
内部测试预览 |
参数规则:
| 参数 | 来源 | 规则 |
|---|---|---|
CampaignId |
Campaign 下拉选择 | 选填;选择后拼接到链接 |
Channelid |
Channel 下拉选择 | 选填;选择后拼接到链接 |
draft |
是否草稿预览 | 草稿预览链接固定为 draft=1 |
边界规则:
& 追加。客户身份模块用于控制移动端顶部身份卡片。后台按四类客户身份维护配置:
| 客户身份 | 后台 key | 移动端展示条件 |
|---|---|---|
| 运筹理财 | advance |
登录客户 MSC Group 命中 Advance |
| 卓越理财 | premier |
登录客户 MSC Group 命中 Premier |
| 卓越理财尊尚 | premierElite |
登录客户 MSC Group 命中 Premier Elite |
| 环球私人银行 | privateBank |
登录客户 MSC Group 命中 Global Private Bank |
字段规则:
| 字段 | 适用身份 | 类型 | 规则 |
|---|---|---|---|
| 客群背景图 | 全部身份 | 图片上传 | 建议尺寸 750 x 185 px;用于移动端身份卡片顶部背景 |
| 等级说明 | 卓越理财、卓越理财尊尚、环球私人银行 | 富文本 | 用于配置等级名称旁边“?”提示弹窗内容 |
| 显示账户月内日均余额 | 运筹理财、卓越理财、卓越理财尊尚 | 开关或配置字段 | 开启后展示余额名称、余额数值、截止日期和“?”说明入口 |
| 账户月内日均余额名称 | 运筹理财、卓越理财、卓越理财尊尚 | 单行文本 | 默认“账户月内日均余额”;最多 20 个中文字符 |
| 余额说明 | 运筹理财、卓越理财、卓越理财尊尚 | 富文本 | 用于配置余额名称旁边“?”提示弹窗内容 |
图片规则:
| 项目 | 规则 |
|---|---|
| 文件格式 | JPG、JPEG、PNG |
| 建议尺寸 | 750 x 185 px |
| 上传数量 | 每个身份 1 张 |
| 替换规则 | 再次上传覆盖原图 |
| 空值兜底 | 后台未上传或图片加载失败时,移动端使用本地默认身份背景图 |
身份配置边界:
活动广告轮播图用于配置移动端权益首页中的活动海报。
后台能力:
| 功能 | 需求说明 | 边界规则 |
|---|---|---|
| 添加轮播 | 在广告列表末尾新增一条广告 | 新增后默认跳转类型为 H5 链接跳转 |
| 删除轮播 | 删除当前广告项 | 删除后需保存草稿或发布上线才生效 |
| 调整顺序 | 输入目标序号并移动 | 序号最小为 1,最大为当前广告数量 |
| 可见人群标签 | 多选客户标签 | 留空代表全量可见;命中特定标签才展示 |
广告字段:
| 字段 | 类型 | 必填规则 | 移动端消费规则 |
|---|---|---|---|
| 广告图片 | 图片上传 | 发布时必填 | 作为广告海报主图 |
| 主标题 | 单行文本 | 选填 | 为空时隐藏标题文本 |
| 副标题 | 单行文本 | 选填 | 为空时隐藏副标题文本 |
| 可见人群标签 | 多选下拉 | 选填 | 留空为全量可见;非空则按客户标签过滤 |
| 跳转类型 | 单选 | 必填 | H5 链接跳转、固定链接跳转、小程序跳转 |
| H5 链接跳转 | URL 输入框 | 跳转类型为 H5 时必填 | 点击广告时打开 H5 链接 |
| 固定链接跳转 | 下拉选择 | 跳转类型为固定链接时必填 | 从固定链接字典读取承接页 |
| 小程序 AppID | 单行文本 | 跳转类型为小程序时必填 | 用于打开指定小程序 |
| 小程序页面路径 | 单行文本 | 跳转类型为小程序时必填 | 支持带参数路径 |
图片规则:
| 项目 | 规则 |
|---|---|
| 文件格式 | JPG、JPEG、PNG |
| 建议尺寸 | 后台原型提示 686 x 296 px |
| 上传数量 | 每条广告 1 张 |
| 加载失败 | 移动端隐藏该广告,不展示破图 |
跳转类型规则:
| 跳转类型 | 后台规则 | 移动端规则 |
|---|---|---|
| H5 链接跳转 | linkH5 必填 |
点击后按链接安全规则跳转 |
| 固定链接跳转 | fixedLink 必选 |
点击后跳转到固定链接对应页面 |
| 小程序跳转 | wechatAppId 和 wechatPath 必填 |
小程序环境内打开目标页面;非小程序环境需有兜底策略 |
发布校验:
常用兑换用于配置积分商城模块内的快捷兑换入口。
后台能力:
| 功能 | 需求说明 | 边界规则 |
|---|---|---|
| 添加兑换项 | 在列表末尾新增兑换项 | 新增后需填写图片、展示文字和跳转链接 |
| 删除兑换项 | 删除当前兑换项 | 删除后需保存草稿或发布上线才生效 |
| 调整顺序 | 输入目标序号并移动 | 移动端按后台顺序展示 |
字段规则:
| 字段 | 类型 | 必填规则 | 移动端消费规则 |
|---|---|---|---|
| 兑换图标 | 图片上传 | 发布时必填 | 展示在兑换卡片上方 |
| 展示文字 | 单行文本 | 必填 | 展示在兑换卡片下方 |
| 跳转链接 | URL 输入框 | 必填 | 点击兑换项后跳转 |
边界规则:
积分规则弹窗用于配置移动端“积分规则”入口拉起的底部弹窗内容。
| 字段 | 类型 | 必填规则 | 移动端消费规则 |
|---|---|---|---|
| 弹窗顶部名称 | 单行文本 | 发布时必填 | 作为底部弹窗标题 |
| 规则内容 | 富文本编辑器 | 发布时必填 | 作为弹窗正文展示 |
富文本规则:
专属礼遇不在“权益首页配置”页面内手工新增商品,而是从借记卡权益商品管理联动。
借记卡权益进入权益首页需同时满足:
信用卡权益进入权益首页需同时满足:
排序规则:
| 模块 | 后台排序来源 | 移动端影响 |
|---|---|---|
| 专属礼遇 | 借记卡权益列表“调整显示顺序” | 权益首页和权益列表页按该顺序展示 |
| 信用卡权益 | 信用卡权益列表“调整显示顺序” | 权益首页和权益列表页按该顺序展示 |
| 常用兑换 | 权益首页配置中的兑换项顺序 | 仅影响权益首页常用兑换区域 |
| 活动广告 | 权益首页配置中的广告顺序 | 仅影响权益首页广告轮播顺序 |
| 校验项 | 保存草稿 | 发布上线 |
|---|---|---|
| 客户身份背景图 | 不强制 | 不强制,移动端有默认图兜底 |
| 余额开关开启时余额名称 | 必填 | 必填 |
| 余额开关开启时余额说明 | 建议校验 | 推荐必填 |
| 广告项图片 | 已添加广告时必填 | 已添加广告时必填 |
| 广告项跳转配置 | 已添加广告时必填 | 已添加广告时必填 |
| 常用兑换展示文字 | 已添加兑换项时必填 | 已添加兑换项时必填 |
| 常用兑换跳转链接 | 已添加兑换项时必填 | 已添加兑换项时必填 |
| 积分规则标题 | 不强制 | 必填 |
| 积分规则内容 | 不强制 | 必填 |
移动端权益介绍页中存在“权益首页”入口,点击后进入权益首页页面。权益首页导航标题固定展示为“权益首页”。
页面骨架:
| 区域 | 规则 |
|---|---|
| 状态栏 | 使用 App 或小程序容器原生状态栏 |
| 导航栏 | 标题为“权益首页”,左侧返回上一页 |
| 内容区 | 背景色为浅灰,模块卡片为白底 |
| 安全区 | iOS 底部安全区需留白,避免内容被遮挡 |
模块顺序:
任一模块因配置为空、客户不命中、接口无数据而隐藏时,不占位,不留白,后续模块自动上移。
客户身份模块根据登录客户实际 MSC Group 自动匹配,不允许用户手动切换。原型中的右侧“状态”切换面板仅用于演示。
展示规则:
| 客户身份 | 展示内容 | 边界规则 |
|---|---|---|
| 潜客 | 不展示身份卡片 | 页面顶部不留大空白 |
| 仅持有信用卡客户 | 不展示身份卡片 | 页面顶部不留大空白 |
| 运筹理财 | 展示背景图、英文等级名、中文等级名、账户月内日均余额 | 不展示等级说明“?” |
| 卓越理财 | 展示背景图、英文等级名、中文等级名、等级说明“?”、账户月内日均余额 | 不展示“合格(上月日均余额)” |
| 卓越理财尊尚 | 展示背景图、英文等级名、中文等级名、等级说明“?”、尊尚编号、账户月内日均余额 | 不展示“合格(上月日均余额)” |
| 环球私人银行 | 展示背景图、英文等级名、中文等级名、私行业务 ID、等级或层级文本 | 不展示任何账户月内日均余额 |
余额展示规则:
| 场景 | 处理 |
|---|---|
| 后台开启余额展示且接口返回余额 | 展示余额名称、截止日期、余额金额和币种 |
| 后台关闭余额展示 | 隐藏余额区域和余额说明“?” |
| 余额接口返回空值 | 展示“数据更新中,请稍后重试”或隐藏金额,按统一异常口径处理 |
| 私人银行客户 | 强制隐藏余额区域,即使接口返回余额也不展示 |
文案与格式:
| 内容 | 格式 |
|---|---|
| 截止日期 | 截止日期 YYYY年M月D日 |
| 金额 | 千分位格式,追加币种,如 8,000,000 人民币元 |
| 编号 | 原样展示客户编号,如 C1234567890 |
说明弹窗:
编号复制:
专属礼遇展示客户可见的借记卡权益商品。
展示规则:
排版规则:
| 项目 | 规则 |
|---|---|
| 单屏数量 | 一屏最多展示 4 个 Icon |
| 超过 4 个 | 横向滑动展示 |
| 指示器 | 超过 1 屏时展示 dots |
| 图标为空 | 展示默认权益图标 |
| 名称超长 | 最多 2 行,超出省略 |
信用卡权益模块展示信用卡权益列表及客户可用状态。
模块展示前提:
| 客户状态 | 模块处理 |
|---|---|
| 无储蓄账户且无信用卡账户 | 整个信用卡权益模块隐藏 |
| 有储蓄账户但无信用卡 | 展示模块,权益为待解锁,引导快速申卡 |
| 有信用卡但卡种不满足 | 展示模块,相关权益为待解锁,引导卡片升级 |
| 有信用卡且满足卡种和资格 | 展示模块,权益按可用次数和资格展示 |
权益状态:
| 状态 | 展示 | 点击处理 |
|---|---|---|
| 已解锁 | 正常图标和文案 | 进入信用卡权益详情或承接页 |
| 待解锁 | 置灰展示 | 进入详情页展示申请、升级或年费缴纳引导 |
| 有剩余次数 | 展示 剩余次数/总次数,如 0/2 |
进入可使用权益详情 |
| 无剩余次数 | 展示 0/总次数 |
详情页提示次数已用尽或按信用卡权益平台规则处理 |
排版规则:
活动广告按后台配置和客户标签过滤后展示。
展示规则:
| 场景 | 处理 |
|---|---|
| 客户可见广告数量为 0 | 隐藏整个广告模块 |
| 客户可见广告数量为 1 | 展示静态广告,不展示 dots,不自动轮播 |
| 客户可见广告数量大于 1 | 横向轮播展示,按后台顺序排列 |
| 广告图片加载失败 | 隐藏该广告;若全部失败则隐藏模块 |
文案规则:
点击规则:
积分模块展示客户积分账户和常用兑换入口。
展示前提:
| 场景 | 处理 |
|---|---|
| 有积分账户 | 展示积分商城模块 |
| 无积分账户 | 隐藏整个积分商城模块 |
| 积分接口异常 | 展示“数据更新中,请稍后重试”,常用兑换可按配置继续展示 |
积分账户展示:
YYYY年M月D日到期积分。常用兑换展示:
| 项目 | 规则 |
|---|---|
| 展示来源 | 后台常用兑换配置 |
| 单屏数量 | 原型单屏约 3 个兑换卡片 |
| 超过一屏 | 横向滑动展示 |
| 无兑换项 | 隐藏常用兑换区域 |
| 点击兑换项 | 跳转后台配置链接 |
积分规则:
所有后台配置链接均需执行安全识别。
| 链接类型 | 处理 |
|---|---|
| 汇丰内部域名 | 直接跳转 |
| App 内部 Scheme | 直接拉起 |
| 小程序内部路径 | 小程序环境内打开 |
| 第三方外部域名 | 先展示离开汇丰中国确认弹窗 |
| 非法链接 | 后台阻断保存;移动端如仍收到非法链接则提示无法打开 |
离开汇丰中国确认弹窗固定文案:
| 字段 | 文案 |
|---|---|
| 标题 | 您正在离开汇丰中国 |
| 描述 | 请注意,外部网站的政策与我们网站的条款和条件以及隐私政策不同。将在新浏览器窗口或选项卡中打开下一个网站。 |
| 取消按钮 | 取消 |
| 确认按钮 | 继续前往 |
加载规则:
异常规则:
| 异常 | 处理 |
|---|---|
| 页面配置不存在 | 展示“页面不存在或已下线” |
| 草稿链接过期或无权限 | 展示“页面不存在或已下线” |
| 客户身份接口失败 | 隐藏身份模块或展示“数据更新中,请稍后重试” |
| 权益列表接口失败 | 隐藏对应权益模块并记录日志 |
| 信用卡权益接口失败 | 隐藏信用卡权益模块或展示模块级错误 |
| 积分接口失败 | 展示积分模块错误态,不展示错误代码 |
| 图片加载失败 | 使用默认图或隐藏当前图片项 |
| 数据 | 来源 | 用途 |
|---|---|---|
| 客户 MSC Group | 客户信息或 CDP 接口 | 判断客户身份模块 |
| 客户标签 | 人群标签或名单包服务 | 过滤广告和权益 |
| 借记卡权益商品 | 权益商品管理 | 渲染专属礼遇 |
| 信用卡权益商品 | 信用卡权益管理 | 渲染信用卡权益 |
| 信用卡持卡状态和卡种 | 信用卡账户接口 | 判断信用卡权益解锁状态 |
| 权益可用次数 | 信用卡权益或权益资格接口 | 展示 剩余次数/总次数 |
| 积分账户 | 积分中台 | 判断积分模块是否展示 |
| 积分明细 | 积分中台和信用卡积分接口 | 展示积分抽屉 |
| 页面配置 | 页面管理 / 权益首页配置 | 背景图、广告、常用兑换、积分规则 |
隐私与安全口径:
| 编号 | 验收项 | 通过标准 |
|---|---|---|
| A1 | 页面状态 | 草稿、正式线上环境、有未发布的修改状态展示正确 |
| A2 | 保存草稿 | 点击保存草稿后配置保存成功,不影响正式链接读取版本 |
| A3 | 发布上线 | 发布成功后正式链接读取最新配置 |
| A4 | 获取链接 | 正式状态展示正式 H5、正式小程序和草稿预览链接;草稿状态仅展示草稿预览链接 |
| A5 | 链接参数 | 选择 Campaign ID、Channel ID 后正确拼接参数 |
| A6 | 客户身份配置 | 四类身份可分别配置背景图;私行不展示余额配置 |
| A7 | 二期字段排除 | 后台不出现“显示合格状态”配置项 |
| A8 | 等级说明 | 卓越理财、卓越理财尊尚、私行可配置等级说明富文本 |
| A9 | 余额说明 | 开启余额展示时可配置余额名称和余额说明 |
| A10 | 广告配置 | 可新增、删除、排序广告,并配置图片、标题、人群标签和跳转 |
| A11 | 广告跳转校验 | H5、固定链接、小程序跳转类型均按条件必填校验 |
| A12 | 常用兑换配置 | 可新增、删除、排序兑换项,并配置图片、文字和链接 |
| A13 | 积分规则配置 | 可配置弹窗标题和富文本内容 |
| A14 | 权益联动 | 借记卡权益和信用卡权益配置“权益首页=显示”后可进入移动端展示候选池 |
| 编号 | 验收项 | 通过标准 |
|---|---|---|
| M1 | 页面标题 | 进入权益首页后导航标题展示“权益首页” |
| M2 | 模块顺序 | 按客户身份、专属礼遇、信用卡权益、活动广告、积分商城顺序展示 |
| M3 | 身份匹配 | 不同 MSC Group 客户展示对应身份卡片 |
| M4 | 二期字段排除 | 卓越理财和卓越理财尊尚均不展示“合格(上月日均余额)” |
| M5 | 私行隐私 | 环球私人银行客户不展示任何账户月内日均余额 |
| M6 | 余额说明 | 点击余额“?”展示后台配置的余额说明 |
| M7 | 等级说明 | 点击等级“?”展示后台配置的等级说明 |
| M8 | 编号复制 | 尊尚编号或私行业务 ID 存在时可复制,复制成功有提示 |
| M9 | 专属礼遇过滤 | 未上架、未审核通过、不命中客户条件的权益不展示 |
| M10 | 专属礼遇空态 | 无可展示权益时隐藏整个专属礼遇模块 |
| M11 | 信用卡权益状态 | 按客户持卡、卡种、资格和次数展示已解锁或待解锁 |
| M12 | 广告过滤 | 按可见人群标签过滤广告;0 张隐藏,1 张静态,多张轮播 |
| M13 | 广告跳转 | H5、固定链接、小程序跳转均按配置执行 |
| M14 | 积分账户 | 有积分账户展示积分模块,无积分账户隐藏模块 |
| M15 | 积分抽屉 | 点击总积分可展开或收起积分明细 |
| M16 | 常用兑换 | 兑换项按后台顺序展示,点击后跳转配置链接 |
| M17 | 积分规则 | 点击积分规则拉起底部弹窗,内容来自后台富文本 |
| M18 | 外部链接 | 第三方外链跳转前展示离开汇丰中国确认弹窗 |
| M19 | 图片异常 | 图片加载失败不出现破图,使用默认图或隐藏对应项 |
| M20 | 页面异常 | 配置不存在、链接无效、接口异常时不暴露错误代码 |