充值功能完成

src/permission.js

@@ -5,7 +5,6 @@ import { lockStatus,unlock } from "@/api/allApi";
 //路由跳转之前
 router.beforeEach((to, _from, next) => {
   // setToken('aad99e8f2a2997d2bdc2a9ac6c87ec8d');
-  setToken('59a8efd4d32e874869451ddc1c5d98ba');
   const path = to.path;
   const Authorization = to.query.Authorization
   if (path.indexOf('auth') != -1 && Authorization) { 

src/views/HomeView/RedeemView.vue

@@ -397,7 +397,7 @@
         <el-dialog title="物品详情" :visible.sync="dialogVisibleGoods" width="40%">
             <div v-html="data.skuDesc"></div>
         </el-dialog>
-        <el-dialog title="扫码充值" :visible.sync="recharge" width="40%">
+        <el-dialog title="扫码充值" :visible.sync="recharge" width="40%" :before-close="beforeClose">
             <div class="payBox-way">
                 <div class="way-item">
                     <div class="item-left">
@@ -445,9 +445,10 @@ export default {
             }
         };
         return {
+            timerPayWxQRcode:null,
             timer: null,
             //充值二维码
-            url: 'www.baidu.com',
+            payUrl: 'www.baidu.com',
             //充值弹窗
             recharge: false,
             //充值金额
@@ -556,23 +557,32 @@ export default {
         this.getCouponList(skuId);
     },
     methods: {
-        handlePayWxQRcode(row) {  // 获取微信支付二维码
+        beforeClose(done){
+            clearInterval(this.timer);
+            clearInterval(this.timerPayWxQRcode);
+            done();
+        },
+        handlePayWxQRcode() {  // 获取微信支付二维码
             getWxPayCode({    // 这里根据不同的后端接口去修改
                 integral: this.money*10,
                 totalFee: this.money,
             }).then(res => {
-                this.qrcode(res.data.payUrl);    // 例如：res.data.url 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
+                let data = res.data.data;
+                this.qrcode(data.payUrl);    // 例如：data.payUrl 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
                 this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
-                    this.handleQueryWxPayStatus(res.data.orderNo);
+                    this.handleQueryWxPayStatus(data.orderNo);
                 }, 1000);
+                this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
+                    this.handlePayWxQRcode();
+                }, 180000);
             })
         },
         handleQueryWxPayStatus(orderNo) {  // 查询微信支付状态
             queryWxPayStatus({    // 这里根据不同的后端接口去修改
                 orderNo: orderNo,
             }).then(res => {
-                if (res.data.tradeState == "SUCCESS") { 
-                    // 当查询到支付成功时
+                let data = res.data.data;
+                if (data != "订单未支付") {    // 当查询到支付成功时
                     this.$store.dispatch('GetUserInfo');   
                     this.$message({
                         type: 'success',
@@ -580,6 +590,7 @@ export default {
                     });
                     this.recharge = false;
                     clearInterval(this.timer);    // 清除定时器;   
+                    clearInterval(this.timerPayWxQRcode);
                 }
             })
         },
@@ -587,13 +598,13 @@ export default {
         delQrcode() {
             this.$refs.expCodeRef.innerHTML = ""
         },
-        // 前端根据 URL 生成微信支付二维码
-        qrcode(url) {
+        // 前端根据 payUrl 生成微信支付二维码
+        qrcode(payUrl) {
             this.delQrcode();
             return new QRCode('expCode', {
                 width: 150,
                 height: 150,
-                text: url,
+                text: payUrl,
                 colorDark: '#000',
                 colorLight: '#fff'
             });
@@ -633,7 +644,7 @@ export default {
                         this.recharge = true;
                         this.$nextTick(function () {
                             this.handlePayWxQRcode();
-                            // this.qrcode(this.url);
+                            // this.qrcode(this.payUrl);
                         })
 
                     }).catch(() => { });

src/views/Ipay.vue

@@ -53,12 +53,13 @@
             <div class="payBox-way">
               <div class="way-item">
                 <div class="item-left">
-                  <div id="expCode" ref="expCodeRef"></div>
+                  <div :class="{ 'gray': integralMoney  ? false : true }" id="expCode" ref="expCodeRef"></div>
+                  <div v-if="!integralMoney" style="position: absolute;top: 70px;left: 30px;color: #fff;">请先选择套餐</div>
                 </div>
                 <div class="item-right">
                   <div class="up">
                     <div>应付金额</div>
-                    <div style="color: #fe2c55;margin-left: 8px;">¥ {{ integralMoney }}</div>
+                    <div style="color: #fe2c55;margin-left: 8px;">¥ {{ integralMoney ? integralMoney : '--' }}</div>
                   </div>
                   <div class="center">
                     <img style="height: 18px;" src="../assets/icon/weixinPay.png" alt="weixinpay">
@@ -83,6 +84,7 @@ import { payList, getWxPayCode,queryWxPayStatus } from "@/api/pay";
 export default {
   data() {
     return {
+      timerPayWxQRcode: null,
       timer: null,
       fullscreenLoading: false,
       money: undefined,
@@ -91,64 +93,27 @@ export default {
       selected: -2,
       orderNo: undefined,
       rate:undefined,
-      payList: [
-        {
-          id: 1,
-          integral: "10",
-          integralMoney: 1,
-        },
-        {
-          id: 2,
-          integral: "50",
-          integralMoney: 5,
-        },
-        {
-          id: 3,
-          integral: "100",
-          integralMoney: 10,
-        },
-        {
-          id: 1,
-          integral: "10",
-          integralMoney: 1,
-        },
-        {
-          id: 2,
-          integral: "50",
-          integralMoney: 5,
-        },
-        {
-          id: 3,
-          integral: "100",
-          integralMoney: 10,
-        },
-        {
-          id: 1,
-          integral: "10",
-          integralMoney: 1,
-        },
-      ],
-      url:'www.baidu.com'
+      payList: [],
+      payUrl:'https://dgtmall.dgtis.com/mall'
     };
   },
   created() {
     this.getPayList();
-    // this.$nextTick (function () {
-    //   this.handlePayWxQRcode()
-    //   // this.qrcode(this.url);
-    // })
+    this.$nextTick (function () {
+      this.qrcode(this.payUrl);
+    })
   },
   methods: {
     // 清空二维码,避免生成多个二维码
     delQrcode() {
             this.$refs.expCodeRef.innerHTML = ""
         },
-    qrcode(url) {  // 前端根据 URL 生成微信支付二维码
+    qrcode(payUrl) {  // 前端根据 payUrl 生成微信支付二维码
       this.delQrcode();
       return new QRCode('expCode', {
         width: 150,
         height: 150,
-        text: url,
+        text: payUrl,
         colorDark: '#000',
         colorLight: '#fff'
       });
@@ -158,24 +123,36 @@ export default {
         integral: this.integralMoney*this.rate,
         totalFee: this.integralMoney*1,
       }).then(res => {
+        let data = res.data.data;
         this.fullscreenLoading = false;
-        this.qrcode(res.data.payUrl);    // 例如：res.data.url 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
+        this.qrcode(data.payUrl);    // 例如：data.payUrl 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
         this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
-          this.handleQueryWxPayStatus(res.data.orderNo);
+          this.handleQueryWxPayStatus(data.orderNo);
         }, 1000);
+        this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
+          this.handlePayWxQRcode();
+        }, 180000);
+      }).catch(err => {
+        this.fullscreenLoading = false;
+        console.log(err)
       })
     },
     handleQueryWxPayStatus(orderNo) {  // 查询微信支付状态
       queryWxPayStatus({    // 这里根据不同的后端接口去修改
         orderNo: orderNo,
       }).then(res => {
-        if (res.data.tradeState == "SUCCESS") {    // 当查询到支付成功时
+        let data = res.data.data;
+        if (data != "订单未支付") {    // 当查询到支付成功时
+          this.$store.dispatch('GetUserInfo'); 
           this.$message({
             type: 'success',
             message: '支付成功！'
           });
           clearInterval(this.timer);    // 清除定时器;   
+          clearInterval(this.timerPayWxQRcode);
         }
+      }).catch(err => {
+        console.log(err)
       })
     },
     cancel() {
@@ -184,28 +161,23 @@ export default {
     },
     confirm() {
       clearInterval(this.timer);
+      clearInterval(this.timerPayWxQRcode);
       this.visible = false;
       this.integralMoney = this.money;
       this.fullscreenLoading = true;
       this.handlePayWxQRcode()
-      // setTimeout(() => {
-      //   this.fullscreenLoading = false;
-      // }, 2000);
     },
     changePay(integralMoney, index) {
       clearInterval(this.timer);
+      clearInterval(this.timerPayWxQRcode);
       this.money = '';
       this.selected = index;
       this.integralMoney = integralMoney;
       this.fullscreenLoading = true;
       this.handlePayWxQRcode()
-      // setTimeout(() => {
-      //   this.fullscreenLoading = false;
-      // }, 2000);
     },
     getPayList() {
       payList().then(response => {
-        console.log(response.data.data);
         this.rate = response.data.data.rate;
         this.payList = response.data.data.items;
       })
@@ -213,13 +185,14 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.timer);
+    clearInterval(this.timerPayWxQRcode);
   }
 
 }
 </script>
 <style scoped>
 .gray {
-  filter: grayscale(100%);
+  filter: blur(4px);
 }
 
 .container {