vue WeChat payment

VUE H5 JsAPI WeChat Pay

function display

    async pay() {
    
    
        let _this = this;
        //此处调后端接口查询到（appId，timeStamp，nonceStr，package，signType，paySign）
        let res = await payment(this.recordId);//recordId（自己项目中需要查询的id）
        if (res.code == 200) {
    
    
          let payData = res.details.chooseWXPay;
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
    
    ...payData },
            function (res) {
    
    
              if (res.err_msg == "get_brand_wcpay_request:ok") {
    
    
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              let a = setInterval(async() => {
    
    
               //后端查询支付状态
                  let m = await getPayStatus(_this.recordId)
                  if(m.code==200&&m.details.data==1){
    
    //状态为1的时候是支付成功所以再执行下面逻辑
                    clearInterval(a)
                   //此处为成功后的状态可以跳转页面等执行其他成功之后的业务逻辑
                  }
                }, 500);
              } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
    
    
                //用户支付过程取消
               
              } else if (res.err_msg == "get_brand_wcpay_request:fail") {
    
    
                //用户支付失败
              }
            }
          );
        }
      },