# 一、需求背景

汇丰当前只有信用卡权益，希望支持全行权益，提升用户活跃度。

# 二、需求列表

## （一）后台

入口：定制功能—>汇丰银行

**权益商品管理**

1.  权益添加（两步骤向导：填写商品信息→设置规则）
    
2.  权益编辑
    
3.  权益查看
    
4.  权益列表
    
5.  审核
    
6.  下架
    

## （二）移动端

1.  权益主页
    
2.  权益详情
    
3.  权益订单详情
    
4.  我的立减金
    

# 三、需求详述

# （一）后台

菜单入口：liso 定制功能-汇丰银行

![|51%](../../.resources/image-1776675434545.png)

## 1\. 添加权益商品

![](../../.resources/image-1776677751099.png)

添加权益商品采用两步骤向导：**填写商品信息 → 设置规则**。

权益商品按**商品来源**分为两类：**银行自有**和**第三方**。

-   商品来源为"银行自有"时，填写商品信息步骤包含价格信息区域；
    
-   商品来源为"第三方"时，不展示价格信息。
    

### 步骤一：填写商品信息

### **1.1 公共字段**

| **字段名称** | **字段类型** | **是否必填** | **说明** |
| --- | --- | --- | --- |
| 商品来源 | 单选按钮组 | 是   | 银行自有 / 第三方，默认选择"银行自有"。  <br>  <br>选择后表单字段根据来源类型动态展示。 |
| 商户名称 | 下拉选择框 | 是   | 仅当商品来源为"银行自有"时显示，与商品来源同行展示。支持搜索筛选。 |

### **1.2 银行自有**

![](../../.resources/image-1776677676974.png)

当商品来源为"银行自有"时，展示以下字段：

| **字段名称** | **字段类型** | **是否必填** | **说明** |
| --- | --- | --- | --- |
| SKU编号 | 下拉选择框 | 是   | 选择关联的商品SKU。  <br>1\. 输入sku编号  <br>2\. 查询商城机构定价包含汇丰银行的SIP渠道银行自有商品，按照"商品名称-SKU编号"在列表回显，如果无结果显示"无相关商品"。输入框支持清空。  <br>3\. 选择商品自动填充：商品名称→权益名称、商品图片→权益列表图标、商户价格信息 |
| 权益名称 | 文本输入框 | 是   | 最长可输入40个字符 |
| 权益副标题 | 文本输入框 | 否   | 权益的副标题说明，最长可输入40个字符 |
| 权益列表图标 | 图片上传 | 是   | 上传列表权益图标图片，只能传一张 |
| 权益主图 | 图片上传 | 是   | 上传权益主图图片，只能传一张 |
| 权益概述 | 富文本输入框 | 是   | 权益的详细内容说明，最长500个字符 |
| 权益详情 | 富文本输入框 | 是   | 权益的使用说明，最长1000个字符 |
| 下单成功短信 | 开关 + 下拉选择框 | 否   | 该字段单独占一行。默认关闭，开启后在开关下方显示"短信模板"下拉选择框，选择模板后回显模板内容（只读预览）。关闭则不发送短信。  <br>字段需显示tips：此模板为权益支付成功，发送给持卡人的短信模板；开启后需选择短信模板，关闭则不发送短信。 占位符如下 ： 商品名称：${productName} ； 结束日期：${expireDate} ； 卡号: ${exchangeNum} ；卡密 ：${exchangePwd}；券码路径:${qrCodeDownPaths}。  <br>**短信模板**下拉选项来源：已配置的短信模板列表（模板 ID + 模板名称），保存时存储选中的模板 ID。 |
| 领取成功按钮文案 | 文本输入框 | 是   | 领取成功后按钮显示的文案，默认值："马上去使用" |

**价格信息**

> 当为银行自有且选择了sku编号时显示

![](../../.resources/image-1776678323140.png)

| **字段名称** | **字段类型** | **是否必填** | **说明** |
| --- | --- | --- | --- |
| 科目号 | 选择框 | 是   | 可输入的选择框。  <br>  <br>选择框中展示科目号。 |

### **1.3 外部**

当商品来源为"第三方"时，先选择外部商品链接和跳转触发页，再根据跳转触发页展示不同字段：

