列表加载更多

src/user_pages/wallet/index.tsx

@@ -7,6 +7,7 @@ import httpService from "@/services/httpService";
 import { withAuth } from "@/components";
 import { PopupPicker } from "@/components/Picker/index";
 import { handleCustomerService } from "@/services/userService";
+import { useReachBottom } from "@tarojs/taro";
 
 // 交易记录类型
 interface Transaction {
@@ -96,6 +97,15 @@ const transaction_type_options: Option<TransactionSubType>[] = [
 ];
 
 const WalletPage: React.FC = () => {
+  useReachBottom(() => {
+    // 加载更多方法
+    set_load_transactions_params((prev) => {
+      return {
+        ...prev,
+        page: prev.page + 1,
+      };
+    });
+  });
   // 钱包信息状态
   const [wallet_info, set_wallet_info] = useState<WalletInfo>({
     balance: 0,
@@ -131,7 +141,7 @@ const WalletPage: React.FC = () => {
       type: TransactionType.All,
       transaction_sub_type: TransactionSubType.All,
       keyword: "",
-      date: `${year}-${month}`
+      date: `${year}-${month}`,
     });
 
   useEffect(() => {
@@ -150,12 +160,10 @@ const WalletPage: React.FC = () => {
         ...prev,
         type,
         transaction_sub_type,
-      }
-    })
+      };
+    });
   };
 
-
-
   const check_password_status = async () => {
     try {
       const res = await httpService.post("/wallet/check_password_status");
@@ -163,7 +171,7 @@ const WalletPage: React.FC = () => {
     } catch (e) {
       console.error("检查交易密码状态失败:", e);
     }
-  }
+  };
 
   // 加载钱包数据
   const load_wallet_data = async () => {
@@ -211,7 +219,7 @@ const WalletPage: React.FC = () => {
     setShowFilterPopup(false);
     // set_load_transactions_params({ ...load_transactions_params, page: 1 });
     try {
-      set_loading_transactions(true);
+      if (!transactions.length) set_loading_transactions(true);
       console.log("开始加载交易记录...");
       const response = await httpService.post("/wallet/transactions", {
         ...load_transactions_params,
@@ -220,7 +228,7 @@ const WalletPage: React.FC = () => {
       console.log("交易记录响应:", response);
 
       if (response && response.data && response.data.list) {
-        set_transactions(response.data.list);
+        set_transactions([...transactions, ...response.data.list]);
         console.log("设置交易记录:", response.data.list);
       } else {
         console.log("响应数据格式异常:", response);
@@ -254,11 +262,11 @@ const WalletPage: React.FC = () => {
   };
 
   const navigateToSetTransactionPassword = (type: "set" | "reset") => {
-    let url = ""
+    let url = "";
     if (type === "set") {
-      url = `/user_pages/setTransactionPassword/index?type=${type}`
+      url = `/user_pages/setTransactionPassword/index?type=${type}`;
     } else if (type === "reset") {
-      url = `/user_pages/validPhone/index`
+      url = `/user_pages/validPhone/index`;
     }
     Taro.navigateTo({
       url,
@@ -422,7 +430,12 @@ const WalletPage: React.FC = () => {
         {/* 头部信息 */}
         <View className="card_header">
           <Text className="header_title">我的现金</Text>
-          <Text className="modify_password" onClick={() => navigateToSetTransactionPassword("reset")}>修改交易密码</Text>
+          <Text
+            className="modify_password"
+            onClick={() => navigateToSetTransactionPassword("reset")}
+          >
+            修改交易密码
+          </Text>
         </View>
 
         {/* 余额显示 */}
@@ -491,7 +504,7 @@ const WalletPage: React.FC = () => {
             className="function_icon"
             src={require("@/static/wallet/custom-service.svg")}
           />
-          <Text className="function_text" >客服中心</Text>
+          <Text className="function_text">客服中心</Text>
         </View>
       </View>
 
@@ -500,8 +513,13 @@ const WalletPage: React.FC = () => {
         {/* 标题栏 */}
         <View className="history_header">
           <Text className="history_title">现金明细</Text>
-          <View className="month_selector" onClick={() => setShowMonthPicker(true)}>
-            <Text className="current_month">{load_transactions_params.date}</Text>
+          <View
+            className="month_selector"
+            onClick={() => setShowMonthPicker(true)}
+          >
+            <Text className="current_month">
+              {load_transactions_params.date}
+            </Text>
           </View>
         </View>
 
@@ -599,7 +617,7 @@ const WalletPage: React.FC = () => {
           setvisible={setShowMonthPicker}
           value={[
             Number(load_transactions_params.date!.split("-")[0]),
-            Number(load_transactions_params.date!.split("-")[1])
+            Number(load_transactions_params.date!.split("-")[1]),
           ]}
           type="month"
           onChange={(e) => {
@@ -653,8 +671,7 @@ const WalletPage: React.FC = () => {
                   (option: Option<TransactionSubType>) => (
                     <View
                       className={
-                        filterParams.transaction_sub_type ===
-                          option.value
+                        filterParams.transaction_sub_type === option.value
                           ? "option_item active"
                           : "option_item"
                       }