日期范围选择器、账单筛选

src/user_pages/wallet/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { View, Text, Input, Button, Image } from "@tarojs/components";
 import Taro, { useDidShow } from "@tarojs/taro";
 import "./index.scss";
@@ -28,6 +28,71 @@ interface WalletInfo {
   total_withdraw?: number;
 }
 
+enum TransactionType {
+  All = '',
+  Income = 'income',
+  Expense = 'expense',
+}
+
+enum TransactionSubType {
+  All = '',
+  GameActivity = 'game_activity',
+  Withdrawal = 'withdrawal',
+  Refund = 'refund',
+  Compensation = 'compensation',
+}
+
+interface TransactionLoadParams {
+  page: number;
+  limit: number;
+  type: TransactionType;
+  transaction_sub_type: TransactionSubType;
+  keyword?: string;
+  date?: string;
+}
+interface Option<T> {
+  label: string;
+  value: T;
+}
+
+const income_expense_options: Option<TransactionType>[] = [
+  {
+    label: '全部',
+    value: TransactionType.All
+  },
+  {
+    label: '支出',
+    value: TransactionType.Expense
+  },
+  {
+    label: '收入',
+    value: TransactionType.Income
+  },
+];
+
+const transaction_type_options: Option<TransactionSubType>[] = [
+  {
+    label: '全部',
+    value: TransactionSubType.All
+  },
+  {
+    label: '组织活动',
+    value: TransactionSubType.GameActivity
+  },
+  {
+    label: '提现',
+    value: TransactionSubType.Withdrawal
+  },
+  {
+    label: '退款',
+    value: TransactionSubType.Refund
+  },
+  {
+    label: '企业赔付',
+    value: TransactionSubType.Compensation
+  },
+];
+
 
 const WalletPage: React.FC = () => {
   // 钱包信息状态
@@ -44,6 +109,18 @@ const WalletPage: React.FC = () => {
   const [transactions, set_transactions] = useState<Transaction[]>([]);
   const [loading_transactions, set_loading_transactions] = useState(false);
 
+  // 交易记录过滤状态
+  const [showFilterPopup, setShowFilterPopup] = useState(false);
+
+  const [load_transactions_params, set_load_transactions_params] = useState<TransactionLoadParams>({
+    page: 1,
+    limit: 20,
+    type: TransactionType.All,
+    transaction_sub_type: TransactionSubType.All,
+    keyword: "",
+    date: ""
+  });
+
   // 页面显示时加载数据
   useDidShow(() => {
     load_wallet_data();
@@ -82,14 +159,13 @@ const WalletPage: React.FC = () => {
 
   // 加载交易记录
   const load_transactions = async () => {
+    setShowFilterPopup(false);
+    set_load_transactions_params({ ...load_transactions_params, page: 1 });
     try {
       set_loading_transactions(true);
       console.log("开始加载交易记录...");
 
-      const response = await httpService.post("/wallet/transactions", {
-        page: 1,
-        limit: 20
-      });
+      const response = await httpService.post("/wallet/transactions", { ...load_transactions_params });
 
       console.log("交易记录响应:", response);
 
@@ -165,7 +241,7 @@ const WalletPage: React.FC = () => {
     });
 
     // 根据后端返回的数据结构解析参数
-    const { mch_id, app_id,  package_info, open_id } = response.data;
+    const { mch_id, app_id, package_info, open_id } = response.data;
 
     console.log("/wallet/withdraw:", response.data);
 
@@ -255,6 +331,10 @@ const WalletPage: React.FC = () => {
     return `${prefix}${format_amount(transaction.amount)}`;
   };
 
+  const show_filter_popup = () => {
+    setShowFilterPopup(true)
+  }
+
   return (
     <View className="wallet_page">
       {/* 钱包主卡片 */}
@@ -285,7 +365,7 @@ const WalletPage: React.FC = () => {
 
       {/* 功能按钮区域 */}
       <View className="function_buttons">
-        <View className="function_item">
+        <View className="function_item" onClick={show_filter_popup}>
           <Text className="function_text">全部账单</Text>
           <Image className="function_icon" src={require("@/static/wallet/arrow-down.svg")} />
         </View>
@@ -392,6 +472,37 @@ const WalletPage: React.FC = () => {
           </View>
         </View>
       </CommonPopup>
+
+      {/* 筛选账单弹窗 */}
+      <CommonPopup
+        visible={showFilterPopup}
+        onClose={() => setShowFilterPopup(false)}
+        onConfirm={load_transactions}
+        title="选择筛选项"
+        className="filter_popup"
+      >
+        <View className="popup_content">
+          <View className="form_section">
+            <View className="form_item">
+              <Text className="form_label">收支类型</Text>
+              <View className="options_wrapper">
+                {income_expense_options.map((option: Option<TransactionType>) => (
+                  <View className={load_transactions_params.type === option.value ? "option_item active" : "option_item"} key={option.value} onClick={() => { set_load_transactions_params({ ...load_transactions_params, type: option.value }) }}>{option.label}</View>
+                ))}
+              </View>
+            </View>
+            <View className="form_item">
+              <Text className="form_label">交易类型</Text>
+              <View className="options_wrapper">
+                {transaction_type_options.map((option: Option<TransactionSubType>) => (
+                  <View className={load_transactions_params.transaction_sub_type === option.value ? "option_item active" : "option_item"} key={option.value} onClick={() => { set_load_transactions_params({ ...load_transactions_params, transaction_sub_type: option.value }) }}>{option.label}</View>
+                ))}
+              </View>
+            </View>
+
+          </View>
+        </View>
+      </CommonPopup>
     </View>
   );
 };