3.10 工程代码同步master
This commit is contained in:
jl-zhoujl2
311
src/pages/userformal/login/index.tsx
Normal file
311
src/pages/userformal/login/index.tsx
Normal file
@ -0,0 +1,311 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Form, Button, Input, Row, Col, Modal, Spin, message } from 'antd';
|
||||
import { UserOutlined, LockOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
|
||||
import './style.less';
|
||||
import { changePass } from './service';
|
||||
import logo from '@/images/login/logoPic.png';
|
||||
import { refreshTokenApi, ZjfakeAccountLogin } from '@/services/login';
|
||||
import { history } from 'umi';
|
||||
import cookie from 'react-cookies';
|
||||
import moment from 'moment';
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 13 },
|
||||
};
|
||||
|
||||
const Index: React.FC<{}> = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [imgUrl, setImgUrl] = useState<any>('');
|
||||
const [tmpToken, setTmpToken] = useState<any>('');
|
||||
const remainingTime = 3 //刷新token的剩余时间，单位小时
|
||||
const [changeForm] = Form.useForm();
|
||||
const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
|
||||
const [spinning, setSping] = useState<boolean>(false);//加载遮罩
|
||||
|
||||
const genRandomString = (len: number) => {
|
||||
const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const rdmIndex = (text: string | any[]) => (Math.random() * text.length) | 0;
|
||||
let rdmString = '';
|
||||
for (; rdmString.length < len; rdmString += text.charAt(rdmIndex(text)));
|
||||
return rdmString;
|
||||
};
|
||||
const changeCaptcha = () => {
|
||||
let tmpToken = genRandomString(16);
|
||||
let url = '/api/auth/captcha?token=' + tmpToken;
|
||||
setTmpToken(tmpToken);
|
||||
setImgUrl(url);
|
||||
};
|
||||
|
||||
//登录刷新Token方法
|
||||
const refreshToken = async (data: any) => {
|
||||
const params = {
|
||||
grant_type: "refresh_token",
|
||||
refresh_token: data?.refreshToken?.value,
|
||||
client_id: REACT_APP_CLIENT_KEY,
|
||||
client_secret: REACT_APP_CLIENT_SECRET,
|
||||
}
|
||||
const header = {
|
||||
clientId: REACT_APP_CLIENT_KEY,
|
||||
}
|
||||
await refreshTokenApi(params, header).then(res => {
|
||||
if (res?.success == true) {
|
||||
sessionStorage.setItem('Authorization', res?.data?.value);
|
||||
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
||||
sessionStorage.setItem('scope', res?.data?.scope);
|
||||
history.push('/redirect');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
await ZjfakeAccountLogin({ ...values, tmpToken }).then((res) => {
|
||||
if (res?.success) {
|
||||
if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
|
||||
refreshToken(res?.data)
|
||||
} else {
|
||||
sessionStorage.setItem('Authorization', res?.data?.value);
|
||||
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
||||
sessionStorage.setItem('scope', res?.data?.scope);
|
||||
history.push('/redirect');
|
||||
}
|
||||
}
|
||||
changeCaptcha();
|
||||
});
|
||||
};
|
||||
|
||||
const handleOk = () => { // 确定修改密码
|
||||
if (changeForm.getFieldValue("newPassword") !== changeForm.getFieldValue("newPassword1")) {
|
||||
message.warn('两次密码输入不一致，请重新输入')
|
||||
} else {
|
||||
changeForm.validateFields().then(res => {
|
||||
setSping(true);
|
||||
const date = {
|
||||
identityCard: changeForm.getFieldValue("identityCard"),
|
||||
oldPassword: changeForm.getFieldValue("oldPassword"),
|
||||
newPassword: changeForm.getFieldValue("newPassword"),
|
||||
};
|
||||
changePass({ ...date }).then(res => {
|
||||
if (res.success) {
|
||||
setSping(false);
|
||||
setIsModalVisible(false)
|
||||
message.success('修改密码成功');
|
||||
changeForm.resetFields()
|
||||
} else {
|
||||
setSping(false);
|
||||
}
|
||||
}).finally(() => {
|
||||
setSping(false);
|
||||
});;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
cookie.remove('mall3_token');
|
||||
sessionStorage.clear();
|
||||
changeCaptcha();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Spin spinning={spinning}>
|
||||
<div className="login-box">
|
||||
<div className="top">
|
||||
<img src={logo} />
|
||||
<h3>中国联通智慧供应链平台 | 招标采购中心</h3>
|
||||
<Button className="change" danger style={{ borderColor: '#b30000', color: '#b30000' }} onClick={() => (setIsModalVisible(true), changeForm.resetFields())}>修改密码</Button>
|
||||
</div>
|
||||
<div className="main">
|
||||
<div className="text">
|
||||
<h3>登 录</h3>
|
||||
<Form
|
||||
name="basic"
|
||||
className="form-box"
|
||||
initialValues={{ remember: true }}
|
||||
form={form}
|
||||
onFinish={handleSubmit}
|
||||
// onFinishFailed={onFinishFailed}
|
||||
>
|
||||
<Form.Item
|
||||
label=""
|
||||
name="userName"
|
||||
rules={[{ required: true, message: '请输入用户名!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={
|
||||
<UserOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
|
||||
}
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label=""
|
||||
name="password"
|
||||
rules={[{ required: true, message: '请输入密码!' }]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={
|
||||
<LockOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
|
||||
}
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Row>
|
||||
<Col span={14}>
|
||||
<Form.Item
|
||||
label=""
|
||||
name="captcha"
|
||||
rules={[{ required: true, message: '请输入验证码!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={
|
||||
<SafetyCertificateOutlined
|
||||
style={{ fontSize: '18px' }}
|
||||
className="site-form-item-icon"
|
||||
/>
|
||||
}
|
||||
placeholder="请输入验证码"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={10}>
|
||||
<img className="verification" onClick={() => changeCaptcha()} src={imgUrl} />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* <Form.Item className="remember" name="remember" valuePropName="checked">
|
||||
<Checkbox>记住密码</Checkbox>
|
||||
</Form.Item> */}
|
||||
<Form.Item>
|
||||
<Button type="primary" className="w100" htmlType="submit">
|
||||
登 录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="footer">版权所有：中国联合网络通信有限公司</div> */}
|
||||
<Modal
|
||||
title="修改密码"
|
||||
visible={isModalVisible}
|
||||
onCancel={() => setIsModalVisible(false)}
|
||||
footer={[
|
||||
<Button onClick={() => handleOk()} loading={spinning}>确 定</Button>,
|
||||
<Button onClick={() => setIsModalVisible(false)}>取 消</Button>
|
||||
]}
|
||||
width={600}
|
||||
>
|
||||
<Spin spinning={spinning}>
|
||||
<Form
|
||||
{...layout}
|
||||
name="basic"
|
||||
form={changeForm}
|
||||
>
|
||||
<Form.Item
|
||||
label="身份证(用户名)"
|
||||
name="identityCard"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入身份证(用户名)',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="原密码"
|
||||
name="oldPassword"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入原始密码',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="新密码"
|
||||
name="newPassword"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
const oNumber = new RegExp(/\d/);
|
||||
const oLetter = new RegExp(/[a-zA-Z]/);
|
||||
const oSpecial = '.~!@#$%^&*()_+=-{}|:<>?,./[]-;\\"';
|
||||
if (!value) {
|
||||
callback('请输入新密码');
|
||||
return;
|
||||
}
|
||||
if (value.length < 6) {
|
||||
callback('密码不能小于六位，至少含字母、数字、特殊字符其中的2种！');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
[...value].forEach(val => {
|
||||
if (
|
||||
!(
|
||||
oNumber.test(val) ||
|
||||
oLetter.test(val) ||
|
||||
oSpecial.indexOf(val) >= 0
|
||||
)
|
||||
) {
|
||||
throw new Error();
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
callback('密码不能小于六位，至少含字母、数字、特殊字符其中的2种！');
|
||||
}
|
||||
const contain: boolean[] = [];
|
||||
[...value].forEach(val => {
|
||||
if (oNumber.test(val)) {
|
||||
contain[0] = true;
|
||||
}
|
||||
if (oLetter.test(val)) {
|
||||
contain[1] = true;
|
||||
}
|
||||
if (oSpecial.indexOf(val) >= 0) {
|
||||
contain[2] = true;
|
||||
}
|
||||
});
|
||||
if (contain.filter(item => item === true).length < 2) {
|
||||
callback('密码不能小于六位，至少含字母、数字、特殊字符其中的2种！');
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
}
|
||||
}
|
||||
]}
|
||||
// rules={[
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请输入新密码',
|
||||
// },
|
||||
// ]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="新密码确认"
|
||||
name="newPassword1"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请再次输入新密码',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
</Modal>
|
||||
</div>
|
||||
</Spin>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
11
src/pages/userformal/login/service.ts
Normal file
11
src/pages/userformal/login/service.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import request from '@/utils/request';
|
||||
/**
|
||||
* 修改密码
|
||||
* @param params
|
||||
*/
|
||||
export async function changePass(params: any) {
|
||||
return request('/api/api/mall-expe/v1/expebaseinfo/reSetPassExpeBaseInfo', {
|
||||
method: 'post',
|
||||
params
|
||||
});
|
||||
}
|
||||
107
src/pages/userformal/login/style.less
Normal file
107
src/pages/userformal/login/style.less
Normal file
@ -0,0 +1,107 @@
|
||||
@import '~antd/es/style/themes/default.less';
|
||||
|
||||
.login-box{
|
||||
height: 100vh;
|
||||
.top{
|
||||
padding-left: 30px;
|
||||
height: 84px;
|
||||
line-height: 84px;
|
||||
h3{
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
.main{
|
||||
height: calc(100vh - 158px);
|
||||
background: url(../../../images/login/loginBg.jpg) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.text{
|
||||
width: 434px;
|
||||
height: 400px;
|
||||
float: right;
|
||||
margin: 6% 10% 0 0;
|
||||
padding: 0 26px 28px 26px;
|
||||
background: url(../../../images/login/whiteWrap.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
h3{
|
||||
line-height: 80px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item-explain.ant-form-item-explain-error{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.form-box{
|
||||
.ant-input-affix-wrapper{
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.ant-input{
|
||||
height: 40px;
|
||||
}
|
||||
.remember{
|
||||
text-align: right;
|
||||
}
|
||||
.w100{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 29px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.verification{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.ant-input-prefix{
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
height: 74px;
|
||||
line-height: 74px;
|
||||
background: #f6f6f6;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
input {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
input:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
// input:-webkit-autofill:focus {
|
||||
// -webkit-text-fill-color: #fff;
|
||||
// }
|
||||
.change{
|
||||
width: 90px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border: 1px solid #b30000;
|
||||
font-size: 16px;
|
||||
color: #b30000;
|
||||
padding: 0;
|
||||
float: right;
|
||||
margin: 26px 25px 0 0;
|
||||
}
|
||||
.change{
|
||||
width: 90px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
// border: 1px solid #b30000;
|
||||
font-size: 16px;
|
||||
// color: #b30000;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
// top: 26px;
|
||||
right: 25px;
|
||||
margin: 26px 25px 0 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user