订单(五)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个

在这里插入图片描述

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

在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页