ducht/App_nagakaws
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

them cac trang cart, tai khoan

Browse Source
This commit is contained in:
ducht
2021-05-17 17:03:05 +07:00
parent c5efa8e6d4
commit 67735a8417
41 changed files with 6203 additions and 1553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
screens/CustomerInfo.tsx Normal file
View File

@@ -0,0 +1,289 @@
import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { useNavigation } from '@react-navigation/native';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import { TextInput } from 'react-native-gesture-handler';
import { RadioButton, Checkbox } from 'react-native-paper';
import { Picker } from '@react-native-picker/picker';
export default function CustomerInfo() {
return (
<SafeAreaView style={styles.container}>
<ScrollView>
<HeaderAccountOrderList />
<CustomerInfoContent />
</ScrollView>
</SafeAreaView>
)
}
const HeaderAccountOrderList = () => {
const navigation = useNavigation();
return (
<View style={styles.headerAOL}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
<FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
</TouchableOpacity>
<Text style={styles.headerAOLTitle}>Thông tin tài khoản</Text>
</View>
)
}
const CustomerInfoContent = () => {
const [openModalCusInfoChange, setOpenModalCusInfoChange] = useState(false);
return (
<View style={styles.boxCustommer}>
<View style={styles.boxCustommerItem}>
<TouchableOpacity onPress={() => setOpenModalCusInfoChange(true)} style={styles.boxCustommerBt}>
<Text style={styles.boxCustommerTextLeft}>Họ tên</Text>
<View style={styles.boxCustommerCtRight}>
<Text style={styles.boxCustommerTextRight}>Nguyễn Quỳnh</Text>
<Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
</View>
</TouchableOpacity>
</View>
<View style={styles.boxCustommerItem}>
<TouchableOpacity style={styles.boxCustommerBt}>
<Text style={styles.boxCustommerTextLeft}>Giới tính</Text>
<View style={styles.boxCustommerCtRight}>
<Text style={styles.boxCustommerTextRight}>Nữ</Text>
<Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
</View>
</TouchableOpacity>
</View>
<View style={styles.boxCustommerItem}>
<TouchableOpacity style={styles.boxCustommerBt}>
<Text style={styles.boxCustommerTextLeft}>Địa chỉ email</Text>
<View style={styles.boxCustommerCtRight}>
<Text style={styles.boxCustommerTextRight}>quynhnt@gmail.com</Text>
<Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
</View>
</TouchableOpacity>
</View>
<View style={styles.boxCustommerItem}>
<TouchableOpacity style={styles.boxCustommerBt}>
<Text style={styles.boxCustommerTextLeft}>Địa chỉ nhà</Text>
<View style={styles.boxCustommerCtRight}>
<Text style={styles.boxCustommerTextRight}>100 Láng Hạ, Đống Đa</Text>
<Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
</View>
</TouchableOpacity>
</View>
<View style={styles.boxCustommerItem}>
<TouchableOpacity style={styles.boxCustommerBt}>
<Text style={styles.boxCustommerTextLeft}>Tỉnh / TP</Text>
<View style={styles.boxCustommerCtRight}>
<Text style={styles.boxCustommerTextRight}>Hà Nội</Text>
<Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
</View>
</TouchableOpacity>
</View>
<View style={styles.boxCustommerItem}>
<TouchableOpacity style={styles.boxCustommerBt}>
<Text style={styles.boxCustommerTextLeft}>Điện thoại</Text>
<View style={styles.boxCustommerCtRight}>
<Text style={styles.boxCustommerTextRight}>0912345678</Text>
<Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
</View>
</TouchableOpacity>
</View>
<View style={styles.boxCustommerItem}>
<TouchableOpacity style={styles.boxCustommerBt}>
<Text style={styles.boxCustommerTextLeft}>Thay đổi mật khẩu</Text>
<View style={styles.boxCustommerCtRight}>
<Text style={styles.boxCustommerTextRight}></Text>
<Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
</View>
</TouchableOpacity>
</View>
<Modal visible={openModalCusInfoChange} animationType="slide" transparent={true} onRequestClose={() => { setOpenModalCusInfoChange(!openModalCusInfoChange); }}>
<View style={styles.cusInfoContent}>
<Pressable onPress={() => setOpenModalCusInfoChange(!openModalCusInfoChange)} style={styles.cusInfoContentBg}>
</Pressable>
<View style={styles.cusInfoContentct}>
<View style={styles.cusInfoContentctHead}>
<Text style={styles.cusInfoContentctHeadText}>Họ tên</Text>
<TouchableOpacity style={styles.cusInfoContentctHeadBt} onPress={() => setOpenModalCusInfoChange(!openModalCusInfoChange)}>
<Ionicons style={styles.cusInfoContentctHeadBtIcon} name="close-outline" />
</TouchableOpacity>
</View>
<View style={styles.cusInfoContentctIp}>
<Text style={styles.cusInfoContentctIpText}>Họ tên</Text>
<TextInput style={styles.cusInfoContentctIpInput} value="Nguyễn quỳnh" />
</View>
<TouchableOpacity style={styles.cusInfoContentctBtSubmit}>
<Text style={styles.cusInfoContentctBtSubmitText}>Thay đổi</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
)
}
const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const winWidthP10 = winWidth - 20;
const halfWinWidth = winWidth / 2;
const ratio = winWidthP10 / 850; //541 is actual image width
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
},
headerAOL: {
width: winWidth,
padding: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
headerAOLBack: {
width: 40,
height: 40,
flexDirection: 'row',
alignItems: 'center',
},
headerAOLBackIcon: {
fontSize: 24,
},
headerAOLSearch: {
width: 40,
height: 40,
flexDirection: 'row',
alignItems: 'center',
},
headerAOLSearchIcon: {
fontSize: 24,
},
headerAOLTitle: {
width: winWidth - 60,
textAlign: 'center',
fontWeight: '700',
},
headerAOLChat: {
width: 40,
height: 40,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
},
headerAOLChatIcon: {
fontSize: 24,
},
GreenColor: {
color: '#008445',
},
OrangeColor: {
color: '#FE9923',
},
RedColor: {
color: '#D8262F',
},
boxCustommer: {
width: winWidth,
paddingTop: 10,
backgroundColor: '#f2f2f2',
},
boxCustommerItem: {
width: winWidth,
borderBottomWidth: 1,
borderBottomColor: '#f2f2f2',
},
boxCustommerBt: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 10,
height: 40,
},
boxCustommerTextLeft: {},
boxCustommerCtRight: {
flexDirection: 'row',
alignItems: 'center',
},
boxCustommerTextRight: {
color: '#777777',
marginRight: 10,
},
boxCustommerIcon: {
fontSize: 18,
color: '#777'
},
cusInfoContent: {
width: winWidth,
height: winHeight,
backgroundColor: 'rgba(0,0,0,0)'
},
cusInfoContentBg: {
width: winHeight,
height: winHeight - 236,
backgroundColor: 'rgba(0,0,0,0.5)',
},
cusInfoContentct: {
width: winWidth,
paddingHorizontal: 10,
backgroundColor: '#fff',
height: 236,
},
cusInfoContentctHead: {
marginBottom: 30,
position: 'relative',
padding: 10,
},
cusInfoContentctHeadText: {
width: '100%',
textAlign: 'center',
fontSize: 16,
fontWeight: '700'
},
cusInfoContentctHeadBt: {
position: 'absolute',
top: 10,
right: 10,
zIndex: 2,
},
cusInfoContentctHeadBtIcon: {
fontSize: 18,
},
cusInfoContentctIp: {
borderBottomColor: '#ababab',
borderBottomWidth: 1,
marginBottom: 20,
},
cusInfoContentctIpText: {
marginBottom: 10,
fontWeight: '500',
color: '#008445'
},
cusInfoContentctIpInput: {
width: '100%',
height: 40,
},
cusInfoContentctBtSubmit: {
width: '100%',
height: 40,
backgroundColor: '#D8262F',
borderRadius: 5,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
cusInfoContentctBtSubmitText: {
textTransform: 'uppercase',
fontWeight: '700',
color: '#fff'
},
})