| **字段名称** | **字段类型** | **是否必填** | **说明** |
| --- | --- | --- | --- |
| 外部商品链接 | 下拉选择框 | 是   | 可选值：太古地产、龙腾、自定义。  <br>选择"自定义"时，显示自定义链接输入框（必填，最长400个字符）。 |
| 跳转触发页 | 下拉选择框 | 是   | 可选值：权益列表页、权益详情页。  <br>根据选择展示不同的表单字段。 |

**（1）跳转触发页 = 权益列表页** 时，展示以下字段：

![](../../.resources/image-1776677854190.png)

| **字段名称** | **字段类型** | **是否必填** | **说明** |
| --- | --- | --- | --- |
| 权益名称 | 文本输入框 | 是   | 最长可输入40个字符 |
| 权益副标题 | 文本输入框 | 否   | 权益的副标题说明，最长可输入40个字符 |
| 权益列表图标 | 图片上传 | 是   | 上传权益图标图片，只能传一张 |

**（2）跳转触发页 = 权益详情页** 时，展示以下字段：

![](../../.resources/image-1776677883654.png)

| **字段名称** | **字段类型** | **是否必填** | **说明** |
| --- | --- | --- | --- |
| 权益名称 | 文本输入框 | 是   | 最长可输入40个字符 |
| 权益副标题 | 文本输入框 | 否   | 权益的副标题说明，最长可输入40个字符 |
| 权益列表图标 | 图片上传 | 是   | 上传权益图标图片，只能传一张 |
| 权益主图 | 图片上传 | 是   | 上传权益主图图片，只能传一张 |
| 权益概述 | 富文本输入框 | 是   | 权益的详细内容说明，最长500个字符 |
| 权益详情 | 富文本输入框 | 是   | 权益的使用说明，最长1000个字符 |

### 步骤二：设置规则

![](../../.resources/image-1776678543717.png)

**展示规则**

| **字段名称** | **字段类型** | **是否必填** | **说明** |
| --- | --- | --- | --- |
| 展示时间限制 | 开关（Toggle） | 否   | 默认关闭。开启后可配置展示的开始时间和结束时间，格式 Y-m-d H:i:s |
| 展示客群限制 | 开关（Toggle） | 否   | 默认关闭。开启后可选择客群标签ID（单选） |

**领取规则**

| **字段名称** | **字段类型** | **是否必填** | **说明** |
| --- | --- | --- | --- |
| 领取时间限制 | 开关（Toggle） | 否   | 默认关闭。开启后可配置领取的开始时间和结束时间，格式 Y-m-d H:i:s |
| 领取客群限制 | 开关（Toggle） | 否   | 默认关闭。  <br>开启后可配置  <br>• 标签：标签ID，必填，最长可输入50个字符  <br>• 不满足提示  <br>◦ 提示内容：必填，最长可输入200个字符  <br>◦ 跳转按钮文案：必填，最长可输入10个字符  <br>◦ 跳转按钮链接：必填，最长可输入200个字符 |

### 操作按钮

-   **上一步/下一步：** 在步骤之间导航
    
-   **取消：** 放弃当前操作，返回权益列表页
    
-   **提交：** 在最后一步显示，校验必填项，通过后提交创建权益商品记录，状态变为【待审核】
    

## 2\. 权益编辑

仅待审核、审核拒绝和已下架的权益商品可编辑。

与添加权益商品相比，除了【商品来源】不可编辑，其他均可编辑。

-   **取消：** 放弃当前操作，返回权益列表页。
    
-   **保存：** 校验必填项，通过后更新权益商品记录，状态变为【待审核】。
    

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

![](../../.resources/image-1776678460565.png)![](../../.resources/image-1776678477468.png)

## 3\. 权益查看

字段同权益编辑

-   输入框和选择框禁用
    
-   不展示取消和提交按钮。
    

![](../../.resources/image-1776678401993.png)

## 4\. 权益列表

![](../../.resources/image-1776678565000.png)

### （1）筛选条件

| **字段名称** | **字段类型** | **是否必填** | **说明** |
| --- | --- | --- | --- |
| 权益名称 | 文本输入框 | 否   | 模糊搜索权益名称 |
| 商品ID | 文本输入框 | 否   | 精确匹配商品ID |
| SKU编号 | 文本输入框 | 否   | 精确匹配SKU编号 |
| 科目号 | 文本输入框 | 否   | 精确匹配科目号 |

