perf: 增加登录页

public/web5Config.json

@@ -6,6 +6,9 @@
     {
       "title": "Water"
     },
+    {
+      "title": "Water2"
+    },
     {
       "title": "信息化"
     },
@@ -26,6 +29,9 @@
     },
     {
       "title": "项目 - 封丘"
+    },
+    {
+      "title": "项目 - 店头"
     }
   ]
 }
\ No newline at end of file

src/pages/user/login/index.js

@@ -23,6 +23,7 @@ import DarkNoEffect from './template/noEffect/DarkNoEffect';
 import CloudLogin from './template/cloud';
 import CloudNewLogin from './template/cloudNew';
 import WaterLogin from './template/water';
+import WaterLogin2 from './template/water/water.js';
 import JSZHLogin from './template/project/JSZH';
 import ChengmaiLogin from './template/project/chengmai';
 import HuhehaoteLogin from './template/project/huhehaote';
@@ -52,6 +53,7 @@ import ChinaShuiwu from './template/project/chinaShuiwu';
 import current from './template/current/index';
 import Linyou from './template/project/linyou';
 import FengqiuLogin from './template/project/fengqiu';
+import DiantouLogin from './template/project/diantou';
 import { AppInitState } from '../../../render';
 const LoginTemplate = {
   '新春.html': baseLoginNewYear,
@@ -71,6 +73,7 @@ const LoginTemplate = {
   '广州登录页.html': EnergGzV2,
   'DarkNoEffect.html': DarkNoEffect,
   'Water.html': WaterLogin,
+  'Water2.html': WaterLogin2,
   '项目 - 江水置换.html': JSZHLogin,
   '节水主题二.html': EnergJS2,
   '项目 - 澄迈.html': ChengmaiLogin,
@@ -101,6 +104,7 @@ const LoginTemplate = {
   '项目 - 中国水务.html': ChinaShuiwu,
   '项目 - 麟游.html': Linyou,
   '项目 - 封丘.html': FengqiuLogin,
+  '项目 - 店头.html': DiantouLogin,
   default: BaseLogin,
 };
 /* eslint-disable */

src/pages/user/login/template/project/diantou/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 } from '@wisdom-utils/runtime';
+import { actionCreators } from '@/containers/App/store';
+import Cookies from 'js-cookie';
+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 loginRef = useRef();
+    const timeRef = useRef();
+    const titleRef = useRef();
+    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 [currentDate, setCurrentDate] = useState({});
+    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));
+    let { ddCode } = props.global;
+    const loginMode = Cookies.get('loginMode') || null;
+    if (loginMode && loginMode === 'iotWechat') ddCode = null;
+    const handleSubmit = values => {
+        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(() => {
+        // if (props.loginMode === LOGIN_WAY.WeChart) {
+        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);
+            });
+        action.events.on('loginHomePage', () => {
+            props.history.push(`/homePage`);
+        })
+        action.events.on('loginIndustry', () => {
+            props.history.push(`/industry`);
+        });
+        return () => {
+            action && action.events && action.events.removeAllListeners('loginSuccess');
+            action && action.events && action.events.removeAllListeners('loginError');
+            action && action.events && action.events.removeAllListeners('loginVisible');
+            action && action.events && action.events.removeAllListeners('loginHomePage');
+            action && action.events && action.events.removeAllListeners('loginIndustry');
+        }
+    }, [props.loginMode]);
+
+    let loginTimeInterval = null;
+    let videoTimeout = null;
+    useEffect(() => {
+        if (loginTimeInterval)
+            clearInterval(loginTimeInterval), (loginTimeInterval = null);
+        loginTimeInterval = setInterval(() => {
+            const date = new Date();
+            const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+            const time = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
+                }:${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
+                }:${date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
+                }`;
+            setCurrentDate({
+                time,
+                dayofweek: weekday[date.getDay()],
+                date: date.pattern('yyyy/MM/dd'),
+            });
+        }, 1000);
+        return () => {
+            loginTimeInterval && clearInterval(loginTimeInterval);
+        };
+    }, []);
+
+    useEffect(() => {
+        dom.removeClass(loginRef.current, styles.caseHide);
+        dom.addClass(loginRef.current, styles.loginTimeShow);
+        videoTimeout = setTimeout(() => {
+            dom.removeClass(timeRef.current, styles.caseHide);
+            dom.addClass(timeRef.current, 'animate__fadeIn');
+            dom.removeClass(loginFormRef.current, styles.caseHide);
+            dom.addClass(loginFormRef.current, 'animate__fadeInUp');
+            dom.removeClass(footerRef.current, styles.caseHide);
+            dom.addClass(footerRef.current, 'animate__slideInUp');
+            dom.removeClass(titleRef.current, styles.caseHide);
+            dom.addClass(titleRef.current, 'animte__fadeInUp');
+        }, 500);
+    }, []);
+    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,
+        };
+        switch (template) {
+            case 'DarkCloud.html':
+            case 'Dark.html':
+                return <Account {...params} />;
+            case 'Dark - IOTMultiLogin.html':
+                return <IotComponent {...params} />;
+            default:
+                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}>
+                <div className={styles.LYinner}>
+                    <div className={classNames(styles.loginTime, styles.caseHide)} ref={loginRef}  >
+                        <img role="logo" src={props.global && props.global.transformDevAssetsBaseURL && props.global.transformDevAssetsBaseURL(props.global.logo)} />
+                        <div className={classNames(styles.titleCase, styles.caseHide, 'animated',)} ref={titleRef} >
+                            <span className={styles.title}>{props.global.title}</span>
+                            <span className={styles.subtitle}>{window.globalConfig && window.globalConfig.subtitle}</span>
+                        </div>
+                    </div>
+                    <span className={classNames(styles.divider, styles.caseHide, 'animate__animated',)} />
+                    <div className={classNames(styles.timeCase, styles.caseHide, 'animate__animated',)} ref={timeRef} >
+                        <span className={styles.time}>{currentDate.time}</span>
+                        <span className={styles.dayofweek}>{currentDate.dayofweek}</span>
+                        <span className={styles.date}>{currentDate.date}</span>
+                    </div>
+                    <div className={classNames(styles['login-block'], styles.caseHide, 'animate__animated',)} ref={loginFormRef}  >
+                        <div>
+                            <img src={require('@/assets/images/login/dark/login.png')} />
+                        </div>
+                        <div className={styles['login-form']}>{renderPlatform()}</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,
+)((Login));

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

@@ -26,10 +26,40 @@
     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;
+        }
+    }
+
+    .title-block2 {
+        display: flex;
+        flex-flow: column;
+
         img {
             height: 64px;
             filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
         }
+
         h1 {
             display: inline;
             margin: auto;
@@ -39,6 +69,7 @@
             font-size: 50px;
             text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
         }
+
         h2 {
             margin: 15px 0 0 0;
             vertical-align: middle;
@@ -47,16 +78,19 @@
             text-align: center;
         }
     }
+
     .login-block {
         width: 500px;
         margin: 60px 0 150px 0;
         position: relative;
+
         .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 {
+
+            &>div {
                 width: 100%;
             }
 
@@ -64,16 +98,16 @@
                 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;
@@ -82,20 +116,21 @@
                 outline: none !important;
                 border-color: transparent !important;
             }
-            
+
             .glyphicon {
                 color: #35B2F1;
             }
-            
+
             .input-group-addon {
                 background-color: #fff;
             }
-            
+
             .input-lg,
             .btn-lg {
                 height: 40px;
             }
         }
+
         .loginCcode {
             width: 34px;
             height: 34px;
@@ -106,19 +141,24 @@
             border-radius: 0 3px 3px 0;
             cursor: pointer;
             bottom: 3px;
+
             &:hover {
                 display: block;
                 background: transparent;
+
                 img {
                     display: none;
                 }
+
                 .codeBig {
                     display: block;
                 }
             }
+
             img {
                 width: 23px;
             }
+
             .codeBig {
                 width: 140px;
                 height: 140px;
@@ -128,6 +168,7 @@
                 background: rgba(255, 255, 255, 0.7);
                 padding: 6px;
                 display: none;
+
                 span {
                     font-size: 12px;
                     opacity: 0.75;
@@ -233,17 +274,21 @@
         font-size: 13px;
         color: #fff;
         display: none;
+
         a {
             color: #eee;
             text-decoration: underline;
         }
+
         .addons {
             display: none;
         }
+
         .split {
             border-left: 1px solid white;
             margin: 0 8px;
         }
+
         .glyphicon-qrcode {
             vertical-align: text-top;
         }

src/pages/user/login/template/water/water.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';
+import QRCode from 'qrcode.react';
+
+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 footerRef = useRef();
+  const [status, setStatus] = useState('normal');
+  const [autoLogin, setAutoLogin] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const qrcodes = props.global?.qrcode?.split('|') ?? [];
+  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);
+      });
+    action.events.on('loginHomePage', () => {
+      props.history.push(`/homePage`);
+    })
+    action.events.on('loginIndustry', () => {
+      props.history.push(`/industry`);
+    });
+    return () => {
+      action && action.events && action.events.removeAllListeners('loginSuccess');
+      action && action.events && action.events.removeAllListeners('loginError');
+      action && action.events && action.events.removeAllListeners('loginVisible');
+      action && action.events && action.events.removeAllListeners('loginHomePage');
+      action && action.events && action.events.removeAllListeners('loginIndustry');
+    };
+  }, [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={
+            props.global &&
+            props.global.transformDevAssetsBaseURL &&
+            props.global.transformDevAssetsBaseURL('assets/videos/water.mp4')
+          }
+          muted={true}
+          poster={
+            props.global &&
+            props.global.transformDevAssetsBaseURL &&
+            props.global.transformDevAssetsBaseURL('/assets/videos/water.png')
+          }
+          autoPlay={true}
+          loop={true}
+        />
+        <div className={styles.layer2}>
+          <div class={styles['title-block2']}>
+            <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>
+            {
+              qrcodes.length > 0 && qrcodes[0]
+                ?
+                <div className={styles.loginCcode}>
+                  <img
+                    src={
+                      props.global &&
+                      props.global.transformDevAssetsBaseURL &&
+                      props.global.transformDevAssetsBaseURL('assets/images/login/石家庄/小程序@2x.png')
+                    }
+                    alt=""
+                  />
+                  <div className={styles.codeBig}>{renderQRCode(props.global)}</div>
+                </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));