perf: 增加麟游登录页

src/pages/user/login/index.js

@@ -50,6 +50,7 @@ import GaoyaoLogin from './template/project/gaoyao';
 import JianzhaLogin from './template/project/jianzha';
 import ChinaShuiwu from './template/project/chinaShuiwu';
 import current from './template/current/index';
+import Linyou from './template/project/linyou';
 
 import { AppInitState } from '../../../render';
 const LoginTemplate = {
@@ -98,6 +99,7 @@ const LoginTemplate = {
   '项目 - 高要.html': GaoyaoLogin,
   '项目 - 尖扎.html': JianzhaLogin,
   '项目 - 中国水务.html': ChinaShuiwu,
+  '项目 - 麟游.html': Linyou,
   default: BaseLogin,
 };
 /* eslint-disable */

src/pages/user/login/template/project/linyou/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>
+                <div className={classNames(styles.footerCase, styles.caseHide, '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{' '}
+                        {
+                            window.location.host.includes("panda-water") ? <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/project/linyou/index.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;
+    }
+
+    .LYinner {
+        position: absolute;
+        width: 100%;
+        height: 84%;
+        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