feat: 无动画登录界面

src/pages/user/login/index.js

@@ -18,6 +18,7 @@ import EnergyQuota from './template/energy_quota/index';
 import EnergGz from './template/energy_GZ/index';
 import EnergGzV2 from './template/energy_GZV2/index'; // 广州单点登录跳转
 import EnergJS2 from './template/energy_JS2/index';
+import DarkNoEffect from './template/noEffect/DarkNoEffect';
 import CloudLogin from './template/cloud';
 import WaterLogin from './template/water';
 import JSZHLogin from './template/project/JSZH';
@@ -55,6 +56,7 @@ const LoginTemplate = {
   '能源-定额平台.html': EnergyQuota,
   '节水主题一.html': EnergGz,
   '广州登录页.html': EnergGzV2,
+  'DarkNoEffect.html': DarkNoEffect,
   'Water.html': WaterLogin,
   '项目 - 江水置换.html': JSZHLogin,
   '节水主题二.html': EnergJS2,
@@ -84,24 +86,24 @@ const LoginTemplate = {
 };
 /* eslint-disable */
 export default (props) => {
-  const {location} = props.history;
+  const { location } = props.history;
   useEffect(() => {
-    if(location.state && location.state.reload && !window.qiankunIsCache) {
+    if (location.state && location.state.reload && !window.qiankunIsCache) {
       AppInitState();
     }
   }, []);
-  if(Object.keys(window.globalConfig || {}).length === 0 || (window.globalConfig && !window.globalConfig.loginTemplate)) return null;
+  if (Object.keys(window.globalConfig || {}).length === 0 || (window.globalConfig && !window.globalConfig.loginTemplate)) return null;
   let template = window.globalConfig && window.globalConfig.loginTemplate;
-  let  arr =template.split('|')
-  let loginParams=[]
-  if(arr.length>1){
-    template=arr[0]
-    loginParams =arr[1].split('&')
+  let arr = template.split('|')
+  let loginParams = []
+  if (arr.length > 1) {
+    template = arr[0]
+    loginParams = arr[1].split('&')
   }
-  if(template.indexOf('.html') == -1){
+  if (template.indexOf('.html') == -1) {
     template += '.html';
   }
-  const RenderComponent = LoginTemplate[template] ? LoginTemplate[template]: LoginTemplate['default'];
-  return <RenderComponent {...props} loginParams={loginParams}/>
+  const RenderComponent = LoginTemplate[template] ? LoginTemplate[template] : LoginTemplate['default'];
+  return <RenderComponent {...props} loginParams={loginParams} />
 };
 

src/pages/user/login/template/noEffect/DarkNoEffect.js

+import 'kit_utils/lib/format';
+
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { Modal } from 'antd';
+// eslint-disable-next-line import/no-unresolved
+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 { defaultApp } from '@/micro';
+import LoginAction from '../../login';
+import styles from './style.less';
+import useRenderQcode from '../../js/useRenderQcode';
+import Account from '../../js/useAccount';
+import IotComponent from '../../js/useIOTComponent';
+const Login = forwardRef((props, _ref) => {
+  const videoRef = useRef();
+  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));
+  const [showVideo, setShowVideo] = useState(false);
+  let { ddCode } = props.global;
+  const loginMode = Cookies.get('loginMode') || null;
+  if (loginMode && loginMode === 'iotWechat') ddCode = null;
+  // useEffect(() => {
+  //   action.globalConfig = props.global;
+  // }, [props.global]);
+
+  const GetParams = params => {
+    const obj = {};
+    if (params && params.length) {
+      params.forEach(ele => {
+        if (ele && ele.includes('=')) {
+          const [temp1, temp2] = ele.split('=');
+          obj[temp1] = temp2;
+        }
+      });
+    }
+    return obj;
+  };
+
+  const paramsObj = GetParams(props.loginParams);
+
+  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(() => {
+    // 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);
+      });
+    // }
+    return () => {
+      action && action.events && action.events.removeAllListeners('loginSuccess');
+      action && action.events && action.events.removeAllListeners('loginError');
+      action && action.events && action.events.removeAllListeners('loginVisible');
+    }
+  }, [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(() => {
+
+
+    return () => {
+      videoTimeout && clearTimeout(videoTimeout);
+      videoRef && videoRef.current && videoRef.current.removeEventListener('ended', () => { });
+    };
+  }, [videoRef]);
+  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={classNames(styles.inner, styles.noEffect)}>
+          <div
+            className={classNames(styles.loginTime, styles.loginTimeShow)}
+            ref={loginRef}
+          >
+            <img
+              role="logo"
+              src={props.global && props.global.transformDevAssetsBaseURL && props.global.transformDevAssetsBaseURL(props.global.logo)}
+            />
+            <div
+              className={classNames(
+                styles.titleCase,
+                '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,
+              'animate__animated',
+            )}
+          />
+          <div
+            className={classNames(
+              styles.timeCase,
+              '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'],
+              'animate__animated',
+            )}
+            ref={loginFormRef}
+          >
+            <div>
+              <img src={require('@/assets/images/login/dark/login.png')} />
+            </div>
+            <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>
+          {
+            (paramsObj && !paramsObj.noCopyright) &&
+            <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="https://beian.miit.gov.cn">
+                沪ICP备18045097号-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,
+)((Login));

src/pages/user/login/template/noEffect/style.less

+@import '~antd/es/style/themes/variable.less';
+@userPageLogin-prefix-cls: ~'@{ant-prefix}-pro-pages-user-login';
+
+@keyframes loginTimeShow {
+  0% {
+    opacity: 1;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    zoom: 2;
+  }
+
+  50% {
+    opacity: 1;
+    top: 28px;
+    left: 45px;
+    transform: translate(0, 0);
+    zoom: 1;
+  }
+
+  60% {
+    opacity: 1;
+    left: 45px;
+    top: 28px;
+    transform: translate(0, 0);
+  }
+
+  70% {
+    opacity: 1;
+    left: 45px;
+    top: 28px;
+    transform: translate(0, 0);
+  }
+
+  75% {
+    opacity: 1;
+    left: 45px;
+    top: 28px;
+    transform: translate(0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    left: 45px;
+    top: 28px;
+    transform: translate(0, 0);
+  }
+}
+
+.main {
+  // width: 368px;
+  margin: 0 auto;
+  height: 100%;
+  width: 100%;
+
+  @media screen and (max-width: @screen-sm) {
+    width: 95%;
+  }
+
+  .icon {
+    margin-left: 16px;
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  .other {
+    margin-top: 24px;
+    line-height: 22px;
+    text-align: left;
+
+    .register {
+      float: right;
+    }
+  }
+
+  .videLayer {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: fill;
+  }
+
+  .inner {
+    position: absolute;
+    width: 100%;
+    height: 84%;
+
+    &.newYearInner {
+      height: 100% !important;
+    }
+
+    .loginTime {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 1;
+      transform: translate(-50%, -50%);
+
+      &.newYearLoginTime {
+        position: absolute !important;
+        top: 28px !important;
+        left: 45px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        transform: inherit !important;
+
+      }
+
+      img[role='logo'] {
+        height: 40px;
+        vertical-align: middle;
+      }
+
+      &.loginTimeShow {
+        animation-name: loginTimeShow;
+        animation-duration: 1s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+      }
+
+      .titleCase {
+        display: flex;
+        flex-direction: column;
+        margin: -5px 0 0 20px;
+
+        // max-width: 570px;
+        .title,
+        .subtitle {
+          font-family: 'Microsoft YaHei';
+          text-align: left;
+          overflow-wrap: break-word;
+          color: #ffffff;
+        }
+
+        .title {
+          font-size: 28px;
+        }
+
+        .subtitle {
+          font-size: 12px;
+          line-height: 1;
+        }
+      }
+    }
+
+    .divider {
+      height: 1px;
+      background: rgba(255, 255, 255, 0.75);
+      opacity: 0.29;
+      width: 100%;
+      position: absolute;
+      top: 90px;
+      color: #e1e1e1;
+      padding: 0 0.7em;
+    }
+
+    .timeCase {
+
+      .time,
+      .dayofweek,
+      .date {
+        position: absolute;
+        font-family: 'MicrosoftYaHeiUI';
+        color: rgba(255, 255, 255, 1);
+      }
+
+      .time {
+        top: 26px;
+        right: 170px;
+        font-size: 40px;
+        margin-right: 10px;
+      }
+
+      .dayofweek {
+        top: 32px;
+        right: 125px;
+        font-size: 16px;
+      }
+
+      .date {
+        top: 57px;
+        right: 95px;
+        font-size: 14px;
+      }
+    }
+
+    .loginBlockWrapper {
+      width: 100%;
+      height: 100%;
+      background-image: url(https://panda-water.com/web4/assets/images/login/workflow/智联新春背景.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .login-block {
+      width: 800px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -400px;
+      margin-top: -150px;
+      display: flex;
+      background: #ffffff;
+
+      &.login-newYear-block {
+        width: 994px !important;
+        height: 424px !important;
+        margin-left: -497px !important;
+        margin-top: -212px !important;
+        background: url(https://panda-water.com/web4/assets/images/login/workflow/%E6%99%BA%E8%81%94%E6%96%B0%E6%98%A5%E8%83%8C%E6%99%AF%E6%A1%86.png) !important;
+        //width: 994px;
+        //height: 424px;
+        //position: absolute;
+        //left: 50%;
+        //top: 50%;
+        //margin-left: -497px;
+        //margin-top: -212px;
+        //display: flex;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+
+        img {
+          margin-top: 90px;
+          margin-left: 168px;
+        }
+
+        .login-form {
+          display: flex;
+          align-items: center;
+          margin-left: 32px;
+          padding: 0;
+          background: transparent;
+          margin-top: -36px;
+          // :global {
+          //   .ant-btn-primary {
+          //     background: #ff9600 !important;
+          //     border-color:  #ff9600 !important;
+          //   }
+          // }
+        }
+      }
+
+      img {
+        margin-top: 50px;
+        margin-bottom: 50px;
+        margin-left: 30px;
+      }
+
+      .login-form {
+        padding: 50px 50px 50px;
+        background-color: #ffffff;
+      }
+    }
+  }
+
+  .noEffect.inner {
+
+    background-image: url('@/assets/images/login/dark/bg.png');
+    background-size: cover;
+    background-position: center;
+    background-clip: border-box;
+  }
+
+  .caseHide {
+    display: none !important;
+  }
+
+  .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: 13pz;
+      color: #000000;
+
+      .frontIcon {
+        margin-top: -5px;
+      }
+
+      a {
+        color: #000000;
+      }
+
+      .addons {
+        display: none;
+      }
+
+      .split {
+        border-left: 1px solid #000000;
+        margin: 0 8px;
+      }
+
+      .glyphicon-qrcode {
+        vertical-align: text-top;
+      }
+    }
+  }
+
+  :global {
+    .antd-pro-login-submit {
+      width: 100%;
+      margin-top: 24px;
+    }
+  }
+
+  .wechatQRcode {
+    width: 250px;
+    height: 220px;
+    margin: 0 15px;
+  }
+
+  .loginDisplay {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+
+    a {
+      &:hover {
+        color: @primary-color;
+        transition: all 0.3s ease-in-out;
+      }
+    }
+  }
+
+  .captcha {
+    color: @primary-6;
+    font-weight: 400;
+    cursor: pointer;
+    font-size: 12px;
+  }
+}
\ No newline at end of file