Skip to content

C
CivWeb
Commit 00769fc9 authored by 徐乐's avatar 徐乐
Browse files
Options

perf: 增加登录页

parent 81099e40
Pipeline #90867 waiting for manual action with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 921 additions and 7 deletions
          public/web5Config.json
          View file @ 00769fc9
          ...@@ -6,6 +6,9 @@ ...@@ -6,6 +6,9 @@
          { {
          "title": "Water" "title": "Water"
          }, },
          {
          "title": "Water2"
          },
          { {
          "title": "信息化" "title": "信息化"
          }, },
          ...@@ -26,6 +29,9 @@ ...@@ -26,6 +29,9 @@
          }, },
          { {
          "title": "项目 - 封丘" "title": "项目 - 封丘"
          },
          {
          "title": "项目 - 店头"
          } }
          ] ]
          } }
          \ No newline at end of file
          src/assets/images/login/店头/背景.jpg 0 → 100644
          View file @ 00769fc9
          This diff was suppressed by a .gitattributes entry.
          src/pages/user/login/index.js
          View file @ 00769fc9
          ...@@ -23,6 +23,7 @@ import DarkNoEffect from './template/noEffect/DarkNoEffect'; ...@@ -23,6 +23,7 @@ import DarkNoEffect from './template/noEffect/DarkNoEffect';
          import CloudLogin from './template/cloud'; import CloudLogin from './template/cloud';
          import CloudNewLogin from './template/cloudNew'; import CloudNewLogin from './template/cloudNew';
          import WaterLogin from './template/water'; import WaterLogin from './template/water';
          import WaterLogin2 from './template/water/water.js';
          import JSZHLogin from './template/project/JSZH'; import JSZHLogin from './template/project/JSZH';
          import ChengmaiLogin from './template/project/chengmai'; import ChengmaiLogin from './template/project/chengmai';
          import HuhehaoteLogin from './template/project/huhehaote'; import HuhehaoteLogin from './template/project/huhehaote';
          ...@@ -52,6 +53,7 @@ import ChinaShuiwu from './template/project/chinaShuiwu'; ...@@ -52,6 +53,7 @@ import ChinaShuiwu from './template/project/chinaShuiwu';
          import current from './template/current/index'; import current from './template/current/index';
          import Linyou from './template/project/linyou'; import Linyou from './template/project/linyou';
          import FengqiuLogin from './template/project/fengqiu'; import FengqiuLogin from './template/project/fengqiu';
          import DiantouLogin from './template/project/diantou';
          import { AppInitState } from '../../../render'; import { AppInitState } from '../../../render';
          const LoginTemplate = { const LoginTemplate = {
          '新春.html': baseLoginNewYear, '新春.html': baseLoginNewYear,
          ...@@ -71,6 +73,7 @@ const LoginTemplate = { ...@@ -71,6 +73,7 @@ const LoginTemplate = {
          '广州登录页.html': EnergGzV2, '广州登录页.html': EnergGzV2,
          'DarkNoEffect.html': DarkNoEffect, 'DarkNoEffect.html': DarkNoEffect,
          'Water.html': WaterLogin, 'Water.html': WaterLogin,
          'Water2.html': WaterLogin2,
          '项目 - 江水置换.html': JSZHLogin, '项目 - 江水置换.html': JSZHLogin,
          '节水主题二.html': EnergJS2, '节水主题二.html': EnergJS2,
          '项目 - 澄迈.html': ChengmaiLogin, '项目 - 澄迈.html': ChengmaiLogin,
          ...@@ -101,6 +104,7 @@ const LoginTemplate = { ...@@ -101,6 +104,7 @@ const LoginTemplate = {
          '项目 - 中国水务.html': ChinaShuiwu, '项目 - 中国水务.html': ChinaShuiwu,
          '项目 - 麟游.html': Linyou, '项目 - 麟游.html': Linyou,
          '项目 - 封丘.html': FengqiuLogin, '项目 - 封丘.html': FengqiuLogin,
          '项目 - 店头.html': DiantouLogin,
          default: BaseLogin, default: BaseLogin,
          }; };
          /* eslint-disable */ /* eslint-disable */
          ......
          src/pages/user/login/template/project/diantou/index.js 0 → 100644
          View file @ 00769fc9
          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/project/diantou/index.less 0 → 100644
          View file @ 00769fc9
          @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;
          }
          .LYinner {
          position: absolute;
          width: 100%;
          height: 100%;
          background-image: url(@/assets/images/login/店头/背景.jpg);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          &.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;
          }
          }
          }
          .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
          src/pages/user/login/template/water/index.less
          View file @ 00769fc9
          ...@@ -26,10 +26,40 @@ ...@@ -26,10 +26,40 @@
          z-index: 2; z-index: 2;
          .title-block { .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 { img {
          height: 64px; height: 64px;
          filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
          } }
          h1 { h1 {
          display: inline; display: inline;
          margin: auto; margin: auto;
          ...@@ -39,6 +69,7 @@ ...@@ -39,6 +69,7 @@
          font-size: 50px; font-size: 50px;
          text-shadow: 0px 0px 6px rgba(0, 0, 0, 1); text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
          } }
          h2 { h2 {
          margin: 15px 0 0 0; margin: 15px 0 0 0;
          vertical-align: middle; vertical-align: middle;
          ...@@ -47,16 +78,19 @@ ...@@ -47,16 +78,19 @@
          text-align: center; text-align: center;
          } }
          } }
          .login-block { .login-block {
          width: 500px; width: 500px;
          margin: 60px 0 150px 0; margin: 60px 0 150px 0;
          position: relative; position: relative;
          .login-form { .login-form {
          background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
          border-radius: 4px; border-radius: 4px;
          box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
          padding: 50px; padding: 50px;
          & > div {
          &>div {
          width: 100%; width: 100%;
          } }
          ...@@ -64,16 +98,16 @@ ...@@ -64,16 +98,16 @@
          width: 16px; width: 16px;
          height: 16px; height: 16px;
          } }
          .form-group input { .form-group input {
          font-size: 16px; font-size: 16px;
          } }
          .rememberpwd span { .rememberpwd span {
          position: relative; position: relative;
          top: -3px; top: -3px;
          } }
          button[type="submit"] { button[type="submit"] {
          width: 100%; width: 100%;
          background-color: #35B2F1 !important; background-color: #35B2F1 !important;
          ...@@ -82,20 +116,21 @@ ...@@ -82,20 +116,21 @@
          outline: none !important; outline: none !important;
          border-color: transparent !important; border-color: transparent !important;
          } }
          .glyphicon { .glyphicon {
          color: #35B2F1; color: #35B2F1;
          } }
          .input-group-addon { .input-group-addon {
          background-color: #fff; background-color: #fff;
          } }
          .input-lg, .input-lg,
          .btn-lg { .btn-lg {
          height: 40px; height: 40px;
          } }
          } }
          .loginCcode { .loginCcode {
          width: 34px; width: 34px;
          height: 34px; height: 34px;
          ...@@ -106,19 +141,24 @@ ...@@ -106,19 +141,24 @@
          border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
          cursor: pointer; cursor: pointer;
          bottom: 3px; bottom: 3px;
          &:hover { &:hover {
          display: block; display: block;
          background: transparent; background: transparent;
          img { img {
          display: none; display: none;
          } }
          .codeBig { .codeBig {
          display: block; display: block;
          } }
          } }
          img { img {
          width: 23px; width: 23px;
          } }
          .codeBig { .codeBig {
          width: 140px; width: 140px;
          height: 140px; height: 140px;
          ...@@ -128,6 +168,7 @@ ...@@ -128,6 +168,7 @@
          background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
          padding: 6px; padding: 6px;
          display: none; display: none;
          span { span {
          font-size: 12px; font-size: 12px;
          opacity: 0.75; opacity: 0.75;
          ...@@ -233,17 +274,21 @@ ...@@ -233,17 +274,21 @@
          font-size: 13px; font-size: 13px;
          color: #fff; color: #fff;
          display: none; display: none;
          a { a {
          color: #eee; color: #eee;
          text-decoration: underline; text-decoration: underline;
          } }
          .addons { .addons {
          display: none; display: none;
          } }
          .split { .split {
          border-left: 1px solid white; border-left: 1px solid white;
          margin: 0 8px; margin: 0 8px;
          } }
          .glyphicon-qrcode { .glyphicon-qrcode {
          vertical-align: text-top; vertical-align: text-top;
          } }
          ......
          src/pages/user/login/template/water/water.js 0 → 100644
          View file @ 00769fc9
          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));
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment