u
This commit is contained in:
oneao committed
1 parent
dee2eab404
commit
098a061308
10 files changed
+869
-155
No files matched your search
@@ -1,59 +1,126 @@
|
||||
import type { LayoutChangeEvent } from 'react-native'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import React, { useState } from 'react'
|
||||
import { ScrollView, Text, View } from 'react-native'
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { Text, View } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LucideIcon } from '@/components/common/ao'
|
||||
|
||||
import BalanceCard from './components/BalanceCard'
|
||||
import TabSelector from './components/TabSelector'
|
||||
import TransactionsList from './components/TransactionsList'
|
||||
import { IconJiaotong } from '@/components/iconfont'
|
||||
import { Grid, GridItem } from '@/components/ui/grid'
|
||||
import { Progress, ProgressFilledTrack } from '@/components/ui/progress'
|
||||
|
||||
export default function Money() {
|
||||
const insets = useSafeAreaInsets()
|
||||
const [selected, setSelected] = useState(0)
|
||||
|
||||
const [gradientHeight, setGradientHeight] = useState(200) // 默认渐变高度
|
||||
const gridLayout = useRef({ y: 0, height: 0 })
|
||||
const onGridLayout = (e: LayoutChangeEvent) => {
|
||||
const { y, height } = e.nativeEvent.layout
|
||||
gridLayout.current = { y, height }
|
||||
setGradientHeight(y + height / 2 + 16 + insets.top)
|
||||
}
|
||||
return (
|
||||
<LinearGradient
|
||||
colors={['#f2f6ff', '#ffffff']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
className="flex-1"
|
||||
<View
|
||||
className="flex-1 relative bg-white"
|
||||
style={{
|
||||
paddingTop: insets.top,
|
||||
paddingBottom: insets.bottom,
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8,
|
||||
}}
|
||||
>
|
||||
{/* 顶部固定栏 */}
|
||||
<View style={{ zIndex: 10 }}>
|
||||
<LinearGradient
|
||||
colors={['#a3f7bf', '#d4f9e2', '#ffffff']}
|
||||
locations={[0, 0.85, 1]}
|
||||
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: gradientHeight,
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 页面内容 */}
|
||||
<View style={{ zIndex: 10, padding: 8 }}>
|
||||
<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-lg">2025/11/10</Text>
|
||||
<LucideIcon icon="CircleChevronDown" size={16} />
|
||||
<Text className="font-bold text-base">2025/11/10</Text>
|
||||
<LucideIcon icon="CircleChevronDown" size={14} />
|
||||
</View>
|
||||
<View className="flex flex-row items-center gap-2">
|
||||
<View className="flex flex-row items-center gap-2">
|
||||
<LucideIcon icon="SlidersHorizontal" />
|
||||
<Text>筛选</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<TabSelector
|
||||
options={['明细', '视图']}
|
||||
selected={selected}
|
||||
onSelect={tab => setSelected(tab)}
|
||||
/>
|
||||
</View>
|
||||
<View>
|
||||
<View className="flex flex-col items-center">
|
||||
<Text className="text-gray-600 text-xs">
|
||||
<Text>余额</Text>
|
||||
<Text className="text-green-500">↑20%</Text>
|
||||
</Text>
|
||||
<Text className="font-bold text-xl">
|
||||
22313.00
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 可滚动内容 */}
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingBottom: 20 }}
|
||||
style={{ marginTop: 0 }}
|
||||
>
|
||||
<BalanceCard />
|
||||
<TransactionsList />
|
||||
</ScrollView>
|
||||
</LinearGradient>
|
||||
<View className="flex flex-row justify-between mt-2">
|
||||
<View className="flex flex-col items-center">
|
||||
<Text className="text-gray-600 text-xs">
|
||||
<Text>收入</Text>
|
||||
<Text className="text-green-500">↑20%</Text>
|
||||
</Text>
|
||||
<Text className="text-lg font-bold">11.0</Text>
|
||||
</View>
|
||||
<View className="flex flex-col items-center">
|
||||
<Text className="text-gray-600 text-xs">
|
||||
<Text>支出</Text>
|
||||
<Text className="text-green-500">↑20%</Text>
|
||||
</Text>
|
||||
<Text className="text-lg font-bold">11.0</Text>
|
||||
</View>
|
||||
<View className="flex flex-col items-center">
|
||||
<Text className="text-gray-600 text-xs">
|
||||
<Text>结余</Text>
|
||||
<Text className="text-green-500">↑20%</Text>
|
||||
</Text>
|
||||
<Text className="text-lg font-bold">11.0</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex flex-row items-center gap-4 mt-4 ">
|
||||
<Text className="text-xs text-gray-600">预算</Text>
|
||||
|
||||
<View className="flex-1">
|
||||
<Progress>
|
||||
<ProgressFilledTrack />
|
||||
</Progress>
|
||||
</View>
|
||||
|
||||
<Text className="text-xs text-gray-600">点击设置</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
onLayout={onGridLayout}
|
||||
className="mt-4 pt-2 pb-2 bg-white rounded-md"
|
||||
>
|
||||
<Grid
|
||||
_extra={{ className: 'grid-cols-5' }}
|
||||
>
|
||||
{[...Array.from({ length: 5 })].map((_, i) => (
|
||||
<GridItem
|
||||
key={i}
|
||||
className="flex flex-col items-center"
|
||||
_extra={{ className: 'col-span-1' }}
|
||||
>
|
||||
<IconJiaotong size={28} />
|
||||
<Text className="text-xs mt-1 text-gray-500">账单</Text>
|
||||
</GridItem>
|
||||
))}
|
||||
</Grid>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user