import React, { forwardRef, useEffect, useRef, useState } from 'react'; import { Modal } from 'antd'; import { Helmet, HelmetProvider } from 'react-helmet-async'; import { connect } from 'react-redux'; import { useHistory, withRouter } from '@wisdom-utils/runtime'; import { actionCreators } from '@/containers/App/store'; import QRCode from 'qrcode.react'; import classnames from 'classnames'; import moment from 'moment'; import defaultSetting from '../../../../../../../config/defaultSetting'; import LoginAction from '../../../login'; import styles from './index.less'; import Account from '../../../js/useAccount'; import { defaultApp } from '../../../../../../micro'; import imagelogo from './images/logo@2x.png'; const renderQRCode = () => { const qrcodes = window.globalConfig && window.globalConfig.qrcode; console.log('qrcodes', qrcodes); if (qrcodes) { return ( <div> <QRCode value={qrcodes} /> <p>扫码下载APP</p> </div> ); } return <span>手持APP下载未配置</span>; }; const Login = forwardRef((props, _ref) => { const sliVerify = useRef(); const loginFormRef = useRef(); const formRef = useRef(null); const [status, setStatus] = useState('normal'); const [autoLogin, setAutoLogin] = useState(false); const [submitting, setSubmitting] = useState(false); const [type, setType] = useState('Account'); const [visible, setVisible] = useState(false); const history = useHistory(); const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false)); const [dateObj, setDateObj] = useState({}); const handleSubmit = values => { /* eslint-disable */ action && (type === 'Account' ? action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify) : type === 'Mobile' ? action.phoneLoginFormHandler(values.mobile, values.captcha) : null); setSubmitting(true); props.updateCurrentIndex && props.updateCurrentIndex(-1); }; useEffect(() => { action && action.events.on('loginSuccess', event => { setSubmitting(false); props.updateCurrentIndex && props.updateCurrentIndex(0); props.history.push(`/?client=${props.global.client}`); // window.share.event.emit('triggerMicro', props.global); // initMicroApps(); defaultApp(); }); action && action.events.on('loginError', event => { setVisible(false); setSubmitting(false); }); action && action.events.on('loginVisible', status => { setVisible(status); }); return () => { action && action.events && action.events.removeAllListeners('loginSuccess'); action && action.events && action.events.removeAllListeners('loginError'); action && action.events && action.events.removeAllListeners('loginVisible'); }; }, [props.loginMode]); useEffect(() => { setSubmitting(false); }, [visible]); const renderPlatform = () => { const template = props.global.loginTemplate; const params = { fromRef: formRef, type, setType, status, submitting, autoLogin, setAutoLogin, action, onSubmit: handleSubmit, loginMode: props.loginMode, updateLoginMode: props.updateLoginMode, welcome: null, }; return <Account {...params} />; }; /* eslint-disable */ const handleWeek = () => { const weekOfDay = Number(moment().format('E')); let weekDayName = '' switch (weekOfDay) { case 1: weekDayName = '周一' break case 2: weekDayName = '周二' break case 3: weekDayName = '周三' break case 4: weekDayName = '周四' break case 5: weekDayName = '周五' break case 6: weekDayName = '周六' break case 0: weekDayName = '周日' break default: weekDayName = '' } return weekDayName } useEffect(() => { const timer = setInterval(() => { setDateObj({ curTime: moment().format('HH:mm:ss'), week: handleWeek(), date: moment().format('YYYY/MM/DD') }); }, 1000); return () => { clearInterval(timer); }; }, []) return ( <HelmetProvider> <Helmet> <title>{props.global.title || defaultSetting.title}</title> <meta name="description" content={props.global.title || defaultSetting.title} /> </Helmet> <div className={classnames(styles.login, 'WXlogin')}> <div className={styles['inner-wrapper']}> <div className={styles['left-imgbox']}></div> <div className={styles['inner-center']}> <div className={styles['welcome-title']}></div> <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}> {renderPlatform()} </div> {/* <div className={styles.WXqrcodeBox}> <p className={styles.WXimg}></p> <div className={styles.WXbigImg}>{renderQRCode()}</div> </div> */} </div> </div> <div className={styles['login-header']}> <div className={styles['left-title']}> {/* <p className={styles.WXlogoImg}></p> */} <img className={styles.WXlogoImg} src={imagelogo} ></img> {/* <div className={styles['cn-title']}>威信县供排水公司</div> */} </div> <div className={styles['right-timebox']}> <div className={styles['curr-time']}>{dateObj.curTime}</div> <div className={styles['curr-week-date']}> <div className={styles['curr-week']}>{dateObj.week}</div> <div className={styles['curr-date']}>{dateObj.date}</div> </div> </div> </div> <Modal centered visible={visible} width={340} footer={null} closable={false} bodyStyle={{ padding: '15px' }}> <div ref={sliVerify} /> </Modal> </div> </HelmetProvider> ); }); const mapStateToProps = state => ({ global: state.getIn(['global', 'globalConfig']), loginMode: state.getIn(['global', 'loginMode']), }); const mapDispatchToProps = dispatch => ({ updateConfig(config) { dispatch(actionCreators.getConfig(config)); }, createContext(data) { dispatch(actionCreators.createContext(data)); }, updateLoginMode(mode) { dispatch(actionCreators.changeLoginMode(mode)); }, updateCurrentIndex(index) { dispatch(actionCreators.updateCurrentIndex(index)); }, }); export default connect( mapStateToProps, mapDispatchToProps, )(withRouter(Login));