忘记密码与部门改为懒加载
This commit is contained in:
孙景学
@ -1,3 +1,194 @@
|
||||
.forgotContainer{
|
||||
background: red;
|
||||
@import '~@/baseStyle.less';
|
||||
|
||||
// 登录页面整体布局
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 100vh;
|
||||
padding-right: 10%;
|
||||
background: #f0f2f5;
|
||||
background-image: url('~@/assets/img/loginBg.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// 登录容器
|
||||
.login-container {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// 标题样式
|
||||
.login-title {
|
||||
margin-bottom: 20px;
|
||||
color: @main-color;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 返回首页链接
|
||||
.back-home {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @main-color;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: lighten(@main-color, 10%);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tab 容器
|
||||
.login-tab-container {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
// Tab 样式
|
||||
.login-tabs {
|
||||
border-radius: 15px;
|
||||
.ant-tabs-nav {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ant-tabs-nav::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
border: none;
|
||||
transition: none;
|
||||
|
||||
.ant-tabs-tab-btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-nav-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
background-color: @main-color;
|
||||
border-radius: 15px;
|
||||
|
||||
.ant-tabs-tab-btn {
|
||||
color: #fff !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 登录表单
|
||||
.login-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
border-radius: 10px;
|
||||
|
||||
&:focus,
|
||||
&-focused,
|
||||
&:hover {
|
||||
border-color: @main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 登录选项区域（记住密码和忘记密码）
|
||||
.login-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.ant-checkbox-checked .ant-checkbox-inner {
|
||||
background-color: @main-color;
|
||||
border-color: @main-color;
|
||||
}
|
||||
|
||||
.login-form-forgot {
|
||||
color: @main-color;
|
||||
|
||||
&:hover {
|
||||
color: lighten(@main-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 登录按钮
|
||||
.login-form-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
background-color: @main-color;
|
||||
border-color: @main-color;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten(@main-color, 10%);
|
||||
border-color: lighten(@main-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// 注册链接
|
||||
.register-link {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
margin-left: 5px;
|
||||
color: @main-color;
|
||||
|
||||
&:hover {
|
||||
color: lighten(@main-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式布局
|
||||
@media (max-width: 768px) {
|
||||
.login-page {
|
||||
justify-content: center;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,177 @@
|
||||
import React from 'react';
|
||||
import styles from './forget.less';
|
||||
import { useLocation } from 'umi';
|
||||
const Forgot: React.FC = () => {
|
||||
const location = useLocation();
|
||||
const search = location.search;
|
||||
const params = new URLSearchParams(search);
|
||||
console.log(params);
|
||||
const type = params.get('type');
|
||||
return <div className={styles.forgotContainer}>忘记密码</div>;
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, Input, Button, message } from 'antd';
|
||||
import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone, HomeOutlined } from '@ant-design/icons';
|
||||
import { history, useIntl } from 'umi';
|
||||
import './forget.less';
|
||||
import { sendCode, reset } from '@/servers/api/login';
|
||||
import { encryptWithRsa } from '@/utils/encryptWithRsa';
|
||||
|
||||
const LoginPage: React.FC = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [sending, setSending] = useState(false); // 是否在发送验证码
|
||||
const [countdown, setCountdown] = useState<number>(0); // 倒计时
|
||||
const intl = useIntl();
|
||||
|
||||
// 倒计时效果
|
||||
useEffect(() => {
|
||||
let timer: any;
|
||||
if (countdown > 0) {
|
||||
timer = setTimeout(() => setCountdown(countdown - 1), 1000);
|
||||
}
|
||||
return () => clearTimeout(timer);
|
||||
}, [countdown]);
|
||||
|
||||
// 获取验证码
|
||||
const handleSendCode = async () => {
|
||||
const account = form.getFieldValue('account');
|
||||
if (!account) {
|
||||
message.warning('请先输入账号/手机号');
|
||||
return;
|
||||
}
|
||||
setSending(true);
|
||||
try {
|
||||
const res = await sendCode({ account });
|
||||
if (res.code === 200) {
|
||||
message.success('验证码已发送');
|
||||
setCountdown(60); // 60秒倒计时
|
||||
} else {
|
||||
message.error(res.message || '验证码发送失败');
|
||||
}
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 表单提交
|
||||
const onFinish = async (values: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = {
|
||||
...values,
|
||||
password: encryptWithRsa(values.password, false),
|
||||
encryptValue: encryptWithRsa(values.code) // 验证码
|
||||
};
|
||||
const loginRes = await reset(params);
|
||||
if (loginRes.code === 200) {
|
||||
message.success('修改成功');
|
||||
history.push('/login');
|
||||
} else {
|
||||
message.error(loginRes.message || '修改失败');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='login-page'>
|
||||
<div className='login-container'>
|
||||
<div className="back-home">
|
||||
<a onClick={() => history.push('/login')}>
|
||||
<HomeOutlined /> 返回
|
||||
</a>
|
||||
</div>
|
||||
<div className='login-title'>{intl.formatMessage({ id: 'login.title', defaultMessage: '忘记密码' })}</div>
|
||||
<Form
|
||||
form={form}
|
||||
name="forget"
|
||||
className='login-form'
|
||||
onFinish={onFinish}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
name="account"
|
||||
rules={[{ required: true, message: '请输入账号/手机号!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined className="site-form-item-icon" />}
|
||||
placeholder="请输入账号/手机号"
|
||||
size="large"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[
|
||||
{ required: true, message: '请输入新密码!' },
|
||||
{ min: 6, message: '密码至少6位' }
|
||||
]}
|
||||
hasFeedback
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined className="site-form-item-icon" />}
|
||||
placeholder="请输入新密码"
|
||||
iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
|
||||
size="large"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="confirm"
|
||||
dependencies={['password']}
|
||||
hasFeedback
|
||||
rules={[
|
||||
{ required: true, message: '请再次输入新密码!' },
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue('password') === value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(new Error('两次输入的密码不一致!'));
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined className="site-form-item-icon" />}
|
||||
placeholder="请确认新密码"
|
||||
iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
|
||||
size="large"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
||||
<Form.Item
|
||||
>
|
||||
<Input.Group compact>
|
||||
<Form.Item
|
||||
name="code"
|
||||
noStyle
|
||||
rules={[{ required: true, message: '请输入验证码!' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
maxLength={6}
|
||||
autoComplete="off"
|
||||
style={{ width: '65%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ width: '33%', height: '40px' }}
|
||||
disabled={countdown > 0 || sending}
|
||||
onClick={handleSendCode}
|
||||
>
|
||||
{countdown > 0 ? `重新发送(${countdown}s)` : '发送验证码'}
|
||||
</Button>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" className="login-form-button" loading={loading} size="large" block>
|
||||
修改密码
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Forgot;
|
||||
|
||||
export default LoginPage;
|
||||
|
||||
Reference in New Issue
Block a user