### （2）操作按钮

-   查询：根据筛选条件查询权益列表
    
-   重置：清空所有筛选条件
    
-   添加权益商品：打开【权益添加】页面
    

### （3）列表字段

| 字段名称 | **说明** |
| --- | --- |
| 操作  | • 查看：查看权益详情  <br>• 编辑：编辑权益信息  <br>• 审核：审核状态为待审核时显示  <br>• 下架：审核状态为审核通过或已上架时显示，点击下架该权益 |
| 权益名称 | 权益的名称 |
| 审核状态 | 待审核、审核通过、审核拒绝、已上架、已下架 |
| 商品来源 | 银行自有 / 第三方 |
| 外部商品链接 | 外部商品链接类型（太古地产/龙腾/自定义），银行自有时显示"-" |
| 跳转触发页 | 权益列表页 / 权益详情页，银行自有时显示"-" |
| 商品ID | 商品ID |
| SKU编号 | 关联的商品SKU编号 |
| 商户名称 | 商品商户名称 |
| 审核人 | 执行审核的操作人 |
| 审核时间 | 审核操作的时间 |

### （4）分页

-   默认每页显示 20 条记录
    
-   支持翻页：首页、上一页、下一页、末页、跳转至指定页
    

## 5\. 权益审核

当权益商品状态为【待审核】时，在列表展示【审核】操作按钮。

展示的字段同【查看权益】，底下增加操作

-   **审核拒绝：**
    
    -   点击后弹窗二次确认，确认后该权益商品状态变为【审核拒绝】。
        
-   **审核通过：**
    
    -   点击后弹窗二次确认，确认后该权益商品状态变为【已上架】。
        

![](../../.resources/image-1776678587748.png)

## 6\. 权益下架

当权益商品为【审核通过】或【已上架】时在列表展示按钮，点击后弹窗提示【确定要下架权益"XXX"吗？】

-   确定：将该权益商品状态变为【已下架】，前台不再展示且无法兑换下单
    
-   取消：关闭弹窗
    

# （二）移动端

> **与后台的关联说明：**
> 
> -   移动端根据后台"商品来源"和"跳转触发页"两个字段组合判断跳转逻辑
>     
> -   后台"外部商品链接"字段（太古地产/龙腾/自定义）决定外部跳转时的交互流程
>     
> -   后台"展示规则"控制移动端权益列表的可见性
>     
> -   后台"领取规则"控制移动端权益详情页的领取校验
>     

## 1\. 权益主页（积木侧搭建）

新增借记卡权益（通过积木组件百变导航配置）

## 2\. 我的权益

### 2.1 权益列表

![](../../.resources/image-1776678669459.png)

展示顺序：先展示借记卡权益，再展示信用卡权益，最后是微信立减金（置底）

**（1）借记卡权益（新增）**

-   **数据来源：** 后台权益商品列表中需同时满足：
    
    -   商品状态：已上架
        
    -   商品类型：不为微信立减金
        
    -   展示时间限制：未开启 或 当前时间在后台配置的展示开始时间～展示结束时间范围内
        
    -   展示客群限制：未开启 或 用户命中后台配置的客群标签ID
        
-   **列表字段**
    
    -   权益列表图标（取后台"权益列表图标"字段）
        
    -   权益名称（取后台"权益名称"字段）
        
-   **列表顺序：** 按照审核通过时间从后往前排序展示。
    
