|
|
@@ -1,20 +1,22 @@
|
|
|
import styles from "./index.module.scss";
|
|
|
|
|
|
import { Input, Button } from "antd";
|
|
|
-import { UserOutlined, LockOutlined } from "@ant-design/icons";
|
|
|
-import { useState } from "react";
|
|
|
+import { UserOutlined, LockOutlined, NumberOutlined } from "@ant-design/icons";
|
|
|
+import { useCallback, useEffect, useState } from "react";
|
|
|
import { Base64 } from "js-base64";
|
|
|
import encodeStr from "@/utils/pass";
|
|
|
import { setTokenInfo } from "@/utils/storage";
|
|
|
import history from "@/utils/history";
|
|
|
import { MessageFu } from "@/utils/message";
|
|
|
-import { userLoginAPI } from "@/store/action/layout";
|
|
|
+import { API_LoginGetCode, userLoginAPI } from "@/store/action/layout";
|
|
|
import loginLogoImg from "@/assets/img/logo.png";
|
|
|
|
|
|
export default function Login() {
|
|
|
// 账号密码
|
|
|
const [userName, setUserName] = useState("");
|
|
|
const [passWord, setPassWord] = useState("");
|
|
|
+ const [code, setCode] = useState<any>("");
|
|
|
+ const [codeImg, setCodeImg] = useState<any>("");
|
|
|
|
|
|
// 键盘按下回车事件
|
|
|
const keyUpEntFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
|
@@ -25,9 +27,11 @@ export default function Login() {
|
|
|
// 非空判断
|
|
|
if (userName === "") return MessageFu.warning("请输入账号!");
|
|
|
else if (passWord === "") return MessageFu.warning("请输入密码!");
|
|
|
+ else if (code === "") return MessageFu.warning("请输入验证码!");
|
|
|
const obj = {
|
|
|
userName,
|
|
|
passWord: encodeStr(Base64.encode(passWord)),
|
|
|
+ randCode: code,
|
|
|
};
|
|
|
const res: any = await userLoginAPI(obj);
|
|
|
if (res.code === 0) {
|
|
|
@@ -37,8 +41,23 @@ export default function Login() {
|
|
|
history.push("/");
|
|
|
} else if (res.code === 3014)
|
|
|
MessageFu.warning("账号不存在或密码错误，请联系管理员!");
|
|
|
+ LoginGetCodeFu();
|
|
|
};
|
|
|
|
|
|
+ // 获取验证码
|
|
|
+ const LoginGetCodeFu = useCallback(async () => {
|
|
|
+ const res: any = await API_LoginGetCode();
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.readAsDataURL(res);
|
|
|
+ reader.onload = () => {
|
|
|
+ setCodeImg(reader.result);
|
|
|
+ };
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ LoginGetCodeFu();
|
|
|
+ }, [LoginGetCodeFu]);
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.Login}>
|
|
|
<div className="main">
|
|
|
@@ -66,6 +85,24 @@ export default function Login() {
|
|
|
maxLength={15}
|
|
|
/>
|
|
|
</div>
|
|
|
+ <div className="inputBoxRow inputBoxRow2">
|
|
|
+ <Input
|
|
|
+ onKeyUp={(e) => keyUpEntFu(e)}
|
|
|
+ value={code}
|
|
|
+ onChange={(e) => setCode(e.target.value.trim())}
|
|
|
+ prefix={<NumberOutlined rev={undefined} />}
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ maxLength={5}
|
|
|
+ />
|
|
|
+ {codeImg ? (
|
|
|
+ <img
|
|
|
+ onClick={LoginGetCodeFu}
|
|
|
+ className="loginCode"
|
|
|
+ src={codeImg}
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
{/* 登录按钮 */}
|
chenlei