列表加载更多

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;
+    color: rgba(60, 60, 67, 0.6);
-        margin-top: 20px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 0 40px;
+    background: #fff;
   }
 }

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) {
+    // set_loading_transactions(true);
-      return;
-    }
-    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);
+        setTransactions([...transactions, ...response.data.list]);
-      } else {
-        setTransactions([]);
       }
     } 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>
     </>
   );

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>
+          <Input
-                        <Button className="btn" >获取验证码</Button>
+            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>
   );
 };

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)}>
+          <View
-            <Text className="current_month">{load_transactions_params.date}</Text>
+            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 ===
+                        filterParams.transaction_sub_type === option.value
-                          option.value
                           ? "option_item active"
                           : "option_item"
                       }

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);
         }
     };