them cac trang cart, tai khoan
This commit is contained in:
@@ -5,7 +5,7 @@ import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView,
|
||||
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';
|
||||
@@ -17,91 +17,136 @@ 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>
|
||||
<HeaderAccountHome />
|
||||
|
||||
<ListContentAccount />
|
||||
|
||||
<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>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const MenuAccount = () => {
|
||||
const [showMenuAccount, setShowMenuAccount] = useState(true)
|
||||
const HeaderAccountHome = () => {
|
||||
const navigation = useNavigation();
|
||||
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 style={styles.headerAccountHome}>
|
||||
<Image style={styles.headerAccountHomeImg} source={require('../assets/images/bg-account.png')} />
|
||||
<View style={styles.headerAccountHomeCt}>
|
||||
<View style={styles.headerAccountHomeCtLeft}>
|
||||
<Image style={styles.headerAccountHomeCtCusImg} source={require('../assets/images/cus-img-account.png')} />
|
||||
<View style={styles.headerAccountHomeCtCusInfo}>
|
||||
<Text style={styles.headerAccountHomeCtCusName}>Nguyễn Quỳnh</Text>
|
||||
<Text style={styles.headerAccountHomeCtCusXu}>Xu 10</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.headerAccountHomeCtRight}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('SettingAccount')} style={styles.headerAccountHomeCtSetting}>
|
||||
<Ionicons style={styles.headerAccountHomeCtSettingIcon} name="settings-outline" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ListContentAccount = () => {
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<View style={styles.boxListItemAcc}>
|
||||
<View style={styles.boxListItemAccList}>
|
||||
<View style={[styles.boxListItemAccItem, styles.borderBot]}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('AccountOrderList')} style={styles.boxListItemAccBt}>
|
||||
<View style={styles.boxListItemAccItemLeft}>
|
||||
<Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon1.png')} />
|
||||
<Text style={styles.boxListItemAccItemLeftText}>Đơn hàng của tôi</Text>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItemRight}>
|
||||
<Text style={styles.boxListItemAccItemRightText}>Xem tất cả</Text>
|
||||
<Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItem}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('AccountProductBought')} style={styles.boxListItemAccBt}>
|
||||
<View style={styles.boxListItemAccItemLeft}>
|
||||
<Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon2.png')} />
|
||||
<Text style={styles.boxListItemAccItemLeftText}>Sản phẩm bạn đã mua</Text>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItemRight}>
|
||||
<Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccList}>
|
||||
<View style={[styles.boxListItemAccItem, styles.borderBot]}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('AccountProductViewHistory')} style={styles.boxListItemAccBt}>
|
||||
<View style={styles.boxListItemAccItemLeft}>
|
||||
<Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon3.png')} />
|
||||
<Text style={styles.boxListItemAccItemLeftText}>Sản phẩm bạn đã xem</Text>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItemRight}>
|
||||
<Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={[styles.boxListItemAccItem, styles.borderBot]}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('AccountProductFavorite')} style={styles.boxListItemAccBt}>
|
||||
<View style={styles.boxListItemAccItemLeft}>
|
||||
<Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon4.png')} />
|
||||
<Text style={styles.boxListItemAccItemLeftText}>Sản phẩm yêu thích</Text>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItemRight}>
|
||||
<Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={[styles.boxListItemAccItem, styles.borderBot]}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('AccountProductSave')} style={styles.boxListItemAccBt}>
|
||||
<View style={styles.boxListItemAccItemLeft}>
|
||||
<Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon5.png')} />
|
||||
<Text style={styles.boxListItemAccItemLeftText}>Sản phẩm mua sau</Text>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItemRight}>
|
||||
<Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItem}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('AccountCoin')} style={styles.boxListItemAccBt}>
|
||||
<View style={styles.boxListItemAccItemLeft}>
|
||||
<Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon6.png')} />
|
||||
<Text style={styles.boxListItemAccItemLeftText}>Quản lý Xu của tôi</Text>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItemRight}>
|
||||
<Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccList}>
|
||||
<View style={[styles.boxListItemAccItem, styles.borderBot]}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('CustomerInfo')} style={styles.boxListItemAccBt}>
|
||||
<View style={styles.boxListItemAccItemLeft}>
|
||||
<Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon7.png')} />
|
||||
<Text style={styles.boxListItemAccItemLeftText}>Tài khoản</Text>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItemRight}>
|
||||
<Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItem}>
|
||||
<TouchableOpacity style={styles.boxListItemAccBt}>
|
||||
<View style={styles.boxListItemAccItemLeft}>
|
||||
<Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon8.png')} />
|
||||
<Text style={styles.boxListItemAccItemLeftText}>Trung tậm trợ giúp</Text>
|
||||
</View>
|
||||
<View style={styles.boxListItemAccItemRight}>
|
||||
<Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
@@ -214,109 +259,6 @@ function formatCurrency(price: string | number) {
|
||||
return priceConvert.substring(0, len - 3);
|
||||
}
|
||||
|
||||
const ShowProductItemSave = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number, privateStyle: object }) => {
|
||||
|
||||
const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity, privateStyle } = props;
|
||||
const discount = Math.ceil(100 - (price / marketPrice * 100));
|
||||
|
||||
|
||||
return (
|
||||
<View style={[styles.itemProduct, privateStyle]}>
|
||||
<TouchableOpacity style={styles.pProductDelete}>
|
||||
<FontAwesome style={styles.pProductDeleteIcon} name="times" />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.pBloxImgProduct}>
|
||||
<Text style={styles.pSkuProduct}>{productSKU}</Text>
|
||||
<Text style={styles.pDiscountProduct}>-{discount}%</Text>
|
||||
<View style={styles.pBloxImgProductBao}>
|
||||
<Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
|
||||
</View>
|
||||
</View>
|
||||
<Text style={styles.pNameProduct} numberOfLines={2}>
|
||||
{productName}
|
||||
</Text>
|
||||
<Text style={styles.pSummaryProduct}>{summary}</Text>
|
||||
<Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
|
||||
<Text style={styles.oldPriceProduct}>{formatCurrency(marketPrice)} đ</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const productData = [
|
||||
{
|
||||
id: 1,
|
||||
productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
|
||||
productSKU: 'TESTSKU',
|
||||
productImage: {
|
||||
small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
},
|
||||
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: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
|
||||
productSKU: 'TESTSKU',
|
||||
productImage: {
|
||||
small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
},
|
||||
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>
|
||||
@@ -350,154 +292,6 @@ const ChangePassword = () => {
|
||||
)
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -511,30 +305,110 @@ const styles = StyleSheet.create({
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
brecrumb: {
|
||||
display: 'flex',
|
||||
headerAccountHome: {
|
||||
width: winWidth,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
position: 'relative',
|
||||
},
|
||||
headerAccountHomeImg: {
|
||||
width: '100%',
|
||||
height: 122,
|
||||
},
|
||||
headerAccountHomeCt: {
|
||||
width: '100%',
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
bottom: 18,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
headerAccountHomeCtLeft: {
|
||||
flexDirection: 'row',
|
||||
height: 18,
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
headerAccountHomeCtCusImg: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
marginRight: 10,
|
||||
borderRadius: 28,
|
||||
overflow: 'hidden'
|
||||
},
|
||||
headerAccountHomeCtCusInfo: {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
headerAccountHomeCtCusName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#fff',
|
||||
marginBottom: 5,
|
||||
},
|
||||
headerAccountHomeCtCusXu: {
|
||||
fontSize: 13,
|
||||
fontWeight: '300',
|
||||
color: '#fff'
|
||||
},
|
||||
headerAccountHomeCtRight: {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
headerAccountHomeCtSetting: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
backgroundColor: '#fff',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
headerAccountHomeCtSettingIcon: {
|
||||
fontSize: 18,
|
||||
},
|
||||
boxListItemAcc: {
|
||||
width: winWidth,
|
||||
backgroundColor: '#f2f2f2',
|
||||
},
|
||||
boxListItemAccList: {
|
||||
width: '100%',
|
||||
backgroundColor: '#fff',
|
||||
marginBottom: 10,
|
||||
},
|
||||
brecrumbText: {
|
||||
fontSize: 13,
|
||||
color: '#222',
|
||||
borderBot: {
|
||||
borderBottomColor: '#e1e1e1',
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
brecrumbTextLast: {
|
||||
fontSize: 13,
|
||||
color: '#b7b7b7',
|
||||
boxListItemAccItem: {
|
||||
width: '100%',
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
brecrumbIcon: {
|
||||
fontSize: 13,
|
||||
color: '#222',
|
||||
marginLeft: 6,
|
||||
marginRight: 6
|
||||
boxListItemAccBt: {
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
height: 48,
|
||||
},
|
||||
boxListItemAccItemLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxListItemAccItemImg: {
|
||||
width: 20,
|
||||
marginRight: 10,
|
||||
},
|
||||
boxListItemAccItemLeftText: {
|
||||
fontWeight: '500',
|
||||
},
|
||||
boxListItemAccItemRight: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxListItemAccItemRightText: {
|
||||
marginRight: 10,
|
||||
},
|
||||
boxListItemAccItemIcon: {
|
||||
fontSize: 24,
|
||||
color: '#777'
|
||||
},
|
||||
accountBox: {
|
||||
marginBottom: 20,
|
||||
@@ -574,47 +448,6 @@ const styles = StyleSheet.create({
|
||||
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: {
|
||||
@@ -700,287 +533,4 @@ const styles = StyleSheet.create({
|
||||
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',
|
||||
},
|
||||
itemProduct: {
|
||||
padding: 10,
|
||||
},
|
||||
pBloxImgProduct: {
|
||||
position: 'relative',
|
||||
marginBottom: 10,
|
||||
},
|
||||
pSkuProduct: {
|
||||
position: 'absolute',
|
||||
fontSize: 12,
|
||||
color: '#e00',
|
||||
top: 0,
|
||||
left: 0,
|
||||
lineHeight: 36,
|
||||
zIndex: 10,
|
||||
},
|
||||
pDiscountProduct: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
backgroundColor: '#e00',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
lineHeight: 36,
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
fontSize: 12,
|
||||
zIndex: 10,
|
||||
},
|
||||
pBloxImgProductBao: {
|
||||
position: 'relative',
|
||||
paddingTop: '100%',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
pImgProduct: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: '5%',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
maxHeight: 500,
|
||||
width: '90%',
|
||||
},
|
||||
pNameProduct: {
|
||||
height: 40,
|
||||
lineHeight: 20,
|
||||
overflow: 'hidden',
|
||||
fontSize: 14,
|
||||
color: '#111',
|
||||
marginBottom: 5,
|
||||
},
|
||||
priceProduct: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#f10000',
|
||||
marginBottom: 5,
|
||||
},
|
||||
oldPriceProduct: {
|
||||
fontSize: 14,
|
||||
color: '#b7b7b7',
|
||||
marginBottom: 5,
|
||||
height: 24,
|
||||
lineHeight: 24,
|
||||
overflow: 'hidden',
|
||||
textDecorationLine: 'line-through',
|
||||
},
|
||||
pBottonProduct: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
marginTop: 5,
|
||||
},
|
||||
pStatusProduct: {
|
||||
fontSize: 13,
|
||||
color: '#00a706',
|
||||
},
|
||||
pCartProduct: {
|
||||
fontSize: 13,
|
||||
color: '#333',
|
||||
},
|
||||
pStatusProductIcon: {
|
||||
fontSize: 15,
|
||||
},
|
||||
pCartProductIcon: {
|
||||
fontSize: 15
|
||||
},
|
||||
pProductDelete: {},
|
||||
pProductDeleteIcon: {
|
||||
fontSize: 18,
|
||||
},
|
||||
pSummaryProduct: {
|
||||
marginBottom: 10,
|
||||
lineHeight: 20,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user