feat: date picker

client/src/api/user.ts

@@ -66,7 +66,7 @@ export const loginOut = () => GET('/user/loginout');
 export const putUserInfo = (data: UserUpdateParams) => PUT('/user/update', data);
 
 export const getUserBills = (data: RequestPaging) =>
-  GET<PagingData<UserBillType>>(`/user/getBill?${Obj2Query(data)}`);
+  POST<PagingData<UserBillType>>(`/user/getBill`, data);
 
 export const getPayOrders = () => GET<PaySchema[]>(`/user/getPayOrders`);
 

client/src/components/DateRangePicker/index.module.scss

@@ -0,0 +1,4 @@
+.datePicker {
+  --rdp-background-color: #d6e8ff;
+  --rdp-accent-color: #0000ff;
+}

client/src/components/DateRangePicker/index.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useMemo, useRef } from 'react';
+import { Box, Card, Flex, useTheme, useOutsideClick, Button } from '@chakra-ui/react';
+import { addDays, format } from 'date-fns';
+import { type DateRange, DayPicker } from 'react-day-picker';
+import MyIcon from '../Icon';
+import 'react-day-picker/dist/style.css';
+import styles from './index.module.scss';
+import zhCN from 'date-fns/locale/zh-CN';
+
+const DateRangePicker = ({
+  onChange,
+  onSuccess,
+  position = 'bottom',
+  defaultDate = {
+    from: addDays(new Date(), -30),
+    to: new Date()
+  }
+}: {
+  onChange?: (date: DateRange) => void;
+  onSuccess?: (date: DateRange) => void;
+  position?: 'bottom' | 'top';
+  defaultDate?: DateRange;
+}) => {
+  const theme = useTheme();
+  const OutRangeRef = useRef(null);
+  const [range, setRange] = useState<DateRange | undefined>(defaultDate);
+  const [showSelected, setShowSelected] = useState(false);
+
+  const formatSelected = useMemo(() => {
+    if (range?.from && range.to) {
+      return `${format(range.from, 'y-MM-dd')} ~ ${format(range.to, 'y-MM-dd')}`;
+    }
+    return `${format(new Date(), 'y-MM-dd')} ~ ${format(new Date(), 'y-MM-dd')}`;
+  }, [range]);
+
+  useOutsideClick({
+    ref: OutRangeRef,
+    handler: () => {
+      setShowSelected(false);
+    }
+  });
+
+  return (
+    <Box position={'relative'} ref={OutRangeRef}>
+      <Flex
+        border={theme.borders.base}
+        px={3}
+        py={1}
+        borderRadius={'sm'}
+        cursor={'pointer'}
+        bg={'myWhite.600'}
+        fontSize={'sm'}
+        onClick={() => setShowSelected(true)}
+      >
+        <Box>{formatSelected}</Box>
+        <MyIcon ml={2} name={'date'} w={'16px'} color={'myGray.600'} />
+      </Flex>
+      {showSelected && (
+        <Card
+          position={'absolute'}
+          zIndex={1}
+          {...(position === 'top'
+            ? {
+                bottom: '40px'
+              }
+            : {})}
+        >
+          <DayPicker
+            locale={zhCN}
+            id="test"
+            mode="range"
+            className={styles.datePicker}
+            defaultMonth={defaultDate.to}
+            selected={range}
+            disabled={[
+              { from: new Date(2022, 3, 1), to: addDays(new Date(), -90) },
+              { from: addDays(new Date(), 1), to: new Date(2099, 1, 1) }
+            ]}
+            onSelect={(date) => {
+              if (date?.from === undefined) {
+                date = {
+                  from: range?.from,
+                  to: range?.from
+                };
+              }
+              if (date?.to === undefined) {
+                date.to = date.from;
+              }
+              setRange(date);
+              onChange && onChange(date);
+            }}
+            footer={
+              <Flex justifyContent={'flex-end'}>
+                <Button
+                  variant={'outline'}
+                  size={'sm'}
+                  mr={2}
+                  onClick={() => setShowSelected(false)}
+                >
+                  取消
+                </Button>
+                <Button
+                  size={'sm'}
+                  onClick={() => {
+                    onSuccess && onSuccess(range || defaultDate);
+                    setShowSelected(false);
+                  }}
+                >
+                  确认
+                </Button>
+              </Flex>
+            }
+          />
+        </Card>
+      )}
+    </Box>
+  );
+};
+
+export default DateRangePicker;
+export type DateRangeType = DateRange;

client/src/components/Icon/icons/date.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686832863390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4120" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M782.84 188.75h-43.15v-60.46c0-16.57-13.43-30-30-30s-30 13.43-30 30v60.46H371.88v-60.46c0-16.57-13.43-30-30-30s-30 13.43-30 30v60.46H250.5c-66.17 0-120 53.83-120 120v494.47c0 66.17 53.83 120 120 120h532.33c66.17 0 120-53.83 120-120V308.75c0.01-66.17-53.82-120-119.99-120z m-532.34 60h61.37v133.63c0 16.57 13.43 30 30 30s30-13.43 30-30V248.75h307.81v133.63c0 16.57 13.43 30 30 30s30-13.43 30-30V248.75h43.15c33.08 0 60 26.92 60 60V649.5H190.5V308.75c0-33.08 26.92-60 60-60z m532.34 614.47H250.5c-33.08 0-60-26.92-60-60V709.5h652.33v93.72c0.01 33.08-26.91 60-59.99 60z" p-id="4121"></path></svg>

client/src/components/Icon/index.tsx

@@ -33,7 +33,8 @@ const map = {
   export: require('./icons/export.svg').default,
   text: require('./icons/text.svg').default,
   history: require('./icons/history.svg').default,
-  kbTest: require('./icons/kbTest.svg').default
+  kbTest: require('./icons/kbTest.svg').default,
+  date: require('./icons/date.svg').default
 };
 
 export type IconName = keyof typeof map;

client/src/constants/theme.ts

@@ -39,7 +39,7 @@ const Button = defineStyleConfig({
     },
     sm: {
       fontSize: 'sm',
-      px: 3,
+      px: 4,
       py: 0,
       fontWeight: 'normal',
       height: '26px',

client/src/hooks/usePagination.tsx

@@ -76,6 +76,20 @@ export const usePagination = <T = any,>({
                 mutate(+e.target.value);
               }
             }}
+            onKeyDown={(e) => {
+              // @ts-ignore
+              const val = +e.target.value;
+              if (val && e.keyCode === 13) {
+                if (val === pageNum) return;
+                if (val >= maxPage) {
+                  mutate(maxPage);
+                } else if (val < 1) {
+                  mutate(1);
+                } else {
+                  mutate(val);
+                }
+              }
+            }}
           />
           <Box mx={2}>/</Box>
           {maxPage}

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 /> }