feat：定制弥勒全景登录页

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

 import PanoBaseLogin from "./PanoBaseLogin"
 import TieShanLogin from "../project/tieshan"
 import LinTao from '../project/linTao'
+import MiLe from "../project/miLe"
 import { useState , useEffect } from "react"
 
 const LoginTemplate = {
     "铁山" : TieShanLogin,
     "临洮" : LinTao,
+    "弥勒" : MiLe,
     default : PanoBaseLogin
 }
 

src/pages/user/login/template/project/miLe/index.js

+import styles from './index.less'
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import LoginAction from '../../../login';
+import Account from './useAccount';
+import moment from 'moment';
+import classnames from 'classnames';
+import { Modal, Popover } 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 { defaultApp } from '../../../../../../micro';
+import logo from './images/logo.png';
+import logoBg from './images/loginTitle.png'
+import Krpano from '../../../components/Krpano';
+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 MiLeLogin = 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 [dateObj, setDateObj] = useState({});
+  const { projectName} = props.loginParams
+  const [action, setAction] = useState(
+    () =>
+      new LoginAction(Object.assign({}, props, { history }), setVisible, false),
+  );
+  const qrcodes = props.global?.qrcode?.split('|') ?? [];
+  const logoImage =
+    props?.global?.logo?.indexOf('CityTemp') > -1
+      ? props?.global?.logo
+      : `civweb4/${props?.global?.logo}`;
+
+  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]);
+
+  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,
+      welcome: null,
+    };
+    return <Account {...params} />;
+  };
+
+  const handleWeek = () => {
+    const weekOfDay = Number(moment().format('E'));
+    let weekDayName = ''
+    switch (weekOfDay) {
+      case 1:
+        weekDayName = '周一'
+        break
+      case 2:
+        weekDayName = '周二'
+        break
+      case 3:
+        weekDayName = '周三'
+        break
+      case 4:
+        weekDayName = '周四'
+        break
+      case 5:
+        weekDayName = '周五'
+        break
+      case 6:
+        weekDayName = '周六'
+        break
+      case 0:
+        weekDayName = '周日'
+        break
+      default:
+        weekDayName = ''
+    }
+    return weekDayName
+  }
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setDateObj({
+        curTime: moment().format('HH:mm:ss'),
+        week: handleWeek(),
+        date: moment().format('YYYY/MM/DD')
+      });
+    }, 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [])
+
+
+  return (
+    <HelmetProvider>
+      <Helmet>
+        <title>{props.global.title || defaultSetting.title}</title>
+        <meta name="description" content={props.global.title || defaultSetting.title} />
+      </Helmet>
+      <div className={styles.mileLogin}>
+        <div className={styles['inner-wrapper']}>
+          <div className={styles['flex-wrapper']}>
+            <div className={styles['inner-logoBg']}>
+              <img src={logoBg} />
+            </div>
+            <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+              {renderPlatform()}
+            </div>
+          </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 className={styles['login-header-wrapper']}>
+          <div className={styles['login-header']}>
+            <div className={styles['left-title']}>
+              <div>
+                <img src={`${window.location.origin}/${logoImage}`} />
+              </div>
+              <div className={styles['cn-title']}>{props.global.title || "弥勒诚正自来水智慧水务平台"}</div>
+            </div>
+            <div className={styles['right-timebox']}>
+              <div className={styles['curr-time']}>{dateObj.curTime}</div>
+              <div className={styles['curr-week-date']}>
+                <div className={styles['curr-week']}>{dateObj.week}</div>
+                <div className={styles['curr-date']}>{dateObj.date}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {
+          projectName?<div className={styles['krpano']}>
+          <Krpano projectName={projectName} />
+        </div>:null
+        }
+        
+        <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(MiLeLogin));
\ No newline at end of file

src/pages/user/login/template/project/miLe/index.less

