126 lines
3.6 KiB
TypeScript
126 lines
3.6 KiB
TypeScript
import { Apis } from '@/gen/Apis';
|
|
import {
|
|
FieldTimeOutlined,
|
|
LockOutlined,
|
|
UserOutlined,
|
|
} from '@ant-design/icons';
|
|
import {
|
|
LoginFormPage,
|
|
ProConfigProvider,
|
|
ProFormText,
|
|
} from '@ant-design/pro-components';
|
|
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { stateActions } from '..';
|
|
|
|
export function MyLoginPage1() {
|
|
const navigate = useNavigate();
|
|
const [getCaptcha, setCaptcha] = useState<any>({});
|
|
const methods = {
|
|
getCaptcha: () => {
|
|
Apis.Common.Auth.Captcha().then(async (res) => {
|
|
setCaptcha(res?.data);
|
|
console.log(res, 'res');
|
|
});
|
|
},
|
|
};
|
|
useEffect(() => {
|
|
methods?.getCaptcha();
|
|
}, []);
|
|
return (
|
|
<ProConfigProvider>
|
|
<div
|
|
style={{
|
|
backgroundColor: '#f8f8f8',
|
|
height: '100vh',
|
|
}}
|
|
>
|
|
<LoginFormPage<ApiTypes.Common.Auth.Login>
|
|
title="欢迎使用后台管理系统"
|
|
backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
|
|
subTitle="Admin management system"
|
|
onFinish={async (values: any) => {
|
|
Apis.Common.Auth.Login({
|
|
...values,
|
|
...{ captcha_key: getCaptcha?.key },
|
|
})
|
|
.then(async (res) => {
|
|
await stateActions.setLogin(res);
|
|
navigate('/');
|
|
})
|
|
.catch((err: any) => {
|
|
methods?.getCaptcha();
|
|
console.log(err, 'rr');
|
|
});
|
|
}}
|
|
>
|
|
<>
|
|
<ProFormText
|
|
name="username"
|
|
fieldProps={{
|
|
size: 'large',
|
|
prefix: <UserOutlined className={'prefixIcon'} />,
|
|
}}
|
|
placeholder={'登录账号'}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请输入登录账号!',
|
|
},
|
|
]}
|
|
/>
|
|
<ProFormText.Password
|
|
name="password"
|
|
fieldProps={{
|
|
size: 'large',
|
|
prefix: <LockOutlined className={'prefixIcon'} />,
|
|
}}
|
|
placeholder={'登录密码'}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请输入密码！',
|
|
},
|
|
]}
|
|
/>
|
|
<div style={{ display: 'flex' }}>
|
|
<ProFormText
|
|
name="captcha"
|
|
fieldProps={{
|
|
size: 'large',
|
|
prefix: <FieldTimeOutlined className={'prefixIcon'} />,
|
|
}}
|
|
placeholder={'验证码'}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请输入验证码!',
|
|
},
|
|
]}
|
|
/>
|
|
<div
|
|
style={{
|
|
height: '40px',
|
|
border: '1px solid #eee',
|
|
padding: '0 2px',
|
|
margin: '0 10px',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: '3px',
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={() => {
|
|
methods?.getCaptcha();
|
|
}}
|
|
>
|
|
<img height={32} width={100} src={getCaptcha?.img} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
</LoginFormPage>
|
|
</div>
|
|
</ProConfigProvider>
|
|
);
|
|
}
|