/*
|
* @Company: hugeInfo
|
* @Author: xzx
|
* @Date: 2022-03-25 11:00:36
|
* @LastEditors: lwh
|
* @LastEditTime: 2025-01-23 11:14:34
|
* @Version: 1.0.0
|
* @Description: 登录注册页 TODO:注释掉的内容代码是暂时没有开发的功能，后续看需求是否添加
|
*/
|
import React, { useEffect, useState } from 'react';
|
import { useNavigate } from 'react-router-dom';
|
import { Form, Input, Button, Divider, message, Tabs, Space, Typography, Radio } from 'antd';
|
import { QrcodeOutlined, ScanOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import logAvatar from '../../assets/images/logAvatar.png';
|
import logo1 from '../../assets/images/logo1.png';
|
import publicDataStatus from '../../status/publicData';
|
import SlideTest from '../../components/SlideTest';
|
|
const { TabPane } = Tabs;
|
|
const { Link } = Typography;
|
|
// 登录接口
|
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 = () => {
|
// 已登录和未登录 true为已登录
|
const [isLog, setIsLog] = useState(false);
|
|
useEffect(() => {
|
let token = $$.getSessionStorage('customerSystemToken');
|
// 无token时
|
setIsLog(!!token);
|
}, []);
|
|
// 变更登录状态
|
function transformLogStatus(status) {
|
setIsLog(status);
|
}
|
|
return (
|
<div className="logAndSign">
|
<main className="logAndSign-main">
|
<div className="logAndSign-main-first">
|
{!isLog && <BeforeLog returnLogStatus={transformLogStatus} />}
|
{isLog && <AfterLog returnLogStatus={transformLogStatus} />}
|
</div>
|
</main>
|
<div onClick={()=>{window.open('https://beian.miit.gov.cn')}} className='public-a' style={{ color: '#bbb', fontSize: '12px', display: 'flex', justifyContent: 'center', position: 'absolute', bottom: '8px', right: '0', width: '550px' }}>粤ICP备2022017384号</div>
|
</div>
|
);
|
};
|
|
//等待登录 组件
|
const BeforeLog = ({ returnLogStatus }) => {
|
const navigate = useNavigate();
|
|
// 滑动验证
|
const [isSuccessCode, setIsSuccessCode] = useState(false);
|
|
// 手写或扫码 默认手写true
|
const [isWrite, setIsWrite] = useState(true);
|
|
// tab
|
const [tabKey, setTabKey] = useState('2');
|
|
// 表单
|
const [form] = Form.useForm();
|
|
// 登录提交
|
async function submitLogInfo(value) {
|
if (!isSuccessCode && !$$.isDebug) {
|
$$.info({ type: 'warning', content: '请滑动验证' });
|
return;
|
}
|
global.setSpinning(true);
|
const res = await logInApi(value);
|
if (res.type) {
|
message.success('您已登入成功，欢迎回来！');
|
$$.clearSessionStorage();
|
$$.setSessionStorage('customerSystemToken', res.data?.token);
|
$$.setSessionStorage('customerSystemUser', res.data || {});
|
// $$.setLocal('customerSystemToken', res.data?.token);
|
// $$.setLocal('customerSystemUser', res.data || {});
|
// 清除公共数据
|
publicDataStatus.clearData();
|
let ctUseroleList = res.data?.ctUseroleList || [];
|
if (ctUseroleList.length === 1) {
|
const res = await switchRoleApi({ roleCode: ctUseroleList[0]?.roleCode });
|
if (res.type) {
|
$$.setSessionStorage('customerSystemToken', res.data);
|
// $$.setLocal('customerSystemToken', res.data);
|
navigate('/mediate/visit/visitWorkBench');
|
}
|
} else {
|
returnLogStatus(true);
|
}
|
}
|
global.setSpinning(false);
|
}
|
|
return (
|
<div className="logAndSign-main-first-beforeLog animated faster flipInY">
|
{isWrite && (
|
<div className="logAndSign-main-first-beforeLog-form">
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
<img src={logo1} alt='' style={{ width: '198px', height: '120px' }} />
|
</div>
|
<div className="logAndSign-main-first-beforeLog-form-title">广州市社会治安综合治理应用平台<br></br>{$$.title}</div>
|
<Form name="logForm" onFinish={submitLogInfo} form={form} size="middle">
|
<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" />
|
</Form.Item>
|
<SlideTest onSuccessCallback={() => setIsSuccessCode(true)} />
|
<Form.Item>
|
<Button type="primary" htmlType="submit" block style={{ marginTop: '16px', fontSize: '16px', height: '48px' }} size='large'>
|
登录
|
</Button>
|
</Form.Item>
|
</Form>
|
</div>
|
)}
|
{!isWrite && (
|
<div className="logAndSign-main-first-beforeLog-wxQrcode">
|
<div className="beforeLog-wxQrcode-img">
|
<QrcodeOutlined style={{ fontSize: '120px' }} />
|
</div>
|
<div>
|
</div>
|
</div>
|
)}
|
</div>
|
);
|
};
|
|
//已登录 组件
|
const AfterLog = ({ returnLogStatus }) => {
|
const navigate = useNavigate();
|
|
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);
|
// $$.setLocal('customerSystemToken', res.data);
|
navigate('/mediate/visit/visitWorkBench');
|
}
|
}
|
|
//登出
|
function handleLogOut() {
|
$$.clearLocal('customerSystemUser');
|
$$.clearSessionStorage();
|
returnLogStatus(false);
|
}
|
|
function subStrName() {
|
let arr = user?.trueName?.split('') || [];
|
return arr[0] + (arr.length > 1 ? '*' : '') + (arr.length > 2 ? arr[arr.length - 1] : '');
|
}
|
|
return (
|
<div className="logAndSign-main-first-afterLog animated faster flipInY" >
|
<div className="logAndSign-main-first-afterLog-userInfo">
|
<div className="afterLog-userInfo-img">
|
<img src={logAvatar} alt="登录头像" />
|
</div>
|
<div className="afterLog-userInfo-label">{subStrName()}</div>
|
<div>
|
<Radio.Group
|
value={tabKey}
|
onChange={(e) => {
|
let index = e.target.value;
|
$$.setSessionStorage('role', { roleId: roleList[index]?.roleId, roleName: roleList[index]?.roleName });
|
setTabKey(index);
|
}}
|
>
|
{roleList.map((x, t) => (
|
<Radio value={t} key={x.roleId}>
|
{x.roleName}
|
</Radio>
|
))}
|
</Radio.Group>
|
</div>
|
<div className="afterLog-userInfo-subtitle">以{roleList[tabKey]?.roleName}身份使用平台功能</div>
|
<div className="afterLog-userInfo-time">最近一次登录时间：{$$.timeFormat(user?.lastLoginTime)}</div>
|
<Button type="primary" block onClick={enterPersonCenter} size="large">
|
进入平台
|
</Button>
|
</div>
|
</div>
|
);
|
};
|
|
export default LogAndSign;
|
