update: 添加验证码倒计时

app_Web/src/components/common/forget-password/forget-password.tsx

+/* eslint-disable no-plusplus */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { defineComponent, PropType, reactive, ref } from 'vue';
+import { defineComponent, PropType, reactive, Ref, ref } from 'vue';
 import { useNamespace } from '@ibiz-template/vue-util';
 import './forget-password.scss';
 
@@ -98,11 +99,35 @@ export const ForgetPassword = defineComponent({
 
     const loading = ref(false);
 
+    const timer: Ref<ReturnType<typeof setInterval> | null> = ref(null);
+
+    const countdown = ref(0);
+
+    const standCountdown = () => {
+      countdown.value = 60;
+      timer.value = setInterval(() => {
+        if (countdown.value > 1) {
+          countdown.value--;
+        } else if (timer.value) {
+          countdown.value--;
+          clearInterval(timer.value);
+          timer.value = null;
+        }
+      }, 1000);
+    };
+
     const sendVerificationCode = () => {
       const { loginName } = userData;
+      if (!loginName) {
+        ibiz.notification.warning({
+          title: '请先输入账号',
+        });
+        return;
+      }
       ibiz.net
         .post(`/v7/forgetPwd/sendVerificationCode/${loginName}`, {})
         .then((res: IData) => {
+          standCountdown();
           if (res.ok) {
             ibiz.notification.success({
               title: '获取验证码成功',
@@ -114,6 +139,7 @@ export const ForgetPassword = defineComponent({
           }
         })
         .catch((err: IData) => {
+          standCountdown();
           ibiz.notification.error({
             title: (err as IData).response?.data?.message || '获取验证码失败',
           });
@@ -196,7 +222,15 @@ export const ForgetPassword = defineComponent({
                 }}
                 placeholder='请输入验证码'
               ></i-input>
-              <i-button on-click={sendVerificationCode}>获取验证码</i-button>
+              <i-button
+                class={ns.is('disabled', !!timer.value)}
+                disabled={!!timer.value}
+                on-click={sendVerificationCode}
+              >
+                {countdown.value > 0
+                  ? `${countdown.value}秒后重发`
+                  : '获取验证码'}
+              </i-button>
             </i-form-item>
             <i-form-item prop='newPwd'>
               <i-input

app_Web/src/components/login-view/app-login-extend/app-login-extend.scss

@@ -128,6 +128,12 @@
       background: #337ecc;
       border-color: #337ecc;
     }
+
+    &.is-disabled {
+      background-color: #E5E8EC;
+      border-color: #E5E8EC;
+      color: #B3BBC6;
+    }
   }
 
   .ivu-input-wrapper-large {

app_Web/src/components/login-view/app-login-extend/app-login-extend.tsx

+/* eslint-disable no-plusplus */
 import { CoreConst } from '@ibiz-template/core';
 import {
   defineComponent,
   getCurrentInstance,
   onMounted,
   reactive,
+  Ref,
   ref,
 } from 'vue';
 import { clearCookie, setCookie } from 'qx-util';
@@ -66,6 +68,10 @@ export default defineComponent({
     ibiz.appData = undefined;
     ibiz.orgData = undefined;
 
+    const timer: Ref<ReturnType<typeof setInterval> | null> = ref(null);
+
+    const countdown = ref(0);
+
     onMounted(() => {
       setTimeout(() => {
         const el = document.querySelector('.app-loading-x') as HTMLDivElement;
@@ -134,6 +140,19 @@ export default defineComponent({
       await modal.onWillDismiss();
     };
 
+    const standCountdown = () => {
+      countdown.value = 60;
+      timer.value = setInterval(() => {
+        if (countdown.value > 1) {
+          countdown.value--;
+        } else if (timer.value) {
+          countdown.value--;
+          clearInterval(timer.value);
+          timer.value = null;
+        }
+      }, 1000);
+    };
+
     const sendVerificationCode = () => {
       const { username } = loginData;
       if (!username) {
@@ -145,6 +164,7 @@ export default defineComponent({
       ibiz.net
         .post(`/v7/loginPwd/sendVerificationCode/${username}`, {})
         .then((res: IData) => {
+          standCountdown();
           if (res.ok) {
             ibiz.notification.success({
               title: '获取验证码成功',
@@ -156,6 +176,7 @@ export default defineComponent({
           }
         })
         .catch((err: IData) => {
+          standCountdown();
           ibiz.notification.error({
             title: (err as IData).response?.data?.message || '获取验证码失败',
           });
@@ -219,8 +240,14 @@ export default defineComponent({
                     }}
                     placeholder='请输入验证码'
                   ></i-input>
-                  <i-button on-click={sendVerificationCode}>
-                    获取验证码
+                  <i-button
+                    class={ns.is('disabled', !!timer.value)}
+                    disabled={!!timer.value}
+                    on-click={sendVerificationCode}
+                  >
+                    {countdown.value > 0
+                      ? `${countdown.value}秒后重发`
+                      : '获取验证码'}
                   </i-button>
                 </i-form-item>
                 <i-button type='text' on-click={onForget}>