/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-08 19:57:35
|
* @LastEditTime: 2023-05-19 09:21:07
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 底部操作栏页面
|
*/
|
import React, { useState } from 'react';
|
import { useLocation, useHistory } from 'react-router-dom';
|
import { WorkOutlined, MeOutlined, HomeOutlined, CloseOutlined } from 'dd-icons';
|
import './index.less';
|
import Overlay from '../Overlay';
|
import { tabBar_img_1, tabBar_img_2, tabBar_img_3, tabBar_img_8, tabBar_img_9, tabBar_img_11 } from '../../assets/img';
|
import { tabBar_img_10 } from '../../assets/icon';
|
|
const TabBarPage = ({ children }) => {
|
const location = useLocation();
|
|
const history = useHistory();
|
|
const pathName = location?.pathname;
|
|
// 更多操作显示
|
const [moreFunctionVisible, setMoreFunctionVisible] = useState(false);
|
|
// 更多操作
|
const moreFunctionList = [
|
// {
|
// title: '查人查房',
|
// subTitle: '通过关键字筛选人房信息',
|
// icon: tabBar_img_2,
|
// url: '/hztGrid/searchPersonRoom',
|
// key: '1',
|
// },
|
// {
|
// title: '工作日志',
|
// subTitle: '填写网格工作日志',
|
// icon: tabBar_img_8,
|
// url: '/hztGrid/workLog',
|
// key: '2',
|
// },
|
// {
|
// title: '网格概况',
|
// subTitle: '管辖网格整体情况',
|
// icon: tabBar_img_9,
|
// url: '/hztGrid/surveyGrid',
|
// key: '3',
|
// },
|
{
|
title: '工作统计',
|
subTitle: '个人网格工作统计',
|
icon: tabBar_img_3,
|
url: '/hztGrid/WorkStatistics',
|
key: '4',
|
},
|
// {
|
// title: '迁出查询',
|
// subTitle: '查询本网格已迁出的居民',
|
// icon: tabBar_img_10,
|
// url: '/hztGrid/moveOut',
|
// key: '10',
|
// },
|
// {
|
// title: '房间走访',
|
// subTitle: '网格员上门走访房间并拍照',
|
// icon: tabBar_img_11,
|
// url: '/hztGrid/visitList',
|
// key: '11',
|
// },
|
// {
|
// title: '我的任务',
|
// subTitle: '显示个人相关的网格工作',
|
// icon: tabBar_img_1,
|
// url: '/hztGrid/task',
|
// key: '5',
|
// },
|
// {
|
// title: '事件上报',
|
// subTitle: '上报网格内的各类事件',
|
// icon: tabBar_img_6,
|
// url: '/hztGrid/eventInit?type=register',
|
// key: '6',
|
// },
|
// {
|
// title: '上报查询',
|
// subTitle: '查询已上报的网格事件进展',
|
// icon: tabBar_img_7,
|
// url: '/hztGrid/eventInit?type=search',
|
// key: '7',
|
// },
|
// {
|
// title: '我的消息',
|
// subTitle: '网格公告与系统通知',
|
// icon: tabBar_img_4,
|
// url: '/hztGrid/message',
|
// key: '8',
|
// },
|
// TODO:暂无扫一扫功能
|
// {
|
// title: '扫一扫',
|
// subTitle: '扫描椰居码查看居民信息',
|
// icon: tabBar_img_5,
|
// url: '',
|
// key: '9',
|
// },
|
];
|
|
// 更多操作跳转
|
function handleGoPage(item) {
|
if (item.url) {
|
history.push(item.url);
|
}
|
// 扫码TODO:暂无扫一扫功能
|
// if (item.key === '5') {
|
// dd.scan({ type: 'all' })
|
// .then((res) => {})
|
// .catch(() => {
|
// showToast({ type: 'fail', content: '扫码失败' });
|
// });
|
// }
|
}
|
|
// 切换tab
|
function handleChangeTab(key) {
|
if (key === location.pathname) return;
|
history.push(key);
|
}
|
|
return (
|
<>
|
{children}
|
<div className="tabBarPage-tabBar-height" />
|
<div className="tabBarPage-tabBar">
|
<div
|
onClick={() => handleChangeTab('/hztGrid/homePage')}
|
className={`tabBarPage-tabBar-item ${pathName === '/hztGrid/homePage' && 'tabBarPage-tabBar-itemActive'}`}
|
>
|
<HomeOutlined className="tabBarPage-tabBar-item-icon" />
|
<div>首页</div>
|
</div>
|
<div className="tabBarPage-tabBar-item">
|
<div className="tabBarPage-tabBar-more" onClick={() => setMoreFunctionVisible(true)}>
|
<WorkOutlined />
|
</div>
|
</div>
|
<div
|
onClick={() => handleChangeTab('/hztGrid/me')}
|
className={`tabBarPage-tabBar-item ${pathName === '/hztGrid/me' && 'tabBarPage-tabBar-itemActive'}`}
|
>
|
<MeOutlined className="tabBarPage-tabBar-item-icon" />
|
<div>我的</div>
|
</div>
|
</div>
|
{/* 更多操作 */}
|
<>
|
<div className="tabBarPage-function" style={{ transform: moreFunctionVisible ? 'translate3d(0, 0, 0)' : 'translate3d(0, 1000px, 0)' }}>
|
{moreFunctionList.map((x) => {
|
return (
|
<div key={x.key} onClick={() => handleGoPage(x)} className="tabBarPage-function-item">
|
<img src={x.icon} alt="" className="tabBarPage-function-img" />
|
<div>
|
<div className="tabBarPage-function-title">{x.title}</div>
|
<div className="tabBarPage-function-text">{x.subTitle}</div>
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
<div
|
style={{ display: moreFunctionVisible ? 'flex' : 'none' }}
|
className="tabBarPage-function-close"
|
onClick={() => setMoreFunctionVisible(false)}
|
>
|
<CloseOutlined />
|
</div>
|
<Overlay show={moreFunctionVisible} onOverlay={() => setMoreFunctionVisible(false)} bgColor="#333333" />
|
</>
|
</>
|
);
|
};
|
|
export default TabBarPage;
|
