【实习】银行经理端线下领取扫码功能实现方案

银行经理端线下领取扫码功能实现方案

- 需求描述
- 提出的修改
- - 后端
  - - [ $NEW$ makeLink 方法 - BankActivity.java](#[NEW] makeLink 方法 - BankActivity.java)
  - 前端
  - - [ $MODIFY$ $taskList.vue$ ](#[MODIFY] [taskList.vue])
- 实现细节
- 验证计划

需求描述

当任务的 storeType === 1（线下领取）时，银行经理点击"扫码领取"按钮，展示二维码给客户扫描领取奖励。

提出的修改

后端

$NEW$ makeLink 方法 - BankActivity.java

在 BankActivity.java 中新增 makeLink 方法：

java 复制代码

/**
 * 生成任务页面对外链接（用于线下领取二维码）
 */
public ZenResult makeLink(ZenData data) {
    String id = data.getId();            // 页面ID (restrict.pageId)
    String channel = data.get("channel"); // 渠道
    String title = data.get("title");     // 标题
    
    // 渠道映射
    String page = channel;
    if ("wxmini".equals(channel)) page = "wx";
    if ("checkinmini".equals(channel)) page = "checkin";
    
    // 生成链接
    String url = ConfigKit.get("frontDomain") + page + "?id=" + id;
    
    // 附加标题参数
    if (StringKit.isNotEmpty(title)) {
        title = StringKit.encrypt(title);
        url += "&_tl_=" + title;
    }
    
    return ZenResult.success().setData(url);
}

前端

$MODIFY$ $taskList.vue$

(file:///d:/workcode/interact_bank/vue/src/pages/activeInfo/blocks/taskList.vue)

1. 添加"扫码领取"按钮和弹窗

java 复制代码

<!-- 线下领取二维码按钮 (storeType === 1) -->
<van-cell v-if="data.storeType && data.storeType === 1">
  <z-action size="small" label="扫码领取" @click.stop="showQrCode(data)">
    <template #default>
      <z-block 
        url="/api/bankActivity/makeLink" 
        :params="{ 
          id: currentTask && currentTask.restrict && currentTask.restrict.pageId,
          channel: 'wechat',
          title: currentTask && currentTask.title 
        }"
        :interval="3000"
      >
        <template #default="{ data: linkUrl }">
          <div style="text-align: center; padding: 20px;">
            <div style="margin-bottom: 10px; font-weight: bold;">客户扫码领取奖励</div>
            <z-qr :value="linkUrl" width="200px" height="200px" />
            <div style="margin-top: 10px; color: #999; font-size: 12px;">二维码每3秒自动刷新</div>
          </div>
        </template>
      </z-block>
    </template>
  </z-action>
</van-cell>

2. 添加状态变量和方法

javascript 复制代码

data() {
  return {
    // ... 现有属性
    currentTask: null,  // 当前选中的任务
  }
},
methods: {
  showQrCode(data) {
    this.currentTask = data
  }
}

实现细节

步骤	说明
1	后端创建 `/api/bankActivity/makeLink` 接口
2	前端添加"扫码领取"按钮（模仿"扫码核销"）
3	使用 `z-block` + `interval=3000` 轮询接口
4	使用 `z-qr` 显示二维码

验证计划

创建一个 storeType = 1 的任务
确认任务显示"扫码领取"按钮
点击按钮，确认弹出二维码
确认二维码每3秒刷新
扫描二维码验证跳转目标页面