index.js

/*
 * 功能名称: 宿州登录页
 * 功能路径:
 * 功能参数:
 */

import React, { forwardRef, useEffect, useRef, useState } from 'react';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
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 classnames from 'classnames';
import moment from 'moment';
import QueueAnim from 'rc-queue-anim';
import QRCode from 'qrcode.react';
import defaultSetting from '../../../../../../../config/defaultSetting';
import LoginAction from '../../../login';
import styles from './index.less';
import Account from './Account';
import { defaultApp } from '../../../../../../micro';
import logo from './images/logo.png';
import qrcodePng from './images/1.png';
import loginTitlePng from './images/text.png';
import Krpano from '../../../components/Krpano';
// 背景图在这里引入一次，避免打包时丢失
import 背景 from './images/背景.png';
import left from './images/left.png';
import 标题 from './images/标题.png';
import 登录btn from './images/登录btn.png';
import 展开bg from './images/展开bg.png';

const PopOvercontent = () => {
  const qrcodes = window.globalConfig && window.globalConfig.qrcode;
  if (qrcodes) {
    return <QRCode value={qrcodes} />;
  }
  return <span>手持APP下载未配置</span>;
};
const welcomeList = ['诚信为基', '合作共赢', '以人为本', '效益优先'];

const Login = forwardRef((props, _ref) => {
  const { isVerificationCode, isVerification, verificationCodeType } = window.globalConfig;
  const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
  const loginFormRef = useRef();
  const formRef = useRef(null);
  const krpanoObjRef = useRef(null);
  const krpanoRef = useRef(null);
  const krpanoSceneIdRef = useRef(localStorage.getItem('loginKrpanoSceneId'));
  const [status, setStatus] = useState('normal');
  const [showList, setShowList] = useState(false);
  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 { projectName } = props.loginParams;
  const [tabShow, setTabShow] = useState(false);
  const handleSubmit = values => {
    /* eslint-disable */
    action &&
      (type === 'Account'
        ? isValidate
          ? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, 'none', values?.validate)
          : 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}`);

        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} isValidate={isValidate} />;
  };
  /* 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 7:
        weekDayName = '周日';
        break;
      default:
        weekDayName = '';
    }
    return weekDayName;
  };
  const onChangeShow = () => {
    setShowList(!showList);
  };
  const loadedHook = ({ krpanoSwfObject, krpano, json, eventEmitter }) => {
    krpanoObjRef.current = krpanoSwfObject;
    if (krpanoSceneIdRef.current && krpanoObjRef.current) {
      krpanoSwfObject.callKrpano(
        `autorotate.interrupt();loadscene(${krpanoSceneIdRef.current},null, MERGE, BLEND(1.0))`,
      );
    }
    krpanoRef.current = krpano;
    window.krpano = krpano;
    setTabShow(true);
  };
  const sceneLoadedHook = scenename => {
    if (krpanoRef.current) {
      const id = krpanoRef.current.get('xml.scene');
      localStorage.setItem('loginKrpanoSceneId', id || null);
    }
  };
  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.suzhoulogin, 'suzhoulogin')}>
        <div className={classnames(styles['wrapper'])}>
          <QueueAnim type="scale" duration={1000}>
            <div key={'innerwrapper'} className={classnames(styles['inner-wrapper'])}>
              <div className={classnames(styles['inner-center'])}>
                <div className={styles['welcome-title']}>
                  <img src={loginTitlePng} alt="login-title" className={styles['welcome-title-img']} />
                </div>
                <div className={styles['welcome-list']}>
                  {welcomeList.map(item => (
                    <div className={styles['welcome-list_item']} key={item}>
                      {item}
                    </div>
                  ))}
                </div>
                <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
                  {renderPlatform()}
                </div>
              </div>
              <Popover
                content={PopOvercontent}
                title="扫码下载APP"
                placement="right"
                overlayClassName={'popover-style'}
              >
                <img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
              </Popover>
            </div>
          </QueueAnim>

          <div key="loginheader" className={classnames(styles['login-header'])}>
            <QueueAnim type="left">
              <div key="logintitle" className={styles['left-title']}>
                <div>
                  <img src={logo} alt="logo" />
                </div>
                <div className={styles['cn-title']} />
              </div>
            </QueueAnim>
            <QueueAnim type="right">
              <div key="logintime" 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>
            </QueueAnim>
          </div>
          {/* <div className={styles['copyright']}>
            Copyright ©水务投资建设有限公司All Rights Reserved{' '}
            <a target="_blank" id="IndexCaseNumber" href="https://">
              渝ICP备
            </a>
          </div> */}
        </div>
        <div className={classnames(styles['krpano'], 'suzhou_krpano', !showList ? 'suzhou_hideList' : '')}>
          {tabShow ? (
            <div className={classnames(styles.krpano_btn, 'krpano_btn')} onClick={onChangeShow}>
              {showList ? (
                <CaretDownOutlined className={styles.krpano_btn_icon} />
              ) : (
                <CaretUpOutlined className={styles.krpano_btn_icon} />
              )}
              切换全景
            </div>
          ) : null}

          <Krpano
            projectName={projectName}
            style={{ background: '#fff' }}
            loadedHook={loadedHook}
            sceneLoadedHook={sceneLoadedHook}
          />
        </div>
      </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));