小程序支付功能——前端部分

最新推荐文章于 2024-08-24 14:14:30 发布

Moses-233

最新推荐文章于 2024-08-24 14:14:30 发布

阅读量769

点赞数

文章标签：前端小程序 javascript

本文链接：https://blog.csdn.net/hmmmmm/article/details/124606524

版权

小程序支付功能

代码部分

先调用commit方法创建订单，创建成功后接口返回给我时间戳，appid，签名等信息，拿着这些信息去调用微信支付wx.requestPayment方法。成功走成功的回调，失败走失败的回调。

 async commit() {
    console.log(this.data);
    wx.showLoading({
      title: '请稍后...',
    })
    const obj = {
      url: 'pay/order',
      method: 'POST',
      data: {
        total: this.data.totalNum,
        goodsList: JSON.stringify(this.data.orderList),
        remark: this.data.remark
      }
    }
    const List = await HttpRequeat(obj).then(res => res)
    wx.hideLoading({
      success: (res) => {},
    })
    await this.pay(List.data)
  },
  async pay(List) {
    const {
      result
    } = List
    const _this = this
    wx.requestPayment({
      timeStamp: result.timeStamp,
      nonceStr: result.nonceStr,
      appId: result.appId,
      package: result.package,
      signType: 'MD5',
      paySign: result.paySign,
      success(res) {
        _this.setData({
          payState: true,
          witePayType: true
        })
        tui.toast('付款成功！', 2000, 'success')
        setTimeout(() => {
          wx.navigateTo({
            url: '../order/order',
          })
        }, 1000)
      },
      async fail(res) {
        tui.toast('付款失败！', 2000)
        _this.setData({
          payState: false,
          witePayType: true
        })
      }
    })
  },