add acount, cart send

This commit is contained in:
2021-03-20 11:40:46 +07:00
parent 96fa44ed43
commit e7dffeda13
2 changed files with 462 additions and 2 deletions

View File

@@ -46,9 +46,17 @@ export default function AccountHome() {
<CustommerInfoChange /> <CustommerInfoChange />
<ListOrder />
<OrderDetail />
<ProductSave /> <ProductSave />
<ProductFavorite /> <ProductFavorite />
<ChangePassword />
</View> </View>
</View> </View>
<PolicyFooter /> <PolicyFooter />
@@ -131,7 +139,7 @@ const CustommerInfoChange = () => {
const [checked, setChecked] = React.useState('male'); const [checked, setChecked] = React.useState('male');
return ( return (
<View style={styles.boxCustommerInfoChange}> <View style={styles.boxCustommerInfoChange}>
<Text style={styles.boxCustommerInfoChangeTitle}>Cập nhật thông tin nhân</Text> <Text style={styles.titleBoxInAccount}>Cập nhật thông tin nhân</Text>
<View style={styles.boxCustommerInfoChangeList}> <View style={styles.boxCustommerInfoChangeList}>
<View style={styles.custommerInfoChangeItem}> <View style={styles.custommerInfoChangeItem}>
<Text style={styles.custommerInfoChangeItemText}>Họ tên</Text> <Text style={styles.custommerInfoChangeItemText}>Họ tên</Text>
@@ -285,6 +293,187 @@ const ProductFavorite = () => {
) )
} }
const ChangePassword = () => {
return (
<View>
<Text style={styles.titleBoxInAccount}>Thay đi mật khẩu</Text>
<View>
<View style={styles.custommerInfoChangeItem}>
<Text style={styles.custommerInfoChangeItemText}>Mật khẩu hiện tại</Text>
<View style={styles.custommerInfoChangeItemContent}>
<TextInput style={styles.custommerInfoChangeItemInput} />
</View>
</View>
<View style={styles.custommerInfoChangeItem}>
<Text style={styles.custommerInfoChangeItemText}>Mật khẩu mới</Text>
<View style={styles.custommerInfoChangeItemContent}>
<TextInput style={styles.custommerInfoChangeItemInput} />
</View>
</View>
<View style={styles.custommerInfoChangeItem}>
<Text style={styles.custommerInfoChangeItemText}>Nhập lại mật khẩu mới</Text>
<View style={styles.custommerInfoChangeItemContent}>
<TextInput style={styles.custommerInfoChangeItemInput} />
</View>
</View>
<View style={styles.custommerInfoChangeItem}>
<TouchableOpacity style={styles.boxCustommerInfoChangeSubmit}>
<Text style={styles.boxCustommerInfoChangeSubmitText}>Thay đi</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
const ListOrder = () => {
return (
<View style={styles.ListOrder}>
<Text style={styles.titleBoxInAccount}>Danh Sách đơn hàng</Text>
<View style={styles.ListOrderList}>
<View style={styles.ListOrderListHeader}>
<Text style={styles.ListOrderListHeaderSt}>Số đơn hàng</Text>
<Text style={styles.ListOrderListHeaderNd}>Giá trị</Text>
<Text style={styles.ListOrderListHeaderRd}>Thời gian</Text>
<Text style={styles.ListOrderListHeaderInfo}>Thông tin</Text>
</View>
<View style={styles.ListOrderItem}>
<View style={styles.ListOrderItemSt}>
<Text style={styles.ListOrderItemStText}>#123456</Text>
<TouchableOpacity style={styles.ListOrderItemStButton}>
<Text style={styles.ListOrderItemStButtonText}>Xem chi tiết</Text>
</TouchableOpacity>
</View>
<Text style={styles.ListOrderItemNd}>100.000.000 đ</Text>
<Text style={styles.ListOrderItemRd}>13-03-2021</Text>
<Text style={styles.ListOrderItemInfo}>Đã hoàn thành</Text>
</View>
<View style={[styles.ListOrderItem, styles.ListOrderItemLast]}>
<View style={styles.ListOrderItemSt}>
<Text style={styles.ListOrderItemStText}>#123457</Text>
<TouchableOpacity style={styles.ListOrderItemStButton}>
<Text style={styles.ListOrderItemStButtonText}>Xem chi tiết</Text>
</TouchableOpacity>
</View>
<Text style={styles.ListOrderItemNd}>100.000.000 đ</Text>
<Text style={styles.ListOrderItemRd}>13-03-2021</Text>
<Text style={styles.ListOrderItemInfo}>Hủy bỏ</Text>
</View>
</View>
</View>
)
}
const OrderDetail = () => {
return (
<View style={styles.boxOrderDetail}>
<Text style={styles.boxOrderDetailNum}>Đơn hàng số #123456</Text>
<Text style={styles.boxOrderDetailTime}><Text style={styles.bold}>Thời gian đt mua: </Text>13-3-2021, 5:00 pm</Text>
<View style={styles.boxOrderDetailInfo}>
<Text style={styles.boxOrderDetailInfoTitle}>Thông tin người mua</Text>
<View style={styles.boxOrderDetailInfoItem}>
<Text style={styles.boxOrderDetailInfoItemTextSt}>Họ tên:</Text>
<Text style={styles.boxOrderDetailInfoItemTextNd}>Hurasoft Test</Text>
</View>
<View style={styles.boxOrderDetailInfoItem}>
<Text style={styles.boxOrderDetailInfoItemTextSt}>Email:</Text>
<Text style={styles.boxOrderDetailInfoItemTextNd}>test@mail.com</Text>
</View>
<View style={styles.boxOrderDetailInfoItem}>
<Text style={styles.boxOrderDetailInfoItemTextSt}>Số điện thoại:</Text>
<Text style={styles.boxOrderDetailInfoItemTextNd}>0912345678</Text>
</View>
<View style={styles.boxOrderDetailInfoItem}>
<Text style={styles.boxOrderDetailInfoItemTextSt}>Đa chỉ:</Text>
<Text style={styles.boxOrderDetailInfoItemTextNd}>30 Nguyên Hồng - Láng Hạ - Đng Đa - HN</Text>
</View>
</View>
<View style={styles.boxOrderDetailList}>
<View style={styles.boxOrderDetailListItem}>
<View style={styles.boxOrderDetailListItemLine}>
<View style={styles.boxOrderDetailListItemLeft}>
<Text style={styles.boxOrderDetailListItemText}>STT</Text>
</View>
<View style={styles.boxOrderDetailListItemRight}>
<Text style={styles.boxOrderDetailListItemText}>1</Text>
</View>
</View>
<View style={styles.boxOrderDetailListItemLine}>
<View style={styles.boxOrderDetailListItemLeft}>
<Text style={styles.boxOrderDetailListItemText}>nh</Text>
</View>
<View style={styles.boxOrderDetailListItemRight}>
<View style={styles.boxOrderDetailListItemImage}>
<Image style={styles.boxOrderDetailListItemImageCt} source={{ uri: 'https://hanoicomputercdn.com/media/product/250_55620_ban_game_k_deck_khung_kim_loai_mat_go_tu_nhien_phu_pu_bong.jpg' }} />
</View>
</View>
</View>
<View style={styles.boxOrderDetailListItemLine}>
<View style={styles.boxOrderDetailListItemLeft}>
<Text style={styles.boxOrderDetailListItemText}>Tên Sản phẩm</Text>
</View>
<View style={styles.boxOrderDetailListItemRight}>
<Text style={[styles.boxOrderDetailListItemText, styles.bold]}>
Bàn Game K-Deck ( Khung Kim Loại , Mặt Gỗ Tự Nhiên Phủ PU Bóng )
</Text>
</View>
</View>
<View style={styles.boxOrderDetailListItemLine}>
<View style={styles.boxOrderDetailListItemLeft}>
<Text style={styles.boxOrderDetailListItemText}>Giá bán</Text>
</View>
<View style={styles.boxOrderDetailListItemRight}>
<Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.000.000 đ</Text>
</View>
</View>
<View style={styles.boxOrderDetailListItemLine}>
<View style={styles.boxOrderDetailListItemLeft}>
<Text style={styles.boxOrderDetailListItemText}>Số lượng</Text>
</View>
<View style={styles.boxOrderDetailListItemRight}>
<Text style={styles.boxOrderDetailListItemText}>1</Text>
</View>
</View>
<View style={styles.boxOrderDetailListItemLine}>
<View style={styles.boxOrderDetailListItemLeft}>
<Text style={styles.boxOrderDetailListItemText}>Tổng</Text>
</View>
<View style={styles.boxOrderDetailListItemRight}>
<Text style={styles.boxOrderDetailListItemText}>30.000.000 đ</Text>
</View>
</View>
</View>
<View style={styles.boxOrderDetailTotal}>
<View style={styles.boxOrderDetailListItemLineTotal}>
<View style={styles.boxOrderTotalItemLeft}>
<Text style={styles.boxOrderDetailListItemText}>Giá trị</Text>
</View>
<View style={styles.boxOrderTotalItemRight}>
<Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.000.000 đ</Text>
</View>
</View>
<View style={styles.boxOrderDetailListItemLineTotal}>
<View style={styles.boxOrderTotalItemLeft}>
<Text style={styles.boxOrderDetailListItemText}>Phí vận chuyển</Text>
</View>
<View style={styles.boxOrderTotalItemRight}>
<Text style={[styles.boxOrderDetailListItemText]}>30.000 đ</Text>
</View>
</View>
<View style={styles.boxOrderDetailListItemLineTotal}>
<View style={styles.boxOrderTotalItemLeft}>
<Text style={styles.boxOrderDetailListItemText}>Tổng giá trị đơn hàng</Text>
</View>
<View style={styles.boxOrderTotalItemRight}>
<Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.030.000 đ</Text>
</View>
</View>
</View>
</View>
</View>
)
}
const winWidth = Dimensions.get('window').width; //full width const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height const winHeight = Dimensions.get('window').height; //full height
const winWidthP10 = winWidth - 20; const winWidthP10 = winWidth - 20;
@@ -421,7 +610,7 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
borderRadius: 5, borderRadius: 5,
}, },
boxCustommerInfoChangeTitle: { titleBoxInAccount: {
fontSize: 16, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 10, marginBottom: 10,
@@ -494,4 +683,179 @@ const styles = StyleSheet.create({
marginBottom: 15, marginBottom: 15,
}, },
listProductSave: {}, listProductSave: {},
ListOrder: {},
ListOrderList: {
width: '100%',
borderColor: '#e1e1e1',
borderWidth: 1,
borderRadius: 5,
padding: 5
},
ListOrderListHeader: {
flexDirection: 'row',
alignItems: 'center',
borderBottomColor: '#e1e1e1',
borderBottomWidth: 1,
height: 40,
},
ListOrderListHeaderSt: {
fontWeight: 'bold',
width: winWidthP10 - 260,
fontSize: 12,
},
ListOrderListHeaderNd: {
fontWeight: 'bold',
width: 90,
fontSize: 12,
},
ListOrderListHeaderRd: {
fontWeight: 'bold',
width: 75,
fontSize: 12,
},
ListOrderListHeaderInfo: {
fontWeight: 'bold',
width: 90,
fontSize: 12,
},
ListOrderItem: {
flexDirection: 'row',
alignItems: 'center',
borderBottomColor: '#e1e1e1',
borderBottomWidth: 1,
paddingVertical: 10,
},
ListOrderItemLast: {
borderBottomWidth: 0,
},
ListOrderItemSt: {
width: winWidthP10 - 260,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
},
ListOrderItemStText: {
fontSize: 12,
marginRight: 6,
},
ListOrderItemStButton: {},
ListOrderItemStButtonText: {
fontSize: 12,
color: '#f78d1c'
},
ListOrderItemNd: {
width: 90,
fontSize: 12,
},
ListOrderItemRd: {
width: 75,
fontSize: 12,
},
ListOrderItemInfo: {
width: 90,
fontSize: 12,
},
boxOrderDetail: {},
boxOrderDetailNum: {
width: '100%',
marginBottom: 15,
fontSize: 21,
fontWeight: 'bold',
textAlign: 'center'
},
boxOrderDetailTime: {
marginBottom: 15,
},
boxOrderDetailInfo: {
borderWidth: 1,
borderRadius: 5,
borderColor: '#e1e1e1',
marginBottom: 20,
padding: 8,
},
boxOrderDetailInfoTitle: {
fontWeight: 'bold',
color: '#f60',
marginBottom: 10,
},
boxOrderDetailInfoItem: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
boxOrderDetailInfoItemTextSt: {
width: 100,
},
boxOrderDetailInfoItemTextNd: {
width: winWidthP10 - 120,
},
boxOrderDetailList: {
borderWidth: 1,
borderRadius: 5,
borderColor: '#e1e1e1',
width: '100%',
flexDirection: 'column',
},
bold: {
fontWeight: 'bold',
},
boxOrderDetailListItem: {
width: '100%',
flexDirection: 'column',
},
boxOrderDetailListItemLine: {
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#e1e1e1',
width: '100%',
},
boxOrderDetailListItemLineTotal: {
width: '100%',
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#e1e1e1',
alignItems: 'center',
},
boxOrderDetailListItemLeft: {
width: 100,
padding: 10,
},
boxOrderDetailListItemText: {},
boxOrderDetailListItemRight: {
width: winWidthP10 - 120,
borderLeftColor: '#e1e1e1',
borderLeftWidth: 1,
padding: 10,
},
boxOrderDetailListItemImage: {
width: 75,
height: 75,
position: 'relative',
},
boxOrderDetailListItemImageCt: {
width: '100%',
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
boxOrderTotalItemLeft: {
width: '50%',
flexDirection: 'row',
justifyContent: 'flex-end',
padding: 10,
},
boxOrderTotalItemRight: {
width: '50%',
flexDirection: 'row',
justifyContent: 'flex-start',
borderLeftColor: '#e1e1e1',
borderLeftWidth: 1,
padding: 10,
},
boxOrderDetailTotal: {
width: '100%',
flexDirection: 'column',
}
}) })