+@import '~antd/es/style/themes/default.less';
+
+.mileLogin {
+
+    & :global {
+
+
+        .panda-console-base-checkbox-wrapper {
+            border-radius: 20px;
+            margin-bottom: 10px !important;
+
+            span {
+                color: white;
+            }
+
+            .panda-console-base-checkbox-inner {
+                border: solid 1px #666666;
+                background: transparent !important;
+              }
+        }
+
+        .panda-console-base-input {
+            background-color: rgba(255, 255, 255, 0) !important;
+            color: #9AACC7 !important;
+
+        }
+
+        .panda-console-base-form-item{
+            margin-bottom: 30px;
+        }
+        .panda-console-base-form-item-control-input-content {
+            &>span {
+                border-radius: 5px !important;
+                padding: 4px 11px !important;
+            }
+
+            input {
+                &::placeholder {
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #9AACC7;
+                    line-height: 30px;
+                }
+
+                padding-left:13px;
+            }
+
+            .panda-console-base-input-prefix {
+                &::after {
+                    content: "";
+                    display: inline-block;
+                    width: 1px;
+                    height: 37.5px;
+                    margin-left: 13px;
+                    background: #DDE2EB;
+                }
+            }
+        }
+    }
+
+    width: 100%;
+    height: 100%;
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 200;
+
+    .inner-bg {
+        width: 100%;
+        height: 100%;
+
+        &>div {
+            width: 85%;
+            margin: 0 auto;
+        }
+    }
+
+    .inner-bg .title {
+        font-size: 27px;
+        font-weight: bold;
+        color: rgba(255, 255, 255, 1);
+        letter-spacing: 2px;
+
+    }
+
+    .login-part {
+        button[type="submit"] {
+            border-radius: 50px;
+        }
+    }
+
+    .form-control:focus {
+        border-color: #66afe9;
+        outline: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+    .inner-wrapper {
+        position: relative;
+        width: 567px;
+        border-radius: 15px;
+        z-index: 100;
+
+
+
+        .flex-wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.2);
+            box-shadow: 0px 6px 18px 0px rgba(170, 196, 209, 0.7);
+            border-radius: 15px;
+            border: 1px solid #FDFDFD;
+            backdrop-filter: blur(6px);
+
+            .inner-logoBg {
+                border-radius: 8px 8px 0px 0px;
+                text-align: center;
+                margin: 33px 0 22px 0;
+
+                >img {
+                    vertical-align: middle;
+                }
+            }
+
+            .inner-bg {
+                min-height: 0;
+                height: 100%;
+                padding-bottom: 4px;
+            }
+        }
+
+    }
+
+
+    .inner-center {
+        position: relative;
+        width: 400px;
+        // height: 316px;
+        background: rgba(255, 255, 255, 0.9);
+        border: 1px solid #FFFFFF;
+        box-shadow: 0px 15px 15px 3px rgba(140, 142, 145, 0.52);
+        border-radius: 15px;
+    }
+
+    .welcome-title {
+        width: 100%;
+        height: 68px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: nowrap;
+        background: linear-gradient(#0061E4, #00CEFA);
+        margin-bottom: 24px;
+        border-top-left-radius: 15px;
+        border-top-right-radius: 15px;
+        background-color: rgba(255, 255, 255, .9);
+
+        .welcome-split {
+            height: 30px;
+            width: 1px;
+            background-color: #eee;
+            margin: 0 20px;
+        }
+
+        .welcome-slogan {
+            vertical-align: middle;
+            margin-top: 3px;
+        }
+
+
+    }
+
+    .formgroup2 {
+        display: flex;
+        align-items: center;
+        display: flex;
+        margin: 0px 5.5%;
+        margin-bottom: 10%;
+        align-items: center;
+        margin-bottom: 40px;
+    }
+
+    .APPcodeBox {
+        width: 100%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .APPCtext {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #000000;
+        line-height: 30px;
+        opacity: 0.75;
+    }
+
+    .loginCcode {
+        width: 34px;
+        height: 34px;
+        position: absolute;
+        right: -34px;
+        background: rgba(255, 255, 255, 0.7);
+        padding: 6px;
+        border-radius: 0 3px 3px 0;
+        cursor: pointer;
+        bottom: 16px;
+
+        &:hover {
+            display: block;
+            background: transparent;
+
+            img {
+                display: none;
+            }
+
+            .codeBig {
+                display: block;
+            }
+        }
+
+        img {
+            width: 23px;
+        }
+
+        .codeBig {
+            width: 140px;
+            height: 140px;
+            position: absolute;
+            bottom: 0;
+            left: 0px;
+            background: rgba(255, 255, 255, 0.7);
+            padding: 6px;
+            display: none;
+
+            span {
+                font-size: 12px;
+                opacity: 0.75;
+            }
+        }
+    }
+
+
+    .login-header-wrapper {
+
+        width: 100%;
+        position: absolute;
+        top: 0;
+        background: linear-gradient(to bottom, rgba(56, 158, 239, 1), rgba(56, 158, 239, 0));
+        height: 100px;
+        z-index: 100;
+
+        .login-header {
+            position: relative;
+            width: 100%;
+            padding: 0 38px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .left-title {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+
+                img {
+                    height: 40px;
+                }
+
+                .cn-title {
+                    font-family: PingFang SC;
+                    font-weight: 800;
+                    font-size: 30px;
+                    color: #333333;
+                    line-height: 30px;
+                    margin-left: 10px;
+                }
+
+                .en-title {
+                    font-size: 12px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                    opacity: 0.65;
+                }
+            }
+
+            .right-timebox {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 60px;
+
+                .curr-time {
+                    font-family: Microsoft YaHei UI;
+                    font-weight: 400;
+                    font-size: 34px;
+                    color: #333333;
+                    line-height: 34px;
+                }
+
+                .curr-week-date {
+                    margin-left: 10px;
+
+                    .curr-week {
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 16px;
+                        color: #333333;
+                    }
+
+                    .curr-date {
+                        font-family: Microsoft YaHei UI;
+                        font-weight: 300;
+                        font-size: 14px;
+                        color: #333333;
+                    }
+                }
+            }
+        }
+
+    }
+
+    .copyright {
+        position: absolute;
+        bottom: 7%;
+        width: 100%;
+        margin: 0 auto;
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #F1F6FD;
+        text-align: center;
+    }
+
+    .qrcode-box {
+        position: absolute;
+        bottom: 0;
+        right: -35px;
+        width: 35px;
+        height: 35px;
+        background: #FFFFFF;
+        opacity: 0.8;
+        cursor: pointer;
+    }
+
+    .krpano {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
\ No newline at end of file

src/pages/user/login/template/project/miLe/useAccount.js

+import { Checkbox } from 'antd';
+import React from 'react';
+import { useIntl } from '@wisdom-utils/components';
+import LoginForm from '../../../components/Login';
+import LoginMessage from '../../../js/loginMessage';
+import passwordIcon from './images/password.png';
+import userIcon from './images/user.png';
+
+/* eslint-disable */
+const { UserName, Password, Submit } = LoginForm;
+const useAccount = props => (
+  <LoginForm onSubmit={props.onSubmit} welcome={props.welcome}>
+    {props.status === 'error' && props.type === 'account' && !props.submitting && (
+      <LoginMessage
+        content={useIntl().formatMessage({
+          id: 'pages.login.accountLogin.errorMessage',
+        })}
+      />
+    )}
+    <UserName
+      name="userName"
+      placeholder={useIntl().formatMessage({
+        id: 'pages.login.username.placeholder',
+      })}
+      rules={[
+        {
+          required: true,
+          message: useIntl().formatMessage({
+            id: 'pages.login.username.required',
+          }),
+        },
+      ]}
+      prefix={<img src={userIcon}/>}
+    />
+    <Password
+      name="password"
+      placeholder={useIntl().formatMessage({
+        id: 'pages.login.password.placeholder',
+      })}
+      rules={[
+        {
+          required: true,
+          message: useIntl().formatMessage({
+            id: 'pages.login.password.required',
+          }),
+        },
+      ]}
+      prefix={<img src={passwordIcon}/>}
+    />
+    <div>
+      <Checkbox
+        checked={props.autoLogin}
+        onChange={e => props.setAutoLogin(e.target.checked)}
+      >
+        {useIntl().formatMessage({ id: 'pages.login.rememberMe' })}
+      </Checkbox>
+    </div>
+    <Submit loading={props.submitting}>
+      {useIntl().formatMessage({ id: 'pages.login.submit' })}
+    </Submit>
+  </LoginForm>
+);
+
+export default useAccount;