列表加载更多

src/user_pages/queryTransactions/index.tsx

@@ -1,12 +1,11 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { View, Image, Text } from "@tarojs/components";
 import { Input } from "@nutui/nutui-react-taro";
-import { useEffect, useRef } from "react";
 import img from "@/config/images";
 import { withAuth } from "@/components";
 import "./index.scss";
 import httpService from "@/services/httpService";
-import Taro from "@tarojs/taro";
+import Taro, { useReachBottom } from "@tarojs/taro";
 interface Transaction {
   id: number;
   user_id: number;
@@ -19,15 +18,6 @@ interface Transaction {
   related_id: number;
 }
 
-// 钱包信息类型
-interface WalletInfo {
-  balance: number;
-  frozen_balance?: number;
-  total_balance?: number;
-  total_income?: number;
-  total_withdraw?: number;
-}
-
 interface History {
   id: number;
   keyword: string;
@@ -39,6 +29,7 @@ interface TransactionLoadParams {
 }
 
 const QueryTransactions = () => {
+  const isInitialMount = useRef(true);
   const [loading_transactions, set_loading_transactions] = useState(false);
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [searchHistory, setSearchHistory] = useState<History[]>([]);
@@ -63,6 +54,23 @@ const QueryTransactions = () => {
     }
   }, [ref.current]);
 
+  useReachBottom(() => {
+    set_load_transactions_params((prev) => {
+      return {
+        ...prev,
+        page: prev.page + 1,
+      }
+    })
+  });
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      handleSearch();
+    }
+  }, [load_transactions_params]);
+
   // 是否显示清空图标
   const isShowClearIcon =
     load_transactions_params.keyword &&
@@ -106,7 +114,6 @@ const QueryTransactions = () => {
    */
   const handleHistoryClick = (item: { id: number; keyword: string }) => {
     set_load_transactions_params((prev) => {
-      handleSearch(item?.keyword);
       return { ...prev, keyword: item?.keyword };
     });
   };
@@ -123,21 +130,15 @@ const QueryTransactions = () => {
    * @description 点击搜索
    */
   const handleSearch = async (val?: string) => {
-    if (!val) {
-      return;
-    }
-    set_loading_transactions(true);
+    // set_loading_transactions(true);
     try {
       const response = await httpService.post("/wallet/transactions", {
         ...load_transactions_params,
         keyword: val,
       });
-      console.log("交易记录响应:", response);
 
       if (response && response.data && response.data.list) {
-        setTransactions(response.data.list);
-      } else {
-        setTransactions([]);
+        setTransactions([...transactions, ...response.data.list]);
       }
     } catch (error) {
       setTransactions([]);
@@ -169,13 +170,9 @@ const QueryTransactions = () => {
     return numAmount.toFixed(2);
   };
 
-  // 钱包信息状态
-  const [wallet_info, set_wallet_info] = useState<WalletInfo>({
-    balance: 0,
-  });
-
   // 格式化时间显示
   const format_time = (time: string) => {
+    time = time.replace(/-/g, '/');
     const date = new Date(time);
     const month = String(date.getMonth() + 1).padStart(2, "0");
     const day = String(date.getDate()).padStart(2, "0");
@@ -235,33 +232,35 @@ const QueryTransactions = () => {
     <>
       <View className="listSearchContainer">
         {/* 搜索 */}
-        <View className="topSearch">
-          <Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
-          <Input
-            placeholder="查找"
-            value={load_transactions_params.keyword}
-            defaultValue={load_transactions_params.keyword}
-            onChange={handleChange}
-            onClear={handleClear}
-            autoFocus
-            clearable={false}
-            ref={ref}
-          />
-          <View className="searchRight">
-            {isShowClearIcon && (
-              <Image
-                className="clearIcon icon16"
-                src={img.ICON_LIST_SEARCH_CLEAR}
-                onClick={handleClear}
-              />
-            )}
-            <View className="searchLine" />
-            <Text
-              className="searchText"
-              onClick={() => handleSearch(load_transactions_params.keyword)}
-            >
-              搜索
-            </Text>
+        <View className="topSearchWrapper">
+          <View className="topSearch">
+            <Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
+            <Input
+              placeholder="查找"
+              value={load_transactions_params.keyword}
+              defaultValue={load_transactions_params.keyword}
+              onChange={handleChange}
+              onClear={handleClear}
+              autoFocus
+              clearable={false}
+              ref={ref}
+            />
+            <View className="searchRight">
+              {isShowClearIcon && (
+                <Image
+                  className="clearIcon icon16"
+                  src={img.ICON_LIST_SEARCH_CLEAR}
+                  onClick={handleClear}
+                />
+              )}
+              <View className="searchLine" />
+              <Text
+                className="searchText"
+                onClick={() => handleSearch(load_transactions_params.keyword)}
+              >
+                搜索
+              </Text>
+            </View>
           </View>
         </View>
         {/* 查找历史 */}
@@ -329,7 +328,7 @@ const QueryTransactions = () => {
                       {get_amount_display(transaction)}
                     </Text>
                     <Text className="balance_info">
-                      余额 ¥{format_amount(wallet_info.balance)}
+                      余额 ¥{format_amount(transaction.amount)}
                     </Text>
                   </View>
                 </View>
@@ -341,11 +340,9 @@ const QueryTransactions = () => {
             </View>
           )}
         </View>
-        {
-          transactions.length > 0 && (
-            <View className="tips_text">仅支持查找2024年9月1日以后的账单</View>
-          )
-        }
+        {transactions.length > 0 && (
+          <View className="tips_text">仅支持查找2024年9月1日以后的账单</View>
+        )}
       </View>
     </>
   );