微信小程序实现押金管理(支付押金、申请退还押金、押金明细)
前言
本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点:
《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台,获得专属域名》
本案例,需要用户登录后才能操作,也就是说需要 token 授权,请先了解:
《微信小程序登录获取openid及三方token》
为方便测试,请先登录后台,“用户资产管理” 中给你的测试用户增加可用余额,继而可以完整体验支付押金流程:
《在现有小程序上增加资金模块(查看资产、查看资金流水)》
启用 “押金管理” 模块
登录 “第一步” 注册的后台,左侧菜单 --> 工厂设置 --> 模块管理
找到 “押金管理” 模块,点击 “启用模块” ,然后 F5 刷新一下后台界面,你将可以看到新的菜单: “押金管理” ;
功能介绍
- 使用场景有如共享单车、桶装水的空桶押金等等都可以使用本功能快速实现;
- 用户自主支付需要的押金,在后期可随时申请退回;
- 支付的押金以冻结资产的形式体现,用户的总资产不变;
小程序界面:
<button type="primary" bindtap="goRegist"> 注册 / 登录 </button>
<button type="warn" bindtap="depositList"> 读取所有的押金记录 </button>
<button type="warn" bindtap="payDeposit"> 支付押金 </button>
<button type="warn" bindtap="depositInfo"> 押金详情 </button>
<button type="warn" bindtap="depositBackApply"> 申请退还押金 </button>
小程序代码:
const WXAPI = require('apifm-wxapi')
WXAPI.init('gooking')Page({data: {},onLoad: function (options) {},onShow: function () {},goRegist() {wx.navigateTo({url: '/pages/auth/index'})},depositList() {const loginToken = wx.getStorageSync('loginToken')if (!loginToken) {wx.showToast({title: '请先登录',icon: 'none'})return}WXAPI.depositList({token: loginToken.token}).then(res => {console.log(res)if (res.code == 0) {wx.showToast({title: '读取成功',icon: 'success'})} else {wx.showToast({title: res.msg,icon: 'none'})}})},payDeposit() {const loginToken = wx.getStorageSync('loginToken')if (!loginToken) {wx.showToast({title: '请先登录',icon: 'none'})return}WXAPI.payDeposit({token: loginToken.token,amount: 98,remark: '测试'}).then(res => {console.log(res)if (res.code == 0) {wx.showToast({title: '支付成功',icon: 'success'})} else {wx.showToast({title: res.msg,icon: 'none'})}})},depositInfo() {const depositLogId = 23 // 读取押金记录中的押金IDconst loginToken = wx.getStorageSync('loginToken')if (!loginToken) {wx.showToast({title: '请先登录',icon: 'none'})return}WXAPI.depositInfo(loginToken.token, depositLogId).then(res => {console.log(res)if (res.code == 0) {wx.showToast({title: '读取成功',icon: 'success'})} else {wx.showToast({title: res.msg,icon: 'none'})}})},depositBackApply() {const depositLogId = 23 // 读取押金记录中的押金IDconst loginToken = wx.getStorageSync('loginToken')if (!loginToken) {wx.showToast({title: '请先登录',icon: 'none'})return}WXAPI.depositBackApply(loginToken.token, depositLogId).then(res => {console.log(res)if (res.code == 0) {wx.showToast({title: '申请成功,等待处理',icon: 'success'})} else {wx.showToast({title: res.msg,icon: 'none'})}})},
})
WXAPI.init('gooking') 这句代码是将你的小程序链接到你的后台,其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明);
完成!
押金的任何变动(设计到资金的变化)都会反应在资金明细中,你可以回顾以下章节,查看资金流水记录:
《在现有小程序上增加资金模块(查看资产、查看资金流水》
押金记录列表分页、更多筛选条件、支付押金时候提交更多的参数以及扩展属性使用,你可以查看下述接口文档:
《api接口文档》
不用后端编程,只要你有好的 idea ,就能快速实现!
期待你的进步!
感谢!
微信小程序实现押金管理(支付押金、申请退还押金、押金明细)相关推荐
- 基于微信小程序的相关管理系统设计与实现开题报告的思路及方法
今天主要谈一下计算机科学相关专业同学的选题的思路及方法. 毕业设计选题选没选好就像各位走出校园踏进社会的一道坎,跨过这道坎是很关键的,而有些同学却犯了难,把本应该简单的问题复杂化了.为什么这样讲呢?之 ...
- 微信小程序----全局状态管理 (便于全局埋点等操作)
说明 由于我是一个有着一颗玻璃心的博主,导致在2018年后博客很少更新.原因是由于我的分享并没有解决到部分人的问题,而导致被骂了.当时这颗玻璃心就碎了,所以这两年以来很是消极,博客很少更新.这里给那些 ...
- 微信小程序中使用JSAPI支付
微信小程序中使用JSAPI支付 在微信小程序中使用微信支付api[wx.requestPayment]需要传递以下字段 如何获取支付所需要的值 在微信小程序中使用微信支付api[wx.requestP ...
- 微信小程序服务商下子商户支付下单接口
微信小程序服务商下子商户支付下单流程 调用方法 <?php namespace app\index\controller; class WeixinPay extends Base { prot ...
- 微信小程序的考勤管理Demo,包括前后端及数据库等内容
这是一个微信小程序的考勤管理Demo,包括前后端及数据库等内容.如有错误或建议,欢迎指出. 前端:微信小程序框架 后端:koa框架基于express的新一代框架 文件:url80.ctfile.com ...
- 基于安卓/android/微信小程序的流动人口管理移动APP#计算机毕业设计
项目介绍 通过利用信息化管理技术对社区流动人口状况进行汇总分析,对流动人口数量.年龄结构.流动方向.经营情况.计划生育情况以及在本区分布情况.投资情况等数据进行系统分析,开发一套符合当地社区的流动人口 ...
- 微信小程序的路由管理
微信小程序的路由管理 有两种路由触发模式 可以通过标签的方式触发 在vue里的是: 在小程序里: (他的接收则是在另外一个页面的onload生命周期中接收) 可以通过编程式触发 在vue里呢:他是通过 ...
- 基于安卓/android/微信小程序的课堂管理助手系统(作业管理,在线点名,在线答疑)app-#计算机毕业设计
项目介绍 随着我国教育的发展和移动终端的不断普及.传统的课堂管理已经不能够满足当前快速发展的大学生的需要.为了能够与时俱进,我们通过安卓开发了本次基于手机的课堂管理助手.系统分为管理人员,学生和教师三 ...
- 微信小程序上线订单管理功能:实现订单管理、售后维权一体化
[TechWeb]3月13日消息,微信小程序正式上线订单管理功能,可支持用户统一查看小程序交易订单并进行管理. 如今在小程序"云逛街"早已成了微信用户的新潮流.为了方便用户对小程序 ...
- 基于微信小程序的宿舍管理平台
基于微信小程序的学生宿舍管理系统功能说明 小程序端:针对学生端的功能有每日签到,查看近七日和近30日的签到情况,并且统计学生应到次数,实际签到次数,缺勤次数的功能,还有查看公告,寝室设备报修,个人中心 ...
最新文章
- JQuery模拟网页中自定义鼠标右键菜单
- java 反射获取泛型,用反射获取Java中的泛型参数的类型
- Linq入门博客系列地址http://www.cnblogs.com/lifepoem/category/330218.html
- ALV列(Column)换到行(Row) 之 列上限不固定篇
- ZYNQ学习(1) —— 基础开发流程
- hbase 使用lzo_带你快速上手HBase | HBase列族优化
- 轻量级java web实践-6(框架源码-4)
- Freemarker输出$和html标签等特殊符号
- 【多目标优化求解】基于matlab粒子群算法求解智能微电网多目标优化问题【含Matlab源码 383期】
- visio2019怎么对图片加箭头标注,Visio设置图片作为背景
- STC系列51单片机延时程序汇总
- 拼多多API接口介绍
- Error 403 No valid crumb was included in the request 报错解决 容器化jenkins关闭CSRF
- 网上教务评教管理系统(教学评价系统)
- 双十一健身运动装备有哪些值得买?运动好物推荐分享
- APP爬虫开发环境准备
- gcc编译程序的过程
- 征途手机版服务器维护,征途手机版手游开服表_征途手机版手游开服时间表_新服新区预告_第一手游网...
- 【链表】Banana带你一起学链表,看了不吃亏,看了不上当!!!
- java身份证号码验证算法