Commit e97ef90c authored by 徐乐's avatar 徐乐

perf: 增加麟游登录页

parent d8597d1c
Pipeline #90122 passed with stages
This diff was suppressed by a .gitattributes entry.
...@@ -50,6 +50,7 @@ import GaoyaoLogin from './template/project/gaoyao'; ...@@ -50,6 +50,7 @@ import GaoyaoLogin from './template/project/gaoyao';
import JianzhaLogin from './template/project/jianzha'; import JianzhaLogin from './template/project/jianzha';
import ChinaShuiwu from './template/project/chinaShuiwu'; 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 { AppInitState } from '../../../render'; import { AppInitState } from '../../../render';
const LoginTemplate = { const LoginTemplate = {
...@@ -98,6 +99,7 @@ const LoginTemplate = { ...@@ -98,6 +99,7 @@ const LoginTemplate = {
'项目 - 高要.html': GaoyaoLogin, '项目 - 高要.html': GaoyaoLogin,
'项目 - 尖扎.html': JianzhaLogin, '项目 - 尖扎.html': JianzhaLogin,
'项目 - 中国水务.html': ChinaShuiwu, '项目 - 中国水务.html': ChinaShuiwu,
'项目 - 麟游.html': Linyou,
default: BaseLogin, default: BaseLogin,
}; };
/* eslint-disable */ /* eslint-disable */
......
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"> ICP18045097-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));
@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
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