Merge branch 'dev' into 'master'

src/pages/user/login/index.js

@@ -29,6 +29,7 @@ import ErlianhaoteLogin from './template/project/erlianhaote';
 import YixianLogin from './template/project/yixian';
 import LixianLogin from './template/project/lixian';
 import DazuLogin from './template/project/dazu';
+import WeixinLogin from './template/project/weixin';
 import PanoramaLogin from './template/panorama';
 import JiangXi from './template/project/jiangxi';
 import { AppInitState } from '../../../render';
@@ -56,6 +57,7 @@ const LoginTemplate = {
   '项目 - 大足.html': DazuLogin,
   '项目 - 南宁绿城.html': LvchengLogin,
   '项目 - 浦口.html': PukouLogin,
+  '项目 - 威信.html': WeixinLogin,
   '全景图.html': PanoramaLogin,
   '项目 - 江西.html': JiangXi,
   default: BaseLogin,

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

+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { Modal } 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 LoginAction from '../../../login';
+import styles from './index.less';
+import Account from '../../../js/useAccount';
+import { defaultApp } from '../../../../../../micro';
+import QRCode from 'qrcode.react';
+import classnames from 'classnames';
+import moment from 'moment';
+const renderQRCode = () => {
+    const qrcodes = window.globalConfig && window.globalConfig.qrcode;
+    console.log('qrcodes', qrcodes)
+    if (qrcodes) {
+        return <div><QRCode value={qrcodes} /><p>扫码下载APP</p></div>;
+    }
+    return <span>手持APP下载未配置</span>;
+};
+const Login = 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 [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
+    const [dateObj, setDateObj] = useState({})
+
+    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);
+            });
+        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} />;
+    };
+    /* eslint-disable */
+
+    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'),
+                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={classnames(styles.login, 'WXlogin')}>
+                <div className={styles['inner-wrapper']}>
+                    <div className={styles['left-imgbox']}></div>
+                    <div className={styles['inner-center']}>
+                        <div className={styles['welcome-title']}></div>
+                        <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+                            {renderPlatform()}
+                        </div>
+                        <div className={styles.WXqrcodeBox}>
+                            <p className={styles.WXimg}></p>
+                            <div className={styles.WXbigImg}>{renderQRCode()}</div>
+                        </div>
+                    </div>
+                </div>
+                <div className={styles['login-header']}>
+                    <div className={styles['left-title']}>
+                        <p className={styles.WXlogoImg}></p>
+                        <div className={styles['cn-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>
+
+                <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));

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

