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

@@ -5,6 +5,29 @@
   width: 100vw;
   height: 100vh;
   background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+
+  @include e(verification) {
+    .ivu-form-item-content {
+      display: flex;
+    }
+    .ivu-form-item-content .ivu-btn.ivu-btn-default {
+      margin-left: 20px;
+      margin-top: 0;
+    }
+    .ivu-input-type-number {
+      height: 40px;
+      line-height: 40px;
+      .ivu-input {
+        -moz-appearance: textfield;
+        height: 40px;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 720px) {
@@ -105,6 +128,12 @@
       background: #337ecc;
       border-color: #337ecc;
     }
+
+    &.is-disabled {
+      background-color: #E5E8EC;
+      border-color: #E5E8EC;
+      color: #B3BBC6;
+    }
   }
 
   .ivu-input-wrapper-large {
@@ -121,15 +150,15 @@
 
   .ivu-form {
     position: relative;
-    &>.ivu-btn {
+    & > .ivu-btn {
       position: absolute;
       right: 0;
       bottom: 44px;
       color: getCssVar(color, primary);
       box-shadow: none;
     }
-    &>.ivu-btn:hover {
-      background-color: transparent
+    & > .ivu-btn:hover {
+      background-color: transparent;
     }
   }
 }

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';
@@ -14,6 +16,7 @@ import './app-login-extend.scss';
 interface LoginData {
   username: string;
   password: string;
+  verificationCode: string;
 }
 
 const rules = {
@@ -37,6 +40,13 @@ const rules = {
       trigger: 'blur',
     },
   ],
+  verificationCode: [
+    {
+      required: true,
+      message: '请输入验证码',
+      trigger: 'blur',
+    },
+  ],
 };
 
 export default defineComponent({
@@ -46,6 +56,7 @@ export default defineComponent({
     const loginData = reactive<LoginData>({
       username: '',
       password: '',
+      verificationCode: '',
     });
 
     const formRef = ref<IData | null>(null);
@@ -57,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;
@@ -78,7 +93,11 @@ export default defineComponent({
             if ((ibiz.env as IData).enableSM3) {
               password = ibiz.util.text.sm3(password).toUpperCase();
             }
-            const res = await ibiz.auth.v7login(loginData.username, password);
+            const res = await ibiz.net.post('/v7/loginPwd', {
+              loginname: loginData.username,
+              password,
+              verificationcode: loginData.verificationCode,
+            });
             if (res.ok) {
               const { data } = res;
               if (data && data.token) {
@@ -121,6 +140,49 @@ 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) {
+        ibiz.notification.warning({
+          title: '请先输入账号',
+        });
+        return;
+      }
+      ibiz.net
+        .post(`/v7/loginPwd/sendVerificationCode/${username}`, {})
+        .then((res: IData) => {
+          standCountdown();
+          if (res.ok) {
+            ibiz.notification.success({
+              title: '获取验证码成功',
+            });
+          } else {
+            ibiz.notification.error({
+              title: res.data?.message || '获取验证码失败',
+            });
+          }
+        })
+        .catch((err: IData) => {
+          standCountdown();
+          ibiz.notification.error({
+            title: (err as IData).response?.data?.message || '获取验证码失败',
+          });
+        });
+    };
+
     return () => (
       <div class={ns.b()}>
         <div class={ns.b('box')}>
@@ -165,6 +227,29 @@ export default defineComponent({
                     <i-icon type='ios-unlock' slot='prefix'></i-icon>
                   </i-input>
                 </i-form-item>
+                <i-form-item
+                  prop='verificationCode'
+                  class={ns.e('verification')}
+                >
+                  <i-input
+                    type='number'
+                    value={loginData.verificationCode}
+                    on-on-change={(evt: InputEvent) => {
+                      const { value } = evt.target as HTMLInputElement;
+                      loginData.verificationCode = value;
+                    }}
+                    placeholder='请输入验证码'
+                  ></i-input>
+                  <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}>
                   忘记密码
                 </i-button>