index.js

import React, { forwardRef, useEffect, useRef, useState } from 'react';

import { Modal, Popover } 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 logo from './images/5.png';
import loginTitlePng from './images/9.png'


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'));
        console.log(weekOfDay, "weekOfDay")
        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 7:
                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.xinganlogin)}>
                <div className={styles['inner-wrapper']}>
                    {/* <div className={styles['left-imgbox']}></div> */}
                    <div className={styles['inner-center']}>
                        <div className={styles['welcome-title']}>
                            <img src={loginTitlePng} alt="login-title"/>
                        </div>
                        <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
                            {renderPlatform()}
                        </div>
                    </div>
                </div>
                <div className={styles['login-header']}>
                    <div className={styles['left-title']}>
                        <div>
                            <img src={logo} alt="logo"/>
                        </div>
                        <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));