列表加载更多

2025-09-30 17:18:44 +08:00
parent 9c9be49f0e
commit 5f13effcd4
6 changed files with 419 additions and 339 deletions
--- a/src/user_pages/queryTransactions/index.scss
+++ b/src/user_pages/queryTransactions/index.scss
@@ -7,8 +7,17 @@
    height: 16px;
  }

+  .topSearchWrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #fff;
+    width: 100vw;
+    padding: 5px 15px;
+    box-sizing: border-box;
+  }
+
  .topSearch {
-        padding: 5px 16px 5px 12px;
    display: flex;
    align-items: center;
    height: 44px;
@@ -18,6 +27,7 @@
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    background: #fff;
    box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+    padding: 0 16px 0 12px;

    .nut-input {
      padding: 0;
@@ -25,6 +35,10 @@
    }
  }

+  .historySearch {
+    padding-top: 50px;
+  }
+
  .searchRight {
    display: flex;
    align-items: center;
@@ -80,7 +94,7 @@
    gap: 8px;

    .historySearchItem {
-            color: #3C3C4399;
+      color: #3c3c4399;
      font-size: 12px;
      flex-shrink: 0;
      flex-grow: 0;
@@ -121,6 +135,7 @@
  }

  .transaction_list {
+    padding: 40px 0 70px;

    .loading_state,
    .empty_state {
@@ -200,7 +215,12 @@
  .tips_text {
    font-size: 12px;
    text-align: center;
-        color: #3C3C4399;
-        margin-top: 20px;
+    color: rgba(60, 60, 67, 0.6);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 0 40px;
+    background: #fff;
  }
 }
--- a/src/user_pages/queryTransactions/index.tsx
+++ b/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,6 +232,7 @@ const QueryTransactions = () => {
    <>
      <View className="listSearchContainer">
        {/* 搜索 */}
+        <View className="topSearchWrapper">
          <View className="topSearch">
            <Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
            <Input
@@ -264,6 +262,7 @@ const QueryTransactions = () => {
              </Text>
            </View>
          </View>
+        </View>
        {/* 查找历史 */}
        {!isShowClearIcon && searchHistory.length > 0 && (
          <View className="historySearch">
@@ -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 && (
+        {transactions.length > 0 && (
          <View className="tips_text">仅支持查找2024年9月1日以后的账单</View>
-          )
-        }
+        )}
      </View>
    </>
  );
--- a/src/user_pages/setTransactionPassword/index.tsx
+++ b/src/user_pages/setTransactionPassword/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Taro, { useRouter } from '@tarojs/taro';
+import Taro, { useRouter } from "@tarojs/taro";
 import { View, Text, Input, Button } from "@tarojs/components";

 import "./index.scss";
@@ -44,7 +44,9 @@ const SetTransactionPassword: React.FC = () => {
      return;
    }
    try {
-            await httpService.post("/wallet/set_payment_password", { password: new_password });
+      await httpService.post("/wallet/set_payment_password", {
+        password: new_password,
+      });
      Taro.showToast({
        title: "设置交易密码成功",
        icon: "success",
@@ -59,6 +61,24 @@ const SetTransactionPassword: React.FC = () => {
    }
  };

+  const getSMSCode = async () => {
+    try {
+      await httpService.post("/wallet/send_set_password_sms", {
+        type: "set_password",
+      });
+      Taro.showToast({
+        title: "验证码发送成功",
+        icon: "none",
+      });
+    } catch (error) {
+      Taro.showToast({
+        title: "验证码发送失败",
+        icon: "none",
+      });
+      return;
+    }
+  };
+
  return (
    <View className="set-transaction-password-page">
      {
@@ -71,23 +91,47 @@ const SetTransactionPassword: React.FC = () => {
      }
      <View className="form-item">
        <Text className="form-label">交易密码</Text>
-                <Input placeholder="请输入交易密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "new_password") }}></Input>
+        <Input
+          placeholder="请输入交易密码"
+          password
+          type="number"
+          maxlength={6}
+          onInput={(e) => {
+            handleInput(e, "new_password");
+          }}
+        ></Input>
      </View>
      <View className="form-item">
        <Text className="form-label">重复密码</Text>
-                <Input placeholder="请再次输入交易密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "confirm_password") }}></Input>
+        <Input
+          placeholder="请再次输入交易密码"
+          password
+          type="number"
+          maxlength={6}
+          onInput={(e) => {
+            handleInput(e, "confirm_password");
+          }}
+        ></Input>
      </View>
-            {
-                handleType === "set" && (
+      {handleType === "set" && (
        <View className="form-item">
          <Text className="form-label">手机验证</Text>
-                        <Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
-                        <Button className="btn" >获取验证码</Button>
+          <Input
+            placeholder="请输入验证码"
+            type="number"
+            onInput={(e) => {
+              handleInput(e, "sms_code");
+            }}
+          ></Input>
+          <Button className="btn" onClick={getSMSCode}>
+            获取验证码
+          </Button>
        </View>
-                )
-            }
+      )}
      <Text className="tips">* 密码由6位数字组成</Text>
-            <Button className="btn bottom-btn" onClick={handleConfirm}>完成</Button>
+      <Button className="btn bottom-btn" onClick={handleConfirm}>
+        完成
+      </Button>
    </View>
  );
 };
--- a/src/user_pages/wallet/index.tsx
+++ b/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,11 +160,9 @@ const WalletPage: React.FC = () => {
        ...prev,
        type,
        transaction_sub_type,
-      }
-    })
      };
-
-
+    });
+  };

  const check_password_status = async () => {
    try {
@@ -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>

        {/* 余额显示 */}
@@ -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"
                      }
--- a/src/user_pages/withdrawal/index.tsx
+++ b/src/user_pages/withdrawal/index.tsx
@@ -50,6 +50,8 @@ const Withdrawal: React.FC = () => {
        } else if (Number(amount) > 200) {
            setShowTips(true);
            setTipsText("单笔提现金额不能超过 200元");
+        } else {
+          setShowTips(false);
        }
    };