ccy/mh-sms-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sms登录模块修改

Browse Source
This commit is contained in:
yunkexin 2024-03-01 08:46:49 +08:00
parent 4d74ec13cd
commit 2488a8ba8b
8 changed files with 481 additions and 368 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/login/111.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
src/assets/login/back1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
src/assets/login/下载 (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
src/assets/login/切片 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 728 KiB

6
src/layout/Header.js
View File

@ -277,7 +277,7 @@ const NavOpton = (props) => {
{/* <Icon type='bars' className='header__right-icon'></Icon> */} {/* <Icon type='bars' className='header__right-icon'></Icon> */}
<IconFont <IconFont
type="icon-line-108" type="icon-line-108"
style={{ fontSize: "22px", color: "#333333", cursor: "pointer" }} style={{ fontSize: "22px", color: "#606266", cursor: "pointer" }}
></IconFont> ></IconFont>
</div> </div>
<Modal <Modal
@ -313,7 +313,7 @@ function Header(props) {
} }
return ( return (
<div className={`header ${props.matchLogin ? "login" : ""}`}> <div className={`header ${props.matchLogin ? "login" : "nologin"}`}>
<div className="header__left"> <div className="header__left">
<PictureThumb <PictureThumb
thumbCodes={thumbCode ? [thumbCode] : []} 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}{" "} {baseConfig.SYS_NAME}{" "}
</span> </span>
)} )}

25
src/layout/header.less
View File

@ -1,32 +1,35 @@
:global { :global {
@main-bg : #ffffff;//#033C67 #f5f5f5 @main-bg: #f4f7ff; //#033C67 #f5f5f5
@opacity-bg: rgba(72, 133, 255, 0.2); @opacity-bg: rgba(72, 133, 255, 0.2);
@header-prefix: header; @header-prefix: header;
.headerModal { .headerModal {
.ant-modal-footer { .ant-modal-footer {
display: none; display: none;
} }
.ant-modal-body { .ant-modal-body {
max-height: 90vh; max-height: 90vh;
} }
} }
.ant-modal { .ant-modal {
padding-bottom: 0; padding-bottom: 0;
} }
.@{header-prefix} { .@{header-prefix} {
width : 100%; // width: 100%;
height: 100%; height: 100%;
padding: 0 24px; padding: 0 24px;
background-color: @main-bg; margin: 0px 10px;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);//rgba(250, 246, 246, 0.25) // background-color: @main-bg;
transition : background-color .2s ease; // box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);//rgba(250, 246, 246, 0.25)
transition: background-color 0.2s ease;
&.login { &.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, &__left,
@ -50,7 +53,7 @@
&-slogan { &-slogan {
font-size: 16px; font-size: 16px;
font-weight: bolder; font-weight: bolder;
color : #333333;//#f3eded color: #606266; //#f3eded
} }
&-sloganLogin { &-sloganLogin {
font-size: 16px; font-size: 16px;
@ -69,7 +72,7 @@
&-icon { &-icon {
font-size: 22px !important; font-size: 22px !important;
color : #333333 !important;//f3eded color: #606266 !important; //f3eded
cursor: pointer; cursor: pointer;
} }

468
src/routes/Login.js
View File

@ -1,193 +1,208 @@
// 核心库 // 核心库
import React from 'react' import React from "react";
import { connect } from 'dva' 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 MD5 from "md5";
import storage from '../utils/storage' import storage from "../utils/storage";
import { guid } from '../utils/common' import { guid } from "../utils/common";
import config from '../config' import config from "../config";
// 样式 // 样式
import './login.less' import "./login.less";
const openNotificationPass = placement => { const openNotificationPass = (placement) => {
notification.info({ notification.info({
duration: null, duration: null,
message: `密码修改提示：`, message: `密码修改提示：`,
description: description: "您的登录密码过于简单，请尽快修改您的登录密码！",
'您的登录密码过于简单，请尽快修改您的登录密码！',
placement, placement,
}); });
}; };
const openNotificationMobile = placement => { const openNotificationMobile = (placement) => {
notification.info({ notification.info({
//duration: null, //duration: null,
message: `浏览友情提示：`, message: `浏览友情提示：`,
description: description: "您当前用的是手机在访问，为更好使用体验，建议用电脑访问！",
'您当前用的是手机在访问，为更好使用体验，建议用电脑访问！',
placement, placement,
}); });
}; };
class LoginPage extends React.Component { class LoginPage extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.state = { this.state = {
treeData: [], treeData: [],
tokenData: {}, tokenData: {},
formData: { formData: {
orgId: undefined, orgId: undefined,
username: '', username: "",
password: '', password: "",
verifyCode: '', verifyCode: "",
phoneCode: '' phoneCode: "",
}, },
verify: { verify: {
orgId: '', orgId: "",
username: '', username: "",
password: '', password: "",
verifyCode: '', verifyCode: "",
phoneCode: '' phoneCode: "",
}, },
// 图片验证码 // 图片验证码
verifyCodeApi: config.serviceHost('api/UT/VerificationCode/Number'), verifyCodeApi: config.serviceHost("api/UT/VerificationCode/Number"),
verifyRandomCode: guid(), verifyRandomCode: guid(),
// 手机验证码 // 手机验证码
hasCheckPhoneCode: storage('lacal').getItem('verifyPhoneCode').val, hasCheckPhoneCode: storage("lacal").getItem("verifyPhoneCode").val,
isCheckPhoneCode: null, isCheckPhoneCode: null,
// 重发验证码倒计时 // 重发验证码倒计时
checkTime: 60, checkTime: 60,
// 登陆错误提示 // 登陆错误提示
loginError: '' loginError: "",
} };
this.timer = -1 this.timer = -1;
} }
componentDidMount() { componentDidMount() {
if (window.navigator.userAgent.indexOf("Windows") < 1) { if (window.navigator.userAgent.indexOf("Windows") < 1) {
window.location.replace(config.guideH5Host) window.location.replace(config.guideH5Host);
//alert('手机'); //alert('手机');
} }
// if (window.navigator.userAgent.indexOf("Windows") < 1) openNotificationMobile('bottomRight'); // if (window.navigator.userAgent.indexOf("Windows") < 1) openNotificationMobile('bottomRight');
this.removeRequestKey() this.removeRequestKey();
this.getOrgList() this.getOrgList();
} }
componentWillUnmount() { componentWillUnmount() {
clearInterval(this.timer) clearInterval(this.timer);
} }
removeRequestKey = () => { removeRequestKey = () => {
const { localStorage } = window const { localStorage } = window;
for (let i = 0; i < localStorage.length; i++) { for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i) const key = localStorage.key(i);
key.indexOf('_requestKey') > -1 && localStorage.removeItem(key) key.indexOf("_requestKey") > -1 && localStorage.removeItem(key);
}
} }
};
recurseData = (data) => { recurseData = (data) => {
data.forEach(item => { data.forEach((item) => {
const { Node = item, Children } = item const { Node = item, Children } = item;
item.title = `${Node.NAME}(${Node.CODE})` item.title = `${Node.NAME}(${Node.CODE})`;
item.key = Node.ID item.key = Node.ID;
item.value = Node.ID item.value = Node.ID;
Children && Children.length && this.recurseData(Children) Children && Children.length && this.recurseData(Children);
}) });
} };
getOrgList = () => { getOrgList = () => {
this.props.dispatch({ this.props
type: 'login/getOrg', .dispatch({
type: "login/getOrg",
payload: { payload: {
Sort: 'CODE', Sort: "CODE",
Order: 0, Order: 0,
Parameter10: window.location.host, Parameter10: window.location.host,
Parameter11: '0' Parameter11: "0",
} },
}).then(res => { })
.then((res) => {
if (res && res.Data) { if (res && res.Data) {
this.recurseData(res.Data) this.recurseData(res.Data);
this.setState({ this.setState({
treeData: res.Data, treeData: res.Data,
formData: { formData: {
...this.state.formData, ...this.state.formData,
orgId: storage('lacal').getItem('webOrgId').val ? storage('lacal').getItem('webOrgId').val : res.Data[0].Node.ORG_ID, orgId: storage("lacal").getItem("webOrgId").val
} ? storage("lacal").getItem("webOrgId").val
}) : res.Data[0].Node.ORG_ID,
} },
}) });
} }
});
};
handleFormChange = (type, val) => { handleFormChange = (type, val) => {
this.setState({ this.setState({
formData: { formData: {
...this.state.formData, ...this.state.formData,
[type]: val [type]: val,
}, },
verify: { verify: {
...this.state.verify, ...this.state.verify,
[type]: val ? '' : 'error' [type]: val ? "" : "error",
} },
}) });
} };
startCountDown = () => { startCountDown = () => {
this.timer = setInterval(() => { this.timer = setInterval(() => {
const { checkTime } = this.state const { checkTime } = this.state;
if (checkTime > 0) { if (checkTime > 0) {
this.setState({ checkTime: checkTime - 1 }) this.setState({ checkTime: checkTime - 1 });
} else { } else {
clearInterval(this.timer) clearInterval(this.timer);
}
}, 1000)
} }
}, 1000);
};
getPhoneCode = () => { getPhoneCode = () => {
const { tokenData, formData } = this.state const { tokenData, formData } = this.state;
this.props.dispatch({ this.props
type: 'app/getDataByGet', .dispatch({
url: 'PF/VerifyPhone/PhoneVerifyCode', type: "app/getDataByGet",
url: "PF/VerifyPhone/PhoneVerifyCode",
payload: { payload: {
uid: tokenData.userid, uid: tokenData.userid,
orgId: formData.orgId orgId: formData.orgId,
}, },
onlyData: false onlyData: false,
}).then(res => { })
.then((res) => {
if (res) { if (res) {
if (!res.IsSuccessful) { if (!res.IsSuccessful) {
message.error(res.ErrorMessage) message.error(res.ErrorMessage);
this.setState({ isCheckPhoneCode: null }) this.setState({ isCheckPhoneCode: null });
return return;
} }
this.setState({ checkTime: tokenData.second }, this.startCountDown) this.setState({ checkTime: tokenData.second }, this.startCountDown);
}
})
} }
});
};
toLogin = (requestCode = false) => { toLogin = (requestCode = false) => {
const { tokenData, formData } = this.state const { tokenData, formData } = this.state;
const { orgId, username, password, phoneCode } = formData const { orgId, username, password, phoneCode } = formData;
this.props.dispatch({ this.props.dispatch({
type: 'app/getDataByPost', type: "app/getDataByPost",
url: 'BI/BIController/getVersion', url: "BI/BIController/getVersion",
onComplete: (ret) => { onComplete: (ret) => {
if (ret > config.version) { if (ret > config.version) {
window.localStorage.clear() window.localStorage.clear();
message.success('清除成功，即将重新加载页面', 2, () => { message.success("清除成功，即将重新加载页面", 2, () => {
setTimeout(() => window.location.reload(true), 500) setTimeout(() => window.location.reload(true), 500);
}) });
} else { } else {
this.props.dispatch({ this.props
type: 'login/toLogin', .dispatch({
type: "login/toLogin",
payload: { payload: {
Parameter1: username, Parameter1: username,
Parameter2: MD5(password), Parameter2: MD5(password),
Parameter4: orgId, Parameter4: orgId,
Parameter5: storage('lacal').getItem('formConfigVersion').val, Parameter5: storage("lacal").getItem("formConfigVersion").val,
Parameter6: requestCode, Parameter6: requestCode,
Parameter7: phoneCode Parameter7: phoneCode,
}, },
loginPayload: { loginPayload: {
username: username, username: username,
@ -195,45 +210,48 @@ class LoginPage extends React.Component {
accessToken: tokenData.access_token, accessToken: tokenData.access_token,
refreshToken: tokenData.refreshToken, refreshToken: tokenData.refreshToken,
expiresIn: tokenData.expiresIn, expiresIn: tokenData.expiresIn,
userid: tokenData.userid userid: tokenData.userid,
} },
}).then(validRes => {
if (validRes) {
storage('lacal').setItem('verifyPhoneCode', tokenData.userid)
this.props.dispatch({
type: 'app/getAllEnum',
}) })
.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 (window.navigator.userAgent.indexOf("Windows") < 1) openNotificationMobile('topRight');
//暂时先取消 //暂时先取消
//if(password == '123456' || password == '1234' || password == '123' || password == '111111' || password == '12345678' || password == '888888') openNotificationPass('topRight'); //if(password == '123456' || password == '1234' || password == '123' || password == '111111' || password == '12345678' || password == '888888') openNotificationPass('topRight');
if (window.navigator.userAgent.indexOf("Windows") < 1) { if (window.navigator.userAgent.indexOf("Windows") < 1) {
// window.location.replace('http://localhost:8000/#/HomeMobileTask') // window.location.replace('http://localhost:8000/#/HomeMobileTask')
window.location.replace(config.guideH5Host) window.location.replace(config.guideH5Host);
// this.props.history.push({ pathname: '/HomeMobileNew' }) // this.props.history.push({ pathname: '/HomeMobileNew' })
} else { } else {
this.props.history.push({ pathname: '/home' }) this.props.history.push({ pathname: "/home" });
} }
} }
}) });
}
}
})
} }
},
});
};
preLogin = () => { preLogin = () => {
const { formData, verifyRandomCode } = this.state const { formData, verifyRandomCode } = this.state;
const { orgId, username, password, verifyCode } = formData const { orgId, username, password, verifyCode } = formData;
this.props.dispatch({ this.props
type: 'login/getToken', .dispatch({
type: "login/getToken",
payload: { payload: {
orgId, orgId,
username, username,
password: MD5(password), password: MD5(password),
grant_type: 0, grant_type: 0,
random: verifyRandomCode, random: verifyRandomCode,
verificationCode: verifyCode verificationCode: verifyCode,
} },
}).then(res => { })
.then((res) => {
// this.setState({ // this.setState({
// formData: { // formData: {
// ...this.state.formData, // ...this.state.formData,
@ -242,174 +260,238 @@ class LoginPage extends React.Component {
// }) // })
if (res) { if (res) {
if (res.error) { if (res.error) {
this.setState({ loginError: res.error_description }) this.setState({ loginError: res.error_description });
return return;
} }
const { isCheckPhoneCode, userid } = res const { isCheckPhoneCode, userid } = res;
const { hasCheckPhoneCode } = this.state const { hasCheckPhoneCode } = this.state;
if (isCheckPhoneCode && (!hasCheckPhoneCode || hasCheckPhoneCode.indexOf(userid) === -1)) { if (
isCheckPhoneCode &&
(!hasCheckPhoneCode || hasCheckPhoneCode.indexOf(userid) === -1)
) {
// 需要进行验证码验证 // 需要进行验证码验证
this.setState({ this.setState(
{
isCheckPhoneCode: true, isCheckPhoneCode: true,
tokenData: res tokenData: res,
}, this.getPhoneCode) },
this.getPhoneCode
);
} else { } else {
// 不需要进行验证码验证，则直接登录 // 不需要进行验证码验证，则直接登录
this.setState({ tokenData: res }, this.toLogin) this.setState({ tokenData: res }, this.toLogin);
} }
} }
}) });
} };
formFieldInvalid = () => { formFieldInvalid = () => {
const { formData, isCheckPhoneCode } = this.state const { formData, isCheckPhoneCode } = this.state;
const { orgId, username, password, verifyCode, phoneCode } = formData const { orgId, username, password, verifyCode, phoneCode } = formData;
const phoneCodeVerify = !isCheckPhoneCode || (isCheckPhoneCode === true && phoneCode) const phoneCodeVerify =
!isCheckPhoneCode || (isCheckPhoneCode === true && phoneCode);
this.setState({ this.setState({
verify: { verify: {
//orgId: orgId ? '' : 'error', //orgId: orgId ? '' : 'error',
username: username ? '' : 'error', username: username ? "" : "error",
password: password ? '' : 'error', password: password ? "" : "error",
verifyCode: verifyCode ? '' : 'error', verifyCode: verifyCode ? "" : "error",
phoneCode: phoneCodeVerify ? '' : 'error' phoneCode: phoneCodeVerify ? "" : "error",
} },
}) });
//return !orgId || !username || !password || !verifyCode || !phoneCodeVerify //return !orgId || !username || !password || !verifyCode || !phoneCodeVerify
return !username || !password || !verifyCode || !phoneCodeVerify return !username || !password || !verifyCode || !phoneCodeVerify;
};
}
handleLogin = () => { handleLogin = () => {
if (this.formFieldInvalid()) return if (this.formFieldInvalid()) return;
const { isCheckPhoneCode } = this.state const { isCheckPhoneCode } = this.state;
!isCheckPhoneCode ? this.preLogin() : this.toLogin(true) !isCheckPhoneCode ? this.preLogin() : this.toLogin(true);
} };
render() { render() {
const { loading } = this.props const { loading } = this.props;
const { tokenData, formData, treeData, verify, verifyCodeApi, verifyRandomCode, isCheckPhoneCode, checkTime, loginError } = this.state const {
const { orgId, username, password, verifyCode, phoneCode } = verify tokenData,
formData,
treeData,
verify,
verifyCodeApi,
verifyRandomCode,
isCheckPhoneCode,
checkTime,
loginError,
} = this.state;
const { orgId, username, password, verifyCode, phoneCode } = verify;
return ( return (
<div className='login-page'> <div className="login-page">
<div className='login-page__main'> <div className="login-page__main">
<div className='login-page__slogan'> <div className="login-page__slogan">
{/* <p>人人讲安全</p> {/* <p>人人讲安全</p>
<p>安全为人人</p> <p>安全为人人</p>
<img src={require('../assets/login/product.png')} alt='product' /> */} <img src={require('../assets/login/product.png')} alt='product' /> */}
</div> </div>
<div className='login-page__login'> <div className="login-page__login">
<p className='login-page__login-cn'>用户登录</p> <p className="login-page__login-cn">欢迎登录SMS</p>
<p className="login-page__login-cne">WELCOME!</p>
{/* <span className='login-page__login-en'>LOGIN</span> */} {/* <span className='login-page__login-en'>LOGIN</span> */}
<div className='login-page__login-box'> <div className="login-page__login-box">
<div className={`login-page__login-formWrap ${isCheckPhoneCode === true ? 'showPhoneCode' : ''}`}> <div
<Form className='login-page__login-form'> className={`login-page__login-formWrap ${
isCheckPhoneCode === true ? "showPhoneCode" : ""
}`}
>
<Form className="login-page__login-form">
<Form.Item validateStatus={orgId} style={{ display: "none" }}> <Form.Item validateStatus={orgId} style={{ display: "none" }}>
<TreeSelect <TreeSelect
treeDefaultExpandAll treeDefaultExpandAll
treeData={treeData} treeData={treeData}
value={formData.orgId} value={formData.orgId}
onChange={val => this.handleFormChange('orgId', val)} onChange={(val) => this.handleFormChange("orgId", val)}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
placeholder='请选择组织' placeholder="请选择组织"
/> />
</Form.Item> </Form.Item>
<Form.Item validateStatus={username} style={{marginTop:"40px"}}> <Form.Item
validateStatus={username}
style={{ marginTop: "20px" }}
>
<Input <Input
onChange={evt => this.handleFormChange('username', evt.target.value)} onChange={(evt) =>
this.handleFormChange("username", evt.target.value)
}
onPressEnter={this.handleLogin} 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="请输入用户名" placeholder="请输入用户名"
className='login-page__login-input' className="login-page__login-input"
/> />
</Form.Item> </Form.Item>
<Form.Item validateStatus={password}> <Form.Item validateStatus={password}>
<Input <Input
type='password' type="password"
onChange={evt => this.handleFormChange('password', evt.target.value)} onChange={(evt) =>
this.handleFormChange("password", evt.target.value)
}
onPressEnter={this.handleLogin} onPressEnter={this.handleLogin}
prefix={<Icon type='lock' />} prefix={
placeholder='请输入密码' <div style={{ marginRight: "10px" }}>
className='login-page__login-input' <Icon type="lock" style={{ color: "#7485be" }} />
<Divider
type="vertical"
style={{ backgroundColor: "#d4d9e5" }}
/>
</div>
}
placeholder="请输入密码"
className="login-page__login-input"
/> />
</Form.Item> </Form.Item>
<div className='login-page__login-pwd'> <div className="login-page__login-pwd">
<Checkbox defaultChecked>记住密码</Checkbox> <Checkbox defaultChecked>记住密码</Checkbox>
{/* <a>忘记密码？</a> */} {/* <a>忘记密码？</a> */}
</div> </div>
<Form.Item validateStatus={verifyCode}> <Form.Item validateStatus={verifyCode} style={{ marginBottom: "20px" }}>
<Input <Input
onChange={evt => this.handleFormChange('verifyCode', evt.target.value)} onChange={(evt) =>
this.handleFormChange("verifyCode", evt.target.value)
}
onPressEnter={this.handleLogin} 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={ suffix={
<img <img
key={verifyRandomCode} key={verifyRandomCode}
src={`${verifyCodeApi}?random=${verifyRandomCode}`} src={`${verifyCodeApi}?random=${verifyRandomCode}`}
alt='验证码' alt="验证码"
onClick={() => this.setState({ verifyRandomCode: guid() })} onClick={() =>
className='login-page__login-verifyCode' this.setState({ verifyRandomCode: guid() })
}
className="login-page__login-verifyCode"
/> />
} }
placeholder='验证码' placeholder="验证码"
className='login-page__login-input' className="login-page__login-input"
/> />
</Form.Item> </Form.Item>
</Form> </Form>
<Form className='login-page__login-form'> <Form className="login-page__login-form">
<Form.Item> <Form.Item>
<Input <Input
disabled disabled
value={`验证码已发送：${tokenData.phoneNumber}`} value={`验证码已发送：${tokenData.phoneNumber}`}
prefix={<Icon type='phone' />} prefix={<Icon type="phone" />}
className='login-page__login-input' className="login-page__login-input"
/> />
</Form.Item> </Form.Item>
<Form.Item validateStatus={phoneCode}> <Form.Item validateStatus={phoneCode}>
<Input <Input
onChange={evt => this.handleFormChange('phoneCode', evt.target.value)} onChange={(evt) =>
this.handleFormChange("phoneCode", evt.target.value)
}
onPressEnter={this.handleLogin} onPressEnter={this.handleLogin}
prefix={<Icon type='message' />} prefix={<Icon type="message" />}
suffix={ suffix={
<Button <Button
disabled={checkTime > 0} disabled={checkTime > 0}
size='small' size="small"
type='primary' type="primary"
onClick={this.getPhoneCode} onClick={this.getPhoneCode}
className='login-page__login-verifyCode' className="login-page__login-verifyCode"
>{`${checkTime > 0 ? checkTime + 's后' : ''}再次发送`}</Button> >{`${
checkTime > 0 ? checkTime + "s后" : ""
}再次发送`}</Button>
} }
placeholder='请输入短信验证码' placeholder="请输入短信验证码"
className='login-page__login-input' className="login-page__login-input"
/> />
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
</div> </div>
<Button <Button
type='primary' type="primary"
className='login-page__login-btn' className="login-page__login-btn"
disabled={loading.effects['login/getOrg']} disabled={loading.effects["login/getOrg"]}
loading={!!loading.effects['login/toLogin']} loading={!!loading.effects["login/toLogin"]}
onClick={this.handleLogin} 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> </div>
<div className='login-page__footer'> <div className="login-page__footer">
{/* <img src={require('../assets/login/footer_logo.png')} alt='OPT' /> */} {/* <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> <p>Copyright ©2022-2023 厦门鸣鹤管理咨询股份有限公司</p>
</div> </div>
<div className='login-page__footer-qrcode'> <div className="login-page__footer-qrcode">
{/* <img src={require('../assets/login/footer_qrcode.png')} alt='二维码' /> {/* <img src={require('../assets/login/footer_qrcode.png')} alt='二维码' />
<p>访问移动端</p> */} <p>访问移动端</p> */}
</div> </div>
</div> </div>
</div> </div>
) );
} }
} }
export default connect(({ login, loading }) => ({ login, loading }))(LoginPage) export default connect(({ login, loading }) => ({ login, loading }))(LoginPage);

