前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台，获得专属域名》

本案例，需要用户登录后才能操作，也就是说需要 token 授权，请先了解：

《微信小程序登录获取openid及三方token》

为方便测试，请先登录后台，“用户资产管理” 中给你的测试用户增加可用余额，继而可以完整体验支付押金流程：

《在现有小程序上增加资金模块(查看资产、查看资金流水)》

启用 “押金管理” 模块

登录 “第一步” 注册的后台，左侧菜单 —> 工厂设置 —> 模块管理

找到 “押金管理” 模块，点击 “启用模块” ，然后 F5 刷新一下后台界面，你将可以看到新的菜单： “押金管理” ；

押金管理 - 图1

功能介绍

  1. 使用场景有如共享单车、桶装水的空桶押金等等都可以使用本功能快速实现；
  2. 用户自主支付需要的押金，在后期可随时申请退回；
  3. 支付的押金以冻结资产的形式体现，用户的总资产不变；

小程序界面：

押金管理 - 图2

  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>

小程序代码：

  1. const WXAPI = require('apifm-wxapi')
  2. WXAPI.init('gooking')
  4. Page({
  5.   data: {
  7.   },
  8.   onLoad: function (options) {
  10.   },
  11.   onShow: function () {
  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 这个是你的专属域名(请查看前言中关于专属域名的章节说明)；

完成！

押金的任何变动（设计到资金的变化）都会反应在资金明细中，你可以回顾以下章节，查看资金流水记录：

《在现有小程序上增加资金模块(查看资产、查看资金流水》

押金记录列表分页、更多筛选条件、支付押金时候提交更多的参数以及扩展属性使用，你可以查看下述接口文档：

《api接口文档》

不用后端编程，只要你有好的 idea ，就能快速实现！

期待你的进步！
感谢！