feat: date picker

client/src/pages/api/user/getBill.ts

@@ -4,23 +4,32 @@ import { jsonRes } from '@/service/response';
 import { connectToDatabase, Bill } from '@/service/mongo';
 import { authUser } from '@/service/utils/auth';
 import { adaptBill } from '@/utils/adapt';
+import { addDays } from 'date-fns';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    let { pageNum = 1, pageSize = 10 } = req.query as {
-      pageNum: string;
-      pageSize: string;
+    const {
+      pageNum = 1,
+      pageSize = 10,
+      dateStart = addDays(new Date(), -7),
+      dateEnd = new Date()
+    } = req.body as {
+      pageNum: number;
+      pageSize: number;
+      dateStart: Date;
+      dateEnd: Date;
     };
 
-    pageNum = +pageNum;
-    pageSize = +pageSize;
-
     const { userId } = await authUser({ req, authToken: true });
 
     await connectToDatabase();
 
     const where = {
-      userId
+      userId,
+      time: {
+        $gte: new Date(dateStart).setHours(0, 0, 0, 0),
+        $lte: new Date(dateEnd).setHours(23, 59, 59, 999)
+      }
     };
 
     // get bill record and total by record

client/src/pages/number/components/BillTable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Flex, Box } from '@chakra-ui/react';
 import { BillTypeMap } from '@/constants/user';
 import { getUserBills } from '@/api/user';
@@ -7,18 +7,29 @@ import { usePagination } from '@/hooks/usePagination';
 import { useLoading } from '@/hooks/useLoading';
 import dayjs from 'dayjs';
 import MyIcon from '@/components/Icon';
+import DateRangePicker, { type DateRangeType } from '@/components/DateRangePicker';
+import { addDays } from 'date-fns';
 
 const BillTable = () => {
   const { Loading } = useLoading();
+  const [dateRange, setDateRange] = useState<DateRangeType>({
+    from: addDays(new Date(), -7),
+    to: new Date()
+  });
 
   const {
     data: bills,
     isLoading,
     Pagination,
     pageSize,
-    total
+    total,
+    getData
   } = usePagination<UserBillType>({
-    api: getUserBills
+    api: getUserBills,
+    params: {
+      dateStart: dateRange.from,
+      dateEnd: dateRange.to
+    }
   });
 
   return (
@@ -48,8 +59,6 @@ const BillTable = () => {
             ))}
           </Tbody>
         </Table>
-
-        <Loading loading={isLoading} fixed={false} />
       </TableContainer>
 
       {!isLoading && bills.length === 0 && (
@@ -62,9 +71,18 @@ const BillTable = () => {
       )}
       {total > pageSize && (
         <Flex w={'100%'} mt={4} justifyContent={'flex-end'}>
-          <Pagination />
+          <DateRangePicker
+            defaultDate={dateRange}
+            position="top"
+            onChange={setDateRange}
+            onSuccess={() => getData(1)}
+          />
+          <Box ml={2}>
+            <Pagination />
+          </Box>
         </Flex>
       )}
+      <Loading loading={isLoading} fixed={false} />
     </>
   );
 };

client/src/pages/number/components/PromotionTable.tsx

@@ -44,8 +44,6 @@ const OpenApi = () => {
             ))}
           </Tbody>
         </Table>
-
-        <Loading loading={isLoading} fixed={false} />
       </TableContainer>
 
       {!isLoading && promotionRecords.length === 0 && (
@@ -61,6 +59,7 @@ const OpenApi = () => {
           <Pagination />
         </Flex>
       )}
+      <Loading loading={isLoading} fixed={false} />
     </>
   );
 };

client/src/pages/number/index.tsx

@@ -19,30 +19,24 @@ import Loading from '@/components/Loading';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@/components/Icon';
 import Tabs from '@/components/Tabs';
+import BillTable from './components/BillTable';
 
 const PayRecordTable = dynamic(() => import('./components/PayRecordTable'), {
-  loading: () => <Loading fixed={false} />,
-  ssr: false
-});
-const BilTable = dynamic(() => import('./components/BillTable'), {
-  loading: () => <Loading fixed={false} />,
-  ssr: false
+  ssr: true
 });
 const PromotionTable = dynamic(() => import('./components/PromotionTable'), {
-  loading: () => <Loading fixed={false} />,
-  ssr: false
+  ssr: true
 });
 const InformTable = dynamic(() => import('./components/InformTable'), {
-  loading: () => <Loading fixed={false} />,
-  ssr: false
+  ssr: true
 });
 const PayModal = dynamic(() => import('./components/PayModal'), {
   loading: () => <Loading fixed={false} />,
-  ssr: false
+  ssr: true
 });
 const WxConcat = dynamic(() => import('@/components/WxConcat'), {
   loading: () => <Loading fixed={false} />,
-  ssr: false
+  ssr: true
 });
 
 enum TableEnum {
@@ -54,7 +48,7 @@ enum TableEnum {
 
 const NumberSetting = ({ tableType }: { tableType: `${TableEnum}` }) => {
   const tableList = useRef([
-    { label: '账单', id: TableEnum.bill, Component: <BilTable /> },
+    { label: '账单', id: TableEnum.bill, Component: <BillTable /> },
     { label: '充值', id: TableEnum.pay, Component: <PayRecordTable /> },
     { label: '佣金', id: TableEnum.promotion, Component: <PromotionTable /> },
     { label: '通知', id: TableEnum.inform, Component: <InformTable /> }