77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
/**
|
|
* 钱包余额组件
|
|
* 显示用户的钱包余额
|
|
*/
|
|
|
|
import React, { useMemo } from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { useColorScheme, useThemeColors } from '@/theme';
|
|
import { createThemeStyles } from '@/theme';
|
|
import Ionicons from '@expo/vector-icons/Ionicons';
|
|
|
|
/**
|
|
* 创建主题样式
|
|
*/
|
|
const styles = createThemeStyles((colors) => ({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
label: {
|
|
fontSize: 12,
|
|
color: colors.text + '80',
|
|
},
|
|
amount: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: colors.primary,
|
|
},
|
|
currency: {
|
|
fontSize: 12,
|
|
color: colors.text + '80',
|
|
marginLeft: 4,
|
|
},
|
|
refreshButton: {
|
|
padding: 4,
|
|
},
|
|
}));
|
|
|
|
interface WalletAmountProps {
|
|
balance?: number;
|
|
label?: string;
|
|
showRefresh?: boolean;
|
|
onRefresh?: () => void;
|
|
}
|
|
|
|
/**
|
|
* 钱包余额组件
|
|
*/
|
|
export default function WalletAmount({
|
|
balance = 0,
|
|
label = '余额：',
|
|
showRefresh = false,
|
|
onRefresh,
|
|
}: WalletAmountProps) {
|
|
const colorScheme = useColorScheme();
|
|
const s = styles[colorScheme];
|
|
const themeColors = useThemeColors();
|
|
|
|
// 格式化金额
|
|
const formattedBalance = useMemo(() => {
|
|
return balance.toFixed(2);
|
|
}, [balance]);
|
|
|
|
return (
|
|
<View style={s.container}>
|
|
{label && <Text style={s.label}>{label}</Text>}
|
|
<Text style={s.amount}>¥ {formattedBalance}</Text>
|
|
{showRefresh && (
|
|
<TouchableOpacity style={s.refreshButton} onPress={onRefresh} activeOpacity={0.7}>
|
|
<Ionicons name="refresh" size={14} color={themeColors.primary} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|