71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
/**
|
||
* Routes:
|
||
* - ./src/pages/routes
|
||
*/
|
||
import React, { useEffect } from 'react';
|
||
import { Spin } from 'antd';
|
||
import { connect, DispatchProp } from 'dva';
|
||
import FittedImage from 'react-fitted-image';
|
||
import { CheckModelState, PageStep } from './model';
|
||
import { PageState } from '@/types/common';
|
||
import Header from '@/components/Header';
|
||
import bgPic from '@/assets/bg_login.png';
|
||
import styles from './style.less';
|
||
import CheckPage from './check';
|
||
import LoginPage from './login';
|
||
import RegisterPage from './register';
|
||
import { formatMessage } from 'umi-plugin-locale';
|
||
|
||
const Page: React.FC<DispatchProp & CheckModelState> = ({
|
||
pageState,
|
||
pageStep,
|
||
dispatch,
|
||
}) => {
|
||
useEffect(() => {
|
||
dispatch({ type: 'check/load' });
|
||
}, []);
|
||
|
||
if (pageState === PageState.Pending) {
|
||
return (
|
||
<div className={styles.loading}><Spin /></div>
|
||
);
|
||
}
|
||
|
||
if (pageState === PageState.Failure) {
|
||
return (
|
||
<div onClick={() => dispatch({ type: 'check/load' })}>加载失败，点击重新加载</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className={styles.check}>
|
||
{
|
||
pageStep !== PageStep.Check &&
|
||
<Header
|
||
className={styles.header}
|
||
onReturn={() => dispatch({ type: 'check/back' })}
|
||
/>
|
||
}
|
||
|
||
<div className="cover">
|
||
<div className="image">
|
||
<FittedImage fit="contain" src={bgPic} />
|
||
</div>
|
||
<span>{formatMessage({ id: 'app.name' })}</span>
|
||
</div>
|
||
|
||
{{
|
||
[PageStep.Check]: <CheckPage />,
|
||
[PageStep.Login]: <LoginPage />,
|
||
[PageStep.Register]: <RegisterPage />,
|
||
[PageStep.Reset]: null,
|
||
[PageStep.ResetSuccess]: null,
|
||
}[pageStep]}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default connect(
|
||
({ check } : any) => ({ ...check })
|
||
)(Page);
|