You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
437 lines
14 KiB
437 lines
14 KiB
// 余额管理 |
|
import React, { useState } from 'react'; |
|
import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, Modal, SafeAreaView, StatusBar, Platform } from 'react-native'; |
|
import fontSize from '../utils/fontsizeUtils'; |
|
import widthUtils from '../utils/widthUtils'; |
|
import { useNavigation } from '@react-navigation/native'; |
|
import { NativeStackNavigationProp } from '@react-navigation/native-stack'; |
|
import { RootStackParamList } from '../navigation/types'; |
|
import RechargeScreen from './RechargeScreen'; |
|
import BackIcon from '../components/BackIcon'; |
|
|
|
type BalanceScreenNavigationProp = NativeStackNavigationProp< |
|
RootStackParamList, |
|
'Balance' |
|
>; |
|
|
|
export const BalanceScreen = () => { |
|
const navigation = useNavigation<BalanceScreenNavigationProp>(); |
|
const [isModalVisible, setIsModalVisible] = useState(false); |
|
|
|
const handleOpenModal = () => { |
|
setIsModalVisible(true); |
|
}; |
|
|
|
const handleCloseModal = () => { |
|
setIsModalVisible(false); |
|
}; |
|
|
|
return ( |
|
<SafeAreaView style={styles.safeArea}> |
|
<StatusBar barStyle="dark-content" backgroundColor="#fff" /> |
|
<View style={styles.safeAreaContent}> |
|
<View style={styles.header}> |
|
<TouchableOpacity |
|
style={styles.backButton} |
|
onPress={() => navigation.goBack()} |
|
> |
|
<BackIcon size={fontSize(22)} /> |
|
</TouchableOpacity> |
|
<Text style={styles.headerTitle}>Mon Solde</Text> |
|
<View style={styles.placeholder} /> |
|
</View> |
|
|
|
<ScrollView style={styles.container}> |
|
<View style={styles.balanceCard}> |
|
<View style={styles.sunriseGradientContainer}> |
|
<View style={styles.timeContainer}> |
|
<View style={styles.timeContainer2}> |
|
</View> |
|
</View> |
|
<View style={styles.balanceWidget}> |
|
<Text style={styles.balanceText}>Mon Solde</Text> |
|
<Image |
|
source={require('../../assets/img/image_11d1b9c.png')} |
|
style={styles.balanceImage} |
|
/> |
|
</View> |
|
</View> |
|
<View style={styles.balanceDetailsContainer}> |
|
<View style={styles.totalBalanceCard}> |
|
<View style={styles.cardContainer}> |
|
<View style={styles.financialInfoContainer}> |
|
<Text style={styles.largeBlackText}>650,000</Text> |
|
<View style={styles.svgContainer}> |
|
{/* SVG or icon replacement */} |
|
</View> |
|
</View> |
|
<View style={styles.totalSoldInfoContainer}> |
|
<Text style={styles.totalSoldeText}>Solde Total (FCFA)</Text> |
|
<View style={styles.totalBalanceInfoContainer}> |
|
<View style={styles.verticalCenteredTextBox}> |
|
<Text style={styles.highlightedText}>50,000</Text> |
|
<Text style={styles.expirationInfo}>Bientôt expiré (FCFA)</Text> |
|
</View> |
|
<View style={styles.deadlineInfoContainer}> |
|
<Text style={styles.deadlineText}>2025-05-09</Text> |
|
<Text style={styles.expirationInfo}>Date limite</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={[styles.buttonContainer, { backgroundColor: '#FF8000', alignSelf: 'center' }]}> |
|
<TouchableOpacity style={styles.button} onPress={handleOpenModal}> |
|
<Text style={styles.buttonText}>Rechargez maintenant</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.transactionDetailsContainer}> |
|
<View style={styles.balanceDetailContainer}> |
|
<Text style={styles.balanceDetailTitle}>Détail du solde</Text> |
|
<View style={styles.transactionDetailsContainer1}> |
|
<View style={styles.transactionHistoryList}> |
|
{/* Repeated Transaction Details */} |
|
<View style={styles.transactionDetailsPanel}> |
|
<View style={styles.transactionDetailsRow}> |
|
<Text style={styles.transactionDescriptionBold}> |
|
Frais de transport |
|
</Text> |
|
<Text style={styles.transactionAmountDisplay}>-58 FCFA</Text> |
|
</View> |
|
<View style={styles.transactionInfoRow}> |
|
<Text style={styles.transactionDate}>2025-02-12</Text> |
|
<Text style={styles.shipmentReference}>BR-11-00010</Text> |
|
</View> |
|
</View> |
|
{/* Additional transaction panels can be added here */} |
|
</View> |
|
|
|
<View style={styles.transactionHistoryList}> |
|
{/* Repeated Transaction Details */} |
|
<View style={styles.transactionDetailsPanel}> |
|
<View style={styles.transactionDetailsRow}> |
|
<Text style={styles.transactionDescriptionBold}> |
|
Frais de transport |
|
</Text> |
|
<Text style={styles.transactionAmountDisplay}>-58 FCFA</Text> |
|
</View> |
|
<View style={styles.transactionInfoRow}> |
|
<Text style={styles.transactionDate}>2025-02-12</Text> |
|
<Text style={styles.shipmentReference}>BR-11-00010</Text> |
|
</View> |
|
</View> |
|
{/* Additional transaction panels can be added here */} |
|
</View> |
|
<View style={styles.transactionHistoryList}> |
|
{/* Repeated Transaction Details */} |
|
<View style={styles.transactionDetailsPanel}> |
|
<View style={styles.transactionDetailsRow}> |
|
<Text style={styles.transactionDescriptionBold}> |
|
Frais de transport |
|
</Text> |
|
<Text style={styles.transactionAmountDisplay}>-58 FCFA</Text> |
|
</View> |
|
<View style={styles.transactionInfoRow}> |
|
<Text style={styles.transactionDate}>2025-02-12</Text> |
|
<Text style={styles.shipmentReference}>BR-11-00010</Text> |
|
</View> |
|
</View> |
|
{/* Additional transaction panels can be added here */} |
|
</View> |
|
<View style={styles.transactionHistoryList}> |
|
{/* Repeated Transaction Details */} |
|
<View style={styles.transactionDetailsPanel}> |
|
<View style={styles.transactionDetailsRow}> |
|
<Text style={styles.transactionDescriptionBold}> |
|
Frais de transport |
|
</Text> |
|
<Text style={styles.transactionAmountDisplay}>-58 FCFA</Text> |
|
</View> |
|
<View style={styles.transactionInfoRow}> |
|
<Text style={styles.transactionDate}>2025-02-12</Text> |
|
<Text style={styles.shipmentReference}>BR-11-00010</Text> |
|
</View> |
|
</View> |
|
{/* Additional transaction panels can be added here */} |
|
</View> |
|
<View style={styles.transactionHistoryList}> |
|
{/* Repeated Transaction Details */} |
|
<View style={styles.transactionDetailsPanel}> |
|
<View style={styles.transactionDetailsRow}> |
|
<Text style={styles.transactionDescriptionBold}> |
|
Frais de transport |
|
</Text> |
|
<Text style={styles.transactionAmountDisplay}>-58 FCFA</Text> |
|
</View> |
|
<View style={styles.transactionInfoRow}> |
|
<Text style={styles.transactionDate}>2025-02-12</Text> |
|
<Text style={styles.shipmentReference}>BR-11-00010</Text> |
|
</View> |
|
</View> |
|
{/* Additional transaction panels can be added here */} |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</ScrollView> |
|
|
|
<Modal |
|
animationType="slide" |
|
transparent={true} |
|
visible={isModalVisible} |
|
onRequestClose={handleCloseModal} |
|
> |
|
<View style={styles.modalContainer}> |
|
<View style={styles.modalContent}> |
|
<RechargeScreen onClose={handleCloseModal} /> |
|
</View> |
|
</View> |
|
</Modal> |
|
</View> |
|
</SafeAreaView> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
safeArea: { |
|
flex: 1, |
|
backgroundColor: '#fff', |
|
}, |
|
safeAreaContent: { |
|
flex: 1, |
|
paddingTop: 0, |
|
}, |
|
container: { |
|
flex: 1, |
|
backgroundColor: '#f0f0f0', |
|
}, |
|
header: { |
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
justifyContent: 'space-between', |
|
paddingHorizontal: 15, |
|
paddingVertical: 10, |
|
backgroundColor: 'white', |
|
borderBottomWidth: 1, |
|
borderBottomColor: '#f0f0f0', |
|
}, |
|
backButton: { |
|
padding: 5, |
|
}, |
|
headerTitle: { |
|
fontSize: fontSize(18), |
|
fontWeight: '600', |
|
textAlign: 'center', |
|
}, |
|
placeholder: { |
|
width: widthUtils(24, 24).width, |
|
}, |
|
balanceCard: { |
|
display: 'flex', |
|
flexDirection: 'column', |
|
width: '100%', |
|
backgroundColor: '#f0f0f0', |
|
}, |
|
sunriseGradientContainer: { |
|
backgroundColor: 'linear-gradient(180deg, rgba(255, 119, 0, 1) 0%, rgba(255, 77, 0, 1) 100%)', |
|
flexDirection: 'column', |
|
alignItems: 'stretch', |
|
}, |
|
timeContainer: { |
|
height: widthUtils(43, 43).height, |
|
paddingTop: 21, |
|
}, |
|
timeContainer2: { |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
}, |
|
timeContainer1: { |
|
flexDirection: 'row', |
|
justifyContent: 'center', |
|
}, |
|
timeDisplay: { |
|
fontSize: fontSize(17), |
|
fontWeight: 'bold', |
|
color: 'white', |
|
}, |
|
timeIndicatorContainer: { |
|
width: widthUtils(10, 124).width, |
|
height: widthUtils(10, 124).height, |
|
}, |
|
timeDisplayContainer: { |
|
width: widthUtils(13,153).width, |
|
height: widthUtils(13,153).height, |
|
}, |
|
balanceWidget: { |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
padding: 9, |
|
}, |
|
balanceText: { |
|
fontSize: fontSize(32), |
|
fontWeight: 'bold', |
|
color: 'white', |
|
}, |
|
balanceImage: { |
|
width: widthUtils(139, 139).width, |
|
height: widthUtils(139, 139).height, |
|
}, |
|
balanceDetailsContainer: { |
|
marginTop: -53, |
|
flexDirection: 'column', |
|
}, |
|
totalBalanceCard: { |
|
paddingLeft: 20, |
|
paddingRight: 20, |
|
paddingTop: 20, |
|
}, |
|
cardContainer: { |
|
backgroundColor: 'white', |
|
borderRadius: 10, |
|
padding: 20, |
|
shadowColor: 'rgba(186, 186, 186, 0.25)', |
|
shadowOffset: { width: 2, height: 4 }, |
|
shadowOpacity: 0.7, |
|
}, |
|
financialInfoContainer: { |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
}, |
|
largeBlackText: { |
|
fontSize: fontSize(36), |
|
fontWeight: 'bold', |
|
color: 'black', |
|
}, |
|
svgContainer: { |
|
width: widthUtils(24, 24).width, |
|
height: widthUtils(24, 24).height, |
|
color: '#019847', |
|
}, |
|
totalSoldInfoContainer: { |
|
marginTop: 7, |
|
}, |
|
totalSoldeText: { |
|
fontSize: fontSize(14), |
|
color: '#7c7c7c', |
|
}, |
|
totalBalanceInfoContainer: { |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
marginTop: 22, |
|
}, |
|
verticalCenteredTextBox: { |
|
flexDirection: 'column', |
|
justifyContent: 'center', |
|
width: '54.21%', |
|
}, |
|
highlightedText: { |
|
fontSize: fontSize(20), |
|
fontWeight: 'bold', |
|
color: '#fe1e00', |
|
}, |
|
expirationInfo: { |
|
fontSize: fontSize(14), |
|
color: '#7c7c7c', |
|
}, |
|
deadlineInfoContainer: { |
|
flexDirection: 'column', |
|
justifyContent: 'center', |
|
width: '45.79%', |
|
}, |
|
deadlineText: { |
|
fontSize: fontSize(20), |
|
fontWeight: 'bold', |
|
color: 'black', |
|
}, |
|
transactionDetailsContainer: { |
|
paddingLeft: 20, |
|
paddingRight: 20, |
|
paddingBottom: 20, |
|
}, |
|
balanceDetailContainer: { |
|
marginTop: 37, |
|
}, |
|
balanceDetailTitle: { |
|
fontSize: fontSize(20), |
|
fontWeight: 'bold', |
|
color: 'black', |
|
marginBottom: 10, |
|
}, |
|
transactionDetailsContainer1: { |
|
flexDirection: 'column', |
|
}, |
|
transactionHistoryList: { |
|
flexDirection: 'column', |
|
}, |
|
transactionDetailsPanel: { |
|
flexDirection: 'column', |
|
padding: 15.5, |
|
borderBottomWidth: 1, |
|
borderBottomColor: '#dddddd', |
|
borderStyle: 'dashed', |
|
backgroundColor: '#FFFFFF', |
|
}, |
|
transactionDetailsRow: { |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
}, |
|
transactionDescriptionBold: { |
|
fontSize: fontSize(15), |
|
fontWeight: 'bold', |
|
color: 'black', |
|
}, |
|
transactionAmountDisplay: { |
|
fontSize: fontSize(24), |
|
fontWeight: 'bold', |
|
color: '#002fa7', |
|
}, |
|
transactionInfoRow: { |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
marginTop: 7, |
|
}, |
|
transactionDate: { |
|
fontSize: fontSize(13), |
|
color: '#7f7e7e', |
|
}, |
|
shipmentReference: { |
|
fontSize: fontSize(13), |
|
color: '#353029', |
|
}, |
|
buttonContainer: { |
|
borderRadius: 25, |
|
width: widthUtils(50, 300).width, |
|
height: widthUtils(50, 300).height, |
|
justifyContent: 'center', |
|
alignItems: 'center', |
|
marginTop: 30, |
|
}, |
|
button: { |
|
width: '100%', |
|
height: '100%', |
|
justifyContent: 'center', |
|
alignItems: 'center', |
|
borderRadius: 25, |
|
}, |
|
buttonText: { |
|
fontSize: fontSize(16), |
|
fontWeight: '600', |
|
color: 'white', |
|
textAlign: 'center', |
|
}, |
|
modalContainer: { |
|
flex: 1, |
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
|
justifyContent: 'flex-end', |
|
}, |
|
modalContent: { |
|
height: '90%', |
|
backgroundColor: '#FFFFFF', |
|
borderTopLeftRadius: 20, |
|
borderTopRightRadius: 20, |
|
}, |
|
}); |
|
|
|
|