短信倒计时

front-vue/src/views/service/credit/creditSeal.vue

@@ -159,13 +159,14 @@
             </div>
         </el-dialog>
         <!--短信-->
-        <el-dialog  :visible.sync="messageIsShow" width="600px"  append-to-body :before-close = "cancelMessage" center>
+        <el-dialog  :visible.sync="messageIsShow" width="800px"  append-to-body :before-close = "cancelMessage" center>
             <el-form ref="messageForm"  :disabled="false" :model="messageForm"  v-if="messageIsShow" label-width="150px"  class="demo-form-inline" :inline="true">
                     <el-form-item label="验证码" prop="validCode"> 
                         <el-input v-model="messageForm.validCode" style="width: 200px" maxlength="6"/>
                     </el-form-item>
                     <el-form-item> 
-                        <el-button type="success" @click="send">发送验证码</el-button>
+                        <el-button  v-show="show"  type="success" @click="send">点击获取验证码</el-button>
+                        <el-button v-show="!show" type="success" disabled><span>{{timer}}</span>秒后重新获取</el-button>
                     </el-form-item>
                     
             </el-form>
@@ -247,7 +248,10 @@ export default {
             //人脸验证结果
             faceResult:"",
             //人脸识别结果传参
-            authForm:{}
+            authForm:{},
+            //控制短信验证码倒计时是否展示
+            show:true,
+            timer:60
         };
     },
     activated() {
@@ -563,29 +567,41 @@ export default {
     },
     //发送短信验证码
     send(){
-        //发送
-        sendMessage().then((response) => {
-            if(response.data){
-                //手机号
-                var newIphone = response.data.newIphone;
-                //结果
-                var result = response.data.result;
-                //成功
-                if("20" == result){
-                     this.$message({
-                        message: "已向经办人手机号为"+newIphone+"发送短信验证码,请注意查收",
-                        type: 'warning'
-                    });
-                }else if("10" == result){//失败
-                    this.$message({
-                        message: "短信发送失败",
-                        type: 'warning'
-                    });
-                }
 
-            }
-        });
+            //发送
+            sendMessage().then((response) => {
+                if(response.data){
+                    //手机号
+                    var newIphone = response.data.newIphone;
+                    //结果
+                    var result = response.data.result;
+                    this.show = false;
+                    let auth_timer = window.setInterval(() => {
+                        this.show = false;
+                        setTimeout(() => {
+                                this.timer--;
+                                if(this.timer <= 0 ){
+                                    this.show = true;
+                                    clearInterval(auth_timer);
+                                }
+                            }, 0)
+                        },1000)
+                    //成功
+                    if("20" == result){
+                        this.$message({
+                            message: "已向经办人手机号为"+newIphone+"发送短信验证码,请注意查收",
+                            type: 'warning'
+                        });
+                    }else if("10" == result){//失败
+                        this.$message({
+                            message: "短信发送失败",
+                            type: 'warning'
+                        });
+                    }
 
+                }
+            });
+                
     },
     //校验验证码是否正确
     checkCode(){
@@ -618,6 +634,7 @@ export default {
     //盖章
     contractSigning(){
          contractSigning(this.form).then((response) => {
+             
                 this.msgSuccess("盖章成功");
                 if(this.zfpAuthType == '02'){
                     //关闭短信验证