feat: 滚动加载组件

src/pages/api/user/checkPayResult.ts

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { connectToDatabase, User, Pay } from '@/service/mongo';
 import { authToken } from '@/service/utils/tools';
 import { PaySchema } from '@/types/mongoSchema';
+import dayjs from 'dayjs';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
@@ -28,6 +29,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       `https://sif268.laf.dev/wechat-order-query?order_number=${payOrder.orderId}&api_key=${process.env.WXPAYCODE}`
     );
 
+    // 校验下是否超过一天
+    const orderTime = dayjs(payOrder.createTime);
+    const diffInHours = dayjs().diff(orderTime, 'hours');
+
     if (data.trade_state === 'SUCCESS') {
       // 订单已支付
       try {
@@ -47,7 +52,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             $inc: { balance: payOrder.price }
           });
           jsonRes(res, {
-            data: 'success'
+            data: '支付成功'
           });
         }
       } catch (error) {
@@ -56,17 +61,19 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         });
         console.log(error);
       }
-    } else if (data.trade_state === 'CLOSED') {
+    } else if (data.trade_state === 'CLOSED' || diffInHours > 24) {
       // 订单已关闭
       await Pay.findByIdAndUpdate(payId, {
         status: 'CLOSED'
       });
+      jsonRes(res, {
+        data: '订单已过期'
+      });
     } else {
       throw new Error(data.trade_state_desc);
     }
-    throw new Error('订单已过期');
   } catch (err) {
-    console.log(err);
+    // console.log(err);
     jsonRes(res, {
       code: 500,
       error: err

src/pages/data/list.tsx

@@ -28,8 +28,9 @@ const ImportDataModal = dynamic(() => import('./components/ImportDataModal'));
 
 const DataList = () => {
   const {
-    setPageNum,
-    pageNum,
+    nextPage,
+    isLoadAll,
+    requesting,
     data: dataList,
     getData
   } = usePaging<DataListItem>({
@@ -75,7 +76,7 @@ const DataList = () => {
       </Card>
       {/* 数据表 */}
       <Card mt={3} flex={'1 0 0'} h={['auto', '0']} px={6} py={4}>
-        <ScrollData h={'100%'} nextPage={() => setPageNum(pageNum + 1)}>
+        <ScrollData h={'100%'} nextPage={nextPage} isLoadAll={isLoadAll} requesting={requesting}>
           <TableContainer>
             <Table>
               <Thead>

src/pages/number/setting.tsx

@@ -32,6 +32,7 @@ import { PaySchema } from '@/types/mongoSchema';
 import dayjs from 'dayjs';
 import { formatPrice } from '@/utils/user';
 import WxConcat from '@/components/WxConcat';
+import ScrollData from '@/components/ScrollData';
 
 const PayModal = dynamic(() => import('./components/PayModal'));
 
@@ -52,7 +53,12 @@ const NumberSetting = () => {
     control,
     name: 'accounts'
   });
-  const { setPageNum, data: bills } = usePaging<UserBillType>({
+  const {
+    nextPage,
+    isLoadAll,
+    requesting,
+    data: bills
+  } = usePaging<UserBillType>({
     api: getUserBills,
     pageSize: 30
   });
@@ -84,9 +90,14 @@ const NumberSetting = () => {
 
   const handleRefreshPayOrder = useCallback(
     async (payId: string) => {
+      setLoading(true);
+
       try {
-        setLoading(true);
-        await checkPayResult(payId);
+        const data = await checkPayResult(payId);
+        toast({
+          title: data,
+          status: 'info'
+        });
         const res = await getPayOrders();
         setPayOrders(res);
       } catch (error: any) {
@@ -96,6 +107,7 @@ const NumberSetting = () => {
         });
         console.log(error);
       }
+
       setLoading(false);
     },
     [setLoading, toast]
@@ -196,8 +208,8 @@ const NumberSetting = () => {
           </Table>
         </TableContainer>
       </Card>
-      <Card mt={6} px={6} py={4}>
-        <Flex alignItems={'flex-end'}>
+      <Card mt={6} py={4}>
+        <Flex alignItems={'flex-end'} px={6} mb={1}>
           <Box fontSize={'xl'} fontWeight={'bold'}>
             充值记录
           </Box>
@@ -205,7 +217,7 @@ const NumberSetting = () => {
             异常问题，wx联系
           </Button>
         </Flex>
-        <TableContainer maxH={'400px'} overflowY={'auto'}>
+        <TableContainer maxH={'400px'} overflowY={'auto'} px={6}>
           <Table>
             <Thead>
               <Tr>
@@ -240,32 +252,40 @@ const NumberSetting = () => {
           </Table>
         </TableContainer>
       </Card>
-      <Card mt={6} px={6} py={4}>
-        <Box fontSize={'xl'} fontWeight={'bold'}>
-          使用记录(最新30条)
+      <Card mt={6} py={4}>
+        <Box fontSize={'xl'} fontWeight={'bold'} px={6} mb={1}>
+          使用记录
         </Box>
-        <TableContainer maxH={'400px'} overflowY={'auto'}>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>时间</Th>
-                <Th>内容长度</Th>
-                <Th>消费</Th>
-              </Tr>
-            </Thead>
-            <Tbody fontSize={'sm'}>
-              {bills.map((item) => (
-                <Tr key={item.id}>
-                  <Td>{item.time}</Td>
-                  <Td whiteSpace="pre-wrap" wordBreak={'break-all'}>
-                    {item.textLen}
-                  </Td>
-                  <Td>{item.price}元</Td>
+        <ScrollData
+          maxH={'400px'}
+          px={6}
+          isLoadAll={isLoadAll}
+          requesting={requesting}
+          nextPage={nextPage}
+        >
+          <TableContainer>
+            <Table>
+              <Thead>
+                <Tr>
+                  <Th>时间</Th>
+                  <Th>内容长度</Th>
+                  <Th>消费</Th>
                 </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </TableContainer>
+              </Thead>
+              <Tbody fontSize={'sm'}>
+                {bills.map((item) => (
+                  <Tr key={item.id}>
+                    <Td>{item.time}</Td>
+                    <Td whiteSpace="pre-wrap" wordBreak={'break-all'}>
+                      {item.textLen}
+                    </Td>
+                    <Td>{item.price}元</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+        </ScrollData>
       </Card>
       {showPay && <PayModal onClose={() => setShowPay(false)} />}
       {/* wx 联系 */}