96
screens/CartSend.tsx Normal file
View File

@@ -0,0 +1,96 @@
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 { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
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';
import { ArticleItem } from '../components/article/ArticleItem';
export default function ForgetPassword() {
return (
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.brecrumb}>
<Text style={styles.brecrumbText}>Trang chủ</Text>
<FontAwesome style={styles.brecrumbIcon} name="angle-right" />
<Text style={styles.brecrumbTextLast}>Đt hàng thành công</Text>
</View>
<View style={styles.boxCartSend}>
<Text style={styles.boxCartSendTitle}>Đt hàng thành công</Text>
<Text style={styles.boxCartSendNote}>Cảm ơn quý khách đã đt hàng</Text>
<Text style={styles.boxCartSendNote}>Đơn hàng của quý khách đã đưc gửi thành công. Bộ phận chăm sóc khách hàng của website sẽ liên hệ lại với quý khách thông qua đơn hàng đ hướng dẫn thêm.</Text>
<Text style={styles.boxCartSendThank}>Cảm ơn quý khách !</Text>
</View>
<PolicyFooter />
<Social />
<ShowroomList />
<FooterInfo />
</ScrollView>
</SafeAreaView>
)
}
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',
},
brecrumb: {
display: 'flex',
width: winWidth,
paddingLeft: 10,
paddingRight: 10,
flexDirection: 'row',
height: 18,
alignItems: 'center',
marginTop: 10,
marginBottom: 10,
},
brecrumbText: {
fontSize: 13,
color: '#222',
},
brecrumbTextLast: {
fontSize: 13,
color: '#b7b7b7',
},
brecrumbIcon: {
fontSize: 13,
color: '#222',
marginLeft: 6,
marginRight: 6
},
boxCartSend: {},
boxCartSendTitle: {
marginBottom: 20,
fontSize: 24,
fontWeight: 'bold',
color: '#243a76',
},
boxCartSendNote: {
marginBottom: 10,
},
boxCartSendThank: {},
})