Skip to content

I
InvestCustomer
Commit b3dca354 by Giang Tran
Options

done account screen

parent b7b38036
Showing with 456 additions and 186 deletions
src/Screens/Account/AccountView.js
import React from 'react';
import {View, Text} from 'react-native';
import {View, Text, StyleSheet, Image} from 'react-native';
import HeaderDrawer from '../../components/Header/HeaderDrawer';
import {WIDTHXD, HEIGHTXD} from '../../Config/Functions';
import R from '../../assets/R';
const AccountView = (props) => {
return (
<View>
<Text>Account screen</Text>
<HeaderDrawer />
<View style={styles.container}>
<View style={styles.containerItem}>
<Image source={R.images.iconUser} style={styles.imgIcon} />
<Text>Thông tin cá nhân</Text>
</View>
<View style={styles.containerItem}>
<Image source={R.images.iconUserAccuracy} style={styles.imgIcon} />
<Text>Xác thực tài khoản</Text>
</View>
<View style={styles.containerItem}>
<Image source={R.images.iconList} style={styles.imgIcon} />
<Text>Các khoản thanh toán</Text>
</View>
<View style={styles.containerItem}>
<Image source={R.images.iconRose} style={styles.imgIcon} />
<Text>Hoa hồng</Text>
</View>
<View style={styles.containerItem}>
<Image source={R.images.iconWallet} style={styles.imgIcon} />
<Text>Tiền thưởng đội nhóm</Text>
</View>
<View style={styles.containerItem}>
<Image source={R.images.moneyteam} style={styles.imgIcon} />
<Text>Đối tác của tôi</Text>
</View>
</View>
</View>
);
};
export default AccountView;
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingHorizontal: 20,
marginTop: 20,
justifyContent: 'space-between',
flexWrap: 'wrap',
},
containerItem: {
width: WIDTHXD(450),
height: HEIGHTXD(450),
backgroundColor: 'white',
marginTop: 20,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 2.84,
elevation: 3,
},
imgIcon: {
width: WIDTHXD(216),
height: HEIGHTXD(216),
marginBottom: 10,
},
});
src/Screens/Home/Footer.js 0 → 100644
import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import R from '../../assets/R';
import {WIDTHXD, HEIGHTXD, getFontXD, toPriceVnd} from '../../Config/Functions';
const Footer = (props) => {
return (
<View style={{marginHorizontal: 20, marginTop: 10}}>
<View style={styles.container}>
<View style={styles.wraperImg}>
<Image source={R.images.moneyteam} style={styles.imgIcon} />
</View>
<View style={{flex: 1, paddingHorizontal: 15}}>
<Text style={styles.txt}>Doanh thu của đội</Text>
<Text style={styles.txtMoney}>$ {toPriceVnd(1500000)} VNĐ</Text>
</View>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Icon name={'right'} size={20} color={'#707070'} />
</View>
</View>
<View style={styles.container}>
<View style={styles.wraperImg}>
<Image source={R.images.moneysupport} style={styles.imgIcon} />
</View>
<View style={{flex: 1, paddingHorizontal: 15}}>
<Text style={styles.txt}>Doanh thu nhà tài trợ</Text>
<Text style={styles.txtMoney}>$ {toPriceVnd(1500000)} VNĐ</Text>
</View>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Icon name={'right'} size={20} color={'#707070'} />
</View>
</View>
<View style={styles.container}>
<View style={styles.wraperImg}>
<Image source={R.images.moneyinvest} style={styles.imgIcon} />
</View>
<View style={{flex: 1, paddingHorizontal: 15}}>
<Text style={styles.txt}>Đầu từ</Text>
<Text style={styles.txtMoney}>$ {toPriceVnd(1500000)} VNĐ</Text>
</View>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Icon name={'right'} size={20} color={'#707070'} />
</View>
</View>
<View style={{height: 20}} />
</View>
);
};
export default Footer;
const styles = StyleSheet.create({
imgIcon: {
width: WIDTHXD(150),
height: HEIGHTXD(150),
resizeMode: 'contain',
},
wraperImg: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#DFE7F5',
width: HEIGHTXD(200),
height: HEIGHTXD(200),
borderRadius: 10,
},
container: {
backgroundColor: R.colors.white,
padding: 10,
borderRadius: 10,
flexDirection: 'row',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 2.84,
elevation: 3,
justifyContent: 'space-between',
marginBottom: 10,
},
txt: {
color: '#8F909E',
fontSize: getFontXD(36),
},
txtMoney: {
fontSize: getFontXD(42),
color: R.colors.black,
marginTop: 5,
},
});
src/Screens/Home/HomeView.js
import React from 'react';
import {View, Text, ImageBackground, StyleSheet, StatusBar} from 'react-native';
import {
View,
Text,
ImageBackground,
StyleSheet,
ScrollView,
} from 'react-native';
import HeaderHome from '../../components/Header/HeaderHome';
import {HEIGHT, HEIGHTXD} from '../../Config/Functions';
import Footer from './Footer';
import {HEIGHT, HEIGHTXD, toPriceVnd, getFontXD} from '../../Config/Functions';
import R from '../../assets/R';
const HomeView = (props) => {
return (
<View>
<View style={{flex: 1}}>
<HeaderHome />
<View style={styles.body}>
<ScrollView
showsVerticalScrollIndicator={false}
style={styles.containerBody}>
<View style={styles.containerMenu}>
<View style={styles.row}>
<View style={styles.row}>
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>Rút tiền</Text>
<Text style={styles.txtMoney}>
{' '}
{toPriceVnd(1000000)} VNĐ{' '}
</Text>
</View>
<View
style={{width: 0.5, backgroundColor: R.colors.borderGray}}
/>
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>My Payout</Text>
<Text style={styles.txtMoney}>
{' '}
{toPriceVnd(1000000)} VNĐ{' '}
</Text>
</View>
</View>
</View>
<View style={{height: 0.5, backgroundColor: R.colors.borderGray}} />
<View style={styles.row}>
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>Hoa hồng</Text>
<Text style={styles.txtMoney1}>
+ {toPriceVnd(1000000)} VNĐ{' '}
</Text>
</View>
<View
style={{width: 0.5, backgroundColor: R.colors.borderGray}}
/>
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>Thưởng</Text>
<Text style={styles.txtMoney1}>
{' '}
+ {toPriceVnd(1000000)} VNĐ{' '}
</Text>
</View>
</View>
</View>
<Footer />
</ScrollView>
</View>
</View>
);
};
export default HomeView;
const styles = StyleSheet.create({});
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: '#DFE7F5',
marginTop: 60,
borderTopLeftRadius: 60,
},
containerBody: {
marginTop: -40,
},
containerMenu: {
height: 160,
backgroundColor: 'white',
marginVertical: 10,
marginHorizontal: 20,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 2.84,
elevation: 3,
},
row: {
flexDirection: 'row',
flex: 1,
},
itemMenu: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
txtTitle: {
fontSize: getFontXD(36),
color: R.colors.txtMain2,
textTransform: 'uppercase',
},
txtMoney: {
fontSize: getFontXD(46),
color: R.colors.black,
marginTop: 5,
},
txtMoney1: {
fontSize: getFontXD(46),
color: '#FF6A7C',
marginTop: 5,
},
});
src/assets/colors.js
......@@ -29,7 +29,8 @@ const colors = {
unfilledColor: 'rgba(255, 255, 255, 0.5)',
bgActive: '#DDEEFF',
contentComment: '#DAE9FF',
txtMain:'#1777F1',
txtMain: '#3F4E91',
txtMain2: '#6981EC',
accent: '#A60014',
primary: '#0AC4BA',
......
src/assets/images.js
......@@ -7,6 +7,20 @@ const images = {
iconDeposit: require('./images/deposit.png'),
iconAddUser: require('./images/addUser.png'),
headerHome: require('./images/Headerhome.png'),
iconTransfer: require('./images/transfer.png'),
iconHistory: require('./images/history.png'),
moneyinvest: require('./images/moneyinvest.png'),
moneysupport: require('./images/moneysupport.png'),
moneyteam: require('./images/moneyteam.png'),
bgHeader: require('./images/bgheader2.png'),
iconMenu: require('./images/iconmenu.png'),
iconUser: require('./images/iconUser1.png'),
iconUserAccuracy: require('./images/iconUserAccuracy.png'),
iconList: require('./images/iconList.png'),
iconRose: require('./images/iconRose2.png'),
iconWallet: require('./images/iconWallet2.png'),
moneyteam: require('./images/iconTeam1.png'),
};
export default images;
src/assets/images/deposit.png
src/assets/images/deposit.png

2.68 KB | W: | H:

src/assets/images/deposit.png

8.63 KB | W: | H:

src/assets/images/deposit.png
src/assets/images/deposit.png
src/assets/images/deposit.png
src/assets/images/deposit.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/withdraw.png
src/assets/images/withdraw.png

2.64 KB | W: | H:

src/assets/images/withdraw.png

7.76 KB | W: | H:

src/assets/images/withdraw.png
src/assets/images/withdraw.png
src/assets/images/withdraw.png
src/assets/images/withdraw.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Header/HeaderAvatar.js deleted 100644 → 0
import React, {useEffect} from 'react';
import {View, Text, Image, StatusBar, StyleSheet} from 'react-native';
import R from '../../assets/R';
import {getFontXD} from '../../config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import SnackBar from '../SnackBar'
import { connect } from "react-redux";
const HeaderHome = (props) => {
const {fullname}=props.user
return (
<LinearGradient
start={{x: 0, y: 0}}
end={{x: 0, y: 1}}
colors={['#0062E1', '#22AEFB']}>
<StatusBar barStyle="light-content" backgroundColor={'#0062E1'} />
<SnackBar />
<View style={styles.container}>
<Image source={R.images.avartar} style={styles.img} />
<View style={{marginLeft: 10}}>
<Text style={styles.txtTitle}>{fullname}</Text>
<Text style={styles.txt}>Nhân viên kinh doanh</Text>
</View>
</View>
</LinearGradient>
);
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {})(HeaderHome);
const styles = StyleSheet.create({
container: {
height: 65,
paddingHorizontal: 10,
flexDirection: 'row',
alignItems: 'center',
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.white,
fontWeight: 'bold',
},
txt: {fontSize: getFontXD(36), color: R.colors.white},
img: {
width: 50,
height: 50,
borderRadius: 50,
borderWidth: 1,
borderColor: R.colors.white,
},
});
src/components/Header/HeaderDrawer.js 0 → 100644
import React, {useEffect} from 'react';
import {
View,
Text,
Image,
StatusBar,
StyleSheet,
SafeAreaView,
ImageBackground,
TouchableOpacity,
Platform,
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/AntDesign';
const HeaderHome = (props) => {
return (
<ImageBackground style={styles.img} source={R.images.bgHeader}>
<StatusBar backgroundColor="transparent" translucent={true} />
<View style={styles.headerContainer}>
<Image source={R.images.iconMenu} style={styles.imgIcon} />
<Text style={styles.txtTitle}>Tài khoản</Text>
<View />
</View>
</ImageBackground>
);
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {})(HeaderHome);
const styles = StyleSheet.create({
img: {
height: Platform.OS == 'ios' ? HEIGHTXD(330) : HEIGHTXD(400),
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
headerContainer: {
height: 55,
width: '100%',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 20,
justifyContent: 'space-between',
},
imgIcon: {
width: 25,
height: 20,
},
txtTitle: {
fontSize: getFontXD(52),
color: R.colors.white,
fontWeight: 'bold',
},
});
src/components/Header/HeaderHome.js
......@@ -7,17 +7,62 @@ import {
StyleSheet,
SafeAreaView,
ImageBackground,
TouchableOpacity,
Platform,
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT} from '../../Config/Functions';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import {HEIGHTXD} from '../../Config/Functions';
import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';
const HeaderHome = (props) => {
return (
<ImageBackground style={styles.img} source={R.images.headerHome}>
<StatusBar backgroundColor="transparent" translucent={true} />
</ImageBackground>
<View style={styles.container}>
<ImageBackground style={styles.img} source={R.images.headerHome}>
<StatusBar backgroundColor="transparent" translucent={true} />
</ImageBackground>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View style={styles.containerTop}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image source={R.images.avartar} style={styles.imgAvatar} />
<Text style={styles.txtMoney}> {toPriceVnd(1000000)}</Text>
<Text style={styles.txtTitle}> VNĐ</Text>
</View>
<View style={styles.containerMenu}>
<TouchableOpacity
onPress={() => console.log('hello')}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconDeposit} />
<Text style={styles.txt}>Nạp tiền</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => console.log('hello')}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconWithdraw} />
<Text style={styles.txt}>Rút tiền</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => console.log('hello')}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconTransfer} />
<Text style={styles.txt}>Chuyển khoản</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => console.log('hello')}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconHistory} />
<Text style={styles.txt}>Lịch sử</Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
};
......@@ -30,17 +75,65 @@ const mapStateToProps = (state) => {
export default connect(mapStateToProps, {})(HeaderHome);
const styles = StyleSheet.create({
container: {
height: HEIGHT(65),
paddingHorizontal: 10,
flexDirection: 'row',
paddingTop: 15,
backgroundColor: R.colors.red,
},
container: {},
img: {
height: HEIGHTXD(788),
height: Platform.OS == 'ios' ? HEIGHTXD(728) : HEIGHTXD(808),
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
containerTop: {
padding: 15,
height: HEIGHTXD(856),
width: '90%',
backgroundColor: R.colors.white,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 2.84,
elevation: 3,
marginTop: -180,
},
containerMenu: {
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
marginTop: 10,
},
wraper: {
justifyContent: 'center',
alignItems: 'center',
},
imgIcon: {
width: WIDTHXD(134),
height: HEIGHTXD(134),
marginBottom: 10,
resizeMode: 'contain',
},
txt: {
fontSize: getFontXD(36),
color: R.colors.txtMain,
},
imgAvatar: {
width: WIDTHXD(200),
height: WIDTHXD(200),
borderRadius: WIDTHXD(110),
},
txtMoney: {
fontSize: getFontXD(52),
color: '#FFB721',
marginVertical: 5,
fontWeight: 'bold',
},
txtTitle: {
fontSize: getFontXD(42),
color: '#A2A2A2',
fontWeight: 'bold',
},
});
src/components/Header/HeaderSearch.js deleted 100644 → 0
import React, {useEffect, useState} from 'react';
import {
View,
Text,
Image,
StatusBar,
StyleSheet,
TouchableOpacity,
TextInput,
Platform
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, WIDTH, HEIGHTXD,HEIGHT} from '../../config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/Ionicons';
import Block from '../Block';
import {useNavigation} from '@react-navigation/native';
import SnackBar from '../SnackBar'
const HeaderSearch = (props) => {
const {title,onChangText} = props;
const navigate = useNavigation();
const [openSearch, setOpenSearch] = useState(false);
const toggleSearch = () => {
onChangText('')
setOpenSearch(!openSearch);
};
return (
<LinearGradient
start={{x: 0, y: 0}}
end={{x: 0, y: 1}}
colors={['#0062E1', '#22AEFB']}>
<StatusBar barStyle="light-content" backgroundColor={'#0062E1'} />
<SnackBar/>
<View style={styles.container}>
<View style={{flex: 1}}>
<Block center row>
<TouchableOpacity onPress={() => navigate.goBack()}>
<Icon name={'chevron-back'} size={30} color={R.colors.white} />
</TouchableOpacity>
{openSearch ? (
<TextInput
style={styles.txtInput}
onChangeText={(val) => onChangText(val)}
/>
) : (
<Text style={styles.txtTitle}>{title ? title : ''} </Text>
)}
</Block>
</View>
<TouchableOpacity onPress={toggleSearch}>
{openSearch ? (
<Icon
style={[styles.btnIcon, {marginLeft: 10, marginRight: 20}]}
name={'refresh-outline'}
size={20}
color={R.colors.white}
/>
) : (
<Icon
style={[styles.btnIcon, {marginLeft: 10, marginRight: 20}]}
name={'search-sharp'}
size={20}
color={R.colors.white}
/>
)}
</TouchableOpacity>
</View>
</LinearGradient>
);
};
export default HeaderSearch;
const styles = StyleSheet.create({
container: {
height: 55,
paddingHorizontal: 10,
flexDirection: 'row',
alignItems: 'center',
},
txtTitle: {
fontSize: getFontXD(52),
color: R.colors.white,
fontWeight: 'bold',
marginLeft: 5,
},
txt: {fontSize: getFontXD(36), color: R.colors.white},
img: {
width: 50,
height: 50,
borderRadius: 50,
borderWidth: 1,
borderColor: R.colors.white,
},
btnIcon: {
backgroundColor: R.colors.lightBlue2,
padding: 5,
borderRadius: 20,
},
txtInput: {
backgroundColor: R.colors.white,
flex: 1,
height: Platform.OS == "ios" ? HEIGHT(30) : HEIGHT(35),
fontSize: getFontXD(42),
borderRadius: 10,
},
});
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