/*
|
* @Company: hugeInfo
|
* @Author: xzx
|
* @Date: 2022-03-25 11:00:36
|
* @LastEditors: lwh
|
* @LastEditTime: 2023-05-12 18:16:39
|
* @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 logo from '../../assets/images/logo.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">
|
<header className="logAndSign-header">
|
<div className="logAndSign-header-logo">
|
<img src={logo} alt="" />
|
<div className="logAndSign-header-logo-text">
|
<div className="header-logo-title">广州市白云区矛盾纠纷多元化解平台</div>
|
<div>Guangzhou Baiyun Diversified Dispute Resolution Platform</div>
|
</div>
|
</div>
|
<div className="logAndSign-header-right">
|
<ul>
|
<li className="logAndSign-header-right-active">首页</li>
|
<li onClick={() => $$.info({ type: 'warning', content: '功能开发中，敬请期待' })}>调解资源</li>
|
<li onClick={() => $$.info({ type: 'warning', content: '功能开发中，敬请期待' })}>帮助中心</li>
|
</ul>
|
</div>
|
</header>
|
<main className="logAndSign-main">
|
<div className="logAndSign-main-first">
|
{!isLog && <BeforeLog returnLogStatus={transformLogStatus} />}
|
{isLog && <AfterLog returnLogStatus={transformLogStatus} />}
|
</div>
|
</main>
|
<footer className="logAndSign-footer">
|
版权所有：广东省广州市白云区委政法委<span className="public-rightBorder">版本号：V2.0.0</span>
|
</footer>
|
</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);
|
$$.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);
|
navigate('/mediate/workbench');
|
}
|
} else {
|
returnLogStatus(true);
|
}
|
}
|
global.setSpinning(false);
|
}
|
|
return (
|
<div className="logAndSign-main-first-beforeLog animated faster flipInY">
|
<div className="logAndSign-main-first-beforeLog-tab">
|
<Tabs activeKey={tabKey}>
|
{/* <TabPane tab="社会公众登录" key="1" /> */}
|
<TabPane tab="平台工作人员" key="2" />
|
</Tabs>
|
</div>
|
<div className="logAndSign-main-first-beforeLog-tip">
|
{tabKey === '1' ? '申请调解服务的社会公众' : '调解组织、司法机关工作人员及外部调解专家等'}
|
</div>
|
{isWrite && (
|
<div className="logAndSign-main-first-beforeLog-form">
|
<Form name="logForm" onFinish={submitLogInfo} form={form} size="large">
|
<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' }}>
|
登录
|
</Button>
|
</Form.Item>
|
</Form>
|
</div>
|
)}
|
{!isWrite && (
|
<div className="logAndSign-main-first-beforeLog-wxQrcode">
|
<div className="beforeLog-wxQrcode-img">
|
<QrcodeOutlined style={{ fontSize: '120px' }} />
|
</div>
|
<div>
|
<Link style={{ marginRight: '4px' }}>
|
<ScanOutlined />
|
</Link>
|
<span>微信扫一扫</span>
|
</div>
|
</div>
|
)}
|
<div className="logAndSign-main-first-beforeLog-other">
|
<Divider className="beforeLog-other-divider">其他服务</Divider>
|
<Space size={48}>
|
{/* <Link onClick={() => $$.info({ type: 'error', content: '功能暂未开放' })}>注册帐号</Link>
|
<Link onClick={() => $$.info({ type: 'error', content: '功能暂未开放' })}>申请加入</Link> */}
|
<Link onClick={() => $$.info({ type: 'warning', content: '请联系管理员找回（电话：020-86398196）' })}>找回密码</Link>
|
</Space>
|
</div>
|
{/* <div className="logAndSign-main-first-beforeLog-switch">
|
{!isWrite && (
|
<Tooltip placement="top" title="可以帐号登录">
|
<DesktopOutlined className="beforeLog-switch-icon" onClick={() => setIsWrite(true)} />
|
</Tooltip>
|
)}
|
{isWrite && (
|
<Tooltip placement="top" title="扫码登录更快捷">
|
<QrcodeOutlined className="beforeLog-switch-icon" onClick={() => $$.info({ type: 'error', content: '功能暂未开放' })} />
|
</Tooltip>
|
)}
|
</div> */}
|
</div>
|
);
|
};
|
|
//已登录 组件
|
const AfterLog = ({ returnLogStatus }) => {
|
const navigate = useNavigate();
|
|
const user = $$.getLocal('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);
|
navigate('/mediate/workbench');
|
}
|
}
|
|
//登出
|
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 className="logAndSign-main-first-beforeLog-other">
|
<Divider className="beforeLog-other-divider">其他服务</Divider>
|
<Space size={48}>
|
<Link onClick={handleLogOut}>切换账号</Link>
|
{/* <Link>申请加入</Link> */}
|
</Space>
|
</div>
|
</div>
|
);
|
};
|
|
export default LogAndSign;
|
