feat: 新增water通用登录页

src/pages/user/login/index.js

@@ -8,6 +8,7 @@ import Yulin from './template/yulin';
 // import { useParams } from '@wisdom-utils/runtime';
 import EnergyQuota from './template/energy_quota/index';
 import CloudLogin from './template/cloud';
+import WaterLogin from './template/water';
 import { initGlobalConfig } from '../../../initConfig';
 const LoginTemplate = {
   '新春 - 智联.html': NewYear,
@@ -17,6 +18,7 @@ const LoginTemplate = {
   '信息化.html': InfoLogin,
   '项目 - 榆林.html': Yulin,
   '能源-定额平台.html': EnergyQuota,
+  'Water.html': WaterLogin,
   default: BaseLogin,
 };
 /* eslint-disable */

src/pages/user/login/template/water/index.js

+import 'kit_utils/lib/format';
+
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { Modal } from 'antd';
+import classNames from 'classnames';
+import { dom } from '@wisdom-utils/utils/lib/helpers';
+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 useRenderQcode from '../../js/useRenderQcode';
+import Account from '../../js/useAccount';
+import IotComponent from '../../js/useIOTComponent';
+import { defaultApp } from '../../../../../micro';
+
+const Login = forwardRef((props, _ref) => {
+  const sliVerify = useRef();
+  const loginFormRef = useRef();
+  const formRef = useRef(null);
+  const footerRef = useRef();
+  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 renderAddons = useRenderQcode(props.global);
+  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.main}>
+        <video
+          class={styles.layer1}
+          src="/web4/assets/videos/water.mp4"
+          muted
+          poster="/web4/assets/videos/water.png"
+          autoplay
+          loop
+        />
+        <div className={styles.layer2}>
+          <div class={styles['title-block']}>
+            <img
+              role="logo"
+              src={
+                props.global &&
+                props.global.transformDevAssetsBaseURL &&
+                props.global.transformDevAssetsBaseURL(props.global.logo)
+              }
+            />
+            <h1>{props.global.title}</h1>
+            <h2>{window.globalConfig && window.globalConfig.subtitle}</h2>
+          </div>
+          <div className={classNames(styles['login-block'], styles.caseHide, 'animate__animated')} ref={loginFormRef}>
+            <div className={styles['login-form']}>{renderPlatform()}</div>
+          </div>
+        </div>
+
+        <div className={classNames(styles.footerCase, 'animate__animated')} ref={footerRef}>
+          <div className={classNames(styles.quickMark)}>{renderAddons}</div>
+          <span className={classNames(styles.copyright)}>
+            Copyright ©
+            <a target="_blank" href="https://panda-water.cn">
+              熊猫智慧水务
+            </a>
+            {new Date().getFullYear()} All Rights Reserved{' '}
+            <a target="_blank" id="IndexCaseNumber" href="">
+              沪ICP备11036640-1
+            </a>
+            <span className="addons">
+              <span className="split" />
+              <a id="qrcode">
+                <span className="glyphicon glyphicon-qrcode" role="button" title="手持APP下载" />
+              </a>
+            </span>
+          </span>
+        </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/water/index.less

+.main {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.layer1 {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    object-fit: fill;
+
+}
+
+.layer2 {
+    width: 100%;
+    height: 100%;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -ms-flex-align: center;
+    align-items: center;
+    flex-flow: column nowrap;
+    position: absolute;
+    z-index: 2;
+
+    .title-block {
+        img {
+            height: 64px;
+            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
+        }
+        h1 {
+            display: inline;
+            margin: auto;
+            vertical-align: middle;
+            color: #fff;
+            margin-left: 10px;
+            font-size: 50px;
+            text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
+        }
+        h2 {
+            margin: 15px 0 0 0;
+            vertical-align: middle;
+            color: #fff;
+            text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
+            text-align: center;
+        }
+    }
+    .login-block {
+        width: 500px;
+        margin: 60px 0 150px 0;
+        .login-form {
+            background-color: rgba(255, 255, 255, 0.5);
+            border-radius: 4px;
+            box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
+            padding: 50px;
+            & > div {
+                width: 100%;
+            }
+
+            .rememberpwd input[type="checkbox"] {
+                width: 16px;
+                height: 16px;
+            }
+            
+            .form-group input {
+                font-size: 16px;
+            }
+            
+            .rememberpwd span {
+                position: relative;
+                top: -3px;
+            }
+            
+            button[type="submit"] {
+                width: 100%;
+                background-color: #35B2F1 !important;
+                border: none !important;
+                color: #fff !important;
+                outline: none !important;
+                border-color: transparent !important;
+            }
+            
+            .glyphicon {
+                color: #35B2F1;
+            }
+            
+            .input-group-addon {
+                background-color: #fff;
+            }
+            
+            .input-lg,
+            .btn-lg {
+                height: 40px;
+            }
+        }
+    }
+}
+
+
+@-moz-document url-prefix() {
+    .layer1 {
+        height: 100%;
+    }
+}
+
+@-moz-document url-prefix() {
+    .layer1 {
+        height: 100%;
+    }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    .layer1 {
+        height: 100%;
+    }
+}
+
+.footerCase {
+    width: 100%;
+    height: 16%;
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    .quickMark {
+        position: absolute;
+        bottom: 48px;
+        text-align: center;
+        width: 100%;
+        font-size: 12px;
+        min-height: 71px;
+
+        &-single {
+            text-align: center;
+            width: 120px;
+            display: inline-block;
+
+            span {
+                &.Android {
+                    display: block;
+                    background-image: url(https://panda-water.cn/web4/assets/images/login/dark/Android1.png);
+                    width: 26px;
+                    height: 32px;
+                    margin: auto;
+                    margin-bottom: 6px;
+                }
+
+                &.Wechat {
+                    display: block;
+                    background-image: url(https://panda-water.cn/web4/assets/images/login/dark/Wechat1.png);
+                    width: 34px;
+                    height: 32px;
+                    margin: auto;
+                    margin-bottom: 6px;
+                }
+
+                &.iphone {
+                    display: block;
+                    background-image: url(https://panda-water.cn/web4/assets/images/login/dark/iphone1.png);
+                    width: 28px;
+                    height: 32px;
+                    margin: auto;
+                    margin-bottom: 6px;
+                }
+            }
+        }
+
+        .Android-single .Android-code,
+        .iphone-single .iphone-code {
+            margin: 0px 0px 10px 0px;
+            width: 150px;
+            height: 150px;
+            background: #fff;
+            padding: 5px;
+            display: none;
+            transform: translateX(-15px);
+        }
+
+        .icon-Container {
+            height: 50px;
+            cursor: pointer;
+        }
+    }
+
+    .copyright {
+        position: absolute;
+        z-index: 2;
+        text-align: center;
+        width: 100%;
+        bottom: 10px;
+        font-size: 13px;
+        color: #fff;
+        a {
+            color: #eee;
+            text-decoration: underline;
+        }
+        .addons {
+            display: none;
+        }
+        .split {
+            border-left: 1px solid white;
+            margin: 0 8px;
+        }
+        .glyphicon-qrcode {
+            vertical-align: text-top;
+        }
+    }
+}
\ No newline at end of file