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

add acount, cart send

Browse Source
This commit is contained in:
ducht
2021-03-20 11:40:46 +07:00
parent 96fa44ed43
commit e7dffeda13
2 changed files with 462 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
screens/AccountHome.tsx
View File

@@ -46,9 +46,17 @@ export default function AccountHome() {
<CustommerInfoChange />
<ListOrder />
<OrderDetail />
<ProductSave />
<ProductFavorite />
<ChangePassword />
</View>
</View>
<PolicyFooter />
@@ -131,7 +139,7 @@ const CustommerInfoChange = () => {
const [checked, setChecked] = React.useState('male');
return (
<View style={styles.boxCustommerInfoChange}>
<Text style={styles.boxCustommerInfoChangeTitle}>Cập nhật thông tin cá nhân</Text>
<Text style={styles.titleBoxInAccount}>Cập nhật thông tin cá nhân</Text>
<View style={styles.boxCustommerInfoChangeList}>
<View style={styles.custommerInfoChangeItem}>
<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ọ và 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 winHeight = Dimensions.get('window').height; //full height
const winWidthP10 = winWidth - 20;
@@ -421,7 +610,7 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderRadius: 5,
},
boxCustommerInfoChangeTitle: {
titleBoxInAccount: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 10,
@@ -494,4 +683,179 @@ const styles = StyleSheet.create({
marginBottom: 15,
},
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 để có 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: {},
})