feat: 添加澄迈登录页

src/pages/user/login/index.js

@@ -17,6 +17,7 @@ import EnergGz from './template/energy_GZ/index';
 import CloudLogin from './template/cloud';
 import WaterLogin from './template/water';
 import JSZHLogin from './template/project/JSZH';
+import ChengmaiLogin from './template/project/chengmai';
 import { AppInitState } from '../../../render';
 const LoginTemplate = {
   '新春 - 智联.html': NewYear,
@@ -29,6 +30,7 @@ const LoginTemplate = {
   '节水主题一.html':EnergGz,
   'Water.html': WaterLogin,
   '项目 - 江水置换.html': JSZHLogin,
+  '项目 - 澄迈.html': ChengmaiLogin,
   default: BaseLogin,
 };
 /* eslint-disable */

src/pages/user/login/template/project/chengmai/index.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';
+
+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 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 */
+
+
+  return (
+    <HelmetProvider>
+      <Helmet>
+        <title>{props.global.title || defaultSetting.title}</title>
+        <meta name="description" content={props.global.title || defaultSetting.title} />
+      </Helmet>
+      <div className={styles.login}>
+        <div className={styles['inner-wrapper']}>
+          <div className={styles['inner-center']}>
+            <div className={styles['img-wrapper']} />
+            <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+              {renderPlatform()}
+            </div>
+            <div className={styles['APPcodeBox']}>
+              <p className={styles['APPCtext']}>查看二维码，扫码下载APP</p>
+              <div className={styles['APPCimg']}>{renderQRCode(props.global)}</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));

src/pages/user/login/template/project/chengmai/index.less

+.login {
+  width: 100%;
+  height: 100%;
+  background: url('./images/2.png') no-repeat center;
+  background-size: 100% 100%;
+  background-clip: border-box;
+  position: relative;
+  min-height: 7.0rem;
+  overflow: hidden;
+}
+
+.login .inner-bg {
+  width: 100%;
+  height: 100%;
+
+
+  &>div {
+    width: 70%;
+    margin: 0 auto;
+  }
+}
+
+.inner-wrapper {
+  width: 29.6%;
+  position: absolute;
+  top: 46%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.img-wrapper {
+  width: 388px;
+  height: 134px;
+  background: url('./images/1.png') no-repeat center;
+  background-size: 100% 100%;
+  margin-bottom: 48px;
+}
+
+.login .inner-bg img[role="logo"] {
+  height: 40px;
+}
+
+.login .inner-bg .title {
+  font-size: 27px;
+  font-weight: bold;
+  color: rgba(255, 255, 255, 1);
+  letter-spacing: 2px;
+}
+
+@keyframes waving {
+  from {
+    top: 0;
+  }
+
+  to {
+    top: 10px;
+  }
+}
+
+@keyframes waving2 {
+  from {
+    left: 0;
+  }
+
+  to {
+    left: -9999px;
+  }
+}
+
+.form-control:focus {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+
+input::-webkit-input-placeholder {
+  /* placeholder颜色  */
+  color: #B6C1CD !important;
+  /* placeholder字体大小  */
+  font-size: 18px;
+}
+
+.inner-center {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+
+.formgroup2 {
+  display: flex;
+  align-items: center;
+  display: flex;
+  margin: 0px 5.5%;
+  margin-bottom: 10%;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+.APPcodeBox {
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.APPCtext {
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #000000;
+  line-height: 30px;
+  opacity: 0.75;
+}
+
+.APPCimg {
+  width: 138px;
+  height: 150px;
+  background: url('./images/3.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  display: none;
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 23px 11px 12px;
+  span {
+    font-size: 12px;
+    opacity: 0.75;
+  }
+}
+
+.APPcodeBox:hover .APPCtext {
+  color: #1685FF;
+}
+
+.APPcodeBox:hover .APPCimg {
+  display: flex;
+}
+
+.APPCimg .codeCase {
+  text-align: center;
+  padding-top: 32px;
+}
\ No newline at end of file