vue项目中的支付功能实现(微信支付和支付宝支付)

  topay(){
      switch(this.radio){
        case '3':
        this.yuer();
        break;
        case '1':
        this.zhifubao();
        case '0':
        this.getWechatCode();
      }
    },
   zhifubao(){
     payByZhifubao(
       {
         OutTradeNo:'Oct20200909095646265303127',//商户订单号，商户网站订单系统中唯一订单号，必填 。需要保证商户端唯一。
          Subject: "手机网站支付测试",//主题
          ProductCode: "QUICK_WAP_WAY",
          body: "手机网站支付描述信息",//商品描述，可空
          TotalAmount: 20 //付款金额，必填        }
     ).then(res=>{
       console.log(res);
        if (res.code === 201) {
            //将数据存到vuex中
            // this.$store.dispatch('addAliFrom', res.data.data)
            this.html = res.data;
            var form = res.data;
            const div = document.createElement("div");
            div.innerHTML = form; //此处form就是后台返回接收到的数据
            document.body.appendChild(div);
            document.forms[0].submit();
            //return this.$router.push('/aliPay')
          } else {
            return alert(res.data.msg);
          }
     })
    },

<div id="wechatcode" v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
</div>

import QRCode from 'qrcodejs2' // 引入qrcode

getWechatCode() {
                Models
                    .getModel("wechatpay")
                    .get({
                        orderId:this.orderId
                    })
                    .then(res => {
                        if(res.data.code == 200){
                            this.wechatPayUrl = res.data.resultData
                            if(!this.flag){
                            //重点是这里，其余的是为了我的切换业务逻辑和接口
                                let wechatcode = new QRCode('wechatcode', {
                                    width: 200,
                                    height: 200,
                                    text: this.wechatPayUrl, // 二维码地址
                                    colorDark: "#000",
                                    colorLight: "#fff",
                                })
                            }
                            this.flag = true
                            this.loading = false
                            this.isWechatCodeShow = true
                        }
                    })
        },

mounted() {
        this.getWechatCode()
        //实现轮询
        this.interval = window.setInterval(() => {
        setTimeout(this.getOrderStatus(), 0);
        }, 3000);
        
    },
    beforeDestroy() {
        //清除轮询   
        clearInterval(this.interval)
        this.interval = null
    },