1743 lines
66 KiB
TypeScript
1743 lines
66 KiB
TypeScript
import * as React from 'react';
|
||
import { useState } from 'react';
|
||
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
|
||
import { LinearGradient } from 'expo-linear-gradient';
|
||
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
||
import EditScreenInfo from '../components/EditScreenInfo';
|
||
import { Text, View } from '../components/Themed';
|
||
import { TextInput } from 'react-native-gesture-handler';
|
||
import { useNavigation } from '@react-navigation/native';
|
||
import Swiper from 'react-native-swiper';
|
||
import { Picker } from '@react-native-picker/picker';
|
||
import { RadioButton, Checkbox } from 'react-native-paper';
|
||
|
||
export default function ProductDetail() {
|
||
return (
|
||
<SafeAreaView style={styles.container}>
|
||
<ScrollView>
|
||
|
||
<SliderImageProductDetail />
|
||
|
||
<DetailContentTop />
|
||
|
||
<BuyComboDetail />
|
||
|
||
<ProductDetailSpec />
|
||
|
||
<ProductDetailDes />
|
||
|
||
<ProductReview />
|
||
|
||
<ProductDetailComment />
|
||
|
||
<ProductCompare />
|
||
|
||
<ProductDetailFixBot />
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
const SliderImageProductDetail = () => {
|
||
const imageSlider = [
|
||
{
|
||
img: require('../assets/images/product.png'),
|
||
},
|
||
{
|
||
img: require('../assets/images/product.png'),
|
||
},
|
||
{
|
||
img: require('../assets/images/product.png'),
|
||
},
|
||
]
|
||
return (
|
||
<View style={styles.sliderImgDetail}>
|
||
<Swiper style={styles.sliderSwipperImgDetail} autoplay={true} showsButtons={false} index={3000}
|
||
showsPagination={true}
|
||
paginationStyle={{ position: 'absolute', left: 0, bottom: 15, }}
|
||
dotStyle={{ width: 10, height: 10, borderRadius: 5, marginHorizontal: 5, backgroundColor: 'rgba(0,0,0,0.2)' }}
|
||
activeDotStyle={{ width: 10, height: 10, borderRadius: 5, marginHorizontal: 5, backgroundColor: 'rgba(0,0,0,0.8)' }}
|
||
>
|
||
{
|
||
imageSlider.map((item, index) => {
|
||
return (<View key={index} style={styles.itemSliderImgDetail}><Image style={styles.imgSliderImgDetail} source={item.img} /></View>);
|
||
})
|
||
}
|
||
</Swiper>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const DetailContentTop = () => {
|
||
const [openKhuyenMai, setOpenKhuyenMai] = useState(false);
|
||
const [openDacTinh, setOpenDacTinh] = useState(false);
|
||
const [openDichVu, setOpenDichVu] = useState(false);
|
||
const [openConFig, setOpenConFig] = useState(false);
|
||
return (
|
||
<View style={styles.boxDetailContentTop}>
|
||
<View style={styles.boxDetailContentTopSt}>
|
||
<Text style={styles.boxDetailContentName}>Điều hòa Super Fantastic Nagakawa NS–C(A)24SK15 - Hàng Chính Hãng</Text>
|
||
<View style={styles.boxDetailContentTopRate}>
|
||
<View style={styles.boxDetailContentTopRate}>
|
||
<Image source={require('../assets/images/star5.png')} />
|
||
<Text>34</Text>
|
||
</View>
|
||
<View style={styles.boxDetailContentTopShare}>
|
||
<Ionicons style={styles.boxDetailContentTopShareIcon} name="share-social-outline" />
|
||
</View>
|
||
</View>
|
||
<View style={styles.boxFlastSaleHomeFirstAllPrice}>
|
||
<View style={styles.boxFlastSaleHomeFirstPrice}>
|
||
<Text style={styles.boxFlastSaleHomeFirstPriceName}>Giá sốc online</Text>
|
||
<Text style={styles.boxFlastSaleHomeFirstPriceText}>4.100.000đ</Text>
|
||
</View>
|
||
<View style={styles.boxFlastSaleHomeFirstPriceOld}>
|
||
<Text style={styles.boxFlastSaleHomeFirstOldPrice}>4.500.000đ</Text>
|
||
<Text style={styles.boxFlastSaleHomeFirstDiscount}>-30%</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.boxFlastSaleHomeFirstSaleQuan}>
|
||
<View style={styles.boxFlastSaleHomeFirstSaleQuanLeft}>
|
||
<View style={styles.boxFlastSaleHomeFirstSaleQuanLeftCt}>
|
||
<View style={styles.boxFlastSaleHomeFirstSaleQuanLeftDown}></View>
|
||
<Text style={styles.boxFlastSaleHomeFirstSaleQuanLeftText}>Đã bán 6</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.boxFlastSaleHomeFirstSaleQuanRight}>
|
||
<View style={styles.boxFlastSaleHomeFirstSaleQuanRightCt}>
|
||
<Text style={styles.boxFlastSaleHomeFirstSaleQuanRightText}>Đã bán</Text>
|
||
<Text style={styles.boxFlastSaleHomeFirstSaleQuanRightTextRed}>6</Text>
|
||
<Text style={styles.boxFlastSaleHomeFirstSaleQuanRightText}>/ 30 sản phẩm</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View style={styles.boxFlastSaleHomeFirstTime}>
|
||
<Text style={styles.boxFlastSaleHomeFirstTimeTitle}>Kết thúc trong</Text>
|
||
<View style={styles.boxFlastSaleHomeFirstTimeList}>
|
||
<View style={styles.boxFlastSaleHomeFirstTimeItem}>
|
||
<View style={styles.boxFlastSaleHomeFirstItemCt}>
|
||
<Text style={styles.boxFlastSaleHomeFirstTimeNum}>04</Text>
|
||
</View>
|
||
<Text style={styles.boxFlastSaleHomeFirstTimeText}>Giờ</Text>
|
||
</View>
|
||
<Text style={styles.boxFlastSaleHomeFirstTimeTextChia}>:</Text>
|
||
<View style={styles.boxFlastSaleHomeFirstTimeItem}>
|
||
<View style={styles.boxFlastSaleHomeFirstItemCt}>
|
||
<Text style={styles.boxFlastSaleHomeFirstTimeNum}>08</Text>
|
||
</View>
|
||
<Text style={styles.boxFlastSaleHomeFirstTimeText}>Phút</Text>
|
||
</View>
|
||
<Text style={styles.boxFlastSaleHomeFirstTimeTextChia}>:</Text>
|
||
<View style={styles.boxFlastSaleHomeFirstTimeItem}>
|
||
<View style={styles.boxFlastSaleHomeFirstItemCt}>
|
||
<Text style={styles.boxFlastSaleHomeFirstTimeNum}>56</Text>
|
||
</View>
|
||
<Text style={styles.boxFlastSaleHomeFirstTimeText}>Giây</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View style={styles.boxDetailContentTopShowPop}>
|
||
<Text style={styles.boxDetailContentTopTextBold}>Khuyến mãi</Text>
|
||
<Text style={styles.boxDetailContentTopText} numberOfLines={1}>Quà tặng trị giá 3.800.000</Text>
|
||
<TouchableOpacity onPress={() => setOpenKhuyenMai(true)} style={styles.boxDetailContentTopButton}>
|
||
<Ionicons style={styles.boxDetailContentTopButtonIcon} name="chevron-forward-outline" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
<View style={styles.boxDetailContentTopShowPopNd}>
|
||
<View style={styles.boxDetailContentTopShowPopNdCt}>
|
||
<View style={styles.boxDetailContentTopShowPopNdCtLeft}>
|
||
<Text style={styles.boxDetailContentTopShowPopNdCtTb}>Đặc tính</Text>
|
||
<Text style={styles.boxDetailContentTopShowPopNdCtT}>Mã sản phẩm, Tình trạng</Text>
|
||
</View>
|
||
<TouchableOpacity onPress={() => setOpenDacTinh(true)} style={styles.boxDetailContentTopButton}>
|
||
<Ionicons style={styles.boxDetailContentTopButtonIcon} name="chevron-forward-outline" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
<View style={styles.boxDetailContentTopShowPopNdCt}>
|
||
<View>
|
||
<Text style={styles.boxDetailContentTopShowPopNdCtTb}>Dịch vụ</Text>
|
||
<View style={styles.boxDetailContentTopShowPopNdCtImgCt}>
|
||
<Image style={styles.boxDetailContentTopShowPopNdCtImg} source={require('../assets/images/box-return.png')} />
|
||
<Text style={styles.boxDetailContentTopShowPopNdCtT}>Mã sản phẩm, Tình trạng</Text>
|
||
</View>
|
||
</View>
|
||
<TouchableOpacity onPress={() => setOpenDichVu(true)} style={styles.boxDetailContentTopButton}>
|
||
<Ionicons style={styles.boxDetailContentTopButtonIcon} name="chevron-forward-outline" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
<View style={styles.boxDetailContentTopShowPop}>
|
||
<Text style={styles.boxDetailContentTopTextBold}>Lựa chọn</Text>
|
||
<Text style={styles.boxDetailContentTopText} numberOfLines={1}>Công xuất làm lạnh</Text>
|
||
<TouchableOpacity onPress={() => setOpenConFig(true)} style={styles.boxDetailContentTopButton}>
|
||
<Ionicons style={styles.boxDetailContentTopButtonIcon} name="chevron-forward-outline" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
<Modal visible={openKhuyenMai} animationType="slide" transparent={true} onRequestClose={() => { setOpenKhuyenMai(!openKhuyenMai); }}>
|
||
<View style={styles.popDetail}>
|
||
<Pressable onPress={() => setOpenKhuyenMai(!openKhuyenMai)} style={styles.popDetailContentBg}>
|
||
</Pressable>
|
||
<View style={styles.headerPopDetail}>
|
||
<Text style={styles.headerPopDetailText}>Khuyến mại</Text>
|
||
<Pressable onPress={() => setOpenKhuyenMai(!openKhuyenMai)}>
|
||
<Ionicons style={styles.popDetailClose} name="close-outline" />
|
||
</Pressable>
|
||
</View>
|
||
<View style={styles.popDetailList}>
|
||
<ScrollView>
|
||
<Text style={styles.itemKmTextLine}>Khuyến mãi trị giá <Text style={styles.red}>3.880.000đ</Text>. Áp dụng đến 30/3/2021</Text>
|
||
<View style={styles.itemKm}>
|
||
<View style={styles.itemKmImg}>
|
||
<Image style={styles.itemKmImgCt} source={require('../assets/images/product-km.png')} />
|
||
</View>
|
||
<Text style={styles.itemKmText}>Tặng Máy xay thịt Elmich hoặc Máy xay thịt đa năng Z-000207</Text>
|
||
</View>
|
||
<View style={styles.itemKm}>
|
||
<View style={styles.itemKmImg}>
|
||
<Image style={styles.itemKmImgCt} source={require('../assets/images/product-km.png')} />
|
||
</View>
|
||
<Text style={styles.itemKmText}>Tặng Máy xay thịt Elmich hoặc Máy xay thịt đa năng Z-000207</Text>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
</View>
|
||
</Modal>
|
||
<Modal visible={openDacTinh} animationType="slide" transparent={true} onRequestClose={() => { setOpenDacTinh(!openDacTinh); }}>
|
||
<View style={styles.popDetail}>
|
||
<Pressable onPress={() => setOpenDacTinh(!openDacTinh)} style={styles.popDetailContentBg}>
|
||
</Pressable>
|
||
<View style={styles.headerPopDetail}>
|
||
<Text style={styles.headerPopDetailText}>Đặc tính</Text>
|
||
<Pressable onPress={() => setOpenDacTinh(!openDacTinh)}>
|
||
<Ionicons style={styles.popDetailClose} name="close-outline" />
|
||
</Pressable>
|
||
</View>
|
||
<View style={styles.popDetailList}>
|
||
<ScrollView>
|
||
<View style={styles.dacTinhItem}>
|
||
<Text style={styles.dacTinhItemText}>Mã sản phẩm</Text>
|
||
<View style={styles.dacTinhItemCt}>
|
||
<FontAwesome style={styles.dacTinhItemCtIcon} name="square" />
|
||
<Text style={styles.dacTinhItemCtText}>NS-A18BL</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.dacTinhItem}>
|
||
<Text style={styles.dacTinhItemText}>Tình trạng</Text>
|
||
<View style={styles.dacTinhItemCt}>
|
||
<FontAwesome style={styles.dacTinhItemCtIcon} name="square" />
|
||
<Text style={[styles.dacTinhItemCtText, styles.green]}>Còn hàng</Text>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
</View>
|
||
</Modal>
|
||
<Modal visible={openDichVu} animationType="slide" transparent={true} onRequestClose={() => { setOpenDichVu(!openDichVu); }}>
|
||
<View style={styles.popDetail}>
|
||
<Pressable onPress={() => setOpenDichVu(!openDichVu)} style={styles.popDetailContentBg}>
|
||
</Pressable>
|
||
<View style={styles.headerPopDetail}>
|
||
<Text style={styles.headerPopDetailText}>Dịch vụ</Text>
|
||
<Pressable onPress={() => setOpenDichVu(!openDichVu)}>
|
||
<Ionicons style={styles.popDetailClose} name="close-outline" />
|
||
</Pressable>
|
||
</View>
|
||
<View style={styles.popDetailList}>
|
||
<ScrollView>
|
||
<View style={styles.dichVuItem}>
|
||
<View style={styles.dichVuItemImg}>
|
||
<Image style={styles.dichVuItemImgCt} source={require('../assets/images/dich-vu1.png')} />
|
||
</View>
|
||
<View style={styles.dichVuItemText}>
|
||
<Text style={styles.dichVuItemTextSt}>Hàng chính hãng</Text>
|
||
<Text style={styles.dichVuItemTextNd}>Sản phẩm chính hãng 100%</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.dichVuItem}>
|
||
<View style={styles.dichVuItemImg}>
|
||
<Image style={styles.dichVuItemImgCt} source={require('../assets/images/dich-vu2.png')} />
|
||
</View>
|
||
<View style={styles.dichVuItemText}>
|
||
<Text style={styles.dichVuItemTextSt}>Bảo hành 24 tháng</Text>
|
||
<Text style={styles.dichVuItemTextNd}>Trả bảo hành tận nơi sử dụng</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.dichVuItem}>
|
||
<View style={styles.dichVuItemImg}>
|
||
<Image style={styles.dichVuItemImgCt} source={require('../assets/images/dich-vu3.png')} />
|
||
</View>
|
||
<View style={styles.dichVuItemText}>
|
||
<Text style={styles.dichVuItemTextSt}>Giao hàng toàn quốc</Text>
|
||
<Text style={styles.dichVuItemTextNd}>Giao hàng tận nơi trong vòng 24 giờ trong phạm vi bán kính 20Km</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.dichVuItem}>
|
||
<View style={styles.dichVuItemImg}>
|
||
<Image style={styles.dichVuItemImgCt} source={require('../assets/images/dich-vu4.png')} />
|
||
</View>
|
||
<View style={styles.dichVuItemText}>
|
||
<Text style={styles.dichVuItemTextSt}>Đổi trả hàng miễn phí</Text>
|
||
<Text style={styles.dichVuItemTextNd}>Đổi trả hàng miễn phí trong 7 ngày</Text>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
</View>
|
||
</Modal>
|
||
<Modal visible={openConFig} animationType="slide" transparent={true} onRequestClose={() => { setOpenConFig(!openConFig); }}>
|
||
<View style={styles.popDetail}>
|
||
<Pressable onPress={() => setOpenConFig(!openConFig)} style={styles.popDetailContentBg}>
|
||
</Pressable>
|
||
<View style={styles.headerPopDetail}>
|
||
<Text style={styles.headerPopDetailText}>Lựa chọn</Text>
|
||
<Pressable onPress={() => setOpenConFig(!openConFig)}>
|
||
<Ionicons style={styles.popDetailClose} name="close-outline" />
|
||
</Pressable>
|
||
</View>
|
||
<View style={styles.popDetailList}>
|
||
<ScrollView>
|
||
<View style={styles.listConFig}>
|
||
<Text style={styles.listConFigName}>Chọn công xuất làm lạnh</Text>
|
||
<View style={styles.listConFigList}>
|
||
<View style={[styles.conFigItem, styles.conFigItemActive]}>
|
||
<Text style={styles.conFigName}>1HP</Text>
|
||
<Text style={[styles.conFigNamePrice, styles.red]}>19.990.000đ</Text>
|
||
<View style={styles.conFigItemActiveBg}>
|
||
<Image style={styles.conFigItemActiveBgImg} source={require('../assets/images/check-config.png')} />
|
||
<Ionicons style={styles.conFigItemActiveBgIcon} name="checkmark-outline" />
|
||
</View>
|
||
</View>
|
||
<View style={styles.conFigItem}>
|
||
<Text style={styles.conFigName}>1.6HP</Text>
|
||
<Text style={[styles.conFigNamePrice, styles.red]}>20.990.000đ</Text>
|
||
</View>
|
||
<View style={styles.conFigItem}>
|
||
<Text style={styles.conFigName}>2HP</Text>
|
||
<Text style={[styles.conFigNamePrice, styles.red]}>22.990.000đ</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View style={styles.selecCount}>
|
||
<Text style={styles.selecCountText}>Số lượng</Text>
|
||
<View style={styles.selecCountContent}>
|
||
<TouchableOpacity style={styles.selecCountButton}>
|
||
<Text style={styles.selecCountButtonText}>+</Text>
|
||
</TouchableOpacity>
|
||
<TextInput style={styles.selecCountInput} value="1" />
|
||
<TouchableOpacity style={styles.selecCountButton}>
|
||
<Text style={styles.selecCountButtonText}>-</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
</View>
|
||
</Modal>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
|
||
const BuyComboDetail = () => {
|
||
const [checked, setChecked] = React.useState(false);
|
||
return (
|
||
<View style={styles.comboDetail}>
|
||
<Text style={styles.comboDetailText}>Sản phẩm thường được mua cùng</Text>
|
||
<View style={styles.comboDetailList}>
|
||
<ScrollView horizontal={true}>
|
||
<View style={styles.comboDetailItem}>
|
||
<View style={styles.comboDetailItemImg}>
|
||
<Image style={styles.comboDetailItemImgCt} source={require('../assets/images/product.png')} />
|
||
</View>
|
||
<View style={styles.comboDetailItemInfo}>
|
||
<View style={styles.comboDetailItemCheck}>
|
||
<Checkbox color="#D8262F" status={checked ? 'checked' : 'unchecked'} onPress={() => setChecked(!checked)} />
|
||
</View>
|
||
<Text style={styles.comboDetailItemName} numberOfLines={3}>Ấm Siêu Tốc Nagakawa NAG0308</Text>
|
||
</View>
|
||
<Text style={styles.comboDetailItemPrice}>1.292.000đ</Text>
|
||
</View>
|
||
<View style={styles.comboDetailItem}>
|
||
<View style={styles.comboDetailItemImg}>
|
||
<Image style={styles.comboDetailItemImgCt} source={require('../assets/images/product.png')} />
|
||
</View>
|
||
<View style={styles.comboDetailItemInfo}>
|
||
<View style={styles.comboDetailItemCheck}>
|
||
<Checkbox status={checked ? 'checked' : 'unchecked'} onPress={() => setChecked(!checked)} />
|
||
</View>
|
||
<Text style={styles.comboDetailItemName} numberOfLines={3}>Ấm Siêu Tốc Nagakawa NAG0308</Text>
|
||
</View>
|
||
<Text style={styles.comboDetailItemPrice}>1.292.000đ</Text>
|
||
</View>
|
||
<View style={styles.comboDetailItem}>
|
||
<View style={styles.comboDetailItemImg}>
|
||
<Image style={styles.comboDetailItemImgCt} source={require('../assets/images/product.png')} />
|
||
</View>
|
||
<View style={styles.comboDetailItemInfo}>
|
||
<View style={styles.comboDetailItemCheck}>
|
||
<Checkbox status={checked ? 'checked' : 'unchecked'} onPress={() => setChecked(!checked)} />
|
||
</View>
|
||
<Text style={styles.comboDetailItemName} numberOfLines={3}>Ấm Siêu Tốc Nagakawa NAG0308</Text>
|
||
</View>
|
||
<Text style={styles.comboDetailItemPrice}>1.292.000đ</Text>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
<View style={styles.comboDetailBuy}>
|
||
<View style={styles.comboDetailBuyPrice}>
|
||
<Text style={styles.comboDetailBuyPriceText}>Tổng Tiền</Text>
|
||
<Text style={styles.comboDetailBuyPriceTotal}>10.338.000đ</Text>
|
||
<Text style={styles.comboDetailBuyPriceOldTotal}>10.738.000đ</Text>
|
||
</View>
|
||
<TouchableOpacity style={styles.comboDetailBuyButton}>
|
||
<Text style={styles.comboDetailBuyButtonText}>Thêm tất cả vào giỏ hàng</Text>
|
||
</TouchableOpacity>
|
||
<Text style={styles.comboDetailBuyCount}>1 sản phẩm được chọn</Text>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
const ProductDetailSpec = () => {
|
||
const [showAllSpec, setShowAllSpec] = useState(true);
|
||
return (
|
||
<View style={styles.boxProductDetailSpec}>
|
||
<Text style={styles.boxProductDetailSpecTitle}>Thông số kỹ thuật</Text>
|
||
<View style={showAllSpec ? styles.boxProductDetailSpecContent : [styles.boxProductDetailSpecContent, styles.boxProductDetailSpecContentActive]}>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
</View>
|
||
<View style={styles.boxProductDetailSpecVn}>
|
||
<TouchableOpacity onPress={() => setShowAllSpec(!showAllSpec)} style={styles.boxProductDetailSpecVnButton}>
|
||
{
|
||
showAllSpec
|
||
? <Text style={styles.boxProductDetailSpecVmText}>Xem thêm</Text>
|
||
: <Text style={styles.boxProductDetailSpecVmText}>Rút gọn</Text>
|
||
}
|
||
{
|
||
showAllSpec
|
||
? <FontAwesome style={styles.boxProductDetailSpecVmIcon} name="angle-double-down" />
|
||
: <FontAwesome style={styles.boxProductDetailSpecVmIcon} name="angle-double-up" />
|
||
}
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
const ProductDetailDes = () => {
|
||
const [showAllDes, setShowAllDes] = useState(true);
|
||
return (
|
||
<View style={styles.boxProductDetailSpec}>
|
||
<Text style={styles.boxProductDetailSpecTitle}>Mô tả sản phẩm</Text>
|
||
<View style={showAllDes ? styles.boxProductDetailSpecContent : [styles.boxProductDetailSpecContent, styles.boxProductDetailSpecContentActive]}>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
<Text>Nội dung đang được cập nhật</Text>
|
||
</View>
|
||
<View style={styles.boxProductDetailSpecVn}>
|
||
<TouchableOpacity onPress={() => setShowAllDes(!showAllDes)} style={styles.boxProductDetailSpecVnButton}>
|
||
{
|
||
showAllDes
|
||
? <Text style={styles.boxProductDetailSpecVmText}>Xem thêm</Text>
|
||
: <Text style={styles.boxProductDetailSpecVmText}>Rút gọn</Text>
|
||
}
|
||
{
|
||
showAllDes
|
||
? <FontAwesome style={styles.boxProductDetailSpecVmIcon} name="angle-double-down" />
|
||
: <FontAwesome style={styles.boxProductDetailSpecVmIcon} name="angle-double-up" />
|
||
}
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
const ProductReview = () => {
|
||
return (
|
||
<View style={styles.boxProductReview}>
|
||
<View style={styles.boxProductReviewHeader}>
|
||
<Text style={styles.boxProductReviewHeaderTitle}>Đánh giá & Nhận xét </Text>
|
||
<TouchableOpacity style={styles.boxProductReviewHeaderTitleVm}>
|
||
<Text style={styles.boxProductReviewHeaderTitleVMText}>Xem tất cả</Text>
|
||
<FontAwesome style={styles.boxProductReviewHeaderTitleVmIcon} name="angle-double-right" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
<View style={styles.boxProductReviewHeaderRate}>
|
||
<View style={styles.boxProductReviewHeaderRateCt}>
|
||
<Text style={styles.boxProductReviewHeaderRateTotal}>4.5</Text>
|
||
<Text style={styles.boxProductReviewHeaderRateAll}>/5</Text>
|
||
</View>
|
||
<Image style={styles.boxProductReviewHeaderRateImg} source={require('../assets/images/star4.png')} />
|
||
</View>
|
||
|
||
<View style={styles.reviewList}>
|
||
<View style={styles.reviewItem}>
|
||
<View style={styles.reviewItemHeader}>
|
||
<Text style={styles.reviewItemHeaderNameSort}>Q</Text>
|
||
<Text style={styles.reviewItemHeadername}>Quân</Text>
|
||
<View style={styles.reviewItemHeaderBuy}>
|
||
<FontAwesome style={styles.reviewItemHeaderBuyIcon} name="check-circle" />
|
||
<Text style={styles.reviewItemHeaderBuyText}>Đã mua hàng</Text>
|
||
</View>
|
||
<Image style={styles.reviewItemHeaderStar} source={require('../assets/images/star5.png')} />
|
||
</View>
|
||
<View style={styles.reviewItemCt}>
|
||
<Text style={styles.reviewItemContent}>Nhận hàng cực nhanh, đóng gói đẹp.</Text>
|
||
<View style={styles.reviewItemContentImg}>
|
||
<Image style={styles.reviewItemImg} source={require('../assets/images/product.png')} />
|
||
<Image style={styles.reviewItemImg} source={require('../assets/images/product.png')} />
|
||
</View>
|
||
</View>
|
||
<View style={styles.reviewItemOther}>
|
||
<TouchableOpacity style={styles.reviewItemOtherButton}>
|
||
<FontAwesome style={styles.reviewItemOtherButtonIcon} name="commenting" />
|
||
<Text style={styles.reviewItemOtherButtonText}>Trả lời</Text>
|
||
</TouchableOpacity>
|
||
<Text style={styles.reviewItemOtherTime}>| 22/2/2021</Text>
|
||
</View>
|
||
<View style={styles.reviewItemReplyList}>
|
||
<FontAwesome style={styles.reviewItemReplyListBefore} name="caret-up" />
|
||
<View style={styles.reviewItemReplyItem}>
|
||
<View style={styles.reviewItemReplyItemHeader}>
|
||
<View style={styles.reviewItemReplyItemHeaderLogo}>
|
||
<Image style={styles.reviewItemReplyItemHeaderLogoImg} source={require('../assets/images/logo-cmt.png')} />
|
||
</View>
|
||
<Text style={styles.reviewItemReplyItemHeaderName}>Đức Hào</Text>
|
||
<Text style={styles.reviewItemReplyItemHeaderQtv}>QTV</Text>
|
||
</View>
|
||
<View style={styles.reviewItemReplyItemCt}>
|
||
<Text style={styles.reviewItemReplyItemContent}>Cảm ơn bạn đã mua hàng của chúng tôi.</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
const ProductDetailComment = () => {
|
||
const [openPopCmt, setOpenPopCmt] = useState(false)
|
||
return (
|
||
<View style={styles.boxProductDetailComment}>
|
||
<View style={styles.boxProductReviewHeader}>
|
||
<Text style={styles.boxProductReviewHeaderTitle}>Hỏi và đáp (3) </Text>
|
||
<TouchableOpacity style={styles.boxProductReviewHeaderTitleVm}>
|
||
<Text style={styles.boxProductReviewHeaderTitleVMText}>Xem tất cả</Text>
|
||
<FontAwesome style={styles.boxProductReviewHeaderTitleVmIcon} name="angle-double-right" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
<View style={styles.commentList}>
|
||
<View style={styles.commentItem}>
|
||
<View style={styles.commentItemHeader}>
|
||
<View style={styles.commentItemHeaderLogo}>
|
||
<Text style={styles.commentItemHeaderLogoText}>Q</Text>
|
||
<FontAwesome style={styles.commentItemHeaderIcon} name="caret-right" />
|
||
</View>
|
||
<Text style={styles.commentItemHeadername}>Quân</Text>
|
||
</View>
|
||
<View style={styles.commentItemCt}>
|
||
<Text style={styles.commentItemCtText}>Sản phẩm này còn không shop?</Text>
|
||
</View>
|
||
<View style={styles.commentItemRep}>
|
||
<Text style={styles.commentItemRepText}>Đức Hào: Chào bạn, nhân viên sẽ liên hệ lại tư vấn cho bạn ạ.</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View style={styles.commentSubmit}>
|
||
<TouchableOpacity onPress={() => setOpenPopCmt(true)} style={styles.commentSubmitButton}>
|
||
<Text style={styles.commentSubmitText}>Đặt câp hỏi</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<Modal visible={openPopCmt} animationType="slide" transparent={true} onRequestClose={() => { setOpenPopCmt(!openPopCmt); }}>
|
||
<View style={styles.popDetail}>
|
||
<Pressable onPress={() => setOpenPopCmt(!openPopCmt)} style={styles.popDetailContentBg}>
|
||
</Pressable>
|
||
<View style={styles.headerPopDetail}>
|
||
<Text style={styles.headerPopDetailText}>Đặt câu hỏi</Text>
|
||
<Pressable onPress={() => setOpenPopCmt(!openPopCmt)}>
|
||
<Ionicons style={styles.popDetailClose} name="close-outline" />
|
||
</Pressable>
|
||
</View>
|
||
<View style={styles.popDetailList}>
|
||
<ScrollView>
|
||
<TextInput style={styles.popArea} multiline={true} placeholder="Nội dung câu hỏi" />
|
||
<TextInput style={styles.popInput} placeholder="Họ và tên*" />
|
||
<TextInput style={styles.popInput} placeholder="Email*" />
|
||
<TouchableOpacity style={styles.popSubmit}>
|
||
<Text style={styles.popSubmitText}>Gửi câu hỏi</Text>
|
||
</TouchableOpacity>
|
||
</ScrollView>
|
||
</View>
|
||
</View>
|
||
</Modal>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
const ProductCompare = () => {
|
||
return (
|
||
<View style={styles.boxProductCompare}>
|
||
<Text style={styles.boxProductCompareTitle}>So sánh sản phẩm tương đương</Text>
|
||
<View style={styles.boxProductCompareList}>
|
||
<ScrollView horizontal={true}>
|
||
<View style={styles.boxProductCompareItem}>
|
||
<View style={styles.pContainer}>
|
||
<View style={styles.pImgContent}>
|
||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||
</View>
|
||
<View style={styles.pInfo}>
|
||
<Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||
<View style={styles.pAllSale}>
|
||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||
<Text style={styles.pDiscount}>-30%</Text>
|
||
</View>
|
||
<View style={styles.boxProductCompareSummary}>
|
||
<Text style={styles.boxProductCompareSummaryText} numberOfLines={3}>
|
||
Công suất: 1.0HP - 9000 BTU
|
||
Chế độ vận hành khi ngủ
|
||
Loại máy lạnh: 2 chiều
|
||
</Text>
|
||
</View>
|
||
<View style={styles.boxProductCompareButton}>
|
||
<TouchableOpacity>
|
||
<Text style={styles.boxProductCompareButtonText}>Xem so sánh chi tiết</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View style={styles.boxProductCompareItem}>
|
||
<View style={styles.pContainer}>
|
||
<View style={styles.pImgContent}>
|
||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||
</View>
|
||
<View style={styles.pInfo}>
|
||
<Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||
<View style={styles.pAllSale}>
|
||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||
<Text style={styles.pDiscount}>-30%</Text>
|
||
</View>
|
||
<View style={styles.boxProductCompareSummary}>
|
||
<Text style={styles.boxProductCompareSummaryText} numberOfLines={3}>
|
||
Công suất: 1.0HP - 9000 BTU
|
||
Chế độ vận hành khi ngủ
|
||
Loại máy lạnh: 2 chiều
|
||
</Text>
|
||
</View>
|
||
<View style={styles.boxProductCompareButton}>
|
||
<TouchableOpacity>
|
||
<Text style={styles.boxProductCompareButtonText}>Xem so sánh chi tiết</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View style={styles.boxProductCompareItem}>
|
||
<View style={styles.pContainer}>
|
||
<View style={styles.pImgContent}>
|
||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||
</View>
|
||
<View style={styles.pInfo}>
|
||
<Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||
<View style={styles.pAllSale}>
|
||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||
<Text style={styles.pDiscount}>-30%</Text>
|
||
</View>
|
||
<View style={styles.boxProductCompareSummary}>
|
||
<Text style={styles.boxProductCompareSummaryText} numberOfLines={3}>
|
||
Công suất: 1.0HP - 9000 BTU
|
||
Chế độ vận hành khi ngủ
|
||
Loại máy lạnh: 2 chiều
|
||
</Text>
|
||
</View>
|
||
<View style={styles.boxProductCompareButton}>
|
||
<TouchableOpacity>
|
||
<Text style={styles.boxProductCompareButtonText}>Xem so sánh chi tiết</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
const ProductDetailFixBot = () => {
|
||
return (
|
||
<View style={styles.boxFixDetail}>
|
||
<TouchableOpacity style={styles.boxFixDetailWishList}>
|
||
<Ionicons style={styles.boxFixDetailWishListIcon} name="heart-outline" />
|
||
</TouchableOpacity>
|
||
<TouchableOpacity style={styles.boxFixDetailBuyGop}>
|
||
<Text style={styles.boxFixDetailBuyTextSt}>Mua trả góp</Text>
|
||
<Text style={styles.boxFixDetailBuyTextNd}>Thủ tục đơn giản</Text>
|
||
</TouchableOpacity>
|
||
<TouchableOpacity style={styles.boxFixDetailBuyNow}>
|
||
<Text style={styles.boxFixDetailBuyTextSt}>Mua ngay</Text>
|
||
<Text style={styles.boxFixDetailBuyTextNd}>4.100.000đ</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
const winWidth = Dimensions.get('window').width; //full width
|
||
const winHeight = Dimensions.get('window').height; //full height
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
sliderImgDetail: {
|
||
width: winWidth,
|
||
marginBottom: 20,
|
||
},
|
||
sliderSwipperImgDetail: {
|
||
height: winWidth,
|
||
},
|
||
itemSliderImgDetail: {
|
||
width: winWidth,
|
||
height: winWidth,
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
},
|
||
imgSliderImgDetail: {
|
||
position: 'absolute',
|
||
width: winWidth,
|
||
height: winWidth,
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
},
|
||
boxFlastSaleHomeFirstAllPrice: {
|
||
width: '100%',
|
||
flexDirection: 'row',
|
||
marginBottom: 10,
|
||
},
|
||
boxFlastSaleHomeFirstPrice: {
|
||
width: '50%',
|
||
paddingRight: 5,
|
||
},
|
||
boxFlastSaleHomeFirstPriceName: {
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
marginBottom: 8,
|
||
},
|
||
boxFlastSaleHomeFirstPriceText: {
|
||
fontSize: 22,
|
||
fontWeight: 'bold',
|
||
color: '#D8262F'
|
||
},
|
||
boxFlastSaleHomeFirstPriceOld: {
|
||
width: '50%',
|
||
paddingLeft: 5,
|
||
},
|
||
boxFlastSaleHomeFirstOldPrice: {
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
textDecorationLine: 'line-through',
|
||
marginBottom: 2,
|
||
},
|
||
boxFlastSaleHomeFirstDiscount: {
|
||
paddingVertical: 5,
|
||
backgroundColor: '#D8262F',
|
||
width: 60,
|
||
textAlign: 'center',
|
||
color: '#fff',
|
||
borderRadius: 5,
|
||
overflow: 'hidden'
|
||
},
|
||
boxFlastSaleHomeFirstSaleQuan: {
|
||
width: '100%',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingBottom: 10,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#e1e1e1',
|
||
marginBottom: 10,
|
||
},
|
||
boxFlastSaleHomeFirstSaleQuanLeft: {
|
||
width: '50%',
|
||
paddingRight: 5,
|
||
},
|
||
boxFlastSaleHomeFirstSaleQuanLeftCt: {
|
||
width: '100%',
|
||
height: 15,
|
||
borderRadius: 7.5,
|
||
backgroundColor: '#FFE2E2',
|
||
position: 'relative',
|
||
},
|
||
boxFlastSaleHomeFirstSaleQuanLeftDown: {
|
||
position: 'absolute',
|
||
width: '20%',
|
||
top: 0,
|
||
left: 0,
|
||
backgroundColor: '#D8262F',
|
||
zIndex: 2,
|
||
height: 15,
|
||
borderRadius: 7.5,
|
||
},
|
||
boxFlastSaleHomeFirstSaleQuanLeftText: {
|
||
marginLeft: 10,
|
||
fontSize: 10,
|
||
color: '#fff',
|
||
lineHeight: 15,
|
||
position: 'relative',
|
||
zIndex: 5,
|
||
},
|
||
boxFlastSaleHomeFirstSaleQuanRight: {
|
||
width: '50%',
|
||
paddingLeft: 5,
|
||
},
|
||
boxFlastSaleHomeFirstSaleQuanRightCt: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center'
|
||
},
|
||
boxFlastSaleHomeFirstSaleQuanRightText: {
|
||
fontSize: 13,
|
||
},
|
||
boxFlastSaleHomeFirstSaleQuanRightTextRed: {
|
||
fontSize: 13,
|
||
color: '#D8262F',
|
||
marginHorizontal: 5,
|
||
},
|
||
boxFlastSaleHomeFirstTime: {
|
||
width: '100%',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
boxFlastSaleHomeFirstTimeTitle: {
|
||
fontSize: 14,
|
||
width: 100,
|
||
},
|
||
boxFlastSaleHomeFirstTimeList: {
|
||
width: winWidth - 120,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
boxFlastSaleHomeFirstTimeItem: {
|
||
width: 48,
|
||
backgroundColor: '#3B3B3B',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderRadius: 10,
|
||
},
|
||
boxFlastSaleHomeFirstItemCt: {
|
||
height: 34,
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
width: '100%',
|
||
borderBottomColor: 'rgba(255,255,255,0.3)',
|
||
borderBottomWidth: 1,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
boxFlastSaleHomeFirstTimeNum: {
|
||
fontSize: 22,
|
||
fontWeight: 'bold',
|
||
color: '#fff',
|
||
},
|
||
boxFlastSaleHomeFirstTimeText: {
|
||
height: 30,
|
||
lineHeight: 30,
|
||
textTransform: 'uppercase',
|
||
color: '#fff',
|
||
},
|
||
boxFlastSaleHomeFirstTimeTextChia: {
|
||
marginHorizontal: 10,
|
||
fontSize: 24,
|
||
},
|
||
boxDetailContentTop: {
|
||
width: winWidth,
|
||
backgroundColor: '#f2f2f2'
|
||
},
|
||
boxDetailContentTopSt: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
marginBottom: 10,
|
||
},
|
||
boxDetailContentName: {
|
||
fontSize: 18,
|
||
fontWeight: '500',
|
||
marginBottom: 10,
|
||
},
|
||
boxDetailContentTopRate: {
|
||
flexDirection: 'row',
|
||
marginBottom: 10,
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
},
|
||
boxDetailContentTopShare: {},
|
||
boxDetailContentTopShareIcon: {
|
||
fontSize: 18,
|
||
},
|
||
boxDetailContentTopShowPop: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
marginBottom: 10,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
boxDetailContentTopTextBold: {
|
||
width: 100,
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
},
|
||
boxDetailContentTopText: {
|
||
width: winWidth - 160,
|
||
},
|
||
boxDetailContentTopButton: {
|
||
width: 40,
|
||
height: 40,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'flex-end',
|
||
},
|
||
boxDetailContentTopButtonIcon: {
|
||
fontSize: 26,
|
||
},
|
||
boxDetailContentTopShowPopNd: {
|
||
width: winWidth,
|
||
paddingHorizontal: 10,
|
||
},
|
||
boxDetailContentTopShowPopNdCt: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
paddingVertical: 10,
|
||
borderBottomColor: '#e1e1e1',
|
||
borderBottomWidth: 1,
|
||
},
|
||
boxDetailContentTopShowPopNdCtLeft: {
|
||
width: winWidth - 60,
|
||
},
|
||
boxDetailContentTopShowPopNdCtTb: {
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
marginBottom: 5,
|
||
},
|
||
boxDetailContentTopShowPopNdCtT: {
|
||
fontSize: 14,
|
||
color: '#888888'
|
||
},
|
||
boxDetailContentTopShowPopNdCtImgCt: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-end'
|
||
},
|
||
boxDetailContentTopShowPopNdCtImg: {
|
||
marginRight: 10,
|
||
},
|
||
popDetail: {
|
||
flex: 1,
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
},
|
||
popDetailContentBg: {
|
||
width: winWidth,
|
||
height: 180,
|
||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||
},
|
||
popDetailClose: {
|
||
width: 40,
|
||
height: 40,
|
||
fontSize: 20,
|
||
lineHeight: 40,
|
||
textAlign: 'center',
|
||
},
|
||
headerPopDetail: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
},
|
||
headerPopDetailText: {
|
||
width: winWidth - 60,
|
||
textAlign: 'center',
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
},
|
||
red: {
|
||
color: '#D8262F',
|
||
},
|
||
popDetailList: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
height: winHeight - 220,
|
||
},
|
||
itemKm: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 10,
|
||
},
|
||
itemKmImg: {
|
||
width: 24,
|
||
height: 24,
|
||
marginRight: 10,
|
||
position: 'relative',
|
||
},
|
||
itemKmImgCt: {
|
||
width: '100%',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
},
|
||
itemKmText: {
|
||
width: winWidth - 45,
|
||
},
|
||
itemKmTextLine: {
|
||
width: '100%',
|
||
marginBottom: 10,
|
||
},
|
||
dacTinhItem: {
|
||
marginBottom: 10,
|
||
},
|
||
dacTinhItemText: {
|
||
marginBottom: 5,
|
||
},
|
||
dacTinhItemCt: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center'
|
||
},
|
||
dacTinhItemCtIcon: {
|
||
marginRight: 5,
|
||
color: '#888'
|
||
},
|
||
dacTinhItemCtText: {
|
||
color: '#A1A1A1'
|
||
},
|
||
green: {
|
||
color: '#008445'
|
||
},
|
||
dichVuItem: {
|
||
marginBottom: 10,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
dichVuItemImg: {
|
||
width: 50,
|
||
marginRight: 10,
|
||
},
|
||
dichVuItemImgCt: {
|
||
maxWidth: '100%'
|
||
},
|
||
dichVuItemText: {
|
||
width: winWidth - 80,
|
||
},
|
||
dichVuItemTextSt: {
|
||
fontSize: 14,
|
||
marginBottom: 2,
|
||
},
|
||
dichVuItemTextNd: {
|
||
fontSize: 14,
|
||
color: '#888'
|
||
},
|
||
listConFig: {
|
||
marginBottom: 10,
|
||
paddingBottom: 20,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#e1e1e1',
|
||
},
|
||
listConFigName: {
|
||
marginBottom: 10,
|
||
},
|
||
listConFigList: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
flexWrap: 'wrap',
|
||
},
|
||
conFigItem: {
|
||
width: (winWidth - 50) / 3,
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: 10,
|
||
borderWidth: 1,
|
||
borderColor: '#C9C9C9',
|
||
borderRadius: 8,
|
||
position: 'relative',
|
||
},
|
||
conFigItemActive: {
|
||
borderColor: '#D8262F',
|
||
},
|
||
conFigName: {
|
||
fontWeight: '500',
|
||
},
|
||
conFigItemActiveBg: {
|
||
width: 16,
|
||
height: 16,
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
right: 0,
|
||
backgroundColor: 'rgba(0,0,0,0)'
|
||
},
|
||
conFigItemActiveBgImg: {
|
||
width: '100%',
|
||
height: '100%',
|
||
},
|
||
conFigItemActiveBgIcon: {
|
||
fontSize: 10,
|
||
color: '#fff',
|
||
position: 'absolute',
|
||
top: 5,
|
||
right: 0,
|
||
},
|
||
conFigNamePrice: {},
|
||
selecCount: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
selecCountText: {
|
||
width: '50%',
|
||
fontSize: 14,
|
||
},
|
||
selecCountContent: {
|
||
width: '50%',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-end',
|
||
alignItems: 'center',
|
||
},
|
||
selecCountButton: {
|
||
width: 40,
|
||
height: 40,
|
||
flexDirection: 'row',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
backgroundColor: '#DFDFDF',
|
||
},
|
||
selecCountButtonText: {
|
||
fontSize: 24,
|
||
},
|
||
selecCountInput: {
|
||
width: 60,
|
||
height: 40,
|
||
textAlign: 'center',
|
||
backgroundColor: '#f2f2f2',
|
||
fontSize: 22,
|
||
},
|
||
comboDetail: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
marginBottom: 10,
|
||
},
|
||
comboDetailText: {
|
||
marginBottom: 20,
|
||
fontSize: 16,
|
||
fontWeight: 'bold'
|
||
},
|
||
comboDetailList: {
|
||
width: '100%',
|
||
paddingBottom: 20,
|
||
marginBottom: 20,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#e1e1e1',
|
||
},
|
||
comboDetailItem: {
|
||
width: 180,
|
||
marginRight: 20,
|
||
},
|
||
comboDetailItemImg: {
|
||
width: 180,
|
||
height: 180,
|
||
position: 'relative',
|
||
marginBottom: 10,
|
||
},
|
||
comboDetailItemImgCt: {
|
||
width: '100%',
|
||
height: '100%',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
},
|
||
comboDetailItemInfo: {
|
||
width: '100%',
|
||
flexDirection: 'row',
|
||
marginBottom: 15,
|
||
},
|
||
comboDetailItemCheck: {
|
||
width: 36,
|
||
height: 36,
|
||
marginRight: 10,
|
||
backgroundColor: '#f2f2f2',
|
||
borderRadius: 3,
|
||
},
|
||
comboDetailItemName: {
|
||
width: 134,
|
||
},
|
||
comboDetailItemPrice: {
|
||
width: '100%',
|
||
textAlign: 'center',
|
||
color: '#D8262F',
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
},
|
||
comboDetailBuy: {},
|
||
comboDetailBuyPrice: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-end',
|
||
justifyContent: 'center',
|
||
marginBottom: 10,
|
||
},
|
||
comboDetailBuyPriceText: {
|
||
marginRight: 10,
|
||
},
|
||
comboDetailBuyPriceTotal: {
|
||
color: '#D8262F',
|
||
fontWeight: 'bold',
|
||
marginRight: 10,
|
||
},
|
||
comboDetailBuyPriceOldTotal: {
|
||
color: '#888',
|
||
textDecorationLine: 'line-through',
|
||
},
|
||
comboDetailBuyButton: {
|
||
width: '100%',
|
||
height: 40,
|
||
borderRadius: 10,
|
||
backgroundColor: '#D8262F',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginBottom: 10,
|
||
},
|
||
comboDetailBuyButtonText: {
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
textTransform: 'uppercase',
|
||
color: '#fff'
|
||
},
|
||
comboDetailBuyCount: {
|
||
width: '100%',
|
||
textAlign: 'center',
|
||
},
|
||
boxProductDetailSpec: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
marginBottom: 10,
|
||
},
|
||
boxProductDetailSpecTitle: {
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
marginBottom: 15,
|
||
},
|
||
boxProductDetailSpecContent: {
|
||
width: '100%',
|
||
maxHeight: 100,
|
||
overflow: 'hidden',
|
||
},
|
||
boxProductDetailSpecContentActive: {
|
||
maxHeight: 'auto',
|
||
},
|
||
boxProductDetailSpecVn: {
|
||
width: '100%',
|
||
marginTop: 15,
|
||
flexDirection: 'row',
|
||
justifyContent: 'center',
|
||
},
|
||
boxProductDetailSpecVnButton: {
|
||
width: 100,
|
||
flexDirection: 'row',
|
||
justifyContent: 'center',
|
||
height: 30,
|
||
alignItems: 'center',
|
||
},
|
||
boxProductDetailSpecVmText: {
|
||
color: '#D8262F',
|
||
marginRight: 10,
|
||
},
|
||
boxProductDetailSpecVmIcon: {
|
||
color: '#D8262F'
|
||
},
|
||
boxProductReview: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
marginBottom: 10,
|
||
},
|
||
boxProductReviewHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 10,
|
||
},
|
||
boxProductReviewHeaderTitle: {
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
},
|
||
boxProductReviewHeaderTitleVm: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
boxProductReviewHeaderTitleVMText: {
|
||
fontSize: 12,
|
||
fontWeight: '500',
|
||
marginRight: 5,
|
||
color: '#D8262F',
|
||
},
|
||
boxProductReviewHeaderTitleVmIcon: {
|
||
color: '#D8262F',
|
||
},
|
||
boxProductReviewHeaderRate: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingBottom: 20,
|
||
marginBottom: 20,
|
||
borderBottomColor: '#e1e1e1',
|
||
borderBottomWidth: 1,
|
||
},
|
||
boxProductReviewHeaderRateCt: {
|
||
flexDirection: 'row',
|
||
marginRight: 20,
|
||
alignItems: 'flex-end'
|
||
},
|
||
boxProductReviewHeaderRateTotal: {
|
||
fontWeight: '500',
|
||
fontSize: 18,
|
||
},
|
||
boxProductReviewHeaderRateAll: {
|
||
color: '#777',
|
||
},
|
||
boxProductReviewHeaderRateImg: {},
|
||
reviewList: {},
|
||
reviewItem: {
|
||
marginBottom: 20,
|
||
},
|
||
reviewItemHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 10,
|
||
},
|
||
reviewItemHeaderNameSort: {
|
||
width: 24,
|
||
height: 24,
|
||
borderRadius: 3,
|
||
textAlign: 'center',
|
||
lineHeight: 24,
|
||
backgroundColor: '#DFDFDF',
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
color: '#777777',
|
||
overflow: 'hidden',
|
||
marginRight: 8,
|
||
},
|
||
reviewItemHeadername: {
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
marginRight: 8,
|
||
},
|
||
reviewItemHeaderBuy: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginRight: 8,
|
||
},
|
||
reviewItemHeaderBuyIcon: {
|
||
marginRight: 3,
|
||
color: '#19B000',
|
||
},
|
||
reviewItemHeaderBuyText: {
|
||
color: '#19B000',
|
||
},
|
||
reviewItemHeaderStar: {},
|
||
reviewItemCt: {
|
||
width: '100%',
|
||
marginBottom: 10,
|
||
},
|
||
reviewItemContent: {
|
||
marginBottom: 10,
|
||
},
|
||
reviewItemContentImg: {
|
||
width: '100%',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
flexWrap: 'wrap',
|
||
},
|
||
reviewItemImg: {
|
||
maxWidth: 64,
|
||
maxHeight: 64,
|
||
marginRight: 10,
|
||
},
|
||
reviewItemOther: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 10,
|
||
},
|
||
reviewItemOtherButton: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginRight: 10,
|
||
},
|
||
reviewItemOtherButtonIcon: {
|
||
fontSize: 12,
|
||
color: '#D8262F',
|
||
marginRight: 5,
|
||
},
|
||
reviewItemOtherButtonText: {
|
||
fontSize: 12,
|
||
color: '#D8262F',
|
||
fontWeight: '700',
|
||
},
|
||
reviewItemOtherTime: {
|
||
fontSize: 12,
|
||
color: '#888888',
|
||
},
|
||
reviewItemReplyList: {
|
||
width: '100%',
|
||
padding: 10,
|
||
backgroundColor: '#F1F1F1',
|
||
borderRadius: 5,
|
||
position: 'relative',
|
||
},
|
||
reviewItemReplyListBefore: {
|
||
fontSize: 24,
|
||
position: 'absolute',
|
||
left: 20,
|
||
top: -16,
|
||
zIndex: 1,
|
||
color: '#F1F1F1',
|
||
},
|
||
reviewItemReplyItem: {
|
||
width: '100%',
|
||
marginBottom: 10,
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
},
|
||
reviewItemReplyItemHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
marginBottom: 10,
|
||
},
|
||
reviewItemReplyItemHeaderLogo: {
|
||
width: 24,
|
||
height: 24,
|
||
backgroundColor: '#D8262F',
|
||
borderRadius: 5,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginRight: 10,
|
||
},
|
||
reviewItemReplyItemHeaderLogoImg: {},
|
||
reviewItemReplyItemHeaderName: {
|
||
fontWeight: 'bold',
|
||
marginRight: 10,
|
||
},
|
||
reviewItemReplyItemHeaderQtv: {
|
||
paddingHorizontal: 8,
|
||
paddingVertical: 3,
|
||
backgroundColor: '#D8262F',
|
||
color: '#fff',
|
||
borderRadius: 3,
|
||
overflow: 'hidden',
|
||
fontSize: 10,
|
||
},
|
||
reviewItemReplyItemCt: {
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
},
|
||
reviewItemReplyItemContent: {},
|
||
boxProductDetailComment: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
marginBottom: 10,
|
||
},
|
||
commentList: {},
|
||
commentItem: {
|
||
marginBottom: 10,
|
||
},
|
||
commentItemHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 10,
|
||
},
|
||
commentItemHeaderLogo: {
|
||
width: 32,
|
||
height: 28,
|
||
position: 'relative',
|
||
borderRadius: 3,
|
||
backgroundColor: '#D8262F',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginRight: 10,
|
||
},
|
||
commentItemHeaderLogoText: {
|
||
fontSize: 18,
|
||
fontWeight: 'bold',
|
||
color: '#fff'
|
||
},
|
||
commentItemHeaderIcon: {
|
||
fontSize: 24,
|
||
color: '#D8262F',
|
||
zIndex: 1,
|
||
position: 'absolute',
|
||
left: 0,
|
||
bottom: -12,
|
||
},
|
||
commentItemHeadername: {
|
||
fontWeight: 'bold',
|
||
},
|
||
commentItemCt: {
|
||
marginTop: 5,
|
||
marginBottom: 10,
|
||
},
|
||
commentItemCtText: {},
|
||
commentItemRep: {
|
||
marginBottom: 10,
|
||
},
|
||
commentItemRepText: {
|
||
color: '#888'
|
||
},
|
||
commentSubmit: {
|
||
paddingTop: 10,
|
||
borderTopColor: '#e1e1e1',
|
||
borderTopWidth: 1,
|
||
flexDirection: 'row',
|
||
justifyContent: 'center',
|
||
},
|
||
commentSubmitButton: {},
|
||
commentSubmitText: {
|
||
color: '#D8262F',
|
||
fontWeight: '500',
|
||
},
|
||
popArea: {
|
||
width: '100%',
|
||
height: 110,
|
||
borderWidth: 1,
|
||
padding: 10,
|
||
borderColor: '#e1e1e1',
|
||
marginBottom: 10,
|
||
borderRadius: 5,
|
||
},
|
||
popInput: {
|
||
width: '100%',
|
||
height: 40,
|
||
borderWidth: 1,
|
||
paddingHorizontal: 10,
|
||
borderColor: '#e1e1e1',
|
||
marginBottom: 10,
|
||
borderRadius: 5,
|
||
},
|
||
popSubmit: {
|
||
width: '100%',
|
||
height: 40,
|
||
paddingHorizontal: 10,
|
||
marginBottom: 10,
|
||
borderRadius: 5,
|
||
backgroundColor: '#D8262F',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
popSubmitText: {
|
||
textTransform: 'uppercase',
|
||
color: '#fff'
|
||
},
|
||
pContainer: {
|
||
width: '100%',
|
||
padding: 10,
|
||
},
|
||
pImgContent: {
|
||
width: '100%',
|
||
position: 'relative',
|
||
paddingTop: '100%',
|
||
marginBottom: 10,
|
||
},
|
||
pNew: {
|
||
width: 24,
|
||
height: 18,
|
||
position: 'absolute',
|
||
zIndex: 6,
|
||
top: 0,
|
||
left: 0,
|
||
},
|
||
pImg: {
|
||
width: '100%',
|
||
position: 'absolute',
|
||
zIndex: 5,
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
},
|
||
pTraGop: {
|
||
width: 68,
|
||
height: 16,
|
||
position: 'absolute',
|
||
zIndex: 6,
|
||
bottom: 0,
|
||
left: '50%',
|
||
transform: [{ translateX: -34 }],
|
||
},
|
||
pInfo: {
|
||
width: '100%',
|
||
},
|
||
pName: {
|
||
width: '100%',
|
||
fontSize: 14,
|
||
marginBottom: 10,
|
||
},
|
||
pPrice: {
|
||
width: '100%',
|
||
fontSize: 18,
|
||
marginBottom: 10,
|
||
color: '#D8262F',
|
||
fontWeight: 'bold',
|
||
},
|
||
pAllSale: {
|
||
width: '100%',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 10,
|
||
},
|
||
pOldPrice: {
|
||
color: '#A1A1A1',
|
||
fontSize: 14,
|
||
textDecorationLine: 'line-through',
|
||
},
|
||
pDiscount: {
|
||
paddingVertical: 5,
|
||
backgroundColor: '#D8262F',
|
||
width: 50,
|
||
textAlign: 'center',
|
||
color: '#fff',
|
||
borderRadius: 5,
|
||
overflow: 'hidden',
|
||
marginLeft: 5,
|
||
},
|
||
pOffer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
pOfferText: {
|
||
fontSize: 10,
|
||
color: '#A1A1A1',
|
||
},
|
||
pOfferPrice: {
|
||
fontSize: 10,
|
||
color: '#D8262F',
|
||
},
|
||
boxProductCompare: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
marginBottom: 10,
|
||
},
|
||
boxProductCompareTitle: {
|
||
fontSize: 16,
|
||
marginBottom: 15,
|
||
fontWeight: 'bold',
|
||
},
|
||
boxProductCompareList: {},
|
||
boxProductCompareItem: {
|
||
width: 180,
|
||
marginRight: 10,
|
||
},
|
||
boxProductCompareSummary: {
|
||
marginBottom: 10,
|
||
},
|
||
boxProductCompareSummaryText: {
|
||
fontSize: 11,
|
||
color: '#888888'
|
||
},
|
||
boxProductCompareButton: {},
|
||
boxProductCompareButtonText: {
|
||
fontSize: 11,
|
||
color: '#19B000',
|
||
},
|
||
boxFixDetail: {
|
||
width: winWidth,
|
||
padding: 10,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
},
|
||
boxFixDetailWishList: {
|
||
width: 40,
|
||
height: 40,
|
||
backgroundColor: '#DFDFDF',
|
||
borderRadius: 8,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
boxFixDetailWishListIcon: {
|
||
fontSize: 24,
|
||
},
|
||
boxFixDetailBuyGop: {
|
||
width: (winWidth - 80) / 2,
|
||
height: 40,
|
||
backgroundColor: '#008445',
|
||
borderRadius: 8,
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
boxFixDetailBuyTextSt: {
|
||
textTransform: 'uppercase',
|
||
color: '#fff',
|
||
fontWeight: 'bold',
|
||
},
|
||
boxFixDetailBuyTextNd: {
|
||
fontSize: 10,
|
||
color: '#fff'
|
||
},
|
||
boxFixDetailBuyNow: {
|
||
width: (winWidth - 80) / 2,
|
||
height: 40,
|
||
backgroundColor: '#D8262F',
|
||
borderRadius: 8,
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
});
|