feat: 江水置换登录页

src/pages/user/login/index.js

@@ -9,6 +9,7 @@ import Yulin from './template/yulin';
 import EnergyQuota from './template/energy_quota/index';
 import CloudLogin from './template/cloud';
 import WaterLogin from './template/water';
+import JSZHLogin from './template/project/JSZH';
 import { initGlobalConfig } from '../../../initConfig';
 const LoginTemplate = {
   '新春 - 智联.html': NewYear,
@@ -19,6 +20,7 @@ const LoginTemplate = {
   '项目 - 榆林.html': Yulin,
   '能源-定额平台.html': EnergyQuota,
   'Water.html': WaterLogin,
+  '项目 - 江水置换.html': JSZHLogin,
   default: BaseLogin,
 };
 /* eslint-disable */

src/pages/user/login/template/project/JSZH/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 useTime from '../../../js/useTime';
+
+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 currentDate = useTime(); // 计时时间
+
+  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,
+    };
+    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.loginCenter}>
+        <div className={styles.loginCtop}>
+          <div className={styles.loginCTleft}>
+            <img src="/web4/assets/images/login/江水置换/小logo@2x.png" alt="" />
+            <p>平乡县水务局智慧水务综合管控平台</p>
+          </div>
+          <div className={styles.loginCTright}>
+            <p className={styles.time}>{currentDate.time}</p>
+            <div className={styles.dateBox}>
+              <p className={styles.week}>{currentDate.dayofweek}</p>
+              <p className={styles.date}>{currentDate.date}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.loginCcenter}>
+          <img src="/web4/assets/images/login/江水置换/形状 559@2x.png" alt="" className={styles.loginCCtitleImg} />
+          <div className={styles.loginCCbottomBox}>
+            <img src="/web4/assets/images/login/江水置换/图@2x.png" alt="" className={styles.loginCCbigImg} />
+            <div className={styles.loginCCright} ref={loginFormRef}>
+              <img src="/web4/assets/images/login/江水置换/大logo@2x.png" alt="" className={styles.loginCCRtitleImg} />
+              <div className={styles.loginForm}>{renderPlatform()}</div>
+            </div>
+            <div className={styles.loginCcode}>
+              <img src="/web4/assets/images/login/石家庄/小程序@2x.png" alt="" />
+              <div className={styles.codeBig}>{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/JSZH/index.less

+.login {
+    width: 100%;
+    height: 100%;
+}
+
+.loginCenter {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: url('assets/images/login/江水置换/bg.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: relative;
+    p {
+        margin: 0;
+    }
+}
+
+.loginCtop {
+    width: 100%;
+    height: 74px;
+    padding: 20px 30px;
+}
+
+.loginCTleft {
+    float: left;
+    img {
+        width: 40px;
+        float: left;
+    }
+    p {
+        float: left;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #0F293F;
+        margin: 0 14px;
+        letter-spacing: 2px;
+    }
+}
+
+.loginCTright {
+    float: right;
+    .time {
+        float: left;
+        font-size: 30px;
+        font-family: Microsoft YaHei UI;
+        font-weight: 400;
+        color: #0F293F;
+        margin-right: 20px;
+    }
+    .dateBox {
+        float: left;
+        font-size: 14px;
+        font-family: Microsoft YaHei UI;
+        font-weight: 300;
+        color: #0F293F;
+    }
+}
+
+
+.loginCcenter {
+    width: 1100px;
+    height: 650px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.loginCCtitleImg {
+    width: 682px;
+    height: 50px;
+    margin: auto;
+}
+
+.loginCCbottomBox {
+    width: 100%;
+}
+
+.loginCCbigImg {
+    width: 687px;
+    height: 600px;
+    float: left;
+}
+
+.loginCCright {
+    float: left;
+    width: 413px;
+    height: 600px;
+    background: white;
+    padding: 0 40px;
+}
+.loginForm {
+    & > div {
+        width: 100%;
+        text-align: left;
+    }
+}
+.loginForm .formgroup {
+    margin-bottom: 30px;
+    position: relative;
+    line-height: 1;
+}
+
+.loginForm .formgroup:nth-child(2) {
+    margin-bottom: 16px;
+}
+
+.loginForm .formgroup:nth-child(3) {
+    margin-bottom: 52px;
+    height: 30px;
+}
+
+.loginForm .formgroup input[type="checkbox"] {
+    width: 13px;
+    height: 13px;
+    margin-left: 12px;
+}
+
+.loginForm .formgroup input {
+    box-shadow: none;
+    font-size: 18px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #2D3033;
+    padding: 0 40px;
+}
+
+.loginForm .formgroup span {
+    position: relative;
+    top: -2px;
+    margin-left: 10px;
+    font-size: 14px;
+    float: right;
+    font-weight: 400;
+    color: #9FA8B3;
+}
+
+.loginForm .formgroup img {
+    position: absolute;
+    bottom: 10px;
+    height: 24px;
+    left: 6px;
+}
+
+// #usrInput,
+// #pwdInput,
+// #usrPhone,
+// #msgInput {
+//     background: transparent;
+//     border: none;
+//     border-bottom: 1px solid #D1DCEB;
+//     border-radius: 0;
+// }
+
+.loginForm .rmpwdInput span {
+    font-size: 12px;
+    color: #fff;
+    visibility: hidden;
+    position: absolute;
+    top: 3px;
+    left: -7px;
+}
+
+.loginForm .rmpwdInput.active {
+    background-color: #2ea0f2;
+}
+
+.loginForm .rmpwdInput.active span {
+    visibility: visible;
+    color: #fff;
+}
+
+.loginForm .rmpwdInput {
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    border: 1px solid #2ea0f2;
+    position: relative;
+    float: right;
+}
+
+.loginCCRtitleImg {
+    width: 100px;
+    margin: 80px 0 60px;
+}
+
+.loginForm .formgroup .loginCCpwdImg {
+    left: auto;
+}
+
+.eyesopen {
+    display: none;
+}
+
+.loginCCsubmit {
+    width: 205px;
+    border-radius: 25px;
+    outline: none;
+}
+
+.loginCcode {
+    width: 34px;
+    height: 34px;
+    position: absolute;
+    right: -33px;
+    background: rgba(255, 255, 255, 0.7);
+    padding: 6px;
+    border-radius: 0 3px 3px 0;
+    cursor: pointer;
+    bottom: 0;
+    &:hover {
+        display: block;
+        background: transparent;
+        img {
+            display: none;
+        }
+        .codeBig {
+            display: block;
+        }
+    }
+    img {
+        width: 23px;
+    }
+    .codeBig {
+        width: 128px;
+        height: 150px;
+        position: absolute;
+        bottom: 0;
+        left: 0px;
+        background: rgba(255, 255, 255, 0.7);
+        padding: 6px;
+        display: none;
+        span {
+            font-size: 12px;
+            opacity: 0.75;
+        }
+    }
+}
+
+
+
+.CodeText {
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #121F2B;
+    text-align: center;
+    line-height: 24px;
+}
\ No newline at end of file