add acount, cart send

screens/AccountHome.tsx

@@ -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',
+    }
 })