|
@@ -1,24 +1,15 @@
|
|
|
-
|
|
|
-import {
|
|
|
- LockOutlined,
|
|
|
- MobileOutlined,
|
|
|
- SwapRightOutlined,
|
|
|
-} from '@ant-design/icons';
|
|
|
-import {
|
|
|
- LoginForm,
|
|
|
- ProFormCaptcha,
|
|
|
- ProFormText,
|
|
|
-} from '@ant-design/pro-components';
|
|
|
-import { FormattedMessage, history, useIntl, useModel, Helmet } from '@umijs/max';
|
|
|
+import { useAjax } from '@/Hook/useAjax';
|
|
|
+import { api } from '@/services/api';
|
|
|
+import { getCode, getNoteCode, phoneLogin } from '@/services/login';
|
|
|
+import { LockOutlined, MobileOutlined, SwapRightOutlined } from '@ant-design/icons';
|
|
|
+import { LoginForm, ProFormCaptcha, ProFormText } from '@ant-design/pro-components';
|
|
|
+import { FormattedMessage, Helmet, history, useIntl, useModel } from '@umijs/max';
|
|
|
import { Alert, Button, message, Tabs } from 'antd';
|
|
|
-import Settings from '../../../../config/defaultSettings';
|
|
|
+import { createStyles } from 'antd-style';
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
import { flushSync } from 'react-dom';
|
|
|
-import { createStyles } from 'antd-style';
|
|
|
-import { useAjax } from '@/Hook/useAjax';
|
|
|
-import { getCode, getNoteCode, phoneLogin } from '@/services/login';
|
|
|
-import { api } from '@/services/api';
|
|
|
-import style from './style.less'
|
|
|
+import Settings from '../../../../config/defaultSettings';
|
|
|
+import style from './style.less';
|
|
|
const useStyles = createStyles(({ token }) => {
|
|
|
return {
|
|
|
action: {
|
|
@@ -52,12 +43,9 @@ const useStyles = createStyles(({ token }) => {
|
|
|
"url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
|
|
|
backgroundSize: '100% 100%',
|
|
|
},
|
|
|
-
|
|
|
};
|
|
|
});
|
|
|
|
|
|
-
|
|
|
-
|
|
|
const LoginMessage: React.FC<{
|
|
|
content: string;
|
|
|
}> = ({ content }) => {
|
|
@@ -79,15 +67,15 @@ const Login: React.FC = () => {
|
|
|
const { initialState, setInitialState } = useModel('@@initialState');
|
|
|
const { styles } = useStyles();
|
|
|
const intl = useIntl();
|
|
|
- const [companyList, setCompanyList] = useState<any[]>([])
|
|
|
+ const [companyList, setCompanyList] = useState<any[]>([]);
|
|
|
|
|
|
- const loginByPCodeFn = useAjax((data) => phoneLogin(data))//手机登录
|
|
|
+ const loginByPCodeFn = useAjax((data) => phoneLogin(data)); //手机登录
|
|
|
//判断是否已登录强制
|
|
|
- useEffect(()=>{
|
|
|
- if(localStorage.getItem("Admin-Token")){
|
|
|
- history.push("/")
|
|
|
+ useEffect(() => {
|
|
|
+ if (localStorage.getItem('Admin-Token')) {
|
|
|
+ history.push('/');
|
|
|
}
|
|
|
- },[])
|
|
|
+ }, []);
|
|
|
|
|
|
const fetchUserInfo = async (data: any) => {
|
|
|
// const userInfo = await initialState?.fetchUserInfo?.();
|
|
@@ -106,25 +94,27 @@ const Login: React.FC = () => {
|
|
|
const handleSubmit = async (values: any) => {
|
|
|
try {
|
|
|
// 登录
|
|
|
- console.log(type, values)
|
|
|
+ console.log(type, values);
|
|
|
const urlParams = new URL(window.location.href).searchParams;
|
|
|
let api = loginByPCodeFn;
|
|
|
- let newValues = { phone: values.mobile, code: values.captcha }
|
|
|
- api.run(newValues).then(async res => {
|
|
|
+ let newValues = { phone: values.mobile, code: values.captcha };
|
|
|
+ api.run(newValues).then(async (res) => {
|
|
|
if (res.data) {
|
|
|
try {
|
|
|
if (res.code === 200) {
|
|
|
- localStorage.setItem('Admin-Token', res?.data?.token)
|
|
|
- let companyInfo = res?.data?.companyRelationInfo?.filter((item: { companyId: number }) => item.companyId !== 4 && item.companyId !== 3)
|
|
|
- await fetchUserInfo(res.data.userInfo)
|
|
|
+ localStorage.setItem('Admin-Token', res?.data?.token);
|
|
|
+ let companyInfo = res?.data?.companyRelationInfo?.filter(
|
|
|
+ (item: { companyId: number }) => item.companyId !== 4 && item.companyId !== 3,
|
|
|
+ );
|
|
|
+ await fetchUserInfo(res.data.userInfo);
|
|
|
if (companyInfo?.length === 0) {
|
|
|
- localStorage.removeItem('Admin-Token')
|
|
|
- message.error('登录失败,请用趣程运营平台账号登录')
|
|
|
- return
|
|
|
+ localStorage.removeItem('Admin-Token');
|
|
|
+ message.error('登录失败,请用趣程运营平台账号登录');
|
|
|
+ return;
|
|
|
} else if (companyInfo?.length === 1) {
|
|
|
- setCompanyHandle(res?.data?.companyRelationInfo[0].companyId)
|
|
|
+ setCompanyHandle(res?.data?.companyRelationInfo[0].companyId);
|
|
|
} else {
|
|
|
- setCompanyList(companyInfo)
|
|
|
+ setCompanyList(companyInfo);
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
@@ -133,8 +123,8 @@ const Login: React.FC = () => {
|
|
|
message.error('登录失败,请重试!');
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
- return
|
|
|
+ });
|
|
|
+ return;
|
|
|
} catch (error) {
|
|
|
const defaultLoginFailureMessage = intl.formatMessage({
|
|
|
id: 'pages.login.failure',
|
|
@@ -149,261 +139,295 @@ const Login: React.FC = () => {
|
|
|
const setCompanyHandle = (companyId: number) => {
|
|
|
fetch(api + `/erp/user/chooseCompany/${companyId}`, {
|
|
|
method: 'PUT',
|
|
|
- headers: { ['Authorization']: 'Bearer ' + localStorage.getItem('Admin-Token') }
|
|
|
- }).then(res => res.json()).then((res: any) => {
|
|
|
- if (res?.code === 200) {
|
|
|
- // 验证服务器是否升级
|
|
|
- localStorage.setItem('Admin-Token', res?.data?.token)
|
|
|
- window.location.href = '/';
|
|
|
- }
|
|
|
- }).catch()
|
|
|
- }
|
|
|
+ headers: { ['Authorization']: 'Bearer ' + localStorage.getItem('Admin-Token') },
|
|
|
+ })
|
|
|
+ .then((res) => res.json())
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res?.code === 200) {
|
|
|
+ // 验证服务器是否升级
|
|
|
+ localStorage.setItem('Admin-Token', res?.data?.token);
|
|
|
+ window.location.href = '/';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch();
|
|
|
+ };
|
|
|
const { status, type: loginType } = userLoginState;
|
|
|
- return <>
|
|
|
- {/* */}
|
|
|
- {<div className={styles.container}>
|
|
|
- <Helmet>
|
|
|
- <title>
|
|
|
- {intl.formatMessage({
|
|
|
- id: 'menu.login',
|
|
|
- defaultMessage: '登录页',
|
|
|
- })}
|
|
|
- - {Settings.title}
|
|
|
- </title>
|
|
|
- </Helmet>
|
|
|
- <div
|
|
|
- style={{
|
|
|
- flex: '1',
|
|
|
- padding: '32px 0',
|
|
|
- display: 'flex',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'center'
|
|
|
- }}
|
|
|
- >
|
|
|
- <div style={{ height: 'auto', overflow: 'hidden', marginTop: '-10%' }}>
|
|
|
- {
|
|
|
- localStorage.getItem('Admin-Token') && companyList?.length > 0 ? <div className={`${style.company}`}>
|
|
|
- <div className={style.companyAccount}>
|
|
|
- <h3 className={style.title}>请选择公司账户登录</h3>
|
|
|
- <div className={style.chooseTableBlock}>
|
|
|
- {
|
|
|
- companyList?.map((item: any) => <div className={style.acTableLine} key={item?.companyId} onClick={() => { setCompanyHandle(item.companyId) }}>
|
|
|
- <div className={style.actname}>{item?.companyInfo?.companyName}</div>
|
|
|
- <div className={style.right}> <div className={style.actcha}>{item?.powerLevel === 999 ? '超级管理员' : item?.powerLevel === 100 ? '系统管理员' : item?.powerLevel === 99 ? '管理员' : '普通用户'}</div> <SwapRightOutlined className={style.iconRight} /></div>
|
|
|
- </div>)
|
|
|
- }
|
|
|
- </div>
|
|
|
- <div className={style.button}>
|
|
|
- <Button type="link" onClick={() => {
|
|
|
- localStorage.removeItem('Admin-Token')
|
|
|
- location.reload()
|
|
|
- }}>更换账号</Button>
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {/* */}
|
|
|
+ {
|
|
|
+ <div className={styles.container}>
|
|
|
+ <Helmet>
|
|
|
+ <title>
|
|
|
+ {intl.formatMessage({
|
|
|
+ id: 'menu.login',
|
|
|
+ defaultMessage: '登录页',
|
|
|
+ })}
|
|
|
+ - {Settings.title}
|
|
|
+ </title>
|
|
|
+ </Helmet>
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ flex: '1',
|
|
|
+ padding: '32px 0',
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div style={{ height: 'auto', overflow: 'hidden', marginTop: '-10%' }}>
|
|
|
+ {localStorage.getItem('Admin-Token') && companyList?.length > 0 ? (
|
|
|
+ <div className={`${style.company}`}>
|
|
|
+ <div className={style.companyAccount}>
|
|
|
+ <h3 className={style.title}>请选择公司账户登录</h3>
|
|
|
+ <div className={style.chooseTableBlock}>
|
|
|
+ {companyList?.map((item: any) => (
|
|
|
+ <div
|
|
|
+ className={style.acTableLine}
|
|
|
+ key={item?.companyId}
|
|
|
+ onClick={() => {
|
|
|
+ setCompanyHandle(item.companyId);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div className={style.actname}>{item?.companyInfo?.companyName}</div>
|
|
|
+ <div className={style.right}>
|
|
|
+ {' '}
|
|
|
+ <div className={style.actcha}>
|
|
|
+ {item?.powerLevel === 999
|
|
|
+ ? '超级管理员'
|
|
|
+ : item?.powerLevel === 100
|
|
|
+ ? '系统管理员'
|
|
|
+ : item?.powerLevel === 99
|
|
|
+ ? '管理员'
|
|
|
+ : '普通用户'}
|
|
|
+ </div>{' '}
|
|
|
+ <SwapRightOutlined className={style.iconRight} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ <div className={style.button}>
|
|
|
+ <Button
|
|
|
+ type="link"
|
|
|
+ onClick={() => {
|
|
|
+ localStorage.removeItem('Admin-Token');
|
|
|
+ location.reload();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 更换账号
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div> : <LoginForm
|
|
|
- contentStyle={{
|
|
|
- minWidth: 280,
|
|
|
- maxWidth: '75vw',
|
|
|
- }}
|
|
|
- title="小说管理后台"
|
|
|
- loading={loginByPCodeFn?.loading || loginByPCodeFn?.loading}
|
|
|
- onFinish={async (values) => {
|
|
|
- await handleSubmit(values as API.LoginParams);
|
|
|
- }}
|
|
|
- >
|
|
|
- <Tabs
|
|
|
- activeKey={type}
|
|
|
- onChange={setType}
|
|
|
- centered
|
|
|
- items={[
|
|
|
- {
|
|
|
- key: 'account',
|
|
|
- label: intl.formatMessage({
|
|
|
- id: 'pages.login.accountLogin.tab',
|
|
|
- defaultMessage: '钉钉登录',
|
|
|
- }),
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'mobile',
|
|
|
- label: intl.formatMessage({
|
|
|
- id: 'pages.login.phoneLogin.tab',
|
|
|
- defaultMessage: '手机号登录',
|
|
|
- }),
|
|
|
- },
|
|
|
- ]}
|
|
|
- />
|
|
|
-
|
|
|
- {status === 'error' && loginType === 'account' && <LoginMessage content="验证码错误" />}
|
|
|
- {type === 'account' && (
|
|
|
- <>
|
|
|
- <ProFormText
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <MobileOutlined />,
|
|
|
- }}
|
|
|
- name="mobile"
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.phoneNumber.placeholder',
|
|
|
- defaultMessage: '手机号',
|
|
|
- })}
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.phoneNumber.required"
|
|
|
- defaultMessage="请输入手机号!"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
+ ) : (
|
|
|
+ <LoginForm
|
|
|
+ contentStyle={{
|
|
|
+ minWidth: 280,
|
|
|
+ maxWidth: '75vw',
|
|
|
+ }}
|
|
|
+ title="小说管理后台"
|
|
|
+ loading={loginByPCodeFn?.loading || loginByPCodeFn?.loading}
|
|
|
+ onFinish={async (values) => {
|
|
|
+ await handleSubmit(values as API.LoginParams);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Tabs
|
|
|
+ activeKey={type}
|
|
|
+ onChange={setType}
|
|
|
+ centered
|
|
|
+ items={[
|
|
|
{
|
|
|
- pattern: /^1\d{10}$/,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.phoneNumber.invalid"
|
|
|
- defaultMessage="手机号格式错误!"
|
|
|
- />
|
|
|
- ),
|
|
|
+ key: 'account',
|
|
|
+ label: intl.formatMessage({
|
|
|
+ id: 'pages.login.accountLogin.tab',
|
|
|
+ defaultMessage: '钉钉登录',
|
|
|
+ }),
|
|
|
},
|
|
|
- ]}
|
|
|
- />
|
|
|
- <ProFormCaptcha
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <LockOutlined />,
|
|
|
- }}
|
|
|
- phoneName='mobile'
|
|
|
- captchaProps={{
|
|
|
- size: 'large',
|
|
|
- }}
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.captcha.placeholder',
|
|
|
- defaultMessage: '请输入验证码',
|
|
|
- })}
|
|
|
- captchaTextRender={(timing, count) => {
|
|
|
- if (timing) {
|
|
|
- return `${count} ${intl.formatMessage({
|
|
|
- id: 'pages.getCaptchaSecondText',
|
|
|
- defaultMessage: '获取验证码',
|
|
|
- })}`;
|
|
|
- }
|
|
|
- return intl.formatMessage({
|
|
|
- id: 'pages.login.phoneLogin.getVerificationCode',
|
|
|
- defaultMessage: '获取验证码',
|
|
|
- });
|
|
|
- }}
|
|
|
- name="captcha"
|
|
|
- rules={[
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.captcha.required"
|
|
|
- defaultMessage="请输入验证码!"
|
|
|
- />
|
|
|
- ),
|
|
|
+ key: 'mobile',
|
|
|
+ label: intl.formatMessage({
|
|
|
+ id: 'pages.login.phoneLogin.tab',
|
|
|
+ defaultMessage: '手机号登录',
|
|
|
+ }),
|
|
|
},
|
|
|
]}
|
|
|
- onGetCaptcha={async (mobile) => {
|
|
|
- const result = await getCode(mobile);
|
|
|
- if (!result) {
|
|
|
- return;
|
|
|
- }
|
|
|
- message.success('获取验证码成功!请查看钉钉消息!');
|
|
|
- }}
|
|
|
/>
|
|
|
- </>
|
|
|
- )}
|
|
|
|
|
|
- {status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
|
|
|
- {type === 'mobile' && (
|
|
|
- <>
|
|
|
- <ProFormText
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <MobileOutlined />,
|
|
|
- }}
|
|
|
- name="mobile"
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.phoneNumber.placeholder',
|
|
|
- defaultMessage: '手机号',
|
|
|
- })}
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.phoneNumber.required"
|
|
|
- defaultMessage="请输入手机号!"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- {
|
|
|
- pattern: /^1\d{10}$/,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.phoneNumber.invalid"
|
|
|
- defaultMessage="手机号格式错误!"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- ]}
|
|
|
- />
|
|
|
- <ProFormCaptcha
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <LockOutlined />,
|
|
|
- }}
|
|
|
- phoneName='mobile'
|
|
|
- captchaProps={{
|
|
|
- size: 'large',
|
|
|
- }}
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.captcha.placeholder',
|
|
|
- defaultMessage: '请输入验证码',
|
|
|
- })}
|
|
|
- captchaTextRender={(timing, count) => {
|
|
|
- if (timing) {
|
|
|
- return `${count} ${intl.formatMessage({
|
|
|
- id: 'pages.getCaptchaSecondText',
|
|
|
- defaultMessage: '获取验证码',
|
|
|
- })}`;
|
|
|
- }
|
|
|
- return intl.formatMessage({
|
|
|
- id: 'pages.login.phoneLogin.getVerificationCode',
|
|
|
- defaultMessage: '获取验证码',
|
|
|
- });
|
|
|
- }}
|
|
|
- name="captcha"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.captcha.required"
|
|
|
- defaultMessage="请输入验证码!"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- ]}
|
|
|
- onGetCaptcha={async (mobile) => {
|
|
|
- const result = await getNoteCode(mobile);
|
|
|
- if (!result) {
|
|
|
- return;
|
|
|
- }
|
|
|
- message.success('获取验证码成功!请查看手机短信!');
|
|
|
- }}
|
|
|
- />
|
|
|
- </>
|
|
|
- )}
|
|
|
- </LoginForm>
|
|
|
- }
|
|
|
+ {status === 'error' && loginType === 'account' && (
|
|
|
+ <LoginMessage content="验证码错误" />
|
|
|
+ )}
|
|
|
+ {type === 'account' && (
|
|
|
+ <>
|
|
|
+ <ProFormText
|
|
|
+ fieldProps={{
|
|
|
+ size: 'large',
|
|
|
+ prefix: <MobileOutlined />,
|
|
|
+ }}
|
|
|
+ name="mobile"
|
|
|
+ placeholder={intl.formatMessage({
|
|
|
+ id: 'pages.login.phoneNumber.placeholder',
|
|
|
+ defaultMessage: '手机号',
|
|
|
+ })}
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: (
|
|
|
+ <FormattedMessage
|
|
|
+ id="pages.login.phoneNumber.required"
|
|
|
+ defaultMessage="请输入手机号!"
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pattern: /^1\d{10}$/,
|
|
|
+ message: (
|
|
|
+ <FormattedMessage
|
|
|
+ id="pages.login.phoneNumber.invalid"
|
|
|
+ defaultMessage="手机号格式错误!"
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <ProFormCaptcha
|
|
|
+ fieldProps={{
|
|
|
+ size: 'large',
|
|
|
+ prefix: <LockOutlined />,
|
|
|
+ }}
|
|
|
+ phoneName="mobile"
|
|
|
+ captchaProps={{
|
|
|
+ size: 'large',
|
|
|
+ }}
|
|
|
+ placeholder={intl.formatMessage({
|
|
|
+ id: 'pages.login.captcha.placeholder',
|
|
|
+ defaultMessage: '请输入验证码',
|
|
|
+ })}
|
|
|
+ captchaTextRender={(timing, count) => {
|
|
|
+ if (timing) {
|
|
|
+ return `${count} ${intl.formatMessage({
|
|
|
+ id: 'pages.getCaptchaSecondText',
|
|
|
+ defaultMessage: '获取验证码',
|
|
|
+ })}`;
|
|
|
+ }
|
|
|
+ return intl.formatMessage({
|
|
|
+ id: 'pages.login.phoneLogin.getVerificationCode',
|
|
|
+ defaultMessage: '获取验证码',
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ name="captcha"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: (
|
|
|
+ <FormattedMessage
|
|
|
+ id="pages.login.captcha.required"
|
|
|
+ defaultMessage="请输入验证码!"
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ onGetCaptcha={async (mobile) => {
|
|
|
+ const result = await getCode(mobile);
|
|
|
+ if (!result) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ message.success('获取验证码成功!请查看钉钉消息!');
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
|
|
|
+ {status === 'error' && loginType === 'mobile' && (
|
|
|
+ <LoginMessage content="验证码错误" />
|
|
|
+ )}
|
|
|
+ {type === 'mobile' && (
|
|
|
+ <>
|
|
|
+ <ProFormText
|
|
|
+ fieldProps={{
|
|
|
+ size: 'large',
|
|
|
+ prefix: <MobileOutlined />,
|
|
|
+ }}
|
|
|
+ name="mobile"
|
|
|
+ placeholder={intl.formatMessage({
|
|
|
+ id: 'pages.login.phoneNumber.placeholder',
|
|
|
+ defaultMessage: '手机号',
|
|
|
+ })}
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: (
|
|
|
+ <FormattedMessage
|
|
|
+ id="pages.login.phoneNumber.required"
|
|
|
+ defaultMessage="请输入手机号!"
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pattern: /^1\d{10}$/,
|
|
|
+ message: (
|
|
|
+ <FormattedMessage
|
|
|
+ id="pages.login.phoneNumber.invalid"
|
|
|
+ defaultMessage="手机号格式错误!"
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <ProFormCaptcha
|
|
|
+ fieldProps={{
|
|
|
+ size: 'large',
|
|
|
+ prefix: <LockOutlined />,
|
|
|
+ }}
|
|
|
+ phoneName="mobile"
|
|
|
+ captchaProps={{
|
|
|
+ size: 'large',
|
|
|
+ }}
|
|
|
+ placeholder={intl.formatMessage({
|
|
|
+ id: 'pages.login.captcha.placeholder',
|
|
|
+ defaultMessage: '请输入验证码',
|
|
|
+ })}
|
|
|
+ captchaTextRender={(timing, count) => {
|
|
|
+ if (timing) {
|
|
|
+ return `${count} ${intl.formatMessage({
|
|
|
+ id: 'pages.getCaptchaSecondText',
|
|
|
+ defaultMessage: '获取验证码',
|
|
|
+ })}`;
|
|
|
+ }
|
|
|
+ return intl.formatMessage({
|
|
|
+ id: 'pages.login.phoneLogin.getVerificationCode',
|
|
|
+ defaultMessage: '获取验证码',
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ name="captcha"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: (
|
|
|
+ <FormattedMessage
|
|
|
+ id="pages.login.captcha.required"
|
|
|
+ defaultMessage="请输入验证码!"
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ onGetCaptcha={async (mobile) => {
|
|
|
+ const result = await getNoteCode(mobile);
|
|
|
+ if (!result) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ message.success('获取验证码成功!请查看手机短信!');
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </LoginForm>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>}
|
|
|
- </>
|
|
|
+ }
|
|
|
+ </>
|
|
|
+ );
|
|
|
};
|
|
|
|
|
|
export default Login;
|