115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
||
import { sms, userLogin } from "../../api";
|
||
import "./index.less";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { useUserStore } from "../../store/user.store";
|
||
import toast from "react-hot-toast";
|
||
const defaultForm = {
|
||
user_login: "",
|
||
user_pass: "",
|
||
};
|
||
|
||
const DURATION = 60; // 验证码倒计时
|
||
|
||
export default function Login() {
|
||
const [loginForm, setLoginForm] = useState(defaultForm);
|
||
let [countdown, setCountdown] = useState(DURATION);
|
||
const timer = useRef<any>();
|
||
const navigate = useNavigate();
|
||
const setUser = useUserStore((s: any) => s.setUser);
|
||
|
||
const onClickSmsBtn = () => {
|
||
if (!/^1[3456789]\d{9}$/.test(loginForm.user_login))
|
||
return toast.error("手机号格式有误");
|
||
sms(loginForm.user_login).then((res: any) => {
|
||
if (res?.code === 10000)
|
||
setTimeout(() => {
|
||
toast.success("验证码已发送");
|
||
timer.current = setInterval(() => setCountdown(countdown--), 1000);
|
||
}, 50);
|
||
});
|
||
};
|
||
|
||
const onClickLogin = () => {
|
||
userLogin(loginForm).then((res: any) => {
|
||
const { code, data, msg } = res;
|
||
if (code === 10000) {
|
||
console.log(msg);
|
||
navigate(-1);
|
||
setUser(data);
|
||
}
|
||
if (code === 20000) console.error(msg);
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (countdown === 0) {
|
||
clearInterval(timer.current);
|
||
setCountdown(DURATION);
|
||
}
|
||
}, [countdown]);
|
||
|
||
return (
|
||
<div className="container login">
|
||
<img src="/favicon.svg" />
|
||
<h4>欢迎，Backset.cn!</h4>
|
||
<div style={{ width: 320 }}>
|
||
<div className="form">
|
||
<input
|
||
style={{ marginTop: "1rem" }}
|
||
type="text"
|
||
className="input"
|
||
placeholder="手机"
|
||
onChange={(e) =>
|
||
setLoginForm((p) => ({
|
||
...p,
|
||
user_login: e.target.value,
|
||
}))
|
||
}
|
||
/>
|
||
{/* <input
|
||
style={{ marginTop: "1rem" }}
|
||
className="input"
|
||
type="password"
|
||
onChange={(e) =>
|
||
setLoginForm((p) => ({
|
||
...p,
|
||
user_pass: e.target.value,
|
||
}))
|
||
}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") onClickLogin();
|
||
}}
|
||
placeholder="密码"
|
||
/> */}
|
||
<div className="sms-group" style={{ marginTop: "1rem" }}>
|
||
<input
|
||
className="input"
|
||
type="text"
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") onClickLogin();
|
||
}}
|
||
onChange={(e) =>
|
||
setLoginForm((p) => ({
|
||
...p,
|
||
user_pass: e.target.value,
|
||
}))
|
||
}
|
||
placeholder="验证码"
|
||
/>
|
||
<span
|
||
className="bs btn ml12 sms-btn br3 outline"
|
||
onClick={onClickSmsBtn}
|
||
>
|
||
{countdown === DURATION ? "获取" : countdown + "s"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<button className="submit-btn bs btn" onClick={onClickLogin}>
|
||
进入
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|