u

code/base-project/base-app/src/app/(tabs)/money/index.tsx

@@ -1,26 +1,29 @@
 import type { LayoutChangeEvent } from 'react-native'
+import { BlurView } from 'expo-blur'
 import { LinearGradient } from 'expo-linear-gradient'
-import React, { useRef, useState } from 'react'
-import { ScrollView, Text, View } from 'react-native'
+import React, { useEffect, useRef, useState } from 'react'
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { LucideIcon } from '@/components/common/ao'
+import { ADateTimeDrawer, LucideIcon } from '@/components/common/ao'
 import { IconJiaotong } from '@/components/iconfont'
 import { Fab, FabIcon } from '@/components/ui/fab'
 import { Grid, GridItem } from '@/components/ui/grid'
 import { AddIcon } from '@/components/ui/icon'
 import { Progress, ProgressFilledTrack } from '@/components/ui/progress'
+import { queryMoneyRecordsApi } from '@/request/api/money'
+import { getCurrentYearMonth } from '@/utils/time'
 import AddMoneyDrawer from './components/AddDrawer'
 import TransactionsList from './components/TransactionsList'
 
 export default function Money() {
-  const [showDrawer, setShowDrawer] = useState(false)
+  const [showAddDrawer, setShowAddDrawer] = useState(false)
 
+  // 安全高度
   const insets = useSafeAreaInsets()
   const [gradientHeight, setGradientHeight] = useState(200)
   const gridLayout = useRef<{ y: number, height: number } | null>(null)
 
   const onGridLayout = (e: LayoutChangeEvent) => {
-    // 仅首次布局计算高度
     if (!gridLayout.current) {
       const { y, height } = e.nativeEvent.layout
       gridLayout.current = { y, height }
@@ -28,6 +31,20 @@ export default function Money() {
     }
   }
 
+  // 日期筛选
+  const [showDatePicker, setShowDatePicker] = useState(false)
+  const [searchParams, setSearchParams] = useState({
+    record_time: getCurrentYearMonth(),
+  })
+
+  useEffect(() => {
+    queryMoneyRecordsApi({
+      record_time: searchParams.record_time,
+    }).then((res) => {
+      console.log(res.data)
+    })
+  }, [searchParams])
+
   return (
     <View
       className="flex-1 relative bg-white"
@@ -52,10 +69,16 @@ export default function Money() {
 
       <View style={{ zIndex: 10, paddingLeft: 12, paddingRight: 12 }}>
         <View className="flex flex-row justify-between items-center py-2">
-          <View className="flex flex-row items-center gap-2">
-            <Text className="font-bold text-base">2025/11/10</Text>
-            <LucideIcon icon="CircleChevronDown" size={14} />
-          </View>
+          <BlurView intensity={80} className="px-2 py-1">
+            <TouchableOpacity
+              onPress={() => setShowDatePicker(true)}
+              className="flex flex-row items-center gap-2"
+            >
+              <Text className="font-bold text-base">{searchParams.record_time}</Text>
+              <LucideIcon icon="ArrowBigDownDash" size={16} />
+            </TouchableOpacity>
+          </BlurView>
+
           <View className="flex flex-row  items-center gap-2">
             <LucideIcon icon="SlidersHorizontal" />
           </View>
@@ -144,16 +167,31 @@ export default function Money() {
       <Fab
         size="lg"
         onPress={() => {
-          setShowDrawer(true)
+          setShowAddDrawer(true)
         }}
       >
         <FabIcon as={AddIcon} size="xl" />
       </Fab>
 
       <AddMoneyDrawer
-        isOpen={showDrawer}
+        isOpen={showAddDrawer}
         onClose={() => {
-          setShowDrawer(false)
+          setShowAddDrawer(false)
+        }}
+      />
+
+      <ADateTimeDrawer
+        isOpen={showDatePicker}
+        modeType="year-month"
+        onConfirm={(val) => {
+          setSearchParams({
+            ...searchParams,
+            record_time: val,
+          })
+          setShowDatePicker(false)
+        }}
+        onClose={() => {
+          setShowDatePicker(false)
         }}
       />
     </View>