import {
AlipayCircleOutlined,
LockTwoTone,
MailTwoTone,
MobileTwoTone,
TaobaoCircleOutlined,
UserOutlined,
WeiboCircleOutlined,
} from '@ant-design/icons';
import { Alert, Space, message, Tabs } from 'antd';
import React, { useState } from 'react';
import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
import { useIntl, Link, history, FormattedMessage, SelectLang, useModel } from 'umi';
import Footer from '@/components/Footer';
import { fakeAccountLogin, getFakeCaptcha, LoginParamsType } from '@/services/login';
import styles from './index.less';
import { selectNavList } from '@/services/user';
const LoginMessage: React.FC<{
content: string;
}> = ({ content }) => (
);
/**
* 此方法会跳转到 redirect 参数所在的位置
*/
const goto = () => {
if (!history) return;
setTimeout(() => {
const { query } = history.location;
const { redirect } = query as {
redirect: string;
};
history.push(redirect || '/');
}, 10);
};
const Login: React.FC<{}> = () => {
const [submitting, setSubmitting] = useState(false);
const [userLoginState, setUserLoginState] = useState({});
const [type, setType] = useState('account');
const { initialState, setInitialState } = useModel('@@initialState');
const intl = useIntl();
const fetchUserInfo = async () => {
const userInfo = await initialState?.fetchUserInfo?.();
if (userInfo) {
setInitialState({
...initialState,
settings: {
menu: {
loading: true,
locale: false,// 关闭国际化
},
},
currentUser: userInfo,
});
const menuData = await selectNavList();
setInitialState({
...initialState,
currentUser: userInfo,
settings: {
menu: {
loading: false,
locale: false,// 关闭国际化
},
},
menuData: menuData.data,
});
}
};
const handleSubmit = async (values: LoginParamsType) => {
setSubmitting(true);
message.loading({content:'登录中...',key:'handleSubmit'})
const msg = await fakeAccountLogin({ ...values, type });
if(msg.error.length === 0){
message.success({content:'登录成功',key:'handleSubmit',duration:2.5});
await fetchUserInfo();
goto();
}else{
message.error({content:msg.error[0].message,key:'handleSubmit',duration:2.5});
setUserLoginState({
status: 'error',
type: msg.error[0].message,
});
}
setSubmitting(false);
};
const { status, type: loginType } = userLoginState;
return (
{SelectLang && }
科德管理系统
科德管理系统 是岳麓区最具影响力的管理系统
dom.pop(),
submitButtonProps: {
loading: submitting,
size: 'large',
style: {
width: '100%',
},
},
}}
onFinish={async (values) => {
handleSubmit(values);
}}
>
{status === 'error' && (
)}
{type === 'account' && (
<>
,
}}
placeholder={intl.formatMessage({
id: 'pages.login.username.placeholder',
defaultMessage: '用户名: admin or user',
})}
rules={[
{
required: true,
message: '用户名是必填项!',
},
]}
/>
,
}}
placeholder={intl.formatMessage({
id: 'pages.login.password.placeholder',
defaultMessage: '密码: ant.design',
})}
rules={[
{
required: true,
message: '密码是必填项!',
},
]}
/>
>
)}
{status === 'error' && loginType === 'mobile' && }
{type === 'mobile' && (
<>
,
}}
name="mobile"
placeholder={intl.formatMessage({
id: 'pages.login.phoneNumber.placeholder',
defaultMessage: '手机号',
})}
rules={[
{
required: true,
message: '手机号是必填项!',
},
{
pattern: /^1\d{10}$/,
message: '不合法的手机号!',
},
]}
/>
,
}}
captchaProps={{
size: 'large',
}}
placeholder={intl.formatMessage({
id: 'pages.login.captcha.placeholder',
defaultMessage: '请输入验证码',
})}
captchaTextRender={(timing, count) =>
timing
? `${count} ${intl.formatMessage({
id: 'pages.getCaptchaSecondText',
defaultMessage: '获取验证码',
})}`
: intl.formatMessage({
id: 'pages.login.phoneLogin.getVerificationCode',
defaultMessage: '获取验证码',
})
}
name="captcha"
rules={[
{
required: true,
message: '验证码是必填项!',
},
]}
onGetCaptcha={async (mobile) => {
const result = await getFakeCaptcha(mobile);
if (result === false) {
return;
}
message.success('获取验证码成功!验证码为:1234');
}}
/>
>
)}
{/*
*/}
{/* 其他登录方式 :*/}
{/* */}
{/* */}
{/* */}
{/**/}
);
};
export default Login;