充值页面增加勾选协议显示二维码功能

src/permission.js

@@ -4,7 +4,7 @@ import { getToken, setToken } from '@/utils/auth' // getToken from cookie
 import { lockStatus,unlock } from "@/api/allApi";
 //路由跳转之前
 router.beforeEach((to, _from, next) => {
-  setToken('0a0d227cb2c9974a3b4a6b3f27b59d1c');
+  setToken('d556a5adebd262381203da96bbd9c67b');
   const path = to.path;
   const Authorization = to.query.Authorization
   if (path.indexOf('auth') != -1 && Authorization) { 

src/views/HomeView/RedeemView.vue

@@ -579,9 +579,9 @@ export default {
                 this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
                     this.handleQueryWxPayStatus(data.orderNo);
                 }, 1000);
-                this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
-                    this.handlePayWxQRcode();
-                }, 180000);
+                // this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
+                //     this.handlePayWxQRcode();
+                // }, 180000);
             })
         },
         handleQueryWxPayStatus(orderNo) {  // 查询微信支付状态
@@ -599,7 +599,11 @@ export default {
                     this.recharge = false;
                     clearInterval(this.timer);    // 清除定时器;   
                     clearInterval(this.timerPayWxQRcode);
+                }else{
+                    this.handlePayWxQRcode();
                 }
+            }).catch(err => {
+                console.log(err)
             })
         },
         // 清空二维码,避免生成多个二维码

src/views/Ipay.vue

@@ -53,8 +53,8 @@
             <div class="payBox-way">
               <div class="way-item">
                 <div class="item-left">
-                  <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 :class="{ 'gray': checked  ? false : true }" id="expCode" ref="expCodeRef"></div>
+                  <div v-if="!checked" class="grayText">请先阅读并同意相关协议再扫码支付</div>
                 </div>
                 <div class="item-right">
                   <div class="up">
@@ -66,7 +66,10 @@
                     <div class="textStyle">微信扫码支付</div>
                   </div>
                   <div class="down">
-                    <div>扫码支付代表已阅读并同意</div>
+                    <el-checkbox v-model="checked" style="margin-right: 5px;font-size: 16px;"></el-checkbox>
+                    <div>
+                      请阅读并同意
+                    </div>
                     <span style="color: #04498d;cursor: pointer;" @click="getHtmldata()">《充值协议》</span>
                   </div>
                 </div>
@@ -94,6 +97,7 @@ import { payList, getWxPayCode,queryWxPayStatus } from "@/api/pay";
 export default {
   data() {
     return {
+      checked:false,
       htmlData:'',
       dialogVisible: false,
       timerPayWxQRcode: null,
@@ -102,7 +106,7 @@ export default {
       money: undefined,
       integralMoney: undefined,
       visible: false,
-      selected: -2,
+      selected: 0,
       orderNo: undefined,
       rate:undefined,
       payList: [],
@@ -111,9 +115,10 @@ export default {
   },
   created() {
     this.getPayList();
-    this.$nextTick (function () {
-      this.qrcode(this.payUrl);
-    })
+    // this.$nextTick (function () {
+    //   this.handlePayWxQRcode()
+    //   this.qrcode(this.payUrl);
+    // })
   },
   methods: {
     getHtmldata(){
@@ -147,9 +152,9 @@ export default {
         this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
           this.handleQueryWxPayStatus(data.orderNo);
         }, 1000);
-        this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
-          this.handlePayWxQRcode();
-        }, 180000);
+        // this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
+        //   this.handlePayWxQRcode();
+        // }, 180000);
       }).catch(err => {
         this.fullscreenLoading = false;
         console.log(err)
@@ -168,6 +173,8 @@ export default {
           });
           clearInterval(this.timer);    // 清除定时器;   
           clearInterval(this.timerPayWxQRcode);
+        }else{
+          this.handlePayWxQRcode();
         }
       }).catch(err => {
         console.log(err)
@@ -198,6 +205,8 @@ export default {
       payList().then(response => {
         this.rate = response.data.data.rate;
         this.payList = response.data.data.items;
+        this.integralMoney = response.data.data.items[0].integralMoney;
+        this.handlePayWxQRcode();
       })
     },
   },
@@ -341,7 +350,15 @@ export default {
   border-radius: 6px;
   padding: 7px;
 }
-
+.item-left .grayText{
+  width: 100px;
+  position: absolute;
+  left: 50%;    
+	top:50%;      
+	transform:translate(-50%,-50%);
+  color: #fff;
+  text-align: center;
+}
 .item-right {
   margin-left: 12px;
 }