yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-06-20 13:02:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitee.com/playeduxyz/backend into dev

Browse Source
This commit is contained in:
禺狨 2023-03-14 15:17:43 +08:00
commit f7797ce3ce
2 changed files with 51 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/login/index.module.less
View File

@ -42,6 +42,7 @@
padding: 50px 30px; padding: 50px 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.title { .title {
width: 120px; width: 120px;
height: auto; height: auto;
@ -53,16 +54,30 @@
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 10px; padding-bottom: 10px;
} }
.captcha {
.captcha-box {
width: 125px; width: 125px;
height: 54px; height: 54px;
margin-left: 15px; margin-left: 15px;
border: none; border-radius: 8px;
cursor: pointer; 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;
}
} }
} }
} }
} }

47
src/pages/login/index.tsx
View File

@ -21,12 +21,16 @@ export const Login: React.FC = () => {
const [image, setImage] = useState<string>(""); const [image, setImage] = useState<string>("");
const [email, setEmail] = useState<string>(""); const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>(""); const [password, setPassword] = useState<string>("");
const [captcha_val, setCaptcha_val] = useState<string>(""); const [captchaVal, setCaptchaVal] = useState<string>("");
const [captcha_key, setCaptcha_key] = useState<string>(""); const [captchaKey, setCaptchaKey] = useState<string>("");
const fetchData = () => { const [captchaLoading, setCaptchaLoading] = useState(true);
const fetchImageCaptcha = () => {
setCaptchaLoading(true);
system.getImageCaptcha().then((res: any) => { system.getImageCaptcha().then((res: any) => {
setImage(res.data.image); 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("请输入密码"); message.error("请输入密码");
return; return;
} }
if (!captcha_val) { if (!captchaVal) {
message.error("请输入图形验证码"); message.error("请输入图形验证码");
return; return;
} }
@ -55,7 +59,7 @@ export const Login: React.FC = () => {
} }
setLoading(true); setLoading(true);
login login
.login(email, password, captcha_key, captcha_val) .login(email, password, captchaKey, captchaVal)
.then((res: any) => { .then((res: any) => {
const token = res.data.token; const token = res.data.token;
setToken(token); setToken(token);
@ -63,8 +67,8 @@ export const Login: React.FC = () => {
}) })
.catch((e) => { .catch((e) => {
setLoading(false); setLoading(false);
setCaptcha_val(""); setCaptchaVal("");
fetchData(); fetchImageCaptcha();
}); });
}; };
@ -86,7 +90,7 @@ export const Login: React.FC = () => {
}; };
useEffect(() => { useEffect(() => {
fetchData(); fetchImageCaptcha();
}, []); }, []);
return ( return (
@ -123,20 +127,29 @@ export const Login: React.FC = () => {
</div> </div>
<div className="d-flex mt-50"> <div className="d-flex mt-50">
<Input <Input
value={captcha_val} value={captchaVal}
style={{ width: 260, height: 54 }} style={{ width: 260, height: 54 }}
placeholder="请输入图形验证码" placeholder="请输入图形验证码"
onChange={(e) => { onChange={(e) => {
setCaptcha_val(e.target.value); setCaptchaVal(e.target.value);
}} }}
onKeyUp={(e) => keyUp(e)} onKeyUp={(e) => keyUp(e)}
/> />
<img <div className={styles["captcha-box"]}>
className={styles["captcha"]} {captchaLoading && (
onClick={fetchData} <div className={styles["catpcha-loading-box"]}>
src={image} <Spin size="small" />
alt="" </div>
/> )}
{!captchaLoading && (
<img
className={styles["captcha"]}
onClick={fetchImageCaptcha}
src={image}
/>
)}
</div>
</div> </div>
<div className="login-box d-flex mt-50"> <div className="login-box d-flex mt-50">
<Button <Button