127 lines
3.6 KiB
TypeScript
127 lines
3.6 KiB
TypeScript
import React, { useCallback, useRef } from 'react';
|
|
import { Box, Flex, useTheme } from '@chakra-ui/react';
|
|
import { useGlobalStore } from '@/store/global';
|
|
import { useRouter } from 'next/router';
|
|
import dynamic from 'next/dynamic';
|
|
import { clearCookie } from '@/utils/user';
|
|
import { useUserStore } from '@/store/user';
|
|
import { useConfirm } from '@/hooks/useConfirm';
|
|
import PageContainer from '@/components/PageContainer';
|
|
import SideTabs from '@/components/SideTabs';
|
|
import Tabs from '@/components/Tabs';
|
|
import UserInfo from './components/Info';
|
|
|
|
const BillTable = dynamic(() => import('./components/BillTable'), {
|
|
ssr: false
|
|
});
|
|
const PayRecordTable = dynamic(() => import('./components/PayRecordTable'), {
|
|
ssr: false
|
|
});
|
|
const InformTable = dynamic(() => import('./components/InformTable'), {
|
|
ssr: false
|
|
});
|
|
|
|
enum TabEnum {
|
|
'info' = 'info',
|
|
'bill' = 'bill',
|
|
'pay' = 'pay',
|
|
'inform' = 'inform',
|
|
'loginout' = 'loginout'
|
|
}
|
|
|
|
const NumberSetting = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
|
|
const tabList = useRef([
|
|
{ icon: 'meLight', label: '个人信息', id: TabEnum.info, Component: <BillTable /> },
|
|
{ icon: 'billRecordLight', label: '消费记录', id: TabEnum.bill, Component: <BillTable /> },
|
|
{ icon: 'payRecordLight', label: '充值记录', id: TabEnum.pay, Component: <PayRecordTable /> },
|
|
{ icon: 'informLight', label: '通知', id: TabEnum.inform, Component: <InformTable /> },
|
|
{ icon: 'loginoutLight', label: '登出', id: TabEnum.loginout, Component: () => <></> }
|
|
]);
|
|
|
|
const { openConfirm, ConfirmChild } = useConfirm({
|
|
content: '确认退出登录？'
|
|
});
|
|
|
|
const router = useRouter();
|
|
const theme = useTheme();
|
|
const { isPc } = useGlobalStore();
|
|
const { setUserInfo } = useUserStore();
|
|
|
|
const setCurrentTab = useCallback(
|
|
(tab: string) => {
|
|
if (tab === TabEnum.loginout) {
|
|
openConfirm(() => {
|
|
clearCookie();
|
|
setUserInfo(null);
|
|
router.replace('/login');
|
|
})();
|
|
} else {
|
|
router.replace({
|
|
query: {
|
|
currentTab: tab
|
|
}
|
|
});
|
|
}
|
|
},
|
|
[openConfirm, router, setUserInfo]
|
|
);
|
|
|
|
return (
|
|
<PageContainer>
|
|
<Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
|
|
{isPc ? (
|
|
<Flex
|
|
flexDirection={'column'}
|
|
p={4}
|
|
h={'100%'}
|
|
flex={'0 0 200px'}
|
|
borderRight={theme.borders.base}
|
|
>
|
|
<SideTabs
|
|
flex={1}
|
|
mx={'auto'}
|
|
mt={2}
|
|
w={'100%'}
|
|
list={tabList.current}
|
|
activeId={currentTab}
|
|
onChange={setCurrentTab}
|
|
/>
|
|
</Flex>
|
|
) : (
|
|
<Box mb={3}>
|
|
<Tabs
|
|
m={'auto'}
|
|
w={'90%'}
|
|
size={isPc ? 'md' : 'sm'}
|
|
list={tabList.current.map((item) => ({
|
|
id: item.id,
|
|
label: item.label
|
|
}))}
|
|
activeId={currentTab}
|
|
onChange={setCurrentTab}
|
|
/>
|
|
</Box>
|
|
)}
|
|
|
|
<Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}>
|
|
{currentTab === TabEnum.info && <UserInfo />}
|
|
{currentTab === TabEnum.bill && <BillTable />}
|
|
{currentTab === TabEnum.pay && <PayRecordTable />}
|
|
{currentTab === TabEnum.inform && <InformTable />}
|
|
</Box>
|
|
</Flex>
|
|
<ConfirmChild />
|
|
</PageContainer>
|
|
);
|
|
};
|
|
|
|
export async function getServerSideProps({ query }: any) {
|
|
return {
|
|
props: {
|
|
currentTab: query?.currentTab || TabEnum.info
|
|
}
|
|
};
|
|
}
|
|
|
|
export default NumberSetting;
|