-   **列表跳转** 根据后台【商品来源】+【跳转触发页】判断：
    
    -   **商品来源=银行自有：** 跳转到权益详情页
        
    -   **商品来源=第三方，跳转触发页=权益列表页：** 点击跳转第三方链接
        
        -   根据后台配置的【外部商品链接】类型判断跳转交互：
            
        -   **自定义：** 弹窗提示
            
            -   **标题：** 您正在离开汇丰中国
                
            -   **描述：** 请注意，外部网站的政策与我们网站的条款和条件以及隐私政策不同。将在新浏览器窗口或选项卡中打开下一个网站。
                
            -   **操作**
                
                -   **取消：** 关闭弹窗
                    
                -   **继续前往：** 跳转后台配置的自定义链接
                    
                    ![](../../.resources/image-1776678703451.png)
        -   **太古地产：** 点击后弹出授权提醒
            
            -   勾选同意并**确认**后，显示离开提示，点击确认时调用太古地产接口，然后跳转至后端返回的太古地产免登地址。
                
            -   **点击取消：** 关闭授权提醒。
                
                <br>
                
                <br>
                
                <br>
                
                <br>
                
                <br>
                
                <br>
                
                <br>
                
                <br>
                
                ![](../../.resources/image-1776678728870.png)![](../../.resources/image-1776678755981.png)
        -   **龙腾：** 点击后弹出授权提醒
            
            -   勾选同意并**确认**后，显示离开提示，点击确认时调用龙腾接口，然后跳转至后端返回的龙腾免登地址。
                
            -   **点击取消：** 关闭授权提醒。
                
                ![](../../.resources/image-1776678775726.png)

**（2）信用卡权益（现有）**

通过营销提供的接口查询：若客户未达标，展示带解锁；若科目已达标，展示剩余可用次数（０次也展示）。

**（3）微信立减金（新增）**

底部固定展示微信立减金入口，点击跳转至微信立减金列表页面。

### 2.2 我的权益

展示顺序：先展示【商品来源为银行自有券码】（未过期），再展示【信用卡权益】，最后展示【商品来源为银行自有券码权益】（已失效）。

![](../../.resources/image-1776678841917.png)

**（1）券码权益（未过期）**

-   **列表字段**
    
    -   权益列表图标（取后台"权益列表图标"字段）
        
    -   权益名称（取后台"权益名称"字段）
        
    -   权益副标题（取后台"权益副标题"字段，为空则不展示）
        
-   **列表顺序**
    
    -   按照券码有效期，先到期先展示
        
-   **跳转链接**
    
    -   跳转订单详情页
        

**（2）信用卡权益**

通过营销提供的接口查询：若客户未达标，展示带解锁；若科目已达标，展示剩余可用次数（０次也展示）。

**（3）券码权益（已失效）**

-   **列表字段**
    
    -   权益列表图标（取后台"权益列表图标"字段）
        
    -   权益名称（取后台"权益名称"字段）
        
-   **列表顺序**
    
    -   按照券码有效期，最近到期先展示
        
    -   查询最近一年的到期订单
        
-   **跳转链接**
    
    -   跳转订单详情页
        

## 3\. 权益详情

> 仅商品来源=银行自有，以及商品来源=第三方且跳转触发页=权益详情页的权益会进入此页面。

**（1）详情页内容**

-   **权益主图：** 取后台"权益主图"字段
    
-   **权益名称：** 取后台"权益名称"字段，超出换行展示
    
-   **权益概述：** 取后台"权益概述"字段，富文本展示，图中卡片中权益名称下方内容
    
-   **权益详情：** 取后台"权益详情"字段，富文本展示，图中卡片下方的内容
    
-   **按钮：** 根据后台"领取规则"中的领取时间限制判断
    
    -   **开启了领取时间限制且未到领取开始时间：** 显示【未开始】，按钮无法点击
        
    -   **开启了领取时间限制且超过领取结束时间：** 显示【已失效】，按钮无法点击
        
    -   **其他：** 显示【领取权益】
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        ![](../../.resources/image-1776678923546.png)![](../../.resources/image-1776678942001.png)

**（2）领取权益**

点击【领取权益】按以下顺序校验领取规则：

**校验顺序：校验领取客群规则**

**规则校验失败提示：**

-   **领取客群不满足时：** 展示后台配置的不满足提示
    
    -   内容：取后台"领取客群限制-不满足提示-提示内容"
        
    -   按钮文案：取后台"领取客群限制-不满足提示-跳转按钮文案"
        
    -   按钮跳转：取后台"领取客群限制-不满足提示-跳转按钮链接"
        

**规则校验成功，处理逻辑分两种情况：**

**第一种：商品来源=银行自有**

领取成功提示：

-   **内容：** 尊敬的客户，您已成功领取权益
    
-   **按钮文案：** 取后台配置的"领取成功按钮文案"（默认值："马上去使用"）
    
-   **按钮跳转：** 跳转权益订单详情页
    

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

