861 lines
33 KiB
TypeScript
861 lines
33 KiB
TypeScript
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';
|
|
import { ShowProductItemSave } from '../components/product/productItem';
|
|
|
|
export default function AccountHome() {
|
|
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ài khoản của bạn</Text>
|
|
</View>
|
|
|
|
<View style={styles.accountBox}>
|
|
<View style={styles.accountBoxHeader}>
|
|
<View style={styles.accountBoxHeaderIcon}>
|
|
<FontAwesome style={styles.accountBoxHeaderIconFont} name="user" />
|
|
</View>
|
|
<View style={styles.accountBoxHeaderInfo}>
|
|
<Text style={styles.accountBoxHeaderInfoText}>Tài khoản</Text>
|
|
<Text style={styles.accountBoxHeaderInfoName}>Hurasoft test</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<MenuAccount />
|
|
|
|
<View style={styles.accountBoxContent}>
|
|
<Text style={styles.accountBoxTextHome}>Bạn đang ở trang tài khoản. Vui lòng chọn XEM THÔNG TIN để xem các mục.</Text>
|
|
|
|
<CustommerInfo />
|
|
|
|
<CustommerInfoChange />
|
|
|
|
<ListOrder />
|
|
|
|
<OrderDetail />
|
|
|
|
<ProductSave />
|
|
|
|
<ProductFavorite />
|
|
|
|
<ChangePassword />
|
|
|
|
|
|
</View>
|
|
</View>
|
|
<PolicyFooter />
|
|
|
|
<Social />
|
|
|
|
<ShowroomList />
|
|
|
|
<FooterInfo />
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const MenuAccount = () => {
|
|
const [showMenuAccount, setShowMenuAccount] = useState(true)
|
|
return (
|
|
<View style={styles.accountBoxSelec}>
|
|
<TouchableOpacity style={styles.accountBoxSelecBox} onPress={() => setShowMenuAccount(!showMenuAccount)}>
|
|
<Text style={styles.accountBoxSelecBoxText}>Xem thông tin</Text>
|
|
<FontAwesome style={styles.accountBoxSelecBoxIcon} name="angle-down" />
|
|
</TouchableOpacity>
|
|
<View style={showMenuAccount ? styles.accountBoxSelecList : [styles.accountBoxSelecList, styles.active]}>
|
|
<Pressable style={styles.accountNameTab}>
|
|
<FontAwesome style={styles.accountNameTabIcon} name="user" />
|
|
<Text style={styles.accountNameTabText}>Thông tin tài khoản</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.accountNameTab}>
|
|
<FontAwesome style={styles.accountNameTabIcon} name="list" />
|
|
<Text style={styles.accountNameTabText}>Quản lý đơn hàng</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.accountNameTab}>
|
|
<FontAwesome style={styles.accountNameTabIcon} name="eye" />
|
|
<Text style={styles.accountNameTabText}>Sản phẩm đã xem</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.accountNameTab}>
|
|
<FontAwesome style={styles.accountNameTabIcon} name="archive" />
|
|
<Text style={styles.accountNameTabText}>Sản phẩm đã lưu</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.accountNameTab}>
|
|
<FontAwesome style={styles.accountNameTabIcon} name="comment" />
|
|
<Text style={styles.accountNameTabText}>Sản phẩm bạn đã đánh giá</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.accountNameTab}>
|
|
<FontAwesome style={styles.accountNameTabIcon} name="heart" />
|
|
<Text style={styles.accountNameTabText}>Sản phẩm bạn đã thích</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.accountNameTab}>
|
|
<FontAwesome style={styles.accountNameTabIcon} name="lock" />
|
|
<Text style={styles.accountNameTabText}>Thay đổi mật khẩu</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.accountNameTab}>
|
|
<FontAwesome style={styles.accountNameTabIcon} name="power-off" />
|
|
<Text style={styles.accountNameTabText}>Logout</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const CustommerInfo = () => {
|
|
return (
|
|
<View style={styles.custommerInfo}>
|
|
<Text style={styles.custommerInfoItemHeader}>Thông tin tài khoản</Text>
|
|
<Text style={styles.custommerInfoItem}>Họ tên: Hurasoft Test</Text>
|
|
<Text style={styles.custommerInfoItem}>Giới tính: Nữ</Text>
|
|
<Text style={styles.custommerInfoItem}>Email: test@mail.com</Text>
|
|
<Text style={styles.custommerInfoItem}>Địa chỉ: 30 Nguyên Hồng - Láng Hạ - Đống Đa - HN</Text>
|
|
<Text style={styles.custommerInfoItem}>Tỉnh/Thành phố: Hà Nội</Text>
|
|
<Text style={styles.custommerInfoItem}>Số điện thoại: 0912345678</Text>
|
|
<TouchableOpacity>
|
|
<Text style={styles.custommerInfoButtonText}>Chỉnh sửa thông tin cá nhân</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const CustommerInfoChange = () => {
|
|
const [selectedProvince, setSelectedProvince] = useState();
|
|
const [checked, setChecked] = React.useState('male');
|
|
return (
|
|
<View style={styles.boxCustommerInfoChange}>
|
|
<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>
|
|
<View style={styles.custommerInfoChangeItemContent}>
|
|
<TextInput style={styles.custommerInfoChangeItemInput} />
|
|
</View>
|
|
</View>
|
|
<View style={styles.custommerInfoChangeItem}>
|
|
<Text style={styles.custommerInfoChangeItemText}>Giới tính</Text>
|
|
<View style={styles.custommerInfoChangeItemContent}>
|
|
<View style={styles.registerItemSex}>
|
|
<View style={styles.registerItemSexItem}>
|
|
<Text style={styles.registerItemSexText}>Nam</Text>
|
|
<View style={styles.registerItemSexRadio}>
|
|
<RadioButton color={'#243a76'} value={'male'} status={checked === 'male' ? 'checked' : 'unchecked'} onPress={() => setChecked('male')} />
|
|
</View>
|
|
</View>
|
|
<View style={styles.registerItemSexItem}>
|
|
<Text style={styles.registerItemSexText}>Nữ</Text>
|
|
<View style={styles.registerItemSexRadio}>
|
|
<RadioButton color={'#243a76'} value={'female'} status={checked === 'female' ? 'checked' : 'unchecked'} onPress={() => setChecked('female')} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.custommerInfoChangeItem}>
|
|
<Text style={styles.custommerInfoChangeItemText}>Địa chỉ email</Text>
|
|
<View style={styles.custommerInfoChangeItemContent}>
|
|
<TextInput style={styles.custommerInfoChangeItemInput} />
|
|
</View>
|
|
</View>
|
|
<View style={styles.custommerInfoChangeItem}>
|
|
<Text style={styles.custommerInfoChangeItemText}>Địa chỉ nhà</Text>
|
|
<View style={styles.custommerInfoChangeItemContent}>
|
|
<TextInput style={styles.custommerInfoChangeItemInput} />
|
|
</View>
|
|
</View>
|
|
<View style={styles.custommerInfoChangeItem}>
|
|
<Text style={styles.custommerInfoChangeItemText}>Tỉnh/TP</Text>
|
|
<View style={styles.custommerInfoChangeItemContent}>
|
|
<Picker
|
|
style={styles.picker}
|
|
itemStyle={styles.onePickerItem}
|
|
selectedValue={selectedProvince}
|
|
onValueChange={(itemValue, itemIndex) =>
|
|
setSelectedProvince(itemValue)
|
|
}
|
|
>
|
|
<Picker.Item label="Hà Nội" value="1" />
|
|
<Picker.Item label="Đà Nẵng" value="2" />
|
|
<Picker.Item label="Hải Phòng" value="3" />
|
|
<Picker.Item label="TP Hồ Chí Minh" value="4" />
|
|
</Picker>
|
|
</View>
|
|
</View>
|
|
<View style={styles.custommerInfoChangeItem}>
|
|
<Text style={styles.custommerInfoChangeItemText}>Điện thoại cố định</Text>
|
|
<View style={styles.custommerInfoChangeItemContent}>
|
|
<TextInput style={styles.custommerInfoChangeItemInput} />
|
|
</View>
|
|
</View>
|
|
<View style={styles.custommerInfoChangeItem}>
|
|
<Text style={styles.custommerInfoChangeItemText}>Điện thoại di động</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 productData = [
|
|
{
|
|
id: 1,
|
|
productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
|
|
productSKU: 'TESTSKU',
|
|
productImage: {
|
|
small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
|
|
medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
|
|
large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
|
|
original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
|
|
},
|
|
price: 30000000,
|
|
marketPrice: 50000000,
|
|
quantity: 1,
|
|
summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
|
|
},
|
|
{
|
|
id: 2,
|
|
productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
|
|
productSKU: 'TESTSKU',
|
|
productImage: {
|
|
small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
|
|
medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
|
|
large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
|
|
original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
|
|
},
|
|
price: 25000000,
|
|
marketPrice: 50000000,
|
|
quantity: 0,
|
|
summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
|
|
},
|
|
]
|
|
|
|
const ProductSave = () => {
|
|
const itemProductStyle = {
|
|
width: '100%',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e8e8e8',
|
|
position: 'relative',
|
|
}
|
|
return (
|
|
<View style={styles.boxProductSave}>
|
|
<Text style={styles.boxProductSaveTitle}>Sản phẩm mua sau</Text>
|
|
<View style={styles.listProductSave}>
|
|
{
|
|
productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
|
|
productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
|
|
/>)
|
|
}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const ProductFavorite = () => {
|
|
const itemProductStyle = {
|
|
width: '100%',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e8e8e8',
|
|
position: 'relative',
|
|
}
|
|
return (
|
|
<View style={styles.boxProductSave}>
|
|
<Text style={styles.boxProductSaveTitle}>Sản phẩm Bạn đã thích</Text>
|
|
<View style={styles.listProductSave}>
|
|
{
|
|
productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
|
|
productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
|
|
/>)
|
|
}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
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;
|
|
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
|
|
},
|
|
accountBox: {
|
|
marginBottom: 20,
|
|
width: winWidth,
|
|
paddingHorizontal: 10,
|
|
},
|
|
accountBoxHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 20,
|
|
},
|
|
accountBoxHeaderIcon: {
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
overflow: 'hidden',
|
|
backgroundColor: '#008445',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: 20,
|
|
},
|
|
accountBoxHeaderIconFont: {
|
|
fontSize: 40,
|
|
color: '#fff',
|
|
lineHeight: 40,
|
|
},
|
|
accountBoxHeaderInfo: {
|
|
width: winWidthP10 - 80,
|
|
},
|
|
accountBoxHeaderInfoText: {
|
|
marginBottom: 10,
|
|
},
|
|
accountBoxHeaderInfoName: {
|
|
fontSize: 16,
|
|
textTransform: 'uppercase',
|
|
fontWeight: 'bold'
|
|
},
|
|
accountBoxSelec: {
|
|
marginBottom: 20,
|
|
},
|
|
accountBoxSelecBox: {
|
|
borderRadius: 3,
|
|
borderWidth: 1,
|
|
borderColor: '#999',
|
|
paddingHorizontal: 10,
|
|
height: 40,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
accountBoxSelecBoxText: {
|
|
textTransform: 'uppercase',
|
|
fontWeight: 'bold',
|
|
},
|
|
accountBoxSelecBoxIcon: {},
|
|
accountBoxSelecList: {
|
|
width: '100%',
|
|
borderRadius: 3,
|
|
borderWidth: 1,
|
|
borderColor: '#999',
|
|
display: 'none',
|
|
},
|
|
active: {
|
|
display: 'flex',
|
|
},
|
|
accountNameTab: {
|
|
padding: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
accountNameTabIcon: {
|
|
fontSize: 24,
|
|
color: '#7b7b7b',
|
|
marginRight: 8,
|
|
},
|
|
accountNameTabText: {},
|
|
accountBoxContent: {},
|
|
accountBoxTextHome: {},
|
|
custommerInfo: {
|
|
},
|
|
custommerInfoItemHeader: {
|
|
marginBottom: 10,
|
|
fontWeight: 'bold',
|
|
},
|
|
custommerInfoItem: {
|
|
marginBottom: 10,
|
|
},
|
|
custommerInfoButtonText: {
|
|
color: '#ed1b24'
|
|
},
|
|
boxCustommerInfoChange: {},
|
|
boxCustommerInfoChangeList: {
|
|
padding: 10,
|
|
borderColor: '#e1e1e1',
|
|
borderWidth: 1,
|
|
borderRadius: 5,
|
|
},
|
|
titleBoxInAccount: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
marginBottom: 10,
|
|
},
|
|
custommerInfoChangeItem: {
|
|
marginBottom: 15,
|
|
flexDirection: 'row',
|
|
alignItems: 'center'
|
|
},
|
|
custommerInfoChangeItemText: {
|
|
width: 148,
|
|
},
|
|
custommerInfoChangeItemContent: {
|
|
width: winWidthP10 - 170,
|
|
},
|
|
custommerInfoChangeItemInput: {
|
|
width: '100%',
|
|
height: 36,
|
|
borderRadius: 3,
|
|
borderWidth: 1,
|
|
borderColor: '#e1e1e1',
|
|
paddingHorizontal: 10,
|
|
},
|
|
registerItemSex: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
registerItemSexItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginRight: 20,
|
|
},
|
|
registerItemSexText: {
|
|
marginRight: 5,
|
|
},
|
|
registerItemSexRadio: {
|
|
width: 36,
|
|
height: 36,
|
|
borderColor: '#333',
|
|
borderWidth: 1,
|
|
borderRadius: 18,
|
|
},
|
|
picker: {
|
|
height: 46,
|
|
width: '100%',
|
|
},
|
|
onePickerItem: {
|
|
height: 46,
|
|
color: '#222',
|
|
fontSize: 14,
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
},
|
|
boxCustommerInfoChangeSubmit: {
|
|
width: 150,
|
|
height: 36,
|
|
backgroundColor: 'red',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: 5,
|
|
},
|
|
boxCustommerInfoChangeSubmitText: {
|
|
color: '#fff'
|
|
},
|
|
boxProductSave: {},
|
|
boxProductSaveTitle: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
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',
|
|
}
|
|
}) |