index.js

/* eslint-disable */
/*
 * @Author: hujinjie;
 * @Date: 2022-4-14
 * @Description: 华农登录页;
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from '@wisdom-utils/runtime';
import { Modal } from 'antd';
import { HelmetProvider, Helmet } from 'react-helmet-async';
import FormLogin from './FormLogin';
import { actionCreators } from '@/containers/App/store';
import LoginAction from '../../login';
import styles from './index.less';
import { defaultApp } from '@/micro';
class HuaNongLogin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: '16:00',
      week: '星期一',
      date: '2020-04-14',
      title: '华中农业大学二级单位定额与建筑能耗管理系统',
      type: 'Account',
      status: 'normal',
      submitting: false,
      autoLogin: false,
      visible: false,
      action: new LoginAction(Object.assign({}, props, { history: props.history }), this.setVisible, true),
    };
    this.fromRef = React.createRef();
    this.sliVerify = React.createRef();
  }
  handleSubmit = values => {
    const { action, type, autoLogin } = this.state;
    action &&
      (type === 'Account'
        ? action.loginHandler(values.userName, values.password, null, autoLogin, this.sliVerify)
        : type === 'Mobile'
        ? action.phoneLoginFormHandler(values.mobile, values.captcha)
        : null);

    this.setSubmitting(true);
    this.props.updateCurrentIndex(-1);
  };
  onActinoChange = action => {
    action &&
      action.events.on('loginSuccess', event => {
        this.setSubmitting(false);
        this.props.updateCurrentIndex && this.props.updateCurrentIndex(0);
        this.props.history.push(`/?client=${this.props.global.client}`);
        defaultApp();
      });
    action &&
      action.events.on('loginError', event => {
        this.setVisible(false);
        this.setSubmitting(false);
      });
    action &&
      action.events.on('loginVisible', status => {
        this.setVisible(status);
      });
  };
  setSubmitting = submitting => {
    this.setState({ submitting });
  };
  setVisible = visible => {
    this.setState({
      visible,
    });
  };
  setType = type => {
    this.setState({
      type,
    });
  };
  setAutoLogin = autoLogin => {
    this.setState({
      autoLogin,
    });
  };
  renderPlatform() {
    const params = {
      fromRef: this.formRef,
      type: this.state.type,
      setType: this.setType,
      status: this.state.status,
      submitting: this.state.submitting,
      autoLogin: this.state.autoLogin,
      setAutoLogin: this.setAutoLogin,
      action: this.state.action,
      onSubmit: this.handleSubmit,
      loginMode: this.props.loginMode,
      updateLoginMode: this.props.updateLoginMode,
    };
    return <FormLogin {...params} />;
  }
  getCurrentTime(callback) {
    const date = new Date();
    const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    let minutes = date.getMinutes();
    if (minutes < 10) {
      minutes = '0' + minutes;
    }
    let second = date.getSeconds();
    const time = `${date.getHours()}:${minutes}`;
    const weekDay = week[date.getDay()];
    const dateStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const dateObj = {
      time,
      week: weekDay,
      date: dateStr,
      second,
    };
    callback && callback(dateObj);
  }
  showTime = (date) => {
    this.clearTime();
    this.setState({
      ...date,
    });
    const interval = 60 - date.second;
    this.timeTimer = setInterval(() => {
      this.getCurrentTime(this.showTime);
    }, interval * 1000);
  }
  // 清除时间定时器
  clearTime() {
    this.timeTimer && clearInterval(this.timeTimer);
  }
  componentDidMount() {
    console.log(this.props);
    console.log(this);
    this.onActinoChange(this.state.action);
    this.getCurrentTime(this.showTime);
  }
  componentWillUnmount() {
    this.clearTime();
  }
  render() {
    return (
      <HelmetProvider>
        <div className={styles.quota}>
          <div className={styles.head}>
              <div className={styles.title}>
                <img src={this.props.global && this.props.global.transformDevAssetsBaseURL && this.props.global.transformDevAssetsBaseURL(this.props.global.logo)} alt="" />
                {/* <img src={require('@/assets/images/login/能源-定额/华农logo.png')} alt="" /> */}
                <span>{this.props.global.title || this.state.title}</span>
              </div>
            <div className={styles.time_and_date}>
              <div className={styles.time}>{this.state.time}</div>
              <div className={styles.date}>
                <span>{this.state.week}</span>
                <span>{this.state.date}</span>
              </div>
            </div>
          </div>
          <div className={styles.wrap_content}>
            <div className={styles.from}>
              <div className={styles.slogan}>
                <div className={styles.slogan_back} />
              </div>
              <div className={styles.login}>{this.renderPlatform()}</div>
            </div>
          </div>
          <Modal
            centered
            visible={this.state.visible}
            width={340}
            footer={null}
            closable={false}
            bodyStyle={{ padding: '15px' }}
          >
            <div ref={this.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(HuaNongLogin));