From 04c3fb3851a9c990c69b63b131acd92042b74e7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Thu, 2 Mar 2023 17:22:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=88=9D?=
 =?UTF-8?q?=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts                   |   3 +-
 src/api/login.ts                   |   2 +-
 src/api/system.ts                  |  10 +++
 src/pages/home/HomePage.module.css |   2 +
 src/pages/login/Login.module.css   |  22 +++++
 src/pages/login/Login.tsx          | 134 ++++++++++++++++++++++++++++-
 src/store/store.ts                 |   1 +
 src/utils/index.css                |   6 ++
 8 files changed, 175 insertions(+), 5 deletions(-)
 create mode 100644 src/api/system.ts

diff --git a/src/api/index.ts b/src/api/index.ts
index b224c91..1d6729e 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,3 +1,4 @@
 import * as login from "./login";
+import * as system from "./system";
 
-export {login}
+export { login, system };
diff --git a/src/api/login.ts b/src/api/login.ts
index ba3c0d3..fdf002e 100644
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -10,7 +10,7 @@ export function login(
     email: email,
     password: password,
     captcha_key: captchaKey,
-    captcha_val: captchaVal,
+    captcha_value: captchaVal,
   });
 }
 
diff --git a/src/api/system.ts b/src/api/system.ts
new file mode 100644
index 0000000..d038bb1
--- /dev/null
+++ b/src/api/system.ts
@@ -0,0 +1,10 @@
+import client from "./internal/httpClient";
+
+export function getImageCaptcha() {
+  return client.get("/backend/v1/system/image-captcha", {});
+}
+
+export function getUser() {
+    return client.get("/backend/v1/auth/detail", {});
+  }
+
diff --git a/src/pages/home/HomePage.module.css b/src/pages/home/HomePage.module.css
index 42bbe50..dd6ded8 100644
--- a/src/pages/home/HomePage.module.css
+++ b/src/pages/home/HomePage.module.css
@@ -26,3 +26,5 @@
   overflow-y: auto;
   background-color: #f1f2f9;
 }
+
+
diff --git a/src/pages/login/Login.module.css b/src/pages/login/Login.module.css
index e69de29..3882405 100644
--- a/src/pages/login/Login.module.css
+++ b/src/pages/login/Login.module.css
@@ -0,0 +1,22 @@
+.login-content {
+  width: 100%;
+  float: left;
+  height: 100%;
+  background-color: #fff;
+}
+
+.login-box {
+  width: 1200px;
+  height: 500px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 150px;
+}
+
+.captcha {
+  width: 120px;
+  height: 48px;
+  margin-left: 10px;
+  cursor: pointer;
+  cursor: pointer;
+}
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index 0269fff..f585b4f 100644
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -1,6 +1,134 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./Login.module.css";
+import { Typography, Spin, Input, Button, message } from "antd";
+import { login, system } from "../../api/index";
+import { setToken } from "../../utils/index";
 
-export const Login: React.FC = () => {
-  return <h1>登录页面</h1>;
+export const Login: React.FC = (defaultState) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [captchaList, setCourse] = useState<any>(null);
+  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 = () => {
+    setLoading(true);
+    system.getImageCaptcha().then((res: any) => {
+      setCourse(res.data);
+      setCaptcha_key(res.data.key);
+      setLoading(false);
+    });
+  };
+
+  const loginSubmit = (e: any) => {
+    if (!email) {
+      message.error("请输入账号");
+      return;
+    }
+    if (!password) {
+      message.error("请输入密码号");
+      return;
+    }
+    if (!captcha_val) {
+      message.error("请输入图片验证码");
+      return;
+    }
+    if (loading) {
+      return;
+    }
+    handleSubmit();
+  };
+
+  const handleSubmit = () => {
+    setLoading(true);
+    login
+      .login(email, password, captcha_key, captcha_val)
+      .then((res: any) => {
+        const token = res.data.token;
+        setToken(token);
+        setLoading(false);
+        getUser();
+      })
+      .catch((e) => {
+        setLoading(false);
+        setCaptcha_val("");
+        fetchData();
+      });
+  };
+
+  const getUser = () => {
+    system.getUser().then((res) => {
+      console.log(res);
+    });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  if (loading) {
+    return (
+      <Spin
+        size="large"
+        style={{
+          marginTop: 200,
+          marginBottom: 200,
+          marginLeft: "auto",
+          marginRight: "auto",
+          width: "100%",
+        }}
+      />
+    );
+  }
+  return (
+    <div className={styles["login-content"]}>
+      <div className={styles["login-box"]}>
+        <div className="float-left c-flex">
+          <div className="d-flex mr-24">
+            <Typography.Title>登录后台</Typography.Title>
+          </div>
+          <div className="d-flex mb-24">
+            <Input
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+              }}
+              style={{ width: 300 }}
+              placeholder="请输入账号"
+            />
+          </div>
+          <div className="d-flex mb-24">
+            <Input.Password
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+              }}
+              style={{ width: 300 }}
+              placeholder="请输入密码"
+            />
+          </div>
+          <div className="d-flex mb-24">
+            <Input
+              value={captcha_val}
+              style={{ width: 160 }}
+              placeholder="请输入验证码"
+              onChange={(e) => {
+                setCaptcha_val(e.target.value);
+              }}
+            />
+            <img
+              className={styles["captcha"]}
+              onClick={fetchData}
+              src={captchaList.image}
+              alt=""
+            />
+          </div>
+          <div className="d-flex">
+            <Button type="primary" danger onClick={loginSubmit}>
+              登录
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
diff --git a/src/store/store.ts b/src/store/store.ts
index 5161dcf..002253e 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,3 +1,4 @@
+
 import { createStore } from "redux";
 interface IAction {
   type: string;
diff --git a/src/utils/index.css b/src/utils/index.css
index f498231..bb4c22e 100644
--- a/src/utils/index.css
+++ b/src/utils/index.css
@@ -79,6 +79,12 @@
   justify-content: space-between;
 }
 
+.c-flex {
+  display: flex;
+  flex-direction: column;
+ align-items: center;
+}
+
 .primary {
   color: #ff4d4f;
 }