支付-删除已经支付的商品并跳转回购物车页面——wx.requestPayment()-发起微信支付 & wx.switchTab()-跳转到 tabBar 页面 & wx.setStorageSync()-本地缓存
- 调用后台接口(我们自己平台的接口记录支付的交易数据)
request('my/orders/req_unifiedorder', 'post', {
order_number: this.orderNum
}, {
Authorization: token
}).then(res => {
// res用于微信支付API
// wx.requestPayment()
})
- 调用微信API完成支付(通过微信进行支付,需要调用小程序相关API完成扣款操作)
wx.requestPayment({
// 把pay对象中所有属性拆开放到这个位置
...message.pay,
success () {
// 这里只要执行,就证明微信支付已经成功
// 成功之后,跳回到购物车,还应该清空已经支付的商品信息
}
})
- 删除已经支付的商品并跳转回购物车页面
// 支付成功后触发
// 删除支付成功的商品
// let c = JSON.parse(JSON.stringify(this.cart))
for(let key in this.cart) {
if(this.cart[key].checked) {
// 支付过的商品,需要从购物车删除
delete this.cart[key]
}
}
// 删除cart数据后,重新把剩余数据写回到缓存
mpvue.setStorageSync('mycart', this.cart)
// 重新跳转到购物车页面
mpvue.navigateBack({
delta: 1
})
实例
引入封装的调用接口方法
import request from '../../utils/request.js'
支付方法
wx.requestPayment()-发起微信支付——https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html
wx.switchTab()-跳转到 tabBar 页面——https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
wx.setStorageSync()-本地缓存——https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html
methods: {
handlePay () {
// 进行支付
// 先调用电商的后台接口;再调用微信平台接口进行付款
let token = wx.getStorageSync('mytoken')
request('my/orders/req_unifiedorder', {
order_number: this.orderNumber
}, 'post', {
Authorization: token
}).then(res => {
//打印支付参数
//console.log(res)
// 获取支付相关参数,用于提供给小程序平台接口实现付款
let pay = res.pay
// 调用小程序API实现付款
wx.requestPayment({
// timeStamp: '',
// nonceStr: '',
// package: '',
// signType: 'MD5',
// paySign: '',
// ... 解构pay里面的数据,不用单独写5个参数,见微信小程序官方文档
...pay,
success: () => {
// 如果该函数触发,说明支付成功
//console.log('pay finished')
// 删除支付过的商品并同步到缓存,最后跳回到购物车页面
let cart = wx.getStorageSync('mycart')
for (let key in this.cart) {
//订单已经过滤 可直接删除
delete cart[key]
}
wx.setStorageSync('mycart', cart)
// 跳回到购物车页面
wx.switchTab({
url: '/pages/cart/main'
})
}
})
})
}
},
}
打印支付参数,查看订单
wx.requestPayment(0-生成打印微信支付-console.log('pay finished')
支付完成,回到order订单界面
选中2个
结算跳转后,支付完成,购物车只剩1个
购物车余未选中的-支付后删除相关商品