订单（五）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个

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