Skip to content

I
InvestCustomer
Commit 1c89bb15 by Giang Tran
Options

edit ui

parent a97072be
Showing with 172 additions and 49 deletions
src/Screens/AccountVerification/AccountVerification.js
import React from 'react';
import React, {useState} from 'react';
import AccountVerificationView from './AccountVerificationView';
......
src/Screens/AccountVerification/AccountVerificationView.js
import React from 'react';
import React, {useState} from 'react';
import {
View,
Text,
......
src/Screens/AccountVerification/Tab/BankInfor.js
......@@ -2,12 +2,14 @@ import React from 'react';
import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
import TextField from '../../../components/Input/TextField';
import TextMulti from '../../../components/Input/TextMulti';
import PickerImgUni from '../../../components/Picker/PickerImgUni';
import PickerDate from '../../../components/Picker/PickerDate';
import R from '../../../assets/R';
import Button from '../../../components/Button';
const BankInfor = (props) => {
console.log(props.route.params);
return (
<View
style={{
......@@ -18,16 +20,7 @@ const BankInfor = (props) => {
<TextField title={'Loại thẻ'} onChangeText={(val) => console.log(val)} />
<TextField title={'Số thẻ'} onChangeText={(val) => console.log(val)} />
<PickerDate title={'Ngày cấp'} />
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
flexWrap: 'wrap',
}}>
<PickerImgUni title={'Ảnh mặt trước CMND'} />
<PickerImgUni title={'Ảnh mặt sau CMND'} />
<PickerImgUni title={'Ảnh chữ ký'} />
</View>
<View style={styles.btnSend}>
<Button title={'Xác minh'} />
</View>
......
src/Screens/AccountVerification/Tab/GeneralInfor.js
import React, {useState} from 'react';
import {View, Text, Image, TouchableOpacity, StyleSheet} from 'react-native';
import {
View,
Text,
Image,
TouchableOpacity,
StyleSheet,
Alert,
} from 'react-native';
import R from '../../../assets/R';
import TextField from '../../../components/Input/TextField';
......@@ -7,28 +14,55 @@ import TextMulti from '../../../components/Input/TextMulti';
import PickerDate from '../../../components/Picker/PickerDate';
import PickerImg from '../../../components/Picker/PickerImg';
import {checkFormatArray} from '../../../Config/Functions';
const GeneralInfor = (props) => {
const [email, setEmail] = useState('');
const [sponsorID, setSponsorID] = useState('');
const [lastName, setLastName] = useState('');
const [firstName, setFirstName] = useState('');
const [phone, setPhone] = useState('');
const [adress, setAdress] = useState('');
const [birth, setBirth] = useState(new Date());
const onNextPress = () => {
const titles = ['email', 'tên', 'họ', 'số điện thoại', 'địa chỉ'];
const index = checkFormatArray([email, lastName, firstName, phone, adress]);
console.log(props);
if (index === true) {
props.navigation.navigate('Profile', {
email,
lastName,
firstName,
phone,
adress,
sponsorID,
birth,
});
} else {
Alert.alert('Vui lòng điền ' + titles[index]);
}
};
return (
<View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
<TextField title={'User name'} onChangeText={(val) => console.log(val)} />
<TextField title={'Email'} onChangeText={(val) => setEmail(val)} />
<TextField
title={'Sponsor ID'}
onChangeText={(val) => console.log(val)}
onChangeText={(val) => setSponsorID(val)}
/>
<View style={{flexDirection: 'row'}}>
<View style={{flex: 1}}>
<TextField title={'Tên'} onChangeText={(val) => console.log(val)} />
<TextField title={'Tên'} onChangeText={(val) => setLastName(val)} />
</View>
<View style={{width: 20}} />
<View style={{flex: 1}}>
<TextField title={'Họ'} onChangeText={(val) => console.log(val)} />
<TextField title={'Họ'} onChangeText={(val) => setFirstName(val)} />
</View>
</View>
<TextField
title={'Số điện thoại'}
onChangeText={(val) => console.log(val)}
onChangeText={(val) => setPhone(val)}
/>
<PickerDate
value={birth}
......@@ -36,12 +70,8 @@ const GeneralInfor = (props) => {
title={'Ngày sinh'}
/>
<TextMulti title={'Địa chỉ'} onChangeText={(val) => console.log(val)} />
<TouchableOpacity
onPress={() => {
props.navigation.navigate('Profile');
}}
style={styles.btnNext}>
<TextMulti title={'Địa chỉ'} onChangeText={(val) => setAdress(val)} />
<TouchableOpacity onPress={onNextPress} style={styles.btnNext}>
<Image style={{width: 30, height: 30}} source={R.images.iconRight1} />
</TouchableOpacity>
<View style={{height: 100}} />
......
src/Screens/AccountVerification/Tab/Profile.js
import React from 'react';
import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
import PickerImg from '../../../components/Picker/PickerImg';
import React, {useState} from 'react';
import {
View,
Text,
TouchableOpacity,
Image,
StyleSheet,
Alert,
} from 'react-native';
import PickerImgUni from '../../../components/Picker/PickerImgUni';
import R from '../../../assets/R';
import {checkFormatArray} from '../../../Config/Functions';
const Profile = (props) => {
const [urlFont, setUrlFont] = useState('');
const [urlBack, setUrlBack] = useState('');
const [urlSign, setUrlSign] = useState('');
const onNextPress = () => {
const titles = ['CNND mặt trước', 'CMND mặt sau', 'chữ ký'];
const index = checkFormatArray([urlFont, urlBack, urlSign]);
if (index === true) {
props.navigation.navigate('BankInfor', {
urlFont,
urlBack,
urlSign,
...props.route.params,
});
} else {
Alert.alert('Vui lòng thêm ảnh ' + titles[index]);
}
};
return (
<View>
<Text>Profile screen</Text>
<TouchableOpacity
onPress={() => {
props.navigation.navigate('BankInfor');
}}
style={styles.btnNext}>
<View
style={{
flex: 1,
paddingHorizontal: 10,
paddingTop: 10,
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
flexWrap: 'wrap',
}}>
<PickerImgUni
onSelectImg={(path) => setUrlFont(path)}
title={'Ảnh mặt trước CMND'}
/>
<PickerImgUni
onSelectImg={(path) => setUrlBack(path)}
title={'Ảnh mặt sau CMND'}
/>
<PickerImgUni
onSelectImg={(path) => setUrlSign(path)}
title={'Ảnh chữ ký'}
/>
</View>
<TouchableOpacity onPress={onNextPress} style={styles.btnNext}>
<Image style={{width: 30, height: 30}} source={R.images.iconRight1} />
</TouchableOpacity>
</View>
......
src/assets/images.js
......@@ -55,6 +55,7 @@ const images = {
tradding: require('./images/tradding.png'),
noti: require('./images/noti1.png'),
iconCopy: require('./images/iconCopy.png'),
};
export default images;
src/components/Header/HeaderHome.js
......@@ -34,16 +34,26 @@ const HeaderHome = (props) => {
</ImageBackground>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View style={styles.containerTop}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={styles.containerInfor}>
<Image source={R.images.avartar} style={styles.imgAvatar} />
<View style={styles.wrapRight}>
<Text style={styles.txtName}>Vu Khac Minh</Text>
<View style={styles.row1}>
<Text style={styles.txtlink}>sponsorIDlink</Text>
<TouchableOpacity onPress={() => console.log('Hello')}>
<Image
source={R.images.iconCopy}
style={styles.imgIconCopy}
/>
</TouchableOpacity>
</View>
<View style={styles.row}>
<Text style={styles.txtMoney}> {toPriceVnd(1000000)}</Text>
<Text style={styles.txtTitle}> VNĐ</Text>
</View>
</View>
</View>
<View style={styles.containerMenu}>
<TouchableOpacity
onPress={() => navigate.navigate(CHOOSEMETHOD)}
......@@ -96,10 +106,9 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
containerTop: {
padding: 15,
height: HEIGHTXD(856),
width: '90%',
backgroundColor: R.colors.white,
backgroundColor: 'white',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {
......@@ -115,7 +124,7 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
marginTop: 10,
padding: 10,
},
wraper: {
justifyContent: 'center',
......@@ -127,17 +136,31 @@ const styles = StyleSheet.create({
marginBottom: 10,
resizeMode: 'contain',
},
imgIconCopy: {
width: WIDTHXD(134),
height: HEIGHTXD(134),
resizeMode: 'contain',
},
txt: {
fontSize: getFontXD(36),
color: R.colors.txtMain,
},
txtName: {
fontSize: getFontXD(52),
color: '#00359C',
},
txtlink: {
fontSize: getFontXD(42),
color: '#A2A2A2',
},
imgAvatar: {
width: WIDTHXD(200),
height: WIDTHXD(200),
borderRadius: WIDTHXD(110),
width: WIDTHXD(240),
height: WIDTHXD(240),
borderRadius: WIDTHXD(120),
},
txtMoney: {
fontSize: getFontXD(52),
fontSize: getFontXD(72),
color: '#FFB721',
marginVertical: 5,
fontWeight: 'bold',
......@@ -146,5 +169,30 @@ const styles = StyleSheet.create({
fontSize: getFontXD(42),
color: '#A2A2A2',
fontWeight: 'bold',
marginTop: 5,
marginLeft: 5,
},
wrapRight: {
flex: 1,
paddingHorizontal: 20,
},
containerInfor: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: '#EDEDF1',
flexDirection: 'row',
paddingHorizontal: 20,
},
row: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 5,
},
row1: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
});
src/components/Picker/PickerImgUni.js
......@@ -23,7 +23,7 @@ const options = {
};
const PickerImgUni = (props) => {
const {title, height, width} = props;
const {title, height, width, onSelectImg} = props;
const [isModalVisible, setModalVisible] = useState(false);
const [urlImg, setUrlImg] = useState('');
......@@ -36,6 +36,7 @@ const PickerImgUni = (props) => {
}).then((image) => {
setModalVisible(false);
setUrlImg(image.path);
onSelectImg(image.path);
});
};
......@@ -47,6 +48,7 @@ const PickerImgUni = (props) => {
}).then((image) => {
setModalVisible(false);
setUrlImg(image.path);
onSelectImg(image.path);
});
};
......
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