135 lines
3.4 KiB
TypeScript
135 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
|
|
import { ThemedView } from '@/components/themed-view';
|
|
import { ThemedText } from '@/components/themed-text';
|
|
import { useThemeColor } from '@/hooks/use-theme-color';
|
|
import { IconSymbol } from '@/components/ui/icon-symbol';
|
|
|
|
interface BalanceCardProps {
|
|
balance: number;
|
|
onRecharge: () => void;
|
|
onHistory?: () => void;
|
|
}
|
|
|
|
export function BalanceCard({ balance, onRecharge, onHistory }: BalanceCardProps) {
|
|
const tintColor = useThemeColor({}, 'tint');
|
|
const cardColor = useThemeColor({}, 'card');
|
|
const borderColor = useThemeColor({}, 'cardBorder');
|
|
|
|
return (
|
|
<ThemedView style={[styles.container, { backgroundColor: cardColor, borderColor }]}>
|
|
<View style={styles.header}>
|
|
<View style={styles.titleContainer}>
|
|
<IconSymbol name="dollarsign.circle" size={24} color={tintColor} />
|
|
<ThemedText style={styles.title}>账户余额</ThemedText>
|
|
</View>
|
|
{onHistory && (
|
|
<TouchableOpacity onPress={onHistory} style={styles.historyButton}>
|
|
<ThemedText style={[styles.historyText, { color: tintColor }]}>
|
|
消费记录
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.balanceContainer}>
|
|
<ThemedText style={styles.currency}>¥</ThemedText>
|
|
<ThemedText style={styles.balance}>{balance.toFixed(2)}</ThemedText>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.rechargeButton, { backgroundColor: tintColor }]}
|
|
onPress={onRecharge}
|
|
activeOpacity={0.8}
|
|
>
|
|
<IconSymbol name="plus.circle.fill" size={20} color="white" />
|
|
<ThemedText style={styles.rechargeText}>充值</ThemedText>
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.tips}>
|
|
<IconSymbol name="info.circle" size={14} color="#999" />
|
|
<ThemedText style={styles.tipsText}>
|
|
余额用于支付生成内容的消费
|
|
</ThemedText>
|
|
</View>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 20,
|
|
borderRadius: 20,
|
|
borderWidth: 1,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
historyButton: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
},
|
|
historyText: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
},
|
|
balanceContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-end',
|
|
justifyContent: 'center',
|
|
marginVertical: 24,
|
|
},
|
|
currency: {
|
|
fontSize: 24,
|
|
fontWeight: '600',
|
|
marginBottom: 4,
|
|
},
|
|
balance: {
|
|
fontSize: 48,
|
|
fontWeight: 'bold',
|
|
lineHeight: 48,
|
|
},
|
|
rechargeButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 24,
|
|
borderRadius: 24,
|
|
gap: 8,
|
|
alignSelf: 'center',
|
|
},
|
|
rechargeText: {
|
|
color: 'white',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
tips: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
marginTop: 16,
|
|
paddingTop: 16,
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#f0f0f0',
|
|
},
|
|
tipsText: {
|
|
fontSize: 12,
|
|
color: '#666',
|
|
flex: 1,
|
|
},
|
|
});
|