Commit 4ef5a623 authored by 邓超's avatar 邓超

fix: 江西登录页优化

parent 39a4c258
Pipeline #74446 passed with stages
import { Checkbox } from 'antd';
import React, { useRef } from 'react';
import { useIntl } from '@wisdom-utils/components';
import LoginForm from './LoginForm';
import LoginMessage from '../../../js/loginMessage';
/* eslint-disable */
const { UserName, Password, Submit } = LoginForm;
const useAccount = props => {
const formRef = useRef(null);
return (
<LoginForm onSubmit={props.onSubmit} welcome={props.welcome} ref={formRef} form={props.form}>
{props.status === 'error' && props.type === 'account' && !props.submitting && (
<LoginMessage
content={useIntl().formatMessage({
id: 'pages.login.accountLogin.errorMessage',
})}
/>
)}
<UserName
name="userName"
placeholder={useIntl().formatMessage({
id: 'pages.login.username.placeholder',
})}
rules={[
{
required: true,
message: useIntl().formatMessage({
id: 'pages.login.username.required',
}),
},
]}
/>
<Password
name="password"
placeholder={useIntl().formatMessage({
id: 'pages.login.password.placeholder',
})}
rules={[
{
required: true,
message: useIntl().formatMessage({
id: 'pages.login.password.required',
}),
},
]}
/>
<div>
<Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
{useIntl().formatMessage({ id: 'pages.login.rememberMe' })}
</Checkbox>
</div>
<Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
</LoginForm>
);
};
export default useAccount;
import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
import { Form } from 'antd';
import classNames from 'classnames';
import { useIntl } from '@wisdom-utils/components';
import styles from '../../../components/Login/index.less';
import LoginContext from '../../../components/Login/LoginContext';
import LoginItem from '../../../components/Login/LoginItem';
import LoginSubmit from '../../../components/Login/LoginSubmit';
const Login = (props, ref) => {
const intl = useIntl();
const { className } = props;
const otherChildren = [];
React.Children.forEach(props.children, child => {
if (!child) {
return;
}
otherChildren.push(child);
});
return (
<LoginContext.Provider value={{}}>
<div className={classNames(className, styles.login)}>
{props.welcome === void 0 ? (
<div className={styles.desc}>{intl.formatMessage({ id: 'pages.login.welcome' })}</div>
) : (
props.welcome
)}
<Form
form={props.form}
onFinish={values => {
if (props.onSubmit) {
props.onSubmit(values);
}
}}
>
{props.children}
</Form>
</div>
</LoginContext.Provider>
);
};
Login.Submit = LoginSubmit;
Login.UserName = LoginItem.UserName;
Login.Password = LoginItem.Password;
Login.NewYearPassword = LoginItem.NewYearPassword;
Login.Mobile = LoginItem.Mobile;
Login.Captcha = LoginItem.Captcha;
Login.NewYearMobile = LoginItem.NewYearMobile;
Login.NewYearCaptcha = LoginItem.NewYearCaptcha;
export default Login;
import React, { forwardRef, useEffect, useRef, useState } from 'react'; import React, { forwardRef, useEffect, useRef, useState } from 'react';
import { Modal, Popover } from 'antd'; import { Modal, Popover, Form } from 'antd';
import { Helmet, HelmetProvider } from 'react-helmet-async'; import { Helmet, HelmetProvider } from 'react-helmet-async';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { useHistory, withRouter } from '@wisdom-utils/runtime'; import { useHistory, withRouter } from '@wisdom-utils/runtime';
...@@ -12,6 +12,7 @@ import defaultSetting from '../../../../../../../config/defaultSetting'; ...@@ -12,6 +12,7 @@ import defaultSetting from '../../../../../../../config/defaultSetting';
import LoginAction from '../../../login'; import LoginAction from '../../../login';
import styles from './index.less'; import styles from './index.less';
import Account from '../../../js/useAccount'; import Account from '../../../js/useAccount';
import FormLogin from './Account';
import { defaultApp } from '../../../../../../micro'; import { defaultApp } from '../../../../../../micro';
import logoPng from './images/8.png'; import logoPng from './images/8.png';
import qrcodePng from './images/1.png'; import qrcodePng from './images/1.png';
...@@ -26,6 +27,7 @@ const PopOvercontent = () => { ...@@ -26,6 +27,7 @@ const PopOvercontent = () => {
}; };
const Login = forwardRef((props, _ref) => { const Login = forwardRef((props, _ref) => {
const [form] = Form.useForm();
const sliVerify = useRef(); const sliVerify = useRef();
const loginFormRef = useRef(); const loginFormRef = useRef();
const formRef = useRef(null); const formRef = useRef(null);
...@@ -38,12 +40,12 @@ const Login = forwardRef((props, _ref) => { ...@@ -38,12 +40,12 @@ const Login = forwardRef((props, _ref) => {
const history = useHistory(); const history = useHistory();
const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false)); const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
const [dateObj, setDateObj] = useState({}); const [dateObj, setDateObj] = useState({});
const [loginType, setLoginType] = useState('4a平台'); const [loginType, setLoginType] = useState('4A账号');
const handleSubmit = values => { const handleSubmit = values => {
/* eslint-disable */ /* eslint-disable */
action && action &&
(type === 'Account' (type === 'Account'
? loginType === '4a平台' ? loginType === '4A账号'
? action.loginHandlerJiangXi(values.userName, values.password, null, autoLogin, sliVerify) ? action.loginHandlerJiangXi(values.userName, values.password, null, autoLogin, sliVerify)
: action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify) : action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
: type === 'Mobile' : type === 'Mobile'
...@@ -87,6 +89,7 @@ const Login = forwardRef((props, _ref) => { ...@@ -87,6 +89,7 @@ const Login = forwardRef((props, _ref) => {
const renderPlatform = () => { const renderPlatform = () => {
const template = props.global.loginTemplate; const template = props.global.loginTemplate;
const params = { const params = {
form: form,
fromRef: formRef, fromRef: formRef,
type, type,
setType, setType,
...@@ -100,7 +103,8 @@ const Login = forwardRef((props, _ref) => { ...@@ -100,7 +103,8 @@ const Login = forwardRef((props, _ref) => {
updateLoginMode: props.updateLoginMode, updateLoginMode: props.updateLoginMode,
welcome: null, welcome: null,
}; };
return <Account {...params} />; // return <Account {...params} />;
return <FormLogin {...params} />;
}; };
/* eslint-disable */ /* eslint-disable */
...@@ -150,6 +154,10 @@ const Login = forwardRef((props, _ref) => { ...@@ -150,6 +154,10 @@ const Login = forwardRef((props, _ref) => {
const toLink = () => { const toLink = () => {
window.open('http://gis.panda-water.cn/jiangxi/index.html'); window.open('http://gis.panda-water.cn/jiangxi/index.html');
}; };
const tabChange = key => {
form.resetFields();
setLoginType(key);
};
return ( return (
<HelmetProvider> <HelmetProvider>
<Helmet> <Helmet>
...@@ -159,20 +167,28 @@ const Login = forwardRef((props, _ref) => { ...@@ -159,20 +167,28 @@ const Login = forwardRef((props, _ref) => {
<div className={classnames(styles.lvchenglogin, 'lvcheng')}> <div className={classnames(styles.lvchenglogin, 'lvcheng')}>
<div className={styles['inner-wrapper']}> <div className={styles['inner-wrapper']}>
<div className={styles['title-image-box']}> <div className={styles['title-image-box']}>
<img src={logoPng} alt="" className={styles['title-image']} /> <img
<span className={styles['title-name']}>江西省水务集团有限公司 - 智慧水务平台</span> src={
props.global &&
props.global.transformDevAssetsBaseURL &&
props.global.transformDevAssetsBaseURL(props.global.logo)
}
alt=""
className={styles['title-image']}
/>
<span className={styles['title-name']}>{props.global.title}</span>
</div> </div>
<div className={styles['inner-center']}> <div className={styles['inner-center']}>
<div className={styles['welcome-title']}> <div className={styles['welcome-title']}>
<div <div
className={classnames(styles.tabItem, { [styles.tabActive]: loginType === '4a平台' })} className={classnames(styles.tabItem, { [styles.tabActive]: loginType === '4A账号' })}
onClick={() => setLoginType('4a平台')} onClick={() => tabChange('4A账号')}
> >
4a平台 4A账号
</div> </div>
<div <div
className={classnames(styles.tabItem, { [styles.tabActive]: loginType === '熊猫平台' })} className={classnames(styles.tabItem, { [styles.tabActive]: loginType === '熊猫平台' })}
onClick={() => setLoginType('熊猫平台')} onClick={() => tabChange('熊猫平台')}
> >
熊猫平台 熊猫平台
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment