前言
本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点:
本案例,需要用户登录后才能操作,也就是说需要 token 授权,请先了解:
为方便测试,请先登录后台,“用户资产管理” 中给你的测试用户增加可用余额,继而可以完整体验支付押金流程:
启用 “押金管理” 模块
登录 “第一步” 注册的后台,左侧菜单 --> 工厂设置 --> 模块管理
找到 “押金管理” 模块,点击 “启用模块” ,然后 F5 刷新一下后台界面,你将可以看到新的菜单: “押金管理” ;
功能介绍
- 使用场景有如共享单车、桶装水的空桶押金等等都可以使用本功能快速实现;
- 用户自主支付需要的押金,在后期可随时申请退回;
- 支付的押金以冻结资产的形式体现,用户的总资产不变;
小程序界面:
1<button type="primary" bindtap="goRegist"> 注册 / 登录 </button> 2<button type="warn" bindtap="depositList"> 读取所有的押金记录 </button> 3<button type="warn" bindtap="payDeposit"> 支付押金 </button> 4<button type="warn" bindtap="depositInfo"> 押金详情 </button> 5<button type="warn" bindtap="depositBackApply"> 申请退还押金 </button>
小程序代码:
1const WXAPI = require('apifm-wxapi') 2WXAPI.init('gooking') 3 4Page({ 5 data: { 6 7 }, 8 onLoad: function (options) { 9 10 }, 11 onShow: function () { 12 13 }, 14 goRegist() { 15 wx.navigateTo({ 16 url: '/pages/auth/index' 17 }) 18 }, 19 depositList() { 20 const loginToken = wx.getStorageSync('loginToken') 21 if (!loginToken) { 22 wx.showToast({ 23 title: '请先登录', 24 icon: 'none' 25 }) 26 return 27 } 28 WXAPI.depositList({ 29 token: loginToken.token 30 }).then(res => { 31 console.log(res) 32 if (res.code == 0) { 33 wx.showToast({ 34 title: '读取成功', 35 icon: 'success' 36 }) 37 } else { 38 wx.showToast({ 39 title: res.msg, 40 icon: 'none' 41 }) 42 } 43 }) 44 }, 45 payDeposit() { 46 const loginToken = wx.getStorageSync('loginToken') 47 if (!loginToken) { 48 wx.showToast({ 49 title: '请先登录', 50 icon: 'none' 51 }) 52 return 53 } 54 WXAPI.payDeposit({ 55 token: loginToken.token, 56 amount: 98, 57 remark: '测试' 58 }).then(res => { 59 console.log(res) 60 if (res.code == 0) { 61 wx.showToast({ 62 title: '支付成功', 63 icon: 'success' 64 }) 65 } else { 66 wx.showToast({ 67 title: res.msg, 68 icon: 'none' 69 }) 70 } 71 }) 72 }, 73 depositInfo() { 74 const depositLogId = 23 // 读取押金记录中的押金ID 75 const loginToken = wx.getStorageSync('loginToken') 76 if (!loginToken) { 77 wx.showToast({ 78 title: '请先登录', 79 icon: 'none' 80 }) 81 return 82 } 83 WXAPI.depositInfo(loginToken.token, depositLogId).then(res => { 84 console.log(res) 85 if (res.code == 0) { 86 wx.showToast({ 87 title: '读取成功', 88 icon: 'success' 89 }) 90 } else { 91 wx.showToast({ 92 title: res.msg, 93 icon: 'none' 94 }) 95 } 96 }) 97 }, 98 depositBackApply() { 99 const depositLogId = 23 // 读取押金记录中的押金ID 100 const loginToken = wx.getStorageSync('loginToken') 101 if (!loginToken) { 102 wx.showToast({ 103 title: '请先登录', 104 icon: 'none' 105 }) 106 return 107 } 108 WXAPI.depositBackApply(loginToken.token, depositLogId).then(res => { 109 console.log(res) 110 if (res.code == 0) { 111 wx.showToast({ 112 title: '申请成功,等待处理', 113 icon: 'success' 114 }) 115 } else { 116 wx.showToast({ 117 title: res.msg, 118 icon: 'none' 119 }) 120 } 121 }) 122 }, 123})
WXAPI.init('gooking') 这句代码是将你的小程序链接到你的后台,其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明);
完成!
押金的任何变动(设计到资金的变化)都会反应在资金明细中,你可以回顾以下章节,查看资金流水记录:
押金记录列表分页、更多筛选条件、支付押金时候提交更多的参数以及扩展属性使用,你可以查看下述接口文档:
不用后端编程,只要你有好的 idea ,就能快速实现!
期待你的进步!
感谢!