From 96b0d0f354d52c4316902171bc3f387e2276d0e2 Mon Sep 17 00:00:00 2001
From: none <none>
Date: Tue, 14 Mar 2023 15:01:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E5=BD=A2=E9=AA=8C=E8=AF=81=E7=A0=81?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/login/index.module.less | 27 ++++++++++++++----
 src/pages/login/index.tsx         | 47 ++++++++++++++++++++-----------
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/pages/login/index.module.less b/src/pages/login/index.module.less
index f7cb3f4..4b034a5 100644
--- a/src/pages/login/index.module.less
+++ b/src/pages/login/index.module.less
@@ -42,6 +42,7 @@
       padding: 50px 30px;
       display: flex;
       flex-direction: column;
+
       .title {
         width: 120px;
         height: auto;
@@ -53,16 +54,30 @@
         box-sizing: border-box;
         padding-bottom: 10px;
       }
-      .captcha {
+
+      .captcha-box {
         width: 125px;
         height: 54px;
         margin-left: 15px;
-        border: none;
-        cursor: pointer;
+        border-radius: 8px;
+        background-color: rgba(#ff4d4f, 0.1);
+        display: flex;
+
+        .catpcha-loading-box {
+          width: 125px;
+          height: 54px;
+          line-height: 54px;
+          text-align: center;
+        }
+
+        .captcha {
+          width: 125px;
+          height: 54px;
+          border: none;
+          cursor: pointer;
+          border-radius: 8px;
+        }
       }
     }
   }
 }
-
-
-
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 84fe6be..2e5a8fb 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -21,12 +21,16 @@ export const Login: React.FC = () => {
   const [image, setImage] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
-  const [captcha_val, setCaptcha_val] = useState<string>("");
-  const [captcha_key, setCaptcha_key] = useState<string>("");
-  const fetchData = () => {
+  const [captchaVal, setCaptchaVal] = useState<string>("");
+  const [captchaKey, setCaptchaKey] = useState<string>("");
+  const [captchaLoading, setCaptchaLoading] = useState(true);
+
+  const fetchImageCaptcha = () => {
+    setCaptchaLoading(true);
     system.getImageCaptcha().then((res: any) => {
       setImage(res.data.image);
-      setCaptcha_key(res.data.key);
+      setCaptchaKey(res.data.key);
+      setCaptchaLoading(false);
     });
   };
 
@@ -39,7 +43,7 @@ export const Login: React.FC = () => {
       message.error("请输入密码");
       return;
     }
-    if (!captcha_val) {
+    if (!captchaVal) {
       message.error("请输入图形验证码");
       return;
     }
@@ -55,7 +59,7 @@ export const Login: React.FC = () => {
     }
     setLoading(true);
     login
-      .login(email, password, captcha_key, captcha_val)
+      .login(email, password, captchaKey, captchaVal)
       .then((res: any) => {
         const token = res.data.token;
         setToken(token);
@@ -63,8 +67,8 @@ export const Login: React.FC = () => {
       })
       .catch((e) => {
         setLoading(false);
-        setCaptcha_val("");
-        fetchData();
+        setCaptchaVal("");
+        fetchImageCaptcha();
       });
   };
 
@@ -86,7 +90,7 @@ export const Login: React.FC = () => {
   };
 
   useEffect(() => {
-    fetchData();
+    fetchImageCaptcha();
   }, []);
 
   return (
@@ -123,20 +127,29 @@ export const Login: React.FC = () => {
           </div>
           <div className="d-flex mt-50">
             <Input
-              value={captcha_val}
+              value={captchaVal}
               style={{ width: 260, height: 54 }}
               placeholder="请输入图形验证码"
               onChange={(e) => {
-                setCaptcha_val(e.target.value);
+                setCaptchaVal(e.target.value);
               }}
               onKeyUp={(e) => keyUp(e)}
             />
-            <img
-              className={styles["captcha"]}
-              onClick={fetchData}
-              src={image}
-              alt=""
-            />
+            <div className={styles["captcha-box"]}>
+              {captchaLoading && (
+                <div className={styles["catpcha-loading-box"]}>
+                  <Spin size="small" />
+                </div>
+              )}
+
+              {!captchaLoading && (
+                <img
+                  className={styles["captcha"]}
+                  onClick={fetchImageCaptcha}
+                  src={image}
+                />
+              )}
+            </div>
           </div>
           <div className="login-box d-flex mt-50">
             <Button