feat: 验证码倒计时

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>

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>