下载账单、优化账单查询

src/user_pages/wallet/index.scss

@@ -146,7 +146,6 @@
     border: 0.5px solid #EBEBEB;
     border-radius: 20px;
     box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
 
     .history_header {
       display: flex;
@@ -154,6 +153,9 @@
       align-items: center;
       padding: 12px 20px;
       border-bottom: 0.5px solid rgba(120, 120, 128, 0.12);
+      position: sticky;
+      top: 0;
+      background-color: #fff;
 
       .history_title {
         font-size: 16px;

src/user_pages/wallet/index.tsx

@@ -5,6 +5,7 @@ import "./index.scss";
 import { CommonPopup } from "@/components";
 import httpService from "@/services/httpService";
 import { withAuth } from "@/components";
+import { PopupPicker } from "@/components/Picker/index";
 
 // 交易记录类型
 interface Transaction {
@@ -111,6 +112,16 @@ const WalletPage: React.FC = () => {
 
   // 交易记录过滤状态
   const [showFilterPopup, setShowFilterPopup] = useState(false);
+  const [showMonthPicker, setShowMonthPicker] = useState(false);
+
+  const [filterParams, setFilterParams] = useState({
+    type: TransactionType.All,
+    transaction_sub_type: TransactionSubType.All,
+  });
+
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
 
   const [load_transactions_params, set_load_transactions_params] =
     useState<TransactionLoadParams>({
@@ -119,16 +130,31 @@ const WalletPage: React.FC = () => {
       type: TransactionType.All,
       transaction_sub_type: TransactionSubType.All,
       keyword: "",
-      date: "",
+      date: `${year}-${month}`
     });
 
+  useEffect(() => {
+    load_transactions();
+  }, [load_transactions_params]);
   // 页面显示时加载数据
   useDidShow(() => {
     load_wallet_data();
-    load_transactions();
     check_password_status();
   });
 
+  const modify_load_transactions_params = () => {
+    const { type, transaction_sub_type } = filterParams;
+    set_load_transactions_params((prev) => {
+      return {
+        ...prev,
+        type,
+        transaction_sub_type,
+      }
+    })
+  };
+
+
+
   const check_password_status = async () => {
     try {
       const res = await httpService.post("/wallet/check_password_status");
@@ -182,11 +208,10 @@ const WalletPage: React.FC = () => {
   // 加载交易记录
   const load_transactions = async () => {
     setShowFilterPopup(false);
-    set_load_transactions_params({ ...load_transactions_params, page: 1 });
+    // set_load_transactions_params({ ...load_transactions_params, page: 1 });
     try {
       set_loading_transactions(true);
       console.log("开始加载交易记录...");
-
       const response = await httpService.post("/wallet/transactions", {
         ...load_transactions_params,
       });
@@ -327,6 +352,7 @@ const WalletPage: React.FC = () => {
 
   // 格式化时间显示
   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");
@@ -380,6 +406,14 @@ const WalletPage: React.FC = () => {
     setShowFilterPopup(true);
   };
 
+  const handleFilterCancel = () => {
+    setShowFilterPopup(false);
+    setFilterParams({
+      type: load_transactions_params.type,
+      transaction_sub_type: load_transactions_params.transaction_sub_type,
+    });
+  };
+
   return (
     <View className="wallet_page">
       {/* 钱包主卡片 */}
@@ -465,8 +499,8 @@ const WalletPage: React.FC = () => {
         {/* 标题栏 */}
         <View className="history_header">
           <Text className="history_title">现金明细</Text>
-          <View className="month_selector">
-            <Text className="current_month">2025-09</Text>
+          <View className="month_selector" onClick={() => setShowMonthPicker(true)}>
+            <Text className="current_month">{load_transactions_params.date}</Text>
           </View>
         </View>
 
@@ -557,12 +591,30 @@ const WalletPage: React.FC = () => {
           </View>
         </View>
       </CommonPopup>
-
+      {/* 选择月份弹窗 */}
+      {showMonthPicker && (
+        <PopupPicker
+          visible={showMonthPicker}
+          setvisible={setShowMonthPicker}
+          value={[
+            Number(load_transactions_params.date!.split("-")[0]),
+            Number(load_transactions_params.date!.split("-")[1])
+          ]}
+          type="month"
+          onChange={(e) => {
+            const [year, month] = e;
+            set_load_transactions_params({
+              ...load_transactions_params,
+              date: `${year}-${String(month).padStart(2, "0")}`,
+            });
+          }}
+        />
+      )}
       {/* 筛选账单弹窗 */}
       <CommonPopup
         visible={showFilterPopup}
-        onClose={() => setShowFilterPopup(false)}
-        onConfirm={load_transactions}
+        onClose={handleFilterCancel}
+        onConfirm={modify_load_transactions_params}
         title="选择筛选项"
         className="filter_popup"
       >
@@ -575,14 +627,14 @@ const WalletPage: React.FC = () => {
                   (option: Option<TransactionType>) => (
                     <View
                       className={
-                        load_transactions_params.type === option.value
+                        filterParams.type === option.value
                           ? "option_item active"
                           : "option_item"
                       }
                       key={option.value}
                       onClick={() => {
-                        set_load_transactions_params({
-                          ...load_transactions_params,
+                        setFilterParams({
+                          ...filterParams,
                           type: option.value,
                         });
                       }}
@@ -600,15 +652,15 @@ const WalletPage: React.FC = () => {
                   (option: Option<TransactionSubType>) => (
                     <View
                       className={
-                        load_transactions_params.transaction_sub_type ===
+                        filterParams.transaction_sub_type ===
                           option.value
                           ? "option_item active"
                           : "option_item"
                       }
                       key={option.value}
                       onClick={() => {
-                        set_load_transactions_params({
-                          ...load_transactions_params,
+                        setFilterParams({
+                          ...filterParams,
                           transaction_sub_type: option.value,
                         });
                       }}