68
src/routes/login.less
View File

@ -8,16 +8,17 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items : center; align-items: end;
background : url('../assets/login/bg.png') center no-repeat; background: url("../assets/login/111.png") no-repeat;
background-color: #d8ebff; background-color: #d8ebff;
background-size: cover; background-size: cover;
overflow: hidden; overflow: hidden;
padding-bottom : 80px; // padding-bottom: 80px;
//padding-right : 80px; //padding-right : 80px;
&__main { &__main {
width : 100%; width: 40%;
// margin-right: 5%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@ -31,7 +32,7 @@
margin: 0 0 0 34px; margin: 0 0 0 34px;
font-size: 30px; font-size: 30px;
line-height: 38px; line-height: 38px;
color : #1458BD; color: #1458bd;
&:nth-child(2) { &:nth-child(2) {
margin-left: 68px; margin-left: 68px;
@ -49,26 +50,34 @@
width: 403px; width: 403px;
height: 450px; height: 450px;
padding: 0 58px; padding: 0 58px;
background : url('../assets/login/login_box.png') center no-repeat;
background-size: contain;
background-position: -4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background-color: #fff;
border-radius: 25px;
box-shadow: 0px 0px 50px 0px #8bacff;
&-cn { &-cn {
font-size : 20px; font-size: 22px;
line-height: 1; line-height: 1;
margin: 32px 0 16px 0; margin: 32px 0 16px 0;
color : #1458BD; color: #02112b;
font-weight: bold;
}
&-cne {
font-size: 12px;
line-height: 1;
// margin: 32px 0 16px 0;
color: #02112b;
font-weight: bold;
} }
&-en { &-en {
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
margin-bottom: 16px; margin-bottom: 16px;
color : #9EADC5; color: #9eadc5;
display: inline-block; display: inline-block;
} }
@ -81,7 +90,7 @@
display: flex; display: flex;
width: 200%; width: 200%;
overflow: hidden; overflow: hidden;
transition: all .2s ease; transition: all 0.2s ease;
&.showPhoneCode { &.showPhoneCode {
transform: translateX(-50%); transform: translateX(-50%);
@ -102,8 +111,18 @@
} }
&-input { &-input {
::placeholder {
color: #98a0b8 !important;
}
.ant-input { .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 { .ant-input-suffix {
@ -132,6 +151,7 @@
line-height: 42px; line-height: 42px;
font-size: 16px; font-size: 16px;
margin-top: 18px; margin-top: 18px;
background-color: #2a82e4;
} }
&-error { &-error {
@ -151,8 +171,9 @@
bottom: 8px; bottom: 8px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: flex-end;
align-items: center; align-items: center;
width: 100%;
img { img {
width: auto; width: auto;
@ -161,15 +182,22 @@
} }
&-copyright { &-copyright {
height : 50px; // height: 50px;
width: 40%;
line-height: 25px; line-height: 25px;
padding-left: 12px; display: flex;
margin-right: 24px; justify-content: center;
border-left : 1px solid #1446aa; // padding-right: 50%;
// padding-left: 12px;
// margin-right: 24px;
// border-left: 1px solid #1446aa;
p { p {
margin-top: 30px; // margin-top: 30px;
padding: 10px 20px;
color: #fff; color: #fff;
background-color: rgba(72, 133, 255, 0.2);
border-radius: 10px;
&:first-child { &:first-child {
font-size: 12px; font-size: 12px;
@ -191,7 +219,7 @@
p { p {
font-size: 12px; font-size: 12px;
color : #FFFFFF; color: #ffffff;
line-height: 1; line-height: 1;
margin: 0; margin: 0;
} }