登录初步

src/pages/login/index.module.scss

@@ -0,0 +1,73 @@
+.login-content {
+  width: 100%;
+  float: left;
+  height: 100vh;
+  background-color: #fff;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .title {
+    width: 120px;
+    height: auto;
+    font-size: 30px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 30px;
+    border-bottom: 4px solid #ff4d4f;
+    box-sizing: border-box;
+    padding-bottom: 10px;
+    margin: 0 auto;
+    margin-top: 100px;
+  }
+  .login-box {
+    width: 1200px;
+    height: 366px;
+    background: #ffffff;
+    display: flex;
+    margin: 0 auto;
+    margin-top: 80px;
+    .left-box {
+      width: 595px;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 33px 60px;
+      .icon {
+        width: 475px;
+        height: 300px;
+      }
+    }
+    .right-box {
+      width: 520px;
+      height: 100%;
+      box-sizing: border-box;
+      border-left: 1px solid #d8d8d8;
+      padding: 0px 60px;
+      display: flex;
+      flex-direction: column;
+      .captcha-box {
+        width: 125px;
+        height: 54px;
+        margin-left: 15px;
+        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;
+        }
+      }
+    }
+  }
+}

src/pages/login/index.tsx

@@ -1,40 +1,166 @@
-import { Button } from "antd";
+import { Spin, Input, Button, message } from "antd";
+import React, { useState, useEffect } from "react";
+import styles from "./index.module.scss";
+import banner from "../../assets/images/login/banner.png";
 import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
+import { login, system, user } from "../../api/index";
+import { setToken } from "../../utils/index";
+import { Footer, NoHeader } from "../../compenents";
 
-const LoginPage = () => {
+const LoginPage: React.FC = () => {
   const dispatch = useDispatch();
-  const loginState = useSelector((state: any) => {
-    return state.loginUser.value;
-  });
-  
-  return (
-    <>
-      <Button
-        onClick={() => {
-          dispatch(
-            loginAction({
-              user: {
-                name: "霸王",
-              },
-            })
-          );
-        }}
-      >
-        登录吧
-      </Button>
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [image, setImage] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [captchaVal, setCaptchaVal] = useState<string>("");
+  const [captchaKey, setCaptchaKey] = useState<string>("");
+  const [captchaLoading, setCaptchaLoading] = useState(true);
 
-      {loginState.isLogin && (
-        <Button
-          onClick={() => {
-            dispatch(logoutAction());
-          }}
-        >
-          {loginState.user.name}
-        </Button>
-      )}
-    </>
+  useEffect(() => {
+    fetchImageCaptcha();
+  }, []);
+
+  const fetchImageCaptcha = () => {
+    setCaptchaLoading(true);
+    system.imageCaptcha().then((res: any) => {
+      setImage(res.data.image);
+      setCaptchaKey(res.data.key);
+      setCaptchaLoading(false);
+    });
+  };
+
+  const loginSubmit = (e: any) => {
+    if (!email) {
+      message.error("请输入学员邮箱账号");
+      return;
+    }
+    if (!password) {
+      message.error("请输入密码");
+      return;
+    }
+    if (!captchaVal) {
+      message.error("请输入图形验证码");
+      return;
+    }
+    if (loading) {
+      return;
+    }
+    handleSubmit();
+  };
+
+  const keyUp = (e: any) => {
+    if (e.keyCode === 13) {
+      loginSubmit(e);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    login
+      .login(email, password, captchaKey, captchaVal)
+      .then((res: any) => {
+        const token = res.data.token;
+        setToken(token);
+        getUser();
+      })
+      .catch((e) => {
+        setLoading(false);
+        setCaptchaVal("");
+        fetchImageCaptcha();
+      });
+  };
+
+  const getUser = () => {
+    user.detail().then((res: any) => {
+      const data = res.data;
+      dispatch(logoutAction(data.user));
+      setLoading(false);
+      navigate("/");
+    });
+  };
+
+  return (
+    <div className={styles["login-content"]}>
+      <div className={styles["top-content"]}>
+        <NoHeader></NoHeader>
+        <div className={styles["title"]}>学员登录</div>
+        <div className={styles["login-box"]}>
+          <div className={styles["left-box"]}>
+            <img className={styles["icon"]} src={banner} alt="" />
+          </div>
+          <div className={styles["right-box"]}>
+            <div className="login-box d-flex">
+              <Input
+                value={email}
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                }}
+                style={{ width: 400, height: 54 }}
+                placeholder="请输入学员邮箱账号"
+                onKeyUp={(e) => keyUp(e)}
+              />
+            </div>
+            <div className="login-box d-flex mt-50">
+              <Input.Password
+                value={password}
+                onChange={(e) => {
+                  setPassword(e.target.value);
+                }}
+                style={{ width: 400, height: 54 }}
+                placeholder="请输入密码"
+              />
+            </div>
+            <div className="login-box d-flex mt-50">
+              <Input
+                value={captchaVal}
+                style={{ width: 260, height: 54 }}
+                placeholder="请输入图形验证码"
+                onChange={(e) => {
+                  setCaptchaVal(e.target.value);
+                }}
+                onKeyUp={(e) => keyUp(e)}
+              />
+              <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
+                style={{ width: 400, height: 54 }}
+                type="primary"
+                onClick={loginSubmit}
+                loading={loading}
+              >
+                立即登录
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles["footer"]}>
+        <Footer></Footer>
+      </div>
+    </div>
   );
 };
 
-export default LoginPage;
+export default LoginPage;