From 038cc41aa0197ff5af2441f11e645c5630e6dbc7 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Tue, 15 Sep 2020 19:52:26 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/register.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/pages/register.vue b/pages/register.vue
index 01f14b3..54db929 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -20,7 +20,7 @@
         </el-form-item>
         <el-form-item label="验证码" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
           <el-input v-model="user.code" maxlength="6" autocomplete="off">
-            <el-button type="email" size="small" slot="append" @click="sendCode">发送验证码</el-button>
+            <el-button type="email" size="small" slot="append" @click="sendCode" :loading="loading">{{loadText}}</el-button>
           </el-input>
         </el-form-item>
         <el-form-item>
@@ -50,12 +50,16 @@
           code: '',
           password: '',
           confirmPassword: ''
-        }
+        },
+        loading: false,
+        loadText: '发送验证码',
+        timeClock: null
       }
     },
     methods: {
       sendCode() {
         let _ts = this;
+        _ts.timerHandler();
         let email = _ts.user.email;
         if (!email) {
           return false
@@ -73,6 +77,20 @@
           console.log(error)
         })
       },
+      timerHandler() {
+        let _ts = this;
+        _ts.$set(_ts, 'loading', true);
+        let times = 60;
+        _ts.timeClock = setInterval(function (){
+          times --;
+          _ts.$set(_ts, 'loadText', times + 's');
+          if (times == 0) {
+            clearInterval(_ts.timeClock);
+            _ts.$set(_ts, 'loading', false);
+            _ts.$set(_ts, 'loadText', '发送验证码');
+          }
+        },1000)
+      },
       register() {
         let _ts = this;
         _ts.$refs.user.validate((valid) => {