sms登录模块修改
This commit is contained in:
parent
4d74ec13cd
commit
2488a8ba8b
BIN
src/assets/login/111.png
Normal file
BIN
src/assets/login/111.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
src/assets/login/back1.png
Normal file
BIN
src/assets/login/back1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
src/assets/login/下载 (1).png
Normal file
BIN
src/assets/login/下载 (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/login/切片 1.png
Normal file
BIN
src/assets/login/切片 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 728 KiB |
@ -277,7 +277,7 @@ const NavOpton = (props) => {
|
||||
{/* <Icon type='bars' className='header__right-icon'></Icon> */}
|
||||
<IconFont
|
||||
type="icon-line-108"
|
||||
style={{ fontSize: "22px", color: "#333333", cursor: "pointer" }}
|
||||
style={{ fontSize: "22px", color: "#606266", cursor: "pointer" }}
|
||||
></IconFont>
|
||||
</div>
|
||||
<Modal
|
||||
@ -313,7 +313,7 @@ function Header(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`header ${props.matchLogin ? "login" : ""}`}>
|
||||
<div className={`header ${props.matchLogin ? "login" : "nologin"}`}>
|
||||
<div className="header__left">
|
||||
<PictureThumb
|
||||
thumbCodes={thumbCode ? [thumbCode] : []}
|
||||
@ -331,7 +331,7 @@ function Header(props) {
|
||||
}`}
|
||||
>
|
||||
矿山安全生产标准化系统
|
||||
<span style={{ color: "#c99d03" }}>（SPS）</span>
|
||||
<span style={{ color: "#c99d03" }}>（SMS）</span>
|
||||
{baseConfig.SYS_NAME}{" "}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@ -1,66 +1,69 @@
|
||||
:global {
|
||||
@main-bg : #ffffff;//#033C67 #f5f5f5
|
||||
@opacity-bg : rgba(72, 133, 255, 0.2);
|
||||
@main-bg: #f4f7ff; //#033C67 #f5f5f5
|
||||
@opacity-bg: rgba(72, 133, 255, 0.2);
|
||||
@header-prefix: header;
|
||||
.headerModal {
|
||||
|
||||
.ant-modal-footer {
|
||||
display: none;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
display: none;
|
||||
}
|
||||
.ant-modal-body {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
}
|
||||
.ant-modal {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.@{header-prefix} {
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
padding : 0 24px;
|
||||
background-color: @main-bg;
|
||||
box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);//rgba(250, 246, 246, 0.25)
|
||||
transition : background-color .2s ease;
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 24px;
|
||||
margin: 0px 10px;
|
||||
// background-color: @main-bg;
|
||||
// box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);//rgba(250, 246, 246, 0.25)
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&.login {
|
||||
background-color: @opacity-bg;
|
||||
// background-color: @opacity-bg;
|
||||
}
|
||||
&.nologin {
|
||||
// background-color: @opacity-bg;
|
||||
background-color: @main-bg;
|
||||
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); //rgba(250, 246, 246, 0.25)
|
||||
}
|
||||
|
||||
&__left,
|
||||
&__right {
|
||||
height : 100%;
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items : center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__left {
|
||||
float: left;
|
||||
|
||||
&-logo {
|
||||
width : auto;
|
||||
height : 52px;
|
||||
width: auto;
|
||||
height: 52px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&-slogan {
|
||||
font-size : 16px;
|
||||
font-size: 16px;
|
||||
font-weight: bolder;
|
||||
color : #333333;//#f3eded
|
||||
color: #606266; //#f3eded
|
||||
}
|
||||
&-sloganLogin {
|
||||
font-size : 16px;
|
||||
font-size: 16px;
|
||||
font-weight: bolder;
|
||||
color : #ffffffdc;//#f3eded
|
||||
color: #ffffffdc; //#f3eded
|
||||
}
|
||||
&-slogan-mobile {
|
||||
font-size : 11px;
|
||||
font-size: 11px;
|
||||
font-weight: bolder;
|
||||
color : #333333;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,20 +72,20 @@
|
||||
|
||||
&-icon {
|
||||
font-size: 22px !important;
|
||||
color : #333333 !important;//f3eded
|
||||
cursor : pointer;
|
||||
color: #606266 !important; //f3eded
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-datav {
|
||||
font-size : 0;
|
||||
font-size: 0;
|
||||
margin-right: 36px;
|
||||
}
|
||||
|
||||
&-user {
|
||||
font-size : 0;
|
||||
margin-left : 36px;
|
||||
font-size: 0;
|
||||
margin-left: 36px;
|
||||
margin-right: 26;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,415 +1,497 @@
|
||||
// 核心库
|
||||
import React from 'react'
|
||||
import { connect } from 'dva'
|
||||
import React from "react";
|
||||
import { connect } from "dva";
|
||||
// 组件库
|
||||
import { Button, Checkbox, Form, Icon, Input, TreeSelect, message, notification } from 'antd'
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Form,
|
||||
Icon,
|
||||
Input,
|
||||
TreeSelect,
|
||||
message,
|
||||
notification,
|
||||
Divider,
|
||||
} from "antd";
|
||||
// 工具库
|
||||
import MD5 from 'md5'
|
||||
import storage from '../utils/storage'
|
||||
import { guid } from '../utils/common'
|
||||
import config from '../config'
|
||||
import MD5 from "md5";
|
||||
import storage from "../utils/storage";
|
||||
import { guid } from "../utils/common";
|
||||
import config from "../config";
|
||||
// 样式
|
||||
import './login.less'
|
||||
import "./login.less";
|
||||
|
||||
const openNotificationPass = placement => {
|
||||
const openNotificationPass = (placement) => {
|
||||
notification.info({
|
||||
duration: null,
|
||||
message: `密码修改提示：`,
|
||||
description:
|
||||
'您的登录密码过于简单，请尽快修改您的登录密码！',
|
||||
description: "您的登录密码过于简单，请尽快修改您的登录密码！",
|
||||
placement,
|
||||
});
|
||||
};
|
||||
|
||||
const openNotificationMobile = placement => {
|
||||
const openNotificationMobile = (placement) => {
|
||||
notification.info({
|
||||
//duration: null,
|
||||
message: `浏览友情提示：`,
|
||||
description:
|
||||
'您当前用的是手机在访问，为更好使用体验，建议用电脑访问！',
|
||||
description: "您当前用的是手机在访问，为更好使用体验，建议用电脑访问！",
|
||||
placement,
|
||||
});
|
||||
};
|
||||
|
||||
class LoginPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
super(props);
|
||||
this.state = {
|
||||
treeData: [],
|
||||
tokenData: {},
|
||||
formData: {
|
||||
orgId: undefined,
|
||||
username: '',
|
||||
password: '',
|
||||
verifyCode: '',
|
||||
phoneCode: ''
|
||||
username: "",
|
||||
password: "",
|
||||
verifyCode: "",
|
||||
phoneCode: "",
|
||||
},
|
||||
verify: {
|
||||
orgId: '',
|
||||
username: '',
|
||||
password: '',
|
||||
verifyCode: '',
|
||||
phoneCode: ''
|
||||
orgId: "",
|
||||
username: "",
|
||||
password: "",
|
||||
verifyCode: "",
|
||||
phoneCode: "",
|
||||
},
|
||||
// 图片验证码
|
||||
verifyCodeApi: config.serviceHost('api/UT/VerificationCode/Number'),
|
||||
verifyCodeApi: config.serviceHost("api/UT/VerificationCode/Number"),
|
||||
verifyRandomCode: guid(),
|
||||
// 手机验证码
|
||||
hasCheckPhoneCode: storage('lacal').getItem('verifyPhoneCode').val,
|
||||
hasCheckPhoneCode: storage("lacal").getItem("verifyPhoneCode").val,
|
||||
isCheckPhoneCode: null,
|
||||
// 重发验证码倒计时
|
||||
checkTime: 60,
|
||||
// 登陆错误提示
|
||||
loginError: ''
|
||||
}
|
||||
this.timer = -1
|
||||
loginError: "",
|
||||
};
|
||||
this.timer = -1;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (window.navigator.userAgent.indexOf("Windows") < 1) {
|
||||
window.location.replace(config.guideH5Host)
|
||||
window.location.replace(config.guideH5Host);
|
||||
//alert('手机');
|
||||
}
|
||||
}
|
||||
// if (window.navigator.userAgent.indexOf("Windows") < 1) openNotificationMobile('bottomRight');
|
||||
this.removeRequestKey()
|
||||
this.getOrgList()
|
||||
this.removeRequestKey();
|
||||
this.getOrgList();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearInterval(this.timer)
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
|
||||
removeRequestKey = () => {
|
||||
const { localStorage } = window
|
||||
const { localStorage } = window;
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i)
|
||||
key.indexOf('_requestKey') > -1 && localStorage.removeItem(key)
|
||||
const key = localStorage.key(i);
|
||||
key.indexOf("_requestKey") > -1 && localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
recurseData = (data) => {
|
||||
data.forEach(item => {
|
||||
const { Node = item, Children } = item
|
||||
item.title = `${Node.NAME}(${Node.CODE})`
|
||||
item.key = Node.ID
|
||||
item.value = Node.ID
|
||||
Children && Children.length && this.recurseData(Children)
|
||||
})
|
||||
}
|
||||
data.forEach((item) => {
|
||||
const { Node = item, Children } = item;
|
||||
item.title = `${Node.NAME}(${Node.CODE})`;
|
||||
item.key = Node.ID;
|
||||
item.value = Node.ID;
|
||||
Children && Children.length && this.recurseData(Children);
|
||||
});
|
||||
};
|
||||
|
||||
getOrgList = () => {
|
||||
this.props.dispatch({
|
||||
type: 'login/getOrg',
|
||||
payload: {
|
||||
Sort: 'CODE',
|
||||
Order: 0,
|
||||
Parameter10: window.location.host,
|
||||
Parameter11: '0'
|
||||
}
|
||||
}).then(res => {
|
||||
if (res && res.Data) {
|
||||
this.recurseData(res.Data)
|
||||
this.setState({
|
||||
treeData: res.Data,
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
orgId: storage('lacal').getItem('webOrgId').val ? storage('lacal').getItem('webOrgId').val : res.Data[0].Node.ORG_ID,
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
this.props
|
||||
.dispatch({
|
||||
type: "login/getOrg",
|
||||
payload: {
|
||||
Sort: "CODE",
|
||||
Order: 0,
|
||||
Parameter10: window.location.host,
|
||||
Parameter11: "0",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res && res.Data) {
|
||||
this.recurseData(res.Data);
|
||||
this.setState({
|
||||
treeData: res.Data,
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
orgId: storage("lacal").getItem("webOrgId").val
|
||||
? storage("lacal").getItem("webOrgId").val
|
||||
: res.Data[0].Node.ORG_ID,
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleFormChange = (type, val) => {
|
||||
this.setState({
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
[type]: val
|
||||
[type]: val,
|
||||
},
|
||||
verify: {
|
||||
...this.state.verify,
|
||||
[type]: val ? '' : 'error'
|
||||
}
|
||||
})
|
||||
}
|
||||
[type]: val ? "" : "error",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
startCountDown = () => {
|
||||
this.timer = setInterval(() => {
|
||||
const { checkTime } = this.state
|
||||
const { checkTime } = this.state;
|
||||
if (checkTime > 0) {
|
||||
this.setState({ checkTime: checkTime - 1 })
|
||||
this.setState({ checkTime: checkTime - 1 });
|
||||
} else {
|
||||
clearInterval(this.timer)
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
getPhoneCode = () => {
|
||||
const { tokenData, formData } = this.state
|
||||
this.props.dispatch({
|
||||
type: 'app/getDataByGet',
|
||||
url: 'PF/VerifyPhone/PhoneVerifyCode',
|
||||
payload: {
|
||||
uid: tokenData.userid,
|
||||
orgId: formData.orgId
|
||||
},
|
||||
onlyData: false
|
||||
}).then(res => {
|
||||
if (res) {
|
||||
if (!res.IsSuccessful) {
|
||||
message.error(res.ErrorMessage)
|
||||
this.setState({ isCheckPhoneCode: null })
|
||||
return
|
||||
const { tokenData, formData } = this.state;
|
||||
this.props
|
||||
.dispatch({
|
||||
type: "app/getDataByGet",
|
||||
url: "PF/VerifyPhone/PhoneVerifyCode",
|
||||
payload: {
|
||||
uid: tokenData.userid,
|
||||
orgId: formData.orgId,
|
||||
},
|
||||
onlyData: false,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if (!res.IsSuccessful) {
|
||||
message.error(res.ErrorMessage);
|
||||
this.setState({ isCheckPhoneCode: null });
|
||||
return;
|
||||
}
|
||||
this.setState({ checkTime: tokenData.second }, this.startCountDown);
|
||||
}
|
||||
this.setState({ checkTime: tokenData.second }, this.startCountDown)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
toLogin = (requestCode = false) => {
|
||||
const { tokenData, formData } = this.state
|
||||
const { orgId, username, password, phoneCode } = formData
|
||||
const { tokenData, formData } = this.state;
|
||||
const { orgId, username, password, phoneCode } = formData;
|
||||
this.props.dispatch({
|
||||
type: 'app/getDataByPost',
|
||||
url: 'BI/BIController/getVersion',
|
||||
type: "app/getDataByPost",
|
||||
url: "BI/BIController/getVersion",
|
||||
onComplete: (ret) => {
|
||||
if (ret > config.version) {
|
||||
window.localStorage.clear()
|
||||
message.success('清除成功，即将重新加载页面', 2, () => {
|
||||
setTimeout(() => window.location.reload(true), 500)
|
||||
})
|
||||
window.localStorage.clear();
|
||||
message.success("清除成功，即将重新加载页面", 2, () => {
|
||||
setTimeout(() => window.location.reload(true), 500);
|
||||
});
|
||||
} else {
|
||||
this.props.dispatch({
|
||||
type: 'login/toLogin',
|
||||
payload: {
|
||||
Parameter1: username,
|
||||
Parameter2: MD5(password),
|
||||
Parameter4: orgId,
|
||||
Parameter5: storage('lacal').getItem('formConfigVersion').val,
|
||||
Parameter6: requestCode,
|
||||
Parameter7: phoneCode
|
||||
},
|
||||
loginPayload: {
|
||||
username: username,
|
||||
password: MD5(password),
|
||||
accessToken: tokenData.access_token,
|
||||
refreshToken: tokenData.refreshToken,
|
||||
expiresIn: tokenData.expiresIn,
|
||||
userid: tokenData.userid
|
||||
}
|
||||
}).then(validRes => {
|
||||
if (validRes) {
|
||||
storage('lacal').setItem('verifyPhoneCode', tokenData.userid)
|
||||
this.props.dispatch({
|
||||
type: 'app/getAllEnum',
|
||||
})
|
||||
//if (window.navigator.userAgent.indexOf("Windows") < 1) openNotificationMobile('topRight');
|
||||
//暂时先取消
|
||||
//if(password == '123456' || password == '1234' || password == '123' || password == '111111' || password == '12345678' || password == '888888') openNotificationPass('topRight');
|
||||
if (window.navigator.userAgent.indexOf("Windows") < 1) {
|
||||
// window.location.replace('http://localhost:8000/#/HomeMobileTask')
|
||||
window.location.replace(config.guideH5Host)
|
||||
// this.props.history.push({ pathname: '/HomeMobileNew' })
|
||||
} else {
|
||||
this.props.history.push({ pathname: '/home' })
|
||||
this.props
|
||||
.dispatch({
|
||||
type: "login/toLogin",
|
||||
payload: {
|
||||
Parameter1: username,
|
||||
Parameter2: MD5(password),
|
||||
Parameter4: orgId,
|
||||
Parameter5: storage("lacal").getItem("formConfigVersion").val,
|
||||
Parameter6: requestCode,
|
||||
Parameter7: phoneCode,
|
||||
},
|
||||
loginPayload: {
|
||||
username: username,
|
||||
password: MD5(password),
|
||||
accessToken: tokenData.access_token,
|
||||
refreshToken: tokenData.refreshToken,
|
||||
expiresIn: tokenData.expiresIn,
|
||||
userid: tokenData.userid,
|
||||
},
|
||||
})
|
||||
.then((validRes) => {
|
||||
if (validRes) {
|
||||
storage("lacal").setItem("verifyPhoneCode", tokenData.userid);
|
||||
this.props.dispatch({
|
||||
type: "app/getAllEnum",
|
||||
});
|
||||
//if (window.navigator.userAgent.indexOf("Windows") < 1) openNotificationMobile('topRight');
|
||||
//暂时先取消
|
||||
//if(password == '123456' || password == '1234' || password == '123' || password == '111111' || password == '12345678' || password == '888888') openNotificationPass('topRight');
|
||||
if (window.navigator.userAgent.indexOf("Windows") < 1) {
|
||||
// window.location.replace('http://localhost:8000/#/HomeMobileTask')
|
||||
window.location.replace(config.guideH5Host);
|
||||
// this.props.history.push({ pathname: '/HomeMobileNew' })
|
||||
} else {
|
||||
this.props.history.push({ pathname: "/home" });
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
preLogin = () => {
|
||||
const { formData, verifyRandomCode } = this.state
|
||||
const { orgId, username, password, verifyCode } = formData
|
||||
this.props.dispatch({
|
||||
type: 'login/getToken',
|
||||
payload: {
|
||||
orgId,
|
||||
username,
|
||||
password: MD5(password),
|
||||
grant_type: 0,
|
||||
random: verifyRandomCode,
|
||||
verificationCode: verifyCode
|
||||
}
|
||||
}).then(res => {
|
||||
// this.setState({
|
||||
// formData: {
|
||||
// ...this.state.formData,
|
||||
// orgId: res.orgId,
|
||||
// }
|
||||
// })
|
||||
if (res) {
|
||||
if (res.error) {
|
||||
this.setState({ loginError: res.error_description })
|
||||
return
|
||||
const { formData, verifyRandomCode } = this.state;
|
||||
const { orgId, username, password, verifyCode } = formData;
|
||||
this.props
|
||||
.dispatch({
|
||||
type: "login/getToken",
|
||||
payload: {
|
||||
orgId,
|
||||
username,
|
||||
password: MD5(password),
|
||||
grant_type: 0,
|
||||
random: verifyRandomCode,
|
||||
verificationCode: verifyCode,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
// this.setState({
|
||||
// formData: {
|
||||
// ...this.state.formData,
|
||||
// orgId: res.orgId,
|
||||
// }
|
||||
// })
|
||||
if (res) {
|
||||
if (res.error) {
|
||||
this.setState({ loginError: res.error_description });
|
||||
return;
|
||||
}
|
||||
const { isCheckPhoneCode, userid } = res;
|
||||
const { hasCheckPhoneCode } = this.state;
|
||||
if (
|
||||
isCheckPhoneCode &&
|
||||
(!hasCheckPhoneCode || hasCheckPhoneCode.indexOf(userid) === -1)
|
||||
) {
|
||||
// 需要进行验证码验证
|
||||
this.setState(
|
||||
{
|
||||
isCheckPhoneCode: true,
|
||||
tokenData: res,
|
||||
},
|
||||
this.getPhoneCode
|
||||
);
|
||||
} else {
|
||||
// 不需要进行验证码验证，则直接登录
|
||||
this.setState({ tokenData: res }, this.toLogin);
|
||||
}
|
||||
}
|
||||
const { isCheckPhoneCode, userid } = res
|
||||
const { hasCheckPhoneCode } = this.state
|
||||
if (isCheckPhoneCode && (!hasCheckPhoneCode || hasCheckPhoneCode.indexOf(userid) === -1)) {
|
||||
// 需要进行验证码验证
|
||||
this.setState({
|
||||
isCheckPhoneCode: true,
|
||||
tokenData: res
|
||||
}, this.getPhoneCode)
|
||||
} else {
|
||||
// 不需要进行验证码验证，则直接登录
|
||||
this.setState({ tokenData: res }, this.toLogin)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
formFieldInvalid = () => {
|
||||
const { formData, isCheckPhoneCode } = this.state
|
||||
const { orgId, username, password, verifyCode, phoneCode } = formData
|
||||
const phoneCodeVerify = !isCheckPhoneCode || (isCheckPhoneCode === true && phoneCode)
|
||||
const { formData, isCheckPhoneCode } = this.state;
|
||||
const { orgId, username, password, verifyCode, phoneCode } = formData;
|
||||
const phoneCodeVerify =
|
||||
!isCheckPhoneCode || (isCheckPhoneCode === true && phoneCode);
|
||||
this.setState({
|
||||
verify: {
|
||||
//orgId: orgId ? '' : 'error',
|
||||
username: username ? '' : 'error',
|
||||
password: password ? '' : 'error',
|
||||
verifyCode: verifyCode ? '' : 'error',
|
||||
phoneCode: phoneCodeVerify ? '' : 'error'
|
||||
}
|
||||
})
|
||||
username: username ? "" : "error",
|
||||
password: password ? "" : "error",
|
||||
verifyCode: verifyCode ? "" : "error",
|
||||
phoneCode: phoneCodeVerify ? "" : "error",
|
||||
},
|
||||
});
|
||||
//return !orgId || !username || !password || !verifyCode || !phoneCodeVerify
|
||||
return !username || !password || !verifyCode || !phoneCodeVerify
|
||||
|
||||
}
|
||||
return !username || !password || !verifyCode || !phoneCodeVerify;
|
||||
};
|
||||
|
||||
handleLogin = () => {
|
||||
if (this.formFieldInvalid()) return
|
||||
if (this.formFieldInvalid()) return;
|
||||
|
||||
const { isCheckPhoneCode } = this.state
|
||||
!isCheckPhoneCode ? this.preLogin() : this.toLogin(true)
|
||||
}
|
||||
const { isCheckPhoneCode } = this.state;
|
||||
!isCheckPhoneCode ? this.preLogin() : this.toLogin(true);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading } = this.props
|
||||
const { tokenData, formData, treeData, verify, verifyCodeApi, verifyRandomCode, isCheckPhoneCode, checkTime, loginError } = this.state
|
||||
const { orgId, username, password, verifyCode, phoneCode } = verify
|
||||
const { loading } = this.props;
|
||||
const {
|
||||
tokenData,
|
||||
formData,
|
||||
treeData,
|
||||
verify,
|
||||
verifyCodeApi,
|
||||
verifyRandomCode,
|
||||
isCheckPhoneCode,
|
||||
checkTime,
|
||||
loginError,
|
||||
} = this.state;
|
||||
const { orgId, username, password, verifyCode, phoneCode } = verify;
|
||||
|
||||
return (
|
||||
<div className='login-page'>
|
||||
<div className='login-page__main'>
|
||||
<div className='login-page__slogan'>
|
||||
<div className="login-page">
|
||||
<div className="login-page__main">
|
||||
<div className="login-page__slogan">
|
||||
{/* <p>人人讲安全</p>
|
||||
<p>安全为人人</p>
|
||||
<img src={require('../assets/login/product.png')} alt='product' /> */}
|
||||
</div>
|
||||
<div className='login-page__login'>
|
||||
<p className='login-page__login-cn'>用户登录</p>
|
||||
<div className="login-page__login">
|
||||
<p className="login-page__login-cn">欢迎登录SMS</p>
|
||||
<p className="login-page__login-cne">WELCOME!</p>
|
||||
{/* <span className='login-page__login-en'>LOGIN</span> */}
|
||||
<div className='login-page__login-box'>
|
||||
<div className={`login-page__login-formWrap ${isCheckPhoneCode === true ? 'showPhoneCode' : ''}`}>
|
||||
<Form className='login-page__login-form'>
|
||||
<Form.Item validateStatus={orgId} style={{display:"none"}}>
|
||||
<div className="login-page__login-box">
|
||||
<div
|
||||
className={`login-page__login-formWrap ${
|
||||
isCheckPhoneCode === true ? "showPhoneCode" : ""
|
||||
}`}
|
||||
>
|
||||
<Form className="login-page__login-form">
|
||||
<Form.Item validateStatus={orgId} style={{ display: "none" }}>
|
||||
<TreeSelect
|
||||
treeDefaultExpandAll
|
||||
treeData={treeData}
|
||||
value={formData.orgId}
|
||||
onChange={val => this.handleFormChange('orgId', val)}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder='请选择组织'
|
||||
onChange={(val) => this.handleFormChange("orgId", val)}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
||||
placeholder="请选择组织"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item validateStatus={username} style={{marginTop:"40px"}}>
|
||||
<Form.Item
|
||||
validateStatus={username}
|
||||
style={{ marginTop: "20px" }}
|
||||
>
|
||||
<Input
|
||||
onChange={evt => this.handleFormChange('username', evt.target.value)}
|
||||
onChange={(evt) =>
|
||||
this.handleFormChange("username", evt.target.value)
|
||||
}
|
||||
onPressEnter={this.handleLogin}
|
||||
prefix={<Icon type='user' />}
|
||||
prefix={
|
||||
<div style={{ marginRight: "10px" }}>
|
||||
<Icon type="user" style={{ color: "#7485be" }} />
|
||||
<Divider
|
||||
type="vertical"
|
||||
style={{ backgroundColor: "#d4d9e5" }}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
placeholder="请输入用户名"
|
||||
className='login-page__login-input'
|
||||
className="login-page__login-input"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item validateStatus={password}>
|
||||
<Input
|
||||
type='password'
|
||||
onChange={evt => this.handleFormChange('password', evt.target.value)}
|
||||
type="password"
|
||||
onChange={(evt) =>
|
||||
this.handleFormChange("password", evt.target.value)
|
||||
}
|
||||
onPressEnter={this.handleLogin}
|
||||
prefix={<Icon type='lock' />}
|
||||
placeholder='请输入密码'
|
||||
className='login-page__login-input'
|
||||
prefix={
|
||||
<div style={{ marginRight: "10px" }}>
|
||||
<Icon type="lock" style={{ color: "#7485be" }} />
|
||||
<Divider
|
||||
type="vertical"
|
||||
style={{ backgroundColor: "#d4d9e5" }}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
placeholder="请输入密码"
|
||||
className="login-page__login-input"
|
||||
/>
|
||||
</Form.Item>
|
||||
<div className='login-page__login-pwd'>
|
||||
<div className="login-page__login-pwd">
|
||||
<Checkbox defaultChecked>记住密码</Checkbox>
|
||||
{/* <a>忘记密码？</a> */}
|
||||
</div>
|
||||
<Form.Item validateStatus={verifyCode}>
|
||||
<Form.Item validateStatus={verifyCode} style={{ marginBottom: "20px" }}>
|
||||
<Input
|
||||
onChange={evt => this.handleFormChange('verifyCode', evt.target.value)}
|
||||
onChange={(evt) =>
|
||||
this.handleFormChange("verifyCode", evt.target.value)
|
||||
}
|
||||
onPressEnter={this.handleLogin}
|
||||
prefix={<Icon type='safety' />}
|
||||
prefix={
|
||||
<div style={{ marginRight: "10px" }}>
|
||||
<Icon type="safety" style={{ color: "#7485be" }} />
|
||||
<Divider
|
||||
type="vertical"
|
||||
style={{ backgroundColor: "#d4d9e5" }}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
suffix={
|
||||
<img
|
||||
key={verifyRandomCode}
|
||||
src={`${verifyCodeApi}?random=${verifyRandomCode}`}
|
||||
alt='验证码'
|
||||
onClick={() => this.setState({ verifyRandomCode: guid() })}
|
||||
className='login-page__login-verifyCode'
|
||||
alt="验证码"
|
||||
onClick={() =>
|
||||
this.setState({ verifyRandomCode: guid() })
|
||||
}
|
||||
className="login-page__login-verifyCode"
|
||||
/>
|
||||
}
|
||||
placeholder='验证码'
|
||||
className='login-page__login-input'
|
||||
placeholder="验证码"
|
||||
className="login-page__login-input"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Form className='login-page__login-form'>
|
||||
<Form className="login-page__login-form">
|
||||
<Form.Item>
|
||||
<Input
|
||||
disabled
|
||||
value={`验证码已发送：${tokenData.phoneNumber}`}
|
||||
prefix={<Icon type='phone' />}
|
||||
className='login-page__login-input'
|
||||
prefix={<Icon type="phone" />}
|
||||
className="login-page__login-input"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item validateStatus={phoneCode}>
|
||||
<Input
|
||||
onChange={evt => this.handleFormChange('phoneCode', evt.target.value)}
|
||||
onChange={(evt) =>
|
||||
this.handleFormChange("phoneCode", evt.target.value)
|
||||
}
|
||||
onPressEnter={this.handleLogin}
|
||||
prefix={<Icon type='message' />}
|
||||
prefix={<Icon type="message" />}
|
||||
suffix={
|
||||
<Button
|
||||
disabled={checkTime > 0}
|
||||
size='small'
|
||||
type='primary'
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={this.getPhoneCode}
|
||||
className='login-page__login-verifyCode'
|
||||
>{`${checkTime > 0 ? checkTime + 's后' : ''}再次发送`}</Button>
|
||||
className="login-page__login-verifyCode"
|
||||
>{`${
|
||||
checkTime > 0 ? checkTime + "s后" : ""
|
||||
}再次发送`}</Button>
|
||||
}
|
||||
placeholder='请输入短信验证码'
|
||||
className='login-page__login-input'
|
||||
placeholder="请输入短信验证码"
|
||||
className="login-page__login-input"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type='primary'
|
||||
className='login-page__login-btn'
|
||||
disabled={loading.effects['login/getOrg']}
|
||||
loading={!!loading.effects['login/toLogin']}
|
||||
type="primary"
|
||||
className="login-page__login-btn"
|
||||
disabled={loading.effects["login/getOrg"]}
|
||||
loading={!!loading.effects["login/toLogin"]}
|
||||
onClick={this.handleLogin}
|
||||
>登录</Button>
|
||||
{loginError ? <div className='login-page__login-error'>{loginError}</div> : null}
|
||||
>
|
||||
立即登录
|
||||
</Button>
|
||||
{loginError ? (
|
||||
<div className="login-page__login-error">{loginError}</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className='login-page__footer'>
|
||||
<div className="login-page__footer">
|
||||
{/* <img src={require('../assets/login/footer_logo.png')} alt='OPT' /> */}
|
||||
<div className='login-page__footer-copyright'>
|
||||
<div className="login-page__footer-copyright">
|
||||
<p>Copyright ©2022-2023 厦门鸣鹤管理咨询股份有限公司</p>
|
||||
</div>
|
||||
<div className='login-page__footer-qrcode'>
|
||||
<div className="login-page__footer-qrcode">
|
||||
{/* <img src={require('../assets/login/footer_qrcode.png')} alt='二维码' />
|
||||
<p>访问移动端</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(({ login, loading }) => ({ login, loading }))(LoginPage)
|
||||
export default connect(({ login, loading }) => ({ login, loading }))(LoginPage);
|
||||
|
||||
@ -2,36 +2,37 @@
|
||||
@login-page: login-page;
|
||||
|
||||
.@{login-page} {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content : center;
|
||||
align-items : center;
|
||||
background : url('../assets/login/bg.png') center no-repeat;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
background: url("../assets/login/111.png") no-repeat;
|
||||
background-color: #d8ebff;
|
||||
background-size : cover;
|
||||
overflow : hidden;
|
||||
padding-bottom : 80px;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
// padding-bottom: 80px;
|
||||
//padding-right : 80px;
|
||||
|
||||
&__main {
|
||||
width : 100%;
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
width: 40%;
|
||||
// margin-right: 5%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__slogan {
|
||||
margin-right: 1%; //登录背景框的
|
||||
margin-right: 1%; //登录背景框的
|
||||
|
||||
p {
|
||||
margin : 0 0 0 34px;
|
||||
font-size : 30px;
|
||||
margin: 0 0 0 34px;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
color : #1458BD;
|
||||
color: #1458bd;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 68px;
|
||||
@ -39,49 +40,57 @@
|
||||
}
|
||||
|
||||
img {
|
||||
width : 460px;
|
||||
height : auto;
|
||||
width: 460px;
|
||||
height: auto;
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&__login {
|
||||
width : 403px;
|
||||
height : 450px;
|
||||
padding : 0 58px;
|
||||
background : url('../assets/login/login_box.png') center no-repeat;
|
||||
background-size: contain;
|
||||
background-position: -4px;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
width: 403px;
|
||||
height: 450px;
|
||||
padding: 0 58px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items : center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0px 0px 50px 0px #8bacff;
|
||||
|
||||
&-cn {
|
||||
font-size : 20px;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
margin : 32px 0 16px 0;
|
||||
color : #1458BD;
|
||||
margin: 32px 0 16px 0;
|
||||
color: #02112b;
|
||||
font-weight: bold;
|
||||
}
|
||||
&-cne {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
// margin: 32px 0 16px 0;
|
||||
color: #02112b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-en {
|
||||
font-size : 12px;
|
||||
line-height : 1;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
color : #9EADC5;
|
||||
display : inline-block;
|
||||
color: #9eadc5;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-box {
|
||||
width : 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-formWrap {
|
||||
display : flex;
|
||||
width : 200%;
|
||||
overflow : hidden;
|
||||
transition: all .2s ease;
|
||||
display: flex;
|
||||
width: 200%;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.showPhoneCode {
|
||||
transform: translateX(-50%);
|
||||
@ -102,23 +111,33 @@
|
||||
}
|
||||
|
||||
&-input {
|
||||
::placeholder {
|
||||
color: #98a0b8 !important;
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
padding-left: 36px !important;
|
||||
padding-left: 46px !important;
|
||||
background-color: #f5f9fe !important;
|
||||
border: 1px solid #b3d2fb !important;
|
||||
color: #677ada;
|
||||
}
|
||||
.ant-input:focus {
|
||||
box-shadow: 0 0 0 2px #b3d2fb;
|
||||
}
|
||||
|
||||
.ant-input-suffix {
|
||||
height: 80%;
|
||||
right : 4px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-pwd {
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items : center;
|
||||
font-size : 14px;
|
||||
margin-bottom : 18px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
&-verifyCode {
|
||||
@ -127,49 +146,58 @@
|
||||
}
|
||||
|
||||
&-btn {
|
||||
width : 100%;
|
||||
height : 42px;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-size : 16px;
|
||||
margin-top : 18px;
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
background-color: #2a82e4;
|
||||
}
|
||||
|
||||
&-error {
|
||||
width : 100%;
|
||||
color : #f04134;
|
||||
font-size : 12px;
|
||||
padding-top : 6px;
|
||||
text-align : center;
|
||||
overflow : hidden;
|
||||
width: 100%;
|
||||
color: #f04134;
|
||||
font-size: 12px;
|
||||
padding-top: 6px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space : nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position : absolute;
|
||||
bottom : 8px;
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width : auto;
|
||||
height : 50px;
|
||||
width: auto;
|
||||
height: 50px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
&-copyright {
|
||||
height : 50px;
|
||||
line-height : 25px;
|
||||
padding-left: 12px;
|
||||
margin-right: 24px;
|
||||
border-left : 1px solid #1446aa;
|
||||
// height: 50px;
|
||||
width: 40%;
|
||||
line-height: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// padding-right: 50%;
|
||||
// padding-left: 12px;
|
||||
// margin-right: 24px;
|
||||
// border-left: 1px solid #1446aa;
|
||||
|
||||
p {
|
||||
margin-top: 30px;
|
||||
color : #fff;
|
||||
// margin-top: 30px;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
background-color: rgba(72, 133, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
|
||||
&:first-child {
|
||||
font-size: 12px;
|
||||
@ -177,23 +205,23 @@
|
||||
|
||||
&:last-child {
|
||||
font-size: 14px;
|
||||
color : #fff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-qrcode {
|
||||
img {
|
||||
width : 60px;
|
||||
height : auto;
|
||||
width: 60px;
|
||||
height: auto;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size : 12px;
|
||||
color : #FFFFFF;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
margin : 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user