From a58ccd18a8b69a093277b0dda6d7f376d71bd0f1 Mon Sep 17 00:00:00 2001
From: zchengo <1933757688@qq.com>
Date: Fri, 2 Dec 2022 22:00:23 +0800
Subject: [PATCH] perf: get verifycode button

---
 web/src/views/Home.vue     | 16 ++++++++++++++--
 web/src/views/Pass.vue     | 11 ++++++++++-
 web/src/views/Register.vue | 11 ++++++++++-
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 5f264e6..9be2779 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -70,7 +70,8 @@
             </a-form-item>
             <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
               <a-input v-model:value="user.code" size="large" style="width: 55%;" placeholder="验证码" />
-              <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :disabled="disabled">
+              <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading"
+                :disabled="disabled">
                 {{ buttonText }}</a-button>
             </a-form-item>
             <a-form-item name="newEmail" :rules="[{ required: true, message: '请输入新邮箱!' }]">
@@ -87,7 +88,8 @@
             </a-form-item>
             <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
               <a-input v-model:value="user.code" size="large" style="width: 55%;" placeholder="验证码" />
-              <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :disabled="disabled">
+              <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading"
+                :disabled="disabled">
                 {{ buttonText }}</a-button>
             </a-form-item>
           </a-form>
@@ -176,6 +178,7 @@ export default {
     const visible = ref(false)
     const visibleLogo = ref(false)
     const delUserVisible = ref(false)
+    const loading = ref(false)
     const disabled = ref(false)
     const buttonText = ref('获取验证码')
 
@@ -225,15 +228,22 @@ export default {
     const onGetCode = () => {
       if (user.email == '') {
         message.warn('邮箱不能为空')
+        return
       }
+      loading.value = true
       let param = {
         email: user.email
       }
       getVerifyCode(param).then((res) => {
         if (res.data.code == 0) {
+          loading.value = false
           disabled.value = true
           buttonText.value = '验证码已发送'
         }
+        if (res.data.code == 10004) {
+          loading.value = false
+          message.error('验证码发送失败')
+        }
       })
     }
 
@@ -265,6 +275,7 @@ export default {
 
     // 点击取消按钮
     const onCancel = () => {
+      disabled.value = false
       modalFormRef.value.resetFields()
       visible.value = false
       delUserVisible.value = false
@@ -278,6 +289,7 @@ export default {
       visible,
       visibleLogo,
       delUserVisible,
+      loading,
       disabled,
       buttonText,
       userInfo,
diff --git a/web/src/views/Pass.vue b/web/src/views/Pass.vue
index e9e6a8e..795fa9b 100644
--- a/web/src/views/Pass.vue
+++ b/web/src/views/Pass.vue
@@ -5,7 +5,7 @@
         </a-form-item>
         <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
             <a-input v-model:value="formData.code" size="large" style="width: 55%;" placeholder="验证码" />
-            <a-button @click="onGetCode" size="large" :disabled="disabled" style="width: 40%;float: right;">
+            <a-button @click="onGetCode" size="large" :disabled="disabled" :loading="loading" style="width: 40%;float: right;">
                 {{ buttonText }}</a-button>
         </a-form-item>
         <a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]">
@@ -39,6 +39,7 @@ export default {
             password2: '',
         });
 
+        const loading = ref(false)
         const disabled = ref(false)
         const buttonText = ref('获取验证码')
 
@@ -63,15 +64,22 @@ export default {
         const onGetCode = () => {
             if (formData.email == '') {
                 message.warn('邮箱不能为空')
+                return
             }
+            loading.value = true
             let param = {
                 email: formData.email
             }
             getVerifyCode(param).then((res) => {
                 if (res.data.code == 0) {
+                    loading.value = false
                     disabled.value = true
                     buttonText.value = '验证码已发送'
                 }
+                if (res.data.code == 10004) {
+                    loading.value = false
+                    message.error('验证码发送失败')
+                }
             })
         }
 
@@ -82,6 +90,7 @@ export default {
 
         return {
             formData,
+            loading,
             disabled,
             buttonText,
             onSubmit,
diff --git a/web/src/views/Register.vue b/web/src/views/Register.vue
index 9f43b8c..8eda381 100644
--- a/web/src/views/Register.vue
+++ b/web/src/views/Register.vue
@@ -6,7 +6,7 @@
         </a-form-item>
         <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
             <a-input v-model:value="formData.code" size="large" style="width: 55%;" placeholder="验证码" />
-            <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :disabled="disabled">
+            <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading" :disabled="disabled">
                 {{ buttonText }}</a-button>
         </a-form-item>
         <a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]">
@@ -40,6 +40,7 @@ export default {
             password2: '',
         });
 
+        const loading = ref(false)
         const disabled = ref(false)
         const buttonText = ref('获取验证码')
 
@@ -71,15 +72,22 @@ export default {
         const onGetCode = () => {
             if (formData.email == '') {
                 message.warn('邮箱不能为空')
+                return
             }
+            loading.value = true
             let param = {
                 email: formData.email
             }
             getVerifyCode(param).then((res) => {
                 if (res.data.code == 0) {
+                    loading.value = false
                     disabled.value = true
                     buttonText.value = '验证码已发送'
                 }
+                if (res.data.code == 10004) {
+                    loading.value = false
+                    message.error('验证码发送失败')
+                }
             })
         }
 
@@ -90,6 +98,7 @@ export default {
 
         return {
             formData,
+            loading,
             disabled,
             buttonText,
             onRegister,