支付页面完善

src/views/pay/index.vue

@@ -26,11 +26,11 @@
           <el-form-item label="短信验证码:" prop="captcha">
             <div class="fx-row">
               <el-input class="mr30" v-model="form.captcha"></el-input>
-              <el-button type="plain" @click="getCode">{{ captchaBtnText }}</el-button>
+              <el-button type="plain" @click="getCode" :disabled="disabled">{{ captchaBtnText }}</el-button>
             </div>
           </el-form-item>
           <el-form-item >
-              <el-button type="primary" @click="validate">购买</el-button>
+              <el-button type="primary" @click="validate" >购买</el-button>
           </el-form-item>
         </el-col>
       </el-row>
@@ -75,6 +75,8 @@ export default {
         captcha:''
       },
       captchaBtnText: '免费获取',
+      disabled:false,
+      spaceTime: 60,
       cardActive:{},
       cardList:[],
     }
@@ -91,6 +93,19 @@ export default {
             if(res.code == 200) {
               this.$message.success('发送成功,请在手机上查收')
               // 成功60秒不让点击
+              this.disabled = true
+              this.captchaBtnText = `(${this.spaceTime}秒)免费获取`
+              let clock = window.setInterval(() => {
+                this.spaceTime--
+                this.captchaBtnText = `(${this.spaceTime}秒)免费获取`
+                if (this.spaceTime < 0) {
+                  window.clearInterval(clock)
+                  this.captchaBtnText = '免费获取'
+                  this.totalTime = 60
+                  this.disabled = false
+                }
+              }, 1000)
+
             }
           })
         }