feat: 普兰店登录页定制开发

src/pages/user/login/index.js

@@ -43,6 +43,7 @@ import PiZhouLogin from './template/project/pizhou';
 import JieshouLogin from './template/project/jieshou';
 import YongjiLogin from './template/project/yongji';
 import DanlingLogin from './template/project/danling';
+import PulandianLogin from './template/project/pulandian';
 import GaoyaoLogin from './template/project/gaoyao';
 import JianzhaLogin from './template/project/jianzha';
 import ChinaShuiwu from './template/project/chinaShuiwu';
@@ -89,6 +90,7 @@ const LoginTemplate = {
   '项目 - 界首.html': JieshouLogin,
   '项目 - 永吉.html': YongjiLogin,
   '项目 - 丹棱.html': DanlingLogin,
+  '项目 - 普兰店.html': PulandianLogin,
   '项目 - 高要.html': GaoyaoLogin,
   '项目 - 尖扎.html': JianzhaLogin,
   '项目 - 中国水务.html': ChinaShuiwu,

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

+/*
+ * 功能名称: 丹棱登录页
+ * 功能路径:
+ * 功能参数:
+ */
+
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import $ from 'jquery';
+
+import { Modal, Popover } from 'antd';
+import QRCode from 'qrcode.react';
+
+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 classnames from 'classnames';
+import moment from 'moment';
+import QueueAnim from 'rc-queue-anim';
+import defaultSetting from '../../../../../../../config/defaultSetting';
+import LoginAction from '../../../login';
+import styles from './index.less';
+import Account from '../../../js/useAccount';
+import { defaultApp } from '../../../../../../micro';
+import bg from './images/4.jpg';
+
+const PopOvercontent = () => {
+    const qrcodes = window.globalConfig && window.globalConfig.qrcode;
+    if (qrcodes) {
+        return <QRCode value={qrcodes} />;
+    }
+    return <span>手持APP下载未配置</span>;
+};
+
+const Login = forwardRef((props, _ref) => {
+    console.log(props, "props")
+    const sliVerify = useRef();
+    const loginFormRef = useRef();
+    const formRef = useRef(null);
+    const [status, setStatus] = useState('normal');
+    const [show, setShow] = useState(false);
+    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}`);
+
+                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 7:
+                weekDayName = '周日';
+                break;
+            default:
+                weekDayName = '';
+        }
+        return weekDayName;
+    };
+    const onShow = () => {
+        if (!show) {
+            setShow(true);
+        }
+    };
+
+    useEffect(() => {
+        setTimeout(() => {
+            onShow();
+        }, 300);
+        setTimeout(() => {
+            $('.CarouselRipples').ripples({
+                resolution: 800,
+                dropRadius: 20, //px
+                perturbance: 2,
+            });
+        }, 1000);
+    }, []);
+    useEffect(() => {
+        return () => { };
+    }, [show]);
+    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={classnames(styles.jieshouLogin, 'jieshouLogin')}
+                onClick={onShow}
+            >
+                <img src={bg} alt='' className={styles['bg-image']} />
+                {show ? (
+                    <div className={classnames(styles['wrapper'])}>
+
+                        <div key={'innerwrapper'} className={classnames(styles['inner-wrapper'])}>
+                            <div key="logintitle" className={styles['left-title']}>
+                                <div>
+                                    <img
+                                        role="logo"
+                                        src={props.global && props.global.transformDevAssetsBaseURL && props.global.transformDevAssetsBaseURL(props.global.logo)}
+                                    />
+                                </div>
+                                <div className={styles['cn-title']}>{props.global.title || defaultSetting.title}</div>
+                            </div>
+                            <div className={styles['inner-center']}>
+                                <div className={styles['welcome-title']}>{props.global.subtitle || "平台登录"}</div>
+
+                                <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+                                    {renderPlatform()}
+                                    <div className={styles['download-link']}>
+                                        <a href='https://gis.panda-water.cn/codedownpage/index.html' target={"_blank"}>点击下载APP</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div key="loginheader" className={classnames(styles['login-header'])}>
+                            <div key="logintime" 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>
+                ) : null}
+                <div className={classnames(styles.CarouselRipples, 'CarouselRipples')} data-ripple="ripple" />
+
+                <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/pulandian/index.less

+.jieshouLogin {
+    width: 100%;
+    height: 100%;
+    // background: url('./images/邳州背景.jpg') no-repeat center center;
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .bg-image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+
+    .caseHide {
+        display: none !important;
+    }
+
+
+    .inner-bg {
+        // width: 100%;
+        // height: 100%;
+
+
+        .download-link {
+            width: 80%;
+            text-align: center;
+            color: #ffffff;
+            margin-top: -10px;
+        }
+
+        &>div {
+            width: 80%;
+            margin: 0 10%;
+        }
+    }
+
+    .wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    .inner-wrapper {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        top: 220px;
+        // left: calc(50% - 268.5px);
+        z-index: 50;
+
+    }
+
+    .inner-bg .title {
+        font-size: 27px;
+        font-weight: bold;
+        color: rgba(255, 255, 255, 1);
+        letter-spacing: 2px;
+    }
+
+    .form-control:focus {
+        border-color: #66afe9;
+        outline: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+
+
+    .inner-center {
+        position: relative;
+        width: 537px;
+        height: 345px;
+        border: 1px solid #FDFDFD;
+        box-shadow: 0px 6px 18px 0px rgba(25, 61, 79, 0.35);
+        border-radius: 15px;
+        z-index: 2;
+        backdrop-filter: blur(6px);
+        margin-top: 50px;
+    }
+
+    .welcome-title {
+        height: 90px;
+        border-radius: 8px 8px 0px 0px;
+        text-align: center;
+        line-height: 90px;
+        font-size: 40px;
+        font-weight: bolder;
+        color: #008EFE;
+        // text-shadow: 0px 4px 5px #A3AFC7;
+        // -webkit-text-stroke:0.5px #FFFFFF;
+        text-shadow: #FFFFFF 1.5px 0 0, #FFFFFF 0 1.5px 0, #FFFFFF -1.5px 0 0, #FFFFFF 0 -1.5px 0;
+        font-family: '楷体';
+    }
+
+    .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;
+    }
+
+    .left-title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+            // width: 166px;
+            height: 55px;
+        }
+
+        .cn-title {
+
+            font-size: 44px;
+            // font-family: 宋体;
+            font-weight: 400;
+            color: #fff;
+            line-height: 55px;
+            text-shadow: 0px 1px 10px #A3AFC7;
+            line-height: 1;
+            margin-left: 10px;
+        }
+    }
+
+    .login-header {
+        box-sizing: border-box;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 82px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 22px;
+        z-index: 50;
+        // border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+
+
+
+        .right-timebox {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+
+            .curr-time {
+                width: 140px;
+                font-size: 34px;
+                font-family: Microsoft YaHei;
+                font-weight: 300;
+                color: #fff;
+                text-align: right;
+            }
+
+            .curr-week-date {
+                margin-left: 10px;
+
+                .curr-week {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #fff;
+                }
+
+                .curr-date {
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #fff;
+                }
+            }
+        }
+    }
+
+    .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: -23px;
+        width: 23px;
+        height: 23px;
+        background: #FFFFFF;
+        opacity: 0.8;
+        cursor: pointer;
+    }
+
+}
+
+
+& :global {
+    .jieshouLogin {
+        .panda-console-base-btn {
+            border-radius: 20px;
+        }
+    }
+
+    .popover-style {
+        .@{ant-prefix}-popover-inner-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .@{ant-prefix}-popover-title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+:global {
+    .popover-style {
+        .@{ant-prefix}-popover-inner-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .@{ant-prefix}-popover-title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+.CarouselRipples {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+& :global {
+    .CarouselRipples:before {
+        content: '';
+        display: inline-block;
+        vertical-align: middle;
+        height: 100%;
+    }
+}
\ No newline at end of file