订单（五）02-支付-删除已支付商品并跳转回购物车页面——wx.requestPayment-发起微信支付 wx.switchTab-跳转到导航页面 wx.setStorageSync-本地缓存_综合

支付-删除已经支付的商品并跳转回购物车页面——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个

在这里插入图片描述

购物车余未选中的-支付后删除相关商品

在这里插入图片描述