Vue中h5调起微信支付

我这里使用的是vant插件
<template>
  <div>
    <van-button class="payBtn" slot="button" size="normal" type="primary" :disabled="isDisabledSubmitBtn" @click="handelPay">{{textConfig.payBtnText}}</van-button>
  </div>
</template>

<script>
  import {
    paymentSubmit
  } from "../../api/industry"; //根据路径引入后端接口(注意检查路径是否正确)
  export default {
    name: ‘payment‘,
    data() {
      return {
        isDisabledSubmitBtn:true, //按钮是否禁用
        money:null //金额
      }
    },
    created() {
 
    },
    methods: {
      handelPay() {
        let params={
          money:this.money
        } //根据后端所需传参数
        this.isDisabledSubmitBtn=true //防止用户点击多次
        paymentSubmit(params).then(res => {
            this.weChatParameter=res
            this.weixinPay()
        });
      },
      //解决微信内置对象报错
      weixinPay(params){
        var that= this;
        if (typeof WeixinJSBridge == "undefined"){
          if( document.addEventListener ){
            document.addEventListener(‘WeixinJSBridgeReady‘, that.onBridgeReady(params), false);
          }else if (document.attachEvent){
            document.attachEvent(‘WeixinJSBridgeReady‘, that.onBridgeReady(params));
            document.attachEvent(‘onWeixinJSBridgeReady‘,that.onBridgeReady(params));
          }
        }else{
          that.onBridgeReady();
        }
      },
        //微信内置浏览器类,weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
        onBridgeReady(){
          var  that = this;
          var timestamp=Math.round(that.weChatParameter.timeStamp).toString();
          WeixinJSBridge.invoke(
            ‘getBrandWCPayRequest‘,{
              debug:false,
              "appId":that.weChatParameter.appId,     //公众号名称,由商户传入
              "timeStamp":timestamp, //时间戳,自1970年以来的秒数
              "nonceStr":that.weChatParameter.nonceStr, //随机串
              "package":that.weChatParameter.package,
              "signType":that.weChatParameter.signType, //微信签名方式:
              "paySign":that.weChatParameter.paySign, //微信签名
              jsApiList: [
                ‘chooseWXPay‘
              ]
            },
            function(res){
              // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
              if(res.err_msg == "get_brand_wcpay_request:ok" ){ //支付成功后的操作
                 that.$toast({
                  message: ‘支付成功’,
                  duration: 2000
                });
                that.isDisabledSubmitBtn=true
              }else if(res.err_msg==‘get_brand_wcpay_request:cancel‘){ //取消支付的操作
                 that.$toast({
                  message: ‘取消支付’,
                  duration: 2000
                });
                that.isDisabledSubmitBtn=false //按钮恢复高亮
              }else{ //支付失败的操作
                 that.$toast({
                  message: ‘支付失败’,
                  duration: 2000
                });
                that.isDisabledSubmitBtn=false //按钮恢复高亮
              }
            }
          );
        }
    }
  }
</script>
<style scoped>
.payBtn {
  border: none;
  width: 70%;
  border-radius: 5px;
  font-size: 16px;
  height: 44px;
 line-height: .44rem;
  background-color:#11415F;
}
</style>

在api中定义industry.js文件

//支付接口
export const paymentSubmit = (params={}) => {
  return request({
    url:‘后端支付接口’,
    method: post,
    params: params
  })
}

 

Vue中h5调起微信支付

上一篇:border-image设置图片边框


下一篇:新春