Commit b9b6a73c by Giang Tran

edit header home

parent d6f6d10a
......@@ -59,6 +59,8 @@ const images = {
noti: require('./images/noti1.png'),
iconCopy: require('./images/iconCopy.png'),
iconIntroduct: require('./images/iconIntroduct.png'),
iconBtnGreen: require('./images/iconBtnGreen.png'),
iconCheck: require('./images/iconCheck.png'),
};
export default images;
......@@ -26,12 +26,85 @@ import {
TRANSFER,
HISTORY,
PROFILE,
AccountVerification,
} from '../../routers/ScreenNames';
const HeaderHome = (props) => {
const renderWallet = (status) => {
const navigate = useNavigation();
if (status == 3)
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={styles.containerWallet}>
<Text style={styles.txtWallet}>Tài khon ví</Text>
<View style={{flexDirection: 'row'}}>
<Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
<Text style={styles.txtUnit}>Đ</Text>
</View>
</View>
<View style={{width: 1, backgroundColor: '#EDEDF1', height: '100%'}} />
<View style={styles.containerWallet}>
<Text style={styles.txtWallet}>Tài khon CQG</Text>
<View style={{flexDirection: 'row'}}>
<Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
<Text style={styles.txtUnit}>Đ</Text>
</View>
</View>
</View>
);
if (status == 4)
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={styles.containerWallet}>
<Text style={styles.txtWallet}>Tài khon ví</Text>
<View style={{flexDirection: 'row'}}>
<Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
<Text style={styles.txtUnit}>Đ</Text>
</View>
</View>
<View style={{width: 1, backgroundColor: '#EDEDF1', height: '100%'}} />
<View style={styles.containerWallet}>
<TouchableOpacity style={styles.btn}>
<Text style={styles.txtWhite}>M tài khon tht</Text>
</TouchableOpacity>
</View>
</View>
);
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<TouchableOpacity
disabled={status == 2 ? true : false}
onPress={() => navigate.navigate(AccountVerification)}>
<ImageBackground
imageStyle={{borderRadius: 10}}
style={{
width: 320,
height: 60,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
}}
source={R.images.iconBtnGreen}>
<Text style={{fontSize: getFontXD(52), color: 'white'}}>
{status == 2 ? 'Chờ xác minh' : 'Xác minh tài khoản'}
</Text>
</ImageBackground>
</TouchableOpacity>
</View>
);
};
console.log();
const renderLabel = (status) => {
if (status == 1) return <Text style={{color: '#E3434F'}}>Chưa xác minh</Text>;
if (status == 2) return <Text style={{color: '#FFB721'}}>Ch xác minh</Text>;
if (status == 3) return <Text style={{color: '#17B217'}}>Đã xác minh</Text>;
};
const HeaderHome = (props) => {
const navigate = useNavigation();
console.log(props.user.status);
const copyToClipboard = () => {
Alert.alert('Đã sao chép!');
......@@ -43,13 +116,25 @@ const HeaderHome = (props) => {
<ImageBackground style={styles.img} source={R.images.headerHome}>
<StatusBar backgroundColor="transparent" translucent={true} />
</ImageBackground>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={styles.containerTop}>
<View style={styles.containerInfor}>
<Image source={R.images.avartar} style={styles.imgAvatar} />
<View style={styles.wrapRight}>
<TouchableOpacity onPress={() => navigate.navigate(PROFILE)}>
<Text style={styles.txtName}>{props.user.fullname}</Text>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={styles.txtName}>{props.user.fullname}</Text>
{props.user.status == 3 ? (
<Image
source={R.images.iconCheck}
style={{width: 20, height: 20, marginLeft: 20}}
/>
) : null}
</View>
</TouchableOpacity>
<View style={styles.row1}>
......@@ -61,18 +146,13 @@ const HeaderHome = (props) => {
/>
</TouchableOpacity>
</View>
{renderLabel(props.user.status)}
</View>
</View>
{/* <View style={styles.row}>
<Text style={styles.txtMoney}>
{' '}
{props.user.current_money == 0
? 0
: toPriceVnd(props.user.current_money)}
</Text>
<Text style={styles.txtTitle}> Đ</Text>
</View> */}
<View style={styles.wrapWallet}>
{renderWallet(props.user.status)}
</View>
<View style={styles.containerMenu}>
<TouchableOpacity
onPress={() => navigate.navigate(CHOOSEMETHOD)}
......@@ -116,7 +196,12 @@ export default connect(mapStateToProps, {})(HeaderHome);
const styles = StyleSheet.create({
container: {},
wrapWallet: {
height: 80,
width: '100%',
borderBottomWidth: 1,
borderBottomColor: '#EDEDF1',
},
img: {
height: Platform.OS == 'ios' ? HEIGHTXD(728) : HEIGHTXD(808),
width: '100%',
......@@ -125,9 +210,9 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
containerTop: {
backgroundColor: 'white',
height: HEIGHTXD(856),
width: '90%',
backgroundColor: 'white',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {
......@@ -165,6 +250,11 @@ const styles = StyleSheet.create({
fontSize: getFontXD(36),
color: R.colors.txtMain,
},
txtWallet: {
fontSize: getFontXD(36),
color: R.colors.txtMain,
marginBottom: 5,
},
txtName: {
fontSize: getFontXD(52),
color: '#00359C',
......@@ -214,4 +304,38 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
},
containerWallet: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
txtMoney: {
fontSize: getFontXD(46),
color: '#FFB721',
},
txtUnit: {
fontSize: getFontXD(46),
marginLeft: 10,
color: '#A2A2A2',
},
txtWhite: {
fontSize: getFontXD(36),
color: R.colors.white,
textTransform: 'uppercase',
fontWeight: 'bold',
},
btn: {
paddingHorizontal: 10,
paddingVertical: 10,
backgroundColor: R.colors.main,
borderRadius: 10,
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
});
......@@ -48,7 +48,7 @@ function MyStack(props) {
headerStatusBarHeight: 0,
}}
headerMode={'none'}
initialRouteName={ScreenName.PACKETCQG}>
initialRouteName={ScreenName.AUTHEN}>
<Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
<Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />
<Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment