From b4830ee0e27a430dd8749d4d8b4ee7025ffb69b7 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 28 Feb 2024 15:42:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=AA=8C=E8=AF=81=E7=A0=81=E5=80=92?=
 =?UTF-8?q?=E8=AE=A1=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/login/forgot-password/index.vue | 18 +++++++++++++++++-
 ui/src/views/login/register/index.vue        | 19 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/login/forgot-password/index.vue b/ui/src/views/login/forgot-password/index.vue
index 8592943b0..19355b67a 100644
--- a/ui/src/views/login/forgot-password/index.vue
+++ b/ui/src/views/login/forgot-password/index.vue
@@ -29,12 +29,15 @@
                 placeholder="请输入验证码"
               >
               </el-input>
+
               <el-button
+                :disabled="isDisabled"
                 size="large"
                 class="send-email-button ml-12"
                 @click="sendEmail"
                 :loading="loading"
-                >获取验证码</el-button
+              >
+                {{ isDisabled ? `重新发送（${time}s）` : '获取验证码' }}</el-button
               >
             </div>
           </el-form-item>
@@ -89,6 +92,8 @@ const rules = ref<FormRules<CheckCodeRequest>>({
   code: [{ required: true, message: '请输入验证码' }]
 })
 const loading = ref<boolean>(false)
+const isDisabled = ref<boolean>(false)
+const time = ref<number>(60)
 
 const checkCode = () => {
   resetPasswordFormRef.value
@@ -108,5 +113,16 @@ const sendEmail = () => {
     }
   })
 }
+const handleTimeChange = () => {
+  if (time.value <= 0) {
+    isDisabled.value = false
+    time.value = 60
+  } else {
+    setTimeout(() => {
+      time.value--
+      handleTimeChange()
+    }, 1000)
+  }
+}
 </script>
 <style lang="scss" scope></style>
diff --git a/ui/src/views/login/register/index.vue b/ui/src/views/login/register/index.vue
index ce1a449d0..e8bf7587b 100644
--- a/ui/src/views/login/register/index.vue
+++ b/ui/src/views/login/register/index.vue
@@ -62,11 +62,13 @@
               >
               </el-input>
               <el-button
+                :disabled="isDisabled"
                 size="large"
                 class="send-email-button ml-12"
                 @click="sendEmail"
                 :loading="sendEmailLoading"
-                >获取验证码</el-button
+              >
+                {{ isDisabled ? `重新发送（${time}s）` : '获取验证码' }}</el-button
               >
             </div>
           </el-form-item>
@@ -183,6 +185,8 @@ const register = () => {
     })
 }
 const sendEmailLoading = ref<boolean>(false)
+const isDisabled = ref<boolean>(false)
+const time = ref<number>(60)
 /**
  * 发送验证码
  */
@@ -191,9 +195,22 @@ const sendEmail = () => {
     if (v) {
       UserApi.sendEmit(registerForm.value.email, 'register', sendEmailLoading).then(() => {
         MsgSuccess('发送验证码成功')
+        isDisabled.value = true
+        handleTimeChange()
       })
     }
   })
 }
+const handleTimeChange = () => {
+  if (time.value <= 0) {
+    isDisabled.value = false
+    time.value = 60
+  } else {
+    setTimeout(() => {
+      time.value--
+      handleTimeChange()
+    }, 1000)
+  }
+}
 </script>
 <style lang="scss" scope></style>