钉钉移动端银行经理新增与二维码功能开发复盘
- 1. 需求概述
- 2. 整体流程
- 2.1 时序图
- 2.2 流程图
- 3. 方案演进
- 3.1 初期方案：弹窗显示二维码（❌ 失败）
- 3.2 最终方案：独立页面（✅ 成功）
- 4. 核心代码解析
- 4.1 数据流对比
- 4.3 二维码页关键代码 (qrcode.vue)
- 5. 路由配置 (routes.js)
- 6. 踩坑记录
- 7. 文件结构
- 8. 总结
1. 需求概述
在钉钉移动端（Wap端）的活动管理模块中，实现"银行经理"管理功能：
列表展示（姓名、手机号、绑定状态）
新增银行经理（姓名、手机号、身份证后六位、银行网点）
二维码生成（供经理扫码绑定）
2. 整体流程
2.1 时序图
2.2 流程图
3. 方案演进
3.1 初期方案：弹窗显示二维码（❌ 失败）
思路：在列表页使用 van-dialog 或 z-action 的弹窗模式直接展示二维码。
问题：
z-action 的 slot 在移动端渲染不稳定
二维码库 (qrcode.min.js) 动态加载失败
后端接口返回的链接在弹窗关闭时丢失
3.2 最终方案：独立页面（✅ 成功）
思路：将二维码展示拆分为独立页面，通过路由跳转。
优势：
页面生命周期完整可控
复用 PC 端成熟的组件逻辑
调试和维护更简单
4. 核心代码解析
4.1 数据流对比
4.2 列表页关键代码 (list.vue)
<template><!--导航栏集成新增按钮--><van-nav-bar title="银行经理列表"><template #right><z-action mode="drawer"title="新增"url="/do/put/bank_manager":data="{ activityId }":fields="formFields"@finish="onAddSuccess"><van-button size="small"type="primary">新增</van-button></z-action></template></van-nav-bar><!--列表--><z-list ref="list"url="/do/select/bank_manager":params="{ activityId }"><template #row="item"><van-cell:title="item.title":label="item.phone"><template #value><van-tag:type="item.isBind ? 'success' : 'warning'">{{item.isBind?'已绑定':''}}</van-tag><van-button v-if="!item.isBind"size="mini"@click="goQrcode(item)">二维码</van-button></template></van-cell></template></z-list></template><script>exportdefault{data(){return{activityId:this.$route.query.activityId,formFields:[{name:'activityId',type:'hidden'},{label:'姓名',name:'title',type:'input',rules:[{required:true}]},{label:'手机号',name:'phone',type:'input',rules:[{required:true}]},{label:'身份证后六位',name:'idCard',type:'input'},{label:'银行网点',name:'bankBranch',type:'textarea'}]}},methods:{onAddSuccess(){this.$refs.list.refresh();// 仅刷新，不跳转},goQrcode(manager){// 关键：存储完整对象到 sessionStoragesessionStorage.setItem('qrManager',JSON.stringify(manager));this.$router.push({path:'/pages/bankManager/qrcode',query:{id:manager.id}});}}}</script>4.3 二维码页关键代码 (qrcode.vue)
<template><van-nav-bar title="扫码绑定"left-arrow@click-left="goBack"/><z-block url="/api/activity/createQr":params="params"><template #default="data"><z-copy label="复制链接":value="data"/><z-qr:value="data"height="200px"width="200px"/><div>二维码有效期十分钟</div></template></z-block><van-button@click="refresh">刷新二维码</van-button></template><script>exportdefault{data(){// 从 sessionStorage 恢复数据constmanagerStr=sessionStorage.getItem('qrManager');constmanager=managerStr?JSON.parse(managerStr):{id:this.$route.query.id};return{params:manager};},methods:{goBack(){this.$router.back();},refresh(){constmanagerStr=sessionStorage.getItem('qrManager');constmanager=managerStr?JSON.parse(managerStr):{id:this.$route.query.id};this.params={...manager,temp:Date.now()};// temp 触发重新请求}}}</script>5. 路由配置 (routes.js)
// 银行经理模块{path:'/pages/bankManager/list',name:'BankManagerList',component:()=>import('./bankManager/list.vue'),meta:{title:'银行经理列表'}},{path:'/pages/bankManager/qrcode',name:'BankManagerQrcode',component:()=>import('./bankManager/qrcode.vue'),meta:{title:'扫码绑定'}}6. 踩坑记录
7. 文件结构
wap/
├── public/
│ └── lib/
│ └── qrcode.min.js # 二维码依赖库（从PC端复制）
└── src/
└── pages/
├── bankManager/
│ ├── list.vue # 银行经理列表页
│ └── qrcode.vue # 二维码展示页
├── routes.js # 路由配置
└── welcome/
└── welcome.vue # 活动列表页（增加入口按钮）
8. 总结
通过将复杂的弹窗逻辑拆分为独立页面，并复用 PC 端成熟的组件（z-block、z-qr、z-copy），大幅降低了开发复杂度。
核心经验：
跨页面传值：使用 sessionStorage 传递复杂对象
复用优先：优先使用已有组件，避免重复造轮子
渐进式调试：遇到问题时，先简化场景（弹窗→独立页面）
参考 PC 端：移动端功能优先参考 PC 端成熟实现
