index2.js

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 defaultSetting from '../../../../../../../config/defaultSetting';
import LoginAction from '../../../login';
import styles from './index.less';
import Account from '../../../js/useAccount';
import { defaultApp } from '../../../../../../micro';
import QRCode from 'qrcode.react';
import classnames from 'classnames';
import moment from 'moment';
import MyHead from '@/assets/oa/login/我的.png'
import PassWord from '@/assets/oa/login/密码.png'
import Close from '@/assets/oa/login/close.png'
import Open from '@/assets/oa/login/open.png'
import Selected from '@/assets/oa/login/selected.jpg'
import UnSelected from '@/assets/oa/login/unselected.jpg'

const renderQRCode = props => {
    const qrcodes = props.qrcode.split('|') || [];
    if (qrcodes.length > 0 && qrcodes[0]) {
        let value = qrcodes[0].replace(/{ip}/gi, props.ip || window.location.host).split('=')[1];
        return <QRCode value={value} />;
    }
    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 [isOpen, setisOpen] = useState(false);
    const [isRember, setisRember] = useState(false);
    const [loginName, setloginName] = useState('');
    const [passWord, setpassWord] = 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'),
                week: handleWeek(),
                date: moment().format('YYYY/MM/DD')
            });
        }, 1000);
        return () => {
            clearInterval(timer);
        };
    }, [])


    // state = {
    //     loginStyle: false, //true  账号密码登录 false  扫码登录
    //     isOpen: false,   //查看密码
    //     isRember: false, //记住密码
    //     ddOrWeixin: ''
    // }

    // 查看密码
    const seePassWord = (e) => {
        // this.setState({
        //     isOpen: !this.state.isOpen
        // })
        setisOpen(!isOpen);
    }
    // 记住密码
    const remberWord = () => {
        // this.setState({
        //     isRember: !this.state.isRember
        // })
        setisRember(!isRember);
    }
    // 输入框变化
    const handleForm1 = (e) => {
        setloginName(e.target.value);
    }
    const handleForm2 = (e) => {
        setpassWord(e.target.value);
    }
    // 登录
    const loginToWeb5 = () => {
        // const { loginName, passWord, isRember } = this.state
        let action = new LoginAction(this.props, false, true)
        action.loginHandler(loginName, passWord, null, isRember, false)
        loginEvent(action)

    }
    // 登录成功事件
    const loginEvent = (action) => {
        action.globalConfig = this.props.global;
        this.props.updateCurrentIndex && this.props.updateCurrentIndex(-1);
        action && action.events.on('loginSuccess', event => {
            debugger
            this.props.updateCurrentIndex && this.props.updateCurrentIndex(0);
            this.props.history.push(`/?client=${this.props.global.client}`);
            // window.share.event.emit('triggerMicro', this.props.global);
            defaultApp();
        });
        action && action.events.on('loginError', event => {

        });
        action && action.events.on('loginVisible', status => {

        });
    }

    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()} */}
                            <form className={styles.loginForm} >
                                <div className={styles.formgroup}>
                                    <img src={MyHead} alt="" />
                                    <input type="text" className={styles.inputLg} id='loginName' name='loginName' value={loginName} onChange={handleForm1} placeholder="请输入你的用户名" />
                                </div>
                                <div className={styles.formgroup}>
                                    <img src={PassWord} alt="" />
                                    <input type={isOpen ? 'text' : "password"} className={styles.inputLg} id='passWord' name='passWord' value={passWord} onChange={handleForm2} placeholder="请输入你的密码" />
                                    <img className={styles.eyes} src={isOpen ? Open : Close} alt="" onMouseDown={(e) => seePassWord(e)} onMouseUp={(e) => seePassWord(e)} />
                                </div>
                                <div className={styles.formgroup} style={{ position: 'relative', marginTop: '20px' }}>
                                    <img src={isRember ? Selected : UnSelected} alt="" onClick={() => remberWord} style={{ width: '25px', height: '24px' }} />
                                    <span style={{ color: '#9FA8B3', marginLeft: '35px', fontSize: '14px' }}>下次自动登录</span>
                                </div>
                                <div className={styles.submitBtn} onClick={loginToWeb5}>登录</div>
                            </form>
                        </div>
                    </div>
                </div>
                <div className={styles['login-header']}>
                    <div className={styles['left-title']}>
                        <p className={styles.WXlogoImg}></p>
                        <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));