![](../../.resources/image-1776678975193.png)![](../../.resources/image-1776678985797.png)

**第二种：商品来源=第三方，跳转触发页=权益详情页**

根据后台配置的【外部商品链接】类型判断跳转交互：

-   **自定义：** 弹窗提示
    
    -   **标题：** 您正在离开汇丰中国
        
    -   **描述：** 请注意，外部网站的政策与我们网站的条款和条件以及隐私政策不同。将在新浏览器窗口或选项卡中打开下一个网站。
        
    -   **操作**
        
        -   **取消：** 关闭弹窗
            
        -   **继续前往：** 跳转后台配置的自定义链接
            
            ![](../../.resources/image-1776679010497.png)
-   **太古地产：** 点击后弹出授权提醒
    
    -   勾选同意并**确认**后，显示离开提示，点击确认时调用太古地产接口，然后跳转至后端返回的太古地产免登地址。
        
    -   **点击取消：** 关闭授权提醒。
        
        ![](../../.resources/image-1776679026345.png)
-   **龙腾：** 点击后弹出授权提醒
    
    -   勾选同意并**确认**后，显示离开提示，点击确认时调用龙腾接口，然后跳转至后端返回的龙腾免登地址。
        
    -   **点击取消：** 关闭授权提醒。
        
        ![](../../.resources/image-1776679039096.png)

## 4\. 权益订单详情

> 仅【券码】类型（商品来源=银行自有）领取成功后可进入此页面。

-   兑换卡号：默认为掩码状态，点击右侧复制按钮可复制
    
-   兑换密钥：默认为掩码状态，点击右侧复制按钮可复制
    
-   操作：
    
    -   隐藏：点击后兑换卡号和兑换密钥为掩码状态，卡号和密钥默认为掩码
        
    -   显示：点击后变成明文显示
        
-   使用按钮：按钮文案取后台配置的"领取成功按钮文案"（默认值："马上去使用"），点击跳转使用链接
    

![](../../.resources/image-1776679076106.png)

## 5\. 我的立减金

![](../../.resources/image-1776679101444.png)

逻辑：

-   查询到openid→调接口→领取成功
    
-   查询不到openid、接口失败异常情况：系统异常
    

（1）商品展示信息

-   权益图片：取后台"权益列表图标"字段
    
-   商品名称：取后台"权益名称"字段
    
-   副标题描述：取后台"权益副标题"字段
    
-   有效期：取SIP固定日期模式的有效期结束时间
    
-   按钮名称：根据3种状态分别展示
    
    -   未领取：立即领取，点击领取该微信立减金
        
    -   已领取：已领取，点击进入权益商品详情
        
    -   已过期：已过期，不可点击
        

今日到期：已领取状态下，有效期结束日 = 当前日。

（2）进入页面，默认展示客户名下所有 未领取、已领取、已过期的不同面值立减金。

-   未领取：客户有权益点 且 有效期结束时间 < 当前时间；
    
-   已领取：实质是客户的立减金订单，有效期结束时间 < 当前时间；
    
-   已过期：有效期结束时间 >= 当前时间。
    

（3）展示顺序按照：未领取->已领取->已过期

-   未领取：按照权益点有效期结束时间，先到期先展示；
    
-   已领取：按照权益下单时间，先下单先展示；
    
-   已过期：按照权益点有效期结束时间，先到期先展示。
    

（4）页面支持筛选不同状态的商品；不同筛选状态下，没有商品信息，则展示"暂无立减金"。

![](../../.resources/image-1776679143290.png)

（5）点击【点击领取】

① 调用行内接口，拿用户行内客户号查询用户openId。

② 调用SIP订单创建接口。若是立减金类型商品，下单必传openId。

③ SIP通过异步通知接口告诉商城下单成功。

④ 当 查询openId成功 且 异步通知成功后，则状态发生变化【点击领取】->【已领取】；否则页面toast提示"**系统异常，请联系客服人员**"。

⑤ 接口文档：[https://www.yuque.com/huadengchushang-eylqg/hfe0kc/wpsd1p?singleDoc#43731183](https://www.yuque.com/huadengchushang-eylqg/hfe0kc/wpsd1p?singleDoc#43731183) 密码：th38