/*
|
* @Company: hugeInfo
|
* @Author: xzx
|
* @Date: 2022-03-25 11:00:36
|
* @LastEditors: lwh
|
* @LastEditTime: 2025-04-25 11:16:26
|
* @Version: 1.0.0
|
* @Description: 登录注册页 TODO:注释掉的内容代码是暂时没有开发的功能，后续看需求是否添加
|
*/
|
import React, { useEffect, useState, useRef } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Form, Input, Button, message, Checkbox, Modal } from 'antd';
|
import { EyeInvisibleOutlined, EyeOutlined, CloseCircleFilled } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import logAvatar from '../../assets/img/logAvatar.png';
|
import logo1 from '../../assets/img/logo1.png';
|
import SlideTest from '../../components/SlideTest';
|
|
// 登录接口
|
function logInApi(data) {
|
return $$.ax.request({ url: 'ctAccount/login', type: 'post', data, service: 'cust' });
|
}
|
|
// 角色选择
|
function switchRoleApi(data) {
|
return $$.ax.request({ url: 'ctAccount/switchRole', type: 'get', data, service: 'cust' });
|
}
|
|
const LogAndSign = () => {
|
const [isLog, setIsLog] = useState(false);
|
const [forgotPwdVisible, setForgotPwdVisible] = useState(false);
|
const isComponentMounted = useRef(true);
|
const modalRef = useRef(null);
|
|
useEffect(() => {
|
let token = $$.getSessionStorage('customerSystemToken');
|
setIsLog(!!token);
|
|
return () => {
|
isComponentMounted.current = false;
|
// 清理所有 ResizeObserver
|
if (window.ResizeObserver) {
|
const resizeObservers = window.ResizeObserver.prototype.observe;
|
if (resizeObservers) {
|
window.ResizeObserver.prototype.observe = function(target) {
|
if (target && target.isConnected && isComponentMounted.current) {
|
resizeObservers.call(this, target);
|
}
|
};
|
}
|
}
|
};
|
}, []);
|
|
// 变更登录状态
|
function transformLogStatus(status) {
|
if (isComponentMounted.current) {
|
setIsLog(status);
|
// 确保关闭所有 Modal
|
setForgotPwdVisible(false);
|
// 清理所有 ResizeObserver
|
if (window.ResizeObserver) {
|
const resizeObservers = window.ResizeObserver.prototype.observe;
|
if (resizeObservers) {
|
window.ResizeObserver.prototype.observe = function(target) {
|
if (target && target.isConnected && isComponentMounted.current) {
|
resizeObservers.call(this, target);
|
}
|
};
|
}
|
}
|
}
|
}
|
|
// 打开忘记密码弹窗
|
const showForgotPwdModal = () => {
|
if (isComponentMounted.current) {
|
setForgotPwdVisible(true);
|
}
|
};
|
|
// 关闭忘记密码弹窗
|
const closeForgotPwdModal = () => {
|
if (isComponentMounted.current) {
|
setForgotPwdVisible(false);
|
}
|
};
|
|
return (
|
<div className="h5-login">
|
<main className="h5-login-container">
|
{!isLog && <BeforeLog returnLogStatus={transformLogStatus} showForgotPwdModal={showForgotPwdModal} />}
|
{isLog && <AfterLog returnLogStatus={transformLogStatus} />}
|
</main>
|
<div
|
onClick={() => {
|
window.open('https://beian.miit.gov.cn');
|
}}
|
className="public-a"
|
>
|
粤ICP备2022017384号
|
</div>
|
|
{/* 忘记密码弹窗 */}
|
<Modal
|
visible={forgotPwdVisible}
|
footer={null}
|
closable={false}
|
maskClosable={false}
|
wrapClassName="h5-login-forgot-modal"
|
destroyOnClose
|
ref={modalRef}
|
>
|
<div className="h5-login-forgot-content">
|
<div className="h5-login-forgot-header">
|
<div className="h5-login-forgot-title">忘记密码</div>
|
<CloseCircleFilled className="h5-login-forgot-close" onClick={closeForgotPwdModal} />
|
</div>
|
<div className="h5-login-forgot-desc">找回密码请通过拨打电话或在各区系统工作微信群中联系技术支持人员</div>
|
<Button className="h5-login-forgot-btn" onClick={closeForgotPwdModal}>
|
关闭
|
</Button>
|
</div>
|
</Modal>
|
</div>
|
);
|
};
|
|
//等待登录 组件
|
const BeforeLog = ({ returnLogStatus, showForgotPwdModal }) => {
|
const history = useHistory();
|
|
// 滑动验证
|
const [isSuccessCode, setIsSuccessCode] = useState(false);
|
const [rememberAccount, setRememberAccount] = useState(false);
|
|
// 表单
|
const [form] = Form.useForm();
|
|
// 登录提交
|
async function submitLogInfo(value) {
|
global.setSpinning(true);
|
const res = await logInApi(value);
|
if (res.type) {
|
message.success('您已登入成功，欢迎回来！');
|
$$.clearSessionStorage();
|
$$.setSessionStorage('customerSystemToken', res.data?.token);
|
$$.setSessionStorage('customerSystemUser', res.data || {});
|
// 清除公共数据
|
let ctUseroleList = res.data?.ctUseroleList || [];
|
if (ctUseroleList.length === 1) {
|
const res = await switchRoleApi({ roleCode: ctUseroleList[0]?.roleCode });
|
if (res.type) {
|
$$.setSessionStorage('customerSystemToken', res.data);
|
history.push('/gzdyh/home');
|
}
|
} else {
|
returnLogStatus(true);
|
}
|
}
|
global.setSpinning(false);
|
}
|
|
return (
|
<div className="h5-login-card">
|
<div className="h5-login-logo">
|
<img src={logo1} alt="系统标志" />
|
</div>
|
<div className="h5-login-title">
|
<div className="h5-login-title-main">广州市社会治安综合治理应用平台</div>
|
<div className="h5-login-title-sub">(矛盾纠纷应用)</div>
|
</div>
|
<div className="h5-login-subtitle">输入账号和密码进行登录</div>
|
<Form name="logForm" onFinish={submitLogInfo} form={form} size="large" className="h5-login-form">
|
<Form.Item name="acc" rules={[{ required: true, message: '请输入帐号' }]}>
|
<Input placeholder="请输入登录帐号" allowClear />
|
</Form.Item>
|
<Form.Item name="cipher" rules={[{ required: true, message: '请输入密码' }]}>
|
<Input.Password
|
type="password"
|
placeholder="请输入登录密码"
|
allowClear
|
autoComplete="on"
|
iconRender={(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)}
|
/>
|
</Form.Item>
|
<div className="h5-login-options">
|
<Checkbox checked={rememberAccount} onChange={(e) => setRememberAccount(e.target.checked)}>
|
记住账号
|
</Checkbox>
|
<div className="h5-login-forgot" onClick={showForgotPwdModal}>
|
忘记密码?
|
</div>
|
</div>
|
<Form.Item>
|
<Button htmlType="submit" block className="h5-login-button">
|
登录
|
</Button>
|
</Form.Item>
|
</Form>
|
</div>
|
);
|
};
|
|
//已登录 组件
|
const AfterLog = ({ returnLogStatus }) => {
|
const history = useHistory();
|
const user = $$.getSessionStorage('customerSystemUser') || {};
|
const roleList = user.ctUseroleList || [];
|
const [tabKey, setTabKey] = useState(0);
|
|
// 进入系统
|
async function enterPersonCenter() {
|
global.setSpinning(true);
|
const res = await switchRoleApi({ roleCode: roleList[tabKey]?.roleCode });
|
global.setSpinning(false);
|
if (res.type) {
|
$$.setSessionStorage('customerSystemToken', res.data);
|
history.push('/gzdyh/home');
|
}
|
}
|
|
//登出
|
function handleLogOut() {
|
// 先清理所有状态
|
$$.clearLocal('customerSystemUser');
|
$$.clearSessionStorage();
|
|
// 使用 Promise 确保状态清理完成
|
Promise.resolve().then(() => {
|
returnLogStatus(false);
|
// 使用 history.replace 而不是 reload
|
history.replace('/login');
|
});
|
}
|
|
function subStrName() {
|
let arr = user?.trueName?.split('') || [];
|
return arr[0] + (arr.length > 1 ? '*' : '') + (arr.length > 2 ? arr[arr.length - 1] : '');
|
}
|
|
return (
|
<div className="h5-login-card">
|
<div className="h5-login-user-info">
|
<div className="h5-login-user-avatar">
|
<img src={logAvatar} alt="登录头像" />
|
</div>
|
<div className="h5-login-user-name">{subStrName()}</div>
|
<div className="h5-login-user-subtitle">最近一次登录时间：{$$.timeFormat(user?.lastLoginTime)}</div>
|
<Button className="h5-login-button" block onClick={enterPersonCenter}>
|
进入平台
|
</Button>
|
<Button type="link" onClick={handleLogOut} className="h5-login-logout-btn">
|
退出登录
|
</Button>
|
</div>
|
</div>
|
);
|
};
|
|
export default LogAndSign;
|
