记录vue项目微信支付！！！（扫描二维码支付）

相比较微信的其他方式支付扫描二维码支付算是比较便捷的，记录下我做这个的步骤

一、首先有一个生成订单的按钮，点击按钮调用后台接口生成一个订单ID

btnZhiFuClick(){
    let self = this;
    let obj = { //生成订单这里 后台要什么传什么就行
        stuId:*******,
        token:*******,
        courseId:******,
        unitId:*******,
        currency:******,
        originalPrice:*****
    }
    this.$http.post(this.$api.******.******, this.$qs.stringify(obj))
    .then(res=>{
        if(res.status == '200'){
            self.orderId = res.data //拿到后台返回的订单ID后保存到全局变量中 或者 传到调用微信的方法里 this.weixincode() //调用微信支付方法
        },
　　}
}

二、调用微信支付方法

 weixincode(){
     let self = this
     this.$http.get(this.$api.*****.*****,{
         params:{ //同上 看后台需要什么
             description: *****,
             orderId: *****,
             orderTotal: 0.01* 100, //微信要乘以100
             orderType:*****,
         }
     }) 
     .then(res=>{ 
　　　　　　self.datacode = res.data //后台传过来的是一串code，用这个来生成二维码
          this.init() //调用一个生成二维码的方法
　　　}
}

三、生成二维码

//这里的样式就不记录了，看实际情况自己加上
<div v-show="boxShow" @click="ShowClick">
     <div id="qrcode" ref="qrcode"></div>
     　　<p>扫描二维码支付</p>
     </div>
</div>

　import QRCode from 'qrcodejs2' //页面中引入第三方生成二维码工具  下载地址  npm install qrcodejs2 --save

init(){ 
    document.getElementById("qrcode").innerHTML = ""; //获取生成二维码后显示的容器的ID
    let self = this
    this.qrCode = new QRCode('qrcode',{
        width:150,                     //二维码的宽度
        height:150,                    //二维码的高度
        text:self.datacode,            //调用weixincode()方法时后台传的code
        colorDark:'#000',              //二维码颜色
        colorLight:'#fff',             //二维码底色
    })

     self.getOrderstate() //生成二维码的时候调用监听支付是否成功的方法

},

四、前面三步完事后正常情况下就应该可以生成出来一个二维码了，而且用手机测的话应该已经可以支付，还没完呢，用这个方法还有一个功能没有完善，那就是用户支付完并没有跳转，这样用户也不知道什么情况，所以我们继续

// 调用一个判断支付是否成功的接口，用这个接口我们监听微信是否支付成功
getOrderstate(){
    let self = this;
    let num = 0
    self.timers = setInterval(()=>{ //创建一个全局的定时器
        num ++ 
        let obj = {
            token:self.******,
            orderId:self.orderId.data, //后台用的是订单判断
        }
        this.$http.post(this.$api.****.****, this.$qs.stringify(obj))
        .then(res=>{
            if(res.data.data == true){ //判断 如果data.data==true就是订单支付成功 this.$router.push({
                    path: '/pintuanchenggong', //成功以后的跳转路径
                })
                clearInterval(this.timers) //别忘记关闭定时器，否则会一直调这个接口
            }
        })
        if(num == 500){ //这里是判断num++到500的情况下用户还没有支付则自动关闭定时器和二维码 this.boxShow = false
            clearInterval(this.timers)
        }
　　 },1500)
},

// 还有一步是最容易被忽略的 跳转页面的时候也应该关闭定时器

　beforeDestroy() {

      if(this.timers) {

           clearInterval(this.timers); //关闭

      }  

 }

 

// 用这个方法监听定时器是否关闭，跳转页面时触发，步骤还是挺繁琐的，不过还是顺利解决