聚扫扫_系统开发案例-程序员客栈

技术信息

语言技术
Android、iOS、Vue、ElementUI、uniapp系统类型
Android应用、iOS应用、Web行业分类
金融

作品详情

行业场景

聚扫扫是基于 uni-app 的双端码牌支付服务管理平台，面向商户与代理商两大角色独立设计 App，业务、权限、风格完全隔离；配套推出的「聚扫扫管理端」则进一步在后台补齐并强化 App 内被简化的功能，为代理商提供一站式、高效率的业务运营与管理中心

功能介绍

1、子平台/渠道/商户/终端全生命周期管理
2、政策模板一键划拨与召回
3、交易、财务、对账、风控实时可视化
4、H5 收银台聚合微信/支付宝扫码收付款
5、canvas 动态拼接二维码海报分享
6、天地图定位自动回显地址

项目实现

1、前后端分离：Vue2 + WebPack 独立打包，Axios/luch-request 统一拦截鉴权
2、双端复用：uni-app 单仓库输出 iOS/Android，商户/代理两套 pages 与 store 严格隔离
3、权限模型：后端返回 RBAC 按钮级资源树，前端递归生成动态路由与侧边栏
4、组件下沉：抽离 uView/Ele 业务组件至私有 npm，版本锁定，多端样式保持一致
5、数据缓存：Vuex + 持久化插件，列表页 5 min 内返回即读缓存，减少 30% 请求
6、构建优化：分包加载 + 图片压缩 + ECharts 按需引入，vendor 体积从 1.8 MB 降至 780 KB
难点
1、划拨链路状态同步：代理后台批量操作后需秒级通知 App，用 WebSocket + 本地 diff 保证数据一致
2、canvas 海报多端兼容：安卓 10 圆角裁切失效，采用离屏 canvas 2d 重写绘制顺序解决
3、精度计算：分润涉及 6 位小数，numberPrecision 封装安全加减，避免 0.1+0.2≠0.3 导致账务误差
4、大型列表性能：商户列表 5k+ 数据，mixin+虚拟滚动，首次渲染时间从 1.2 s 降至 280 ms