+:global {
+    .WXlogin {
+
+        .@{ant-prefix}-input-affix-wrapper {
+            border: none;
+            border-bottom: 1px solid #D1DCEB;
+        }
+
+        .@{ant-prefix}-input-prefix {
+            margin-right: 16px;
+        }
+
+        .panda-console-basesrc-pages-user-login-components-login-index-prefixIcon {
+            font-size: 18px;
+        }
+
+        .panda-console-basesrc-pages-user-login-components-login-index-submit {
+            border-radius: 20px;
+            width: 200px;
+            margin-top: 30px;
+        }
+
+        .panda-console-base-form-item-control-input-content {
+            text-align: center;
+        }
+    }
+}
+
+.login {
+    width: 100%;
+    height: 100%;
+    background: url('./images/4.jpg') no-repeat center;
+    background-size: 100% 100%;
+    background-clip: border-box;
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.login .inner-bg {
+    width: 100%;
+    height: 50%;
+
+
+    &>div {
+        width: 70%;
+        margin: 0 auto;
+    }
+}
+
+.inner-wrapper {
+    width: 1100px;
+    height: 600px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    //   position: absolute;
+    //   top: 46%;
+    //   right: 0;
+    //   transform: translateY(-50%);
+}
+
+.left-imgbox {
+    width: 700px;
+    height: 100%;
+    background: url('./images/5.png') no-repeat center;
+    background-size: 100% 100%;
+    background-clip: border-box;
+}
+
+// .img-wrapper {
+//     width: 388px;
+//     height: 134px;
+//     background: url('./images/1.png') no-repeat center;
+//     background-size: 100% 100%;
+//     margin-bottom: 48px;
+// }
+
+.login .inner-bg img[role="logo"] {
+    height: 40px;
+}
+
+.login .inner-bg .title {
+    font-size: 27px;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 1);
+    letter-spacing: 2px;
+}
+
+@keyframes waving {
+    from {
+        top: 0;
+    }
+
+    to {
+        top: 10px;
+    }
+}
+
+@keyframes waving2 {
+    from {
+        left: 0;
+    }
+
+    to {
+        left: -9999px;
+    }
+}
+
+.form-control:focus {
+    border-color: #66afe9;
+    outline: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+
+.inner-center {
+    width: 400px;
+    height: 100%;
+    background-color: #ffffff;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    border-radius: 0 10px 10px 0;
+    position: relative;
+}
+
+.WXqrcodeBox {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 0px 5px 5px 0px;
+    padding: 7px;
+    bottom: 20px;
+    right: -36px;
+}
+
+.WXimg {
+    width: 22px;
+    height: 22px;
+    background: url('./images/8.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    margin: 0;
+}
+
+.WXbigImg {
+    width: 128px;
+    height: 144px;
+    text-align: center;
+    display: none;
+}
+
+.WXqrcodeBox:hover {
+    right: -142px;
+}
+
+.WXqrcodeBox:hover .WXimg {
+    display: none;
+}
+
+.WXqrcodeBox:hover .WXbigImg {
+    display: block;
+}
+
+.welcome-title {
+    width: 113px;
+    height: 113px;
+    line-height: 115px;
+    font-size: 21px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #000000;
+    opacity: 0.85;
+    background: url('./images/7.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    margin: 80px 0 30px 0;
+}
+
+.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;
+}
+
+.APPCimg {
+    width: 138px;
+    height: 150px;
+    background: url('./images/3.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    display: none;
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 23px 11px 12px;
+
+    span {
+        font-size: 12px;
+        opacity: 0.75;
+    }
+}
+
+.APPcodeBox:hover .APPCtext {
+    color: #1685FF;
+}
+
+.APPcodeBox:hover .APPCimg {
+    display: flex;
+}
+
+.APPCimg .codeCase {
+    text-align: center;
+    padding-top: 32px;
+}
+
+.WXlogoImg {
+    width: 40px;
+    height: 40px;
+    background: url('./images/6.png') no-repeat center;
+    background-size: 100% 100%;
+    margin: 0 10px 0 0;
+}
+
+.login-header {
+    width: 100%;
+    position: absolute;
+    top: 30px;
+    padding: 0 38px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left-title {
+        display: flex;
+        align-items: center;
+
+        .cn-title {
+            font-size: 26px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+            text-shadow: 0px 2px 2px rgb(6 15 49 / 33%);
+        }
+    }
+
+    .right-timebox {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 60px;
+
+        .curr-time {
+            width: 96px;
+            font-size: 36px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: black;
+        }
+
+        .curr-week-date {
+            margin-left: 10px;
+
+            .curr-week {
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: black;
+            }
+
+            .curr-date {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: black;
+            }
+        }
+    }
+}
\ No newline at end of file

src/pages/user/login/template/project/weixin/index2.less

+:global {
+    .WXlogin {
+
+        .@{ant-prefix}-input-affix-wrapper {
+            border: none;
+            border-bottom: 1px solid #D1DCEB;
+        }
+
+        .@{ant-prefix}-input-prefix {
+            margin-right: 16px;
+        }
+
+        .panda-console-basesrc-pages-user-login-components-login-index-prefixIcon {
+            font-size: 18px;
+        }
+
+        .panda-console-basesrc-pages-user-login-components-login-index-submit {
+            border-radius: 20px;
+            width: 200px;
+            margin-top: 30px;
+        }
+
+        .panda-console-base-form-item-control-input-content {
+            text-align: center;
+        }
+    }
+}
+
+.login {
+    width: 100%;
+    height: 100%;
+    background: url('./images/4.jpg') no-repeat center;
+    background-size: 100% 100%;
+    background-clip: border-box;
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.login .inner-bg {
+    width: 100%;
+    height: 50%;
+
+
+    &>div {
+        width: 70%;
+        margin: 0 auto;
+    }
+}
+
+.inner-wrapper {
+    width: 1100px;
+    height: 600px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    //   position: absolute;
+    //   top: 46%;
+    //   right: 0;
+    //   transform: translateY(-50%);
+}
+
+.left-imgbox {
+    width: 700px;
+    height: 100%;
+    background: url('./images/5.png') no-repeat center;
+    background-size: 100% 100%;
+    background-clip: border-box;
+}
+
+.img-wrapper {
+    width: 388px;
+    height: 134px;
+    background: url('./images/1.png') no-repeat center;
+    background-size: 100% 100%;
+    margin-bottom: 48px;
+}
+
+.login .inner-bg img[role="logo"] {
+    height: 40px;
+}
+
+.login .inner-bg .title {
+    font-size: 27px;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 1);
+    letter-spacing: 2px;
+}
+
+@keyframes waving {
+    from {
+        top: 0;
+    }
+
+    to {
+        top: 10px;
+    }
+}
+
+@keyframes waving2 {
+    from {
+        left: 0;
+    }
+
+    to {
+        left: -9999px;
+    }
+}
+
+.form-control:focus {
+    border-color: #66afe9;
+    outline: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+
+.inner-center {
+    width: 400px;
+    height: 100%;
+    background-color: #ffffff;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    border-radius: 0 10px 10px 0;
+}
+
+.welcome-title {
+    width: 113px;
+    height: 113px;
+    line-height: 115px;
+    font-size: 21px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #000000;
+    opacity: 0.85;
+    background: url('./images/7.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    margin: 80px 0 30px 0;
+}
+
+.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;
+}
+
+.APPCimg {
+    width: 138px;
+    height: 150px;
+    background: url('./images/3.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    display: none;
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 23px 11px 12px;
+
+    span {
+        font-size: 12px;
+        opacity: 0.75;
+    }
+}
+
+.APPcodeBox:hover .APPCtext {
+    color: #1685FF;
+}
+
+.APPcodeBox:hover .APPCimg {
+    display: flex;
+}
+
+.APPCimg .codeCase {
+    text-align: center;
+    padding-top: 32px;
+}
+
+.WXlogoImg {
+    width: 40px;
+    height: 40px;
+    background: url('./images/6.png') no-repeat center;
+    background-size: 100% 100%;
+    margin: 0 10px 0 0;
+}
+
+.login-header {
+    width: 100%;
+    position: absolute;
+    top: 30px;
+    padding: 0 38px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left-title {
+        display: flex;
+        align-items: center;
+
+        .cn-title {
+            font-size: 26px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+            text-shadow: 0px 2px 2px rgb(6 15 49 / 33%);
+        }
+    }
+
+    .right-timebox {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 60px;
+
+        .curr-time {
+            width: 96px;
+            font-size: 36px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: black;
+        }
+
+        .curr-week-date {
+            margin-left: 10px;
+
+            .curr-week {
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: black;
+            }
+
+            .curr-date {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: black;
+            }
+        }
+    }
+
+
+}
+
+.loginForm {
+    width: 300px;
+    margin: auto;
+
+    .formgroup {
+        // margin-bottom: 20px;
+        position: relative;
+        line-height: 1;
+
+        img {
+            position: absolute;
+            left: 10px;
+            top: 50%;
+        }
+
+        .eyes {
+            left: 89%;
+            margin-top: 10px;
+            cursor: pointer;
+        }
+
+        input[type="checkbox"] {
+            width: 12px;
+            height: 12px;
+        }
+
+        input {
+            font-size: 16px;
+            outline: 0;
+        }
+
+        span {
+            position: relative;
+            top: 10px;
+        }
+
+        .formControl {
+            display: block;
+            width: 100%;
+        }
+
+        .inputLg {
+            padding-left: 42px;
+            color: #2D3033;
+            border: none;
+            box-shadow: none;
+            border-bottom: 1px solid #D1DCEB;
+            border-radius: 0;
+            padding: 10px 50px;
+            line-height: 1.3333333;
+            margin-top: 21px;
+        }
+
+        .inputLg:focus {
+            border-bottom: 1px solid #25bc9e;
+        }
+    }
+
+    .submitBtn {
+        width: 100%;
+        background-color: #15CCB1 !important;
+        border: none !important;
+        color: #fff !important;
+        outline: none !important;
+        border-color: transparent !important;
+        border-radius: 20px;
+        height: 40px;
+        line-height: 40px;
+        font-size: 18px;
+        text-align: center;
+        margin-top: 25px;
+    }
+}
\ No newline at end of file