update: 登录页面添加验证码

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

@@ -5,6 +5,23 @@
   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 {
+        height: 40px;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 720px) {
@@ -121,15 +138,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

@@ -14,6 +14,7 @@ import './app-login-extend.scss';
 interface LoginData {
   username: string;
   password: string;
+  verificationCode: string;
 }
 
 const rules = {
@@ -46,6 +47,7 @@ export default defineComponent({
     const loginData = reactive<LoginData>({
       username: '',
       password: '',
+      verificationCode: '',
     });
 
     const formRef = ref<IData | null>(null);
@@ -78,7 +80,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 +127,28 @@ export default defineComponent({
       await modal.onWillDismiss();
     };
 
+    const sendVerificationCode = () => {
+      const { username } = loginData;
+      ibiz.net
+        .post(`/v7/loginPwd/sendVerificationCode/${username}`, {})
+        .then((res: IData) => {
+          if (res.ok) {
+            ibiz.notification.success({
+              title: '获取验证码成功',
+            });
+          } else {
+            ibiz.notification.error({
+              title: res.data?.message || '获取验证码失败',
+            });
+          }
+        })
+        .catch((err: IData) => {
+          ibiz.notification.error({
+            title: (err as IData).response?.data?.message || '获取验证码失败',
+          });
+        });
+    };
+
     return () => (
       <div class={ns.b()}>
         <div class={ns.b('box')}>
@@ -165,6 +193,23 @@ 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 on-click={sendVerificationCode}>
+                    获取验证码
+                  </i-button>
+                </i-form-item>
                 <i-button type='text' on-click={onForget}>
                   忘记密码
                 </i-button>