記錄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); //關閉

      }  

 }

 

// 用這個方法監聽定時器是否關閉，跳轉頁面時觸發，步驟還是挺繁瑣的，不過還是順利解決