1283 lines
44 KiB
TypeScript
1283 lines
44 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 Swiper from 'react-native-swiper';
|
||
|
|
import { ShowProductItem, ItemComboSet, ItemComboSetProDetail } from '../components/product/productItem';
|
||
|
|
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
|
||
|
|
import YoutubePlayer from "react-native-youtube-iframe";
|
||
|
|
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';
|
||
|
|
|
||
|
|
export default function ProductDetail() {
|
||
|
|
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}>Laptop, Máy Tính Xách Tay</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<SliderImgDetail />
|
||
|
|
|
||
|
|
<ContentTopDetail />
|
||
|
|
|
||
|
|
<Comboset />
|
||
|
|
|
||
|
|
<ProductDetailDes />
|
||
|
|
|
||
|
|
<ProductDetailSpec />
|
||
|
|
|
||
|
|
<ProductDetailVideo />
|
||
|
|
|
||
|
|
<ProductDetailSameCategory />
|
||
|
|
|
||
|
|
<ProductDetailReview />
|
||
|
|
|
||
|
|
<ProductDetailComment />
|
||
|
|
|
||
|
|
<PolicyFooter />
|
||
|
|
|
||
|
|
<Social />
|
||
|
|
|
||
|
|
<ShowroomList />
|
||
|
|
|
||
|
|
<FooterInfo />
|
||
|
|
</ScrollView>
|
||
|
|
</SafeAreaView>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const winWidth = Dimensions.get('window').width; //full width
|
||
|
|
const winHeight = Dimensions.get('window').height; //full height
|
||
|
|
const halfWinWidth = winWidth / 2;
|
||
|
|
const ratio = winWidth / 500; //541 is actual image width
|
||
|
|
|
||
|
|
|
||
|
|
const SliderImgDetail = () => {
|
||
|
|
|
||
|
|
const imageSlider = [
|
||
|
|
{
|
||
|
|
uri: 'https://hanoicomputercdn.com/media/product/52019_14zd90n_v_ax55a5.png',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
uri: 'https://hanoicomputercdn.com/media/product/52019_laptop_lg_gram_14zd90n_v_ax55a5_i5_xam_04.jpg',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
uri: 'https://hanoicomputercdn.com/media/product/52019_laptop_lg_gram_14zd90n_v_ax55a5_i5_xam_05.jpg',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.sliderSwipperDetailBox}>
|
||
|
|
<Swiper style={styles.sliderSwipperDetail} autoplay={true} showsButtons={false} index={3000} showsPagination={false}>
|
||
|
|
{
|
||
|
|
imageSlider.map((item, index) => {
|
||
|
|
return (
|
||
|
|
<View key={index} style={styles.imgSliderDetailItem} >
|
||
|
|
<Image style={styles.imgSliderDetail} source={{ uri: item.uri }} />
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</Swiper>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ContentTopDetail = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.boxContentTopDetail}>
|
||
|
|
<Text style={styles.ProductDetailTitle}>Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)</Text>
|
||
|
|
<View style={styles.ProductDetailSkuRate}>
|
||
|
|
<Text style={styles.ProductDetailSku}>
|
||
|
|
Mã sản phẩm <Text style={styles.ProductDetailSkuText}>TESTABCD</Text>
|
||
|
|
</Text>
|
||
|
|
<Text style={styles.ProductDetailRate}>
|
||
|
|
Đánh giá: <FontAwesome style={styles.ProductDetailRateImg} name="star" />
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.ProductDetailBoxPrice}>
|
||
|
|
<View>
|
||
|
|
<View style={[styles.ProductDetailPrice, styles.backGroundBoxPrice]}>
|
||
|
|
<Text style={[styles.ProductDetailBoxPriceText, styles.backGroundBoxPrice]}>26.000.000 đ</Text>
|
||
|
|
<Text style={[styles.ProductDetailBoxPriceVat, styles.backGroundBoxPrice]}>(Giá đã bao gồm VAT)</Text>
|
||
|
|
</View>
|
||
|
|
<View style={[styles.ProductDetailOldPrice, styles.backGroundBoxPrice]}>
|
||
|
|
<Text style={[styles.ProductDetailOldPriceTitle, styles.backGroundBoxPrice]}>Giá thị trường:</Text>
|
||
|
|
<Text style={[styles.ProductDetailOldPriceText, styles.backGroundBoxPrice]}>30.000.000 đ</Text>
|
||
|
|
<Text style={[styles.ProductDetailOldPriceDiscount, styles.backGroundBoxPrice]}>(Tiết kiệm: 4.000.000 đ)</Text>
|
||
|
|
</View>
|
||
|
|
<ProductDetailConfigGroup />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.ProductDetailBoxWarehouse}>
|
||
|
|
<Text style={styles.ProductDetailBoxWarehouseTitle}>Kho hàng:</Text>
|
||
|
|
<View style={styles.ProductDetailBoxWarehouseList}>
|
||
|
|
<Text style={styles.ProductDetailBoxWarehouseItem}><FontAwesome style={styles.ProductDetailBoxWarehouseIcon} name="map-marker" /> 129+131 Lê Thanh Nghị - HBT - Hà Nội</Text>
|
||
|
|
<Text style={styles.ProductDetailBoxWarehouseItem}><FontAwesome style={styles.ProductDetailBoxWarehouseIcon} name="map-marker" /> 43 Thái Hà - Đống Đa - Hà Nội</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<Text style={[styles.ProductDetailMgb10, styles.ProductDetailText14]}>Bảo hành: 12 Tháng</Text>
|
||
|
|
<Text style={[styles.ProductDetailMgb10, styles.ProductDetailText14]}>Lượt Xem: 12000</Text>
|
||
|
|
<View style={styles.detailOfferFix}>
|
||
|
|
<View style={styles.detailOfferFixItem}>
|
||
|
|
<LinearGradient colors={['#ffa500', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradientHot}>
|
||
|
|
<Text style={styles.linearGradientHotText}>HOT</Text>
|
||
|
|
</LinearGradient>
|
||
|
|
<Text style={styles.detailOfferFixItemText}>Giảm thêm đến 200.000đ cho học sinh - sinh viên khi mua Laptop, PC nguyên chiếc(Không cộng gộp với khuyến mãi của PC lắp ráp)</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.detailOfferFixItem}>
|
||
|
|
<LinearGradient colors={['#ffa500', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradientHot}>
|
||
|
|
<Text style={styles.linearGradientHotText}>HOT</Text>
|
||
|
|
</LinearGradient>
|
||
|
|
<Text style={styles.detailOfferFixItemText}>Chính sách Bảo Hành Vàng dành cho doanh nghiệp</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.detailOffer}>
|
||
|
|
<LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradientOffer}>
|
||
|
|
<Text style={styles.detailOfferTitle}>Chương trình khuyến mại</Text>
|
||
|
|
</LinearGradient>
|
||
|
|
<View style={styles.detailOfferList}>
|
||
|
|
<Text style={styles.detailOfferItem}>BỘ QUÀ TẶNG TRỊ GIÁ 1.600.000Đ</Text>
|
||
|
|
<Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
|
||
|
|
<Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
|
||
|
|
<Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
|
||
|
|
<Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
|
||
|
|
<Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCurrency(price: string | number) {
|
||
|
|
let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
|
||
|
|
let len = priceConvert.length;
|
||
|
|
return priceConvert.substring(0, len - 3);
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductDetailConfigGroup = () => {
|
||
|
|
|
||
|
|
const dataConfigGroup = [
|
||
|
|
{
|
||
|
|
url: '/a',
|
||
|
|
name: 'LG 14ZD90N-V.AX53A5 (RAM/256GB/Trắng)',
|
||
|
|
price: 25000000,
|
||
|
|
isCurrent: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/a',
|
||
|
|
name: 'LG 14ZD90N-V.AX53A5 (RAM/512GB/Trắng)',
|
||
|
|
price: 30000000,
|
||
|
|
isCurrent: 0,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/a',
|
||
|
|
name: 'LG 14ZD90N-V.AX53A5 (RAM/256GB/Đen)',
|
||
|
|
price: 27000000,
|
||
|
|
isCurrent: 0,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={[styles.ProductDetailConfig, styles.backGroundBoxPrice]}>
|
||
|
|
<Text style={[styles.ProductDetailConfigTitle, styles.backGroundBoxPrice]}>Tùy chọn sản phẩm</Text>
|
||
|
|
<View>
|
||
|
|
{
|
||
|
|
dataConfigGroup.map((item, index) => <ConfigGroupItem key={index} url={item.url} name={item.name} price={item.price} isCurrent={item.isCurrent} />)
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ConfigGroupItem = (props: { url: string, name: string, price: number, isCurrent: number }) => {
|
||
|
|
const { url, name, price, isCurrent } = props;
|
||
|
|
return (
|
||
|
|
<View style={styles.ProductDetailConfigItem}>
|
||
|
|
<View style={styles.ProductDetailConfigItemName}>
|
||
|
|
{
|
||
|
|
isCurrent == 1 ? <FontAwesome style={styles.ProductDetailConfigItemIconCurent} name="check-circle" /> : <FontAwesome style={styles.ProductDetailConfigItemIcon} name="circle-thin" />
|
||
|
|
}
|
||
|
|
<Text style={styles.ProductDetailConfigItemNamePro}>{name}</Text>
|
||
|
|
</View>
|
||
|
|
<Text style={styles.ProductDetailConfigItemPrice}>{formatCurrency(price)} đ</Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductDetailDes = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.productDetailDes}>
|
||
|
|
<Text style={styles.productDetailDesTitle}>Giới thiệu sản phẩm</Text>
|
||
|
|
<View style={styles.productDetailDesContent}>
|
||
|
|
<Text>
|
||
|
|
Nội dung đang được cập nhật!
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductDetailSpec = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.productDetailSpec}>
|
||
|
|
<Text style={styles.productDetailSpecTitle}>Thông số kỹ thuật</Text>
|
||
|
|
<View style={styles.productDetailSpecContent}>
|
||
|
|
<Text>
|
||
|
|
<TableDetailSpec />
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const TableDetailSpec = () => {
|
||
|
|
const tableData = {
|
||
|
|
tableHead: ['', 'Head1', 'Head2', 'Head3'],
|
||
|
|
tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
|
||
|
|
tableData: [
|
||
|
|
['1', '2', '3'],
|
||
|
|
['a', 'b', 'd'],
|
||
|
|
['1', '2', '3'],
|
||
|
|
['a', 'b', 'c']
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Table style={styles.tableSpec}>
|
||
|
|
<Row style={styles.tableTitle} data={tableData.tableHead} flexArr={[1, 2, 1, 1]} />
|
||
|
|
<TableWrapper style={styles.tableWrapper}>
|
||
|
|
<Col style={styles.col} data={tableData.tableTitle} heightArr={[28, 28, 28, 28]} />
|
||
|
|
<Rows style={styles.row} data={tableData.tableData} flexArr={[2, 1, 1]} />
|
||
|
|
</TableWrapper>
|
||
|
|
</Table>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const Comboset = () => {
|
||
|
|
|
||
|
|
const dataProDetail = {
|
||
|
|
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,
|
||
|
|
}
|
||
|
|
const dataCombo = [
|
||
|
|
{
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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: 30000000,
|
||
|
|
marketPrice: 50000000,
|
||
|
|
quantity: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
return (
|
||
|
|
<View style={styles.boxproductCombo}>
|
||
|
|
<Text style={styles.productDetailSpecTitle}>Ưu đãi khi mua phụ kiện cùng Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)</Text>
|
||
|
|
<View>
|
||
|
|
<View>
|
||
|
|
<ItemComboSetProDetail key={dataProDetail.id} id={dataProDetail.id} productName={dataProDetail.productName}
|
||
|
|
productSKU={dataProDetail.productSKU} productImage={dataProDetail.productImage} price={dataProDetail.price} marketPrice={dataProDetail.marketPrice} quantity={dataProDetail.quantity} />
|
||
|
|
</View>
|
||
|
|
<View>
|
||
|
|
{
|
||
|
|
dataCombo.map(item => <ItemComboSet key={item.id} id={item.id} productName={item.productName}
|
||
|
|
productSKU={item.productSKU} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity}
|
||
|
|
/>)
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxproductComboTotalPrice}>
|
||
|
|
<Text>Tổng tiền:</Text>
|
||
|
|
<Text style={styles.boxproductComboPrice}>79.000.000 đ</Text>
|
||
|
|
<Text style={styles.boxproductComboPriceOld}>89.000.000 đ</Text>
|
||
|
|
<Pressable style={styles.boxproductComboButtonBuy}>
|
||
|
|
<Text style={styles.boxproductComboBuyCount}>Mua thêm 0 sản phẩm</Text>
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductDetailVideo = () => {
|
||
|
|
const [playing, setPlaying] = useState(false);
|
||
|
|
const heightVideo = winWidth / 2 + 15;
|
||
|
|
return (
|
||
|
|
<View style={styles.productDetailVideo}>
|
||
|
|
<Text style={styles.productDetailSpecTitle}>Video Sản phẩm</Text>
|
||
|
|
<View>
|
||
|
|
<YoutubePlayer
|
||
|
|
height={heightVideo}
|
||
|
|
play={playing}
|
||
|
|
videoId={"efxqop7QHr8"}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductDetailSameCategory = () => {
|
||
|
|
const itemProductStyle = {
|
||
|
|
width: halfWinWidth,
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
borderBottomColor: '#e8e8e8',
|
||
|
|
borderRightWidth: 1,
|
||
|
|
borderRightColor: '#e8e8e8',
|
||
|
|
}
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
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: 35000000,
|
||
|
|
marketPrice: 50000000,
|
||
|
|
quantity: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
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: 40000000,
|
||
|
|
marketPrice: 50000000,
|
||
|
|
quantity: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 5,
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
return (
|
||
|
|
<View style={styles.bloxProductHome}>
|
||
|
|
<Text style={styles.titleProductHome}>Lap top, máy tính xách tay</Text>
|
||
|
|
<View style={styles.listProductHomeBao}>
|
||
|
|
<ScrollView horizontal={true} style={styles.listProductHome}>
|
||
|
|
{
|
||
|
|
productData.map(item => <ShowProductItem key={item.id} id={item.id} productName={item.productName}
|
||
|
|
productSKU={item.productSKU} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
|
||
|
|
/>)
|
||
|
|
}
|
||
|
|
</ScrollView>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductDetailReview = () => {
|
||
|
|
|
||
|
|
const dataReview = {
|
||
|
|
summary: {
|
||
|
|
total: 10,
|
||
|
|
avgRate: 4,
|
||
|
|
},
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
custommerName: 'Hurasoft Test',
|
||
|
|
date: 15 / 3 / 2021,
|
||
|
|
content: 'Test bình luận thôi nhé',
|
||
|
|
raply: [
|
||
|
|
{
|
||
|
|
custommerName: 'Admin',
|
||
|
|
date: 15 / 3 / 2021,
|
||
|
|
content: 'Test trả lời thôi nhé',
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
custommerName: 'Hurasoft Test',
|
||
|
|
date: 15 / 3 / 2021,
|
||
|
|
content: 'Test bình luận thôi nhé',
|
||
|
|
raply: [
|
||
|
|
{
|
||
|
|
custommerName: 'Admin',
|
||
|
|
date: 15 / 3 / 2021,
|
||
|
|
content: 'Test trả lời thôi nhé',
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
const abc = [1, 2, 3, 4, 5]
|
||
|
|
const bcd = {
|
||
|
|
1: 1,
|
||
|
|
2: 3,
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.boxProductReview}>
|
||
|
|
<Text style={styles.titleProductHome}>Bình luận về sản phẩm</Text>
|
||
|
|
<View style={styles.reviewRate}>
|
||
|
|
<View style={styles.reviewRateTotal}>
|
||
|
|
<Text style={styles.reviewRateTotalNum}>{dataReview.summary.avgRate}/5</Text>
|
||
|
|
<FontAwesome style={styles.reviewRateTotalIcon} name="star" />
|
||
|
|
</View>
|
||
|
|
<View style={styles.reviewRateList}>
|
||
|
|
<ListCounterRatingReviewItem />
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<Text>Chia sẻ nhận xét về sản phẩm</Text>
|
||
|
|
<Pressable style={styles.reviewButtonShowForm} onPress={() => Alert.alert('show form review')}><Text style={styles.reviewButtonShowFormText}>Gửi đánh giá của bạn</Text></Pressable>
|
||
|
|
<View style={styles.reviewForm}>
|
||
|
|
<View style={styles.reviewFormContent}>
|
||
|
|
<FormInputReview />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
type listItem = {
|
||
|
|
rate: number,
|
||
|
|
total: number,
|
||
|
|
}
|
||
|
|
|
||
|
|
const ListCounterRatingReviewItem = () => {
|
||
|
|
const listRate = [
|
||
|
|
{
|
||
|
|
rate: 5,
|
||
|
|
total: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
rate: 4,
|
||
|
|
total: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
rate: 3,
|
||
|
|
total: 2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
rate: 2,
|
||
|
|
total: 2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
rate: 1,
|
||
|
|
total: 0
|
||
|
|
},
|
||
|
|
]
|
||
|
|
return (
|
||
|
|
<View>
|
||
|
|
{
|
||
|
|
listRate.map((item, index) =>
|
||
|
|
<View key={index} style={styles.reviewRateListItem}>
|
||
|
|
<View style={styles.reviewRateListItemNum}>
|
||
|
|
<Text style={styles.reviewRateListText}>{item.rate}</Text>
|
||
|
|
<FontAwesome style={styles.reviewRateListIcon} name="star" />
|
||
|
|
</View>
|
||
|
|
<View style={styles.reviewRateListItemCount}>
|
||
|
|
<Text style={styles.reviewRateListCount}>{item.total}</Text>
|
||
|
|
<Text style={styles.reviewRateListCountText}>đánh giá</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const Rating = () => {
|
||
|
|
const listRate = [1, 2, 3, 4, 5];
|
||
|
|
const listStatusRate = ['Không thích', 'Tạm được', 'Bình thường', 'Hài lòng', 'Rất hài lòng'];
|
||
|
|
const [defaultRating, setDefaultRating] = useState(5);
|
||
|
|
const [statusRating, setStatusRating] = useState(5);
|
||
|
|
return (
|
||
|
|
<View style={styles.ratingStyle}>
|
||
|
|
<Text style={styles.reviewFormTitle}>Chọn đánh giá của bạn</Text>
|
||
|
|
{
|
||
|
|
listRate.map((item, index) => {
|
||
|
|
return (
|
||
|
|
<TouchableOpacity style={styles.ratingStyleStar} onPress={() => {
|
||
|
|
setDefaultRating(item)
|
||
|
|
setStatusRating(item)
|
||
|
|
}} key={index}>
|
||
|
|
{
|
||
|
|
item <= defaultRating
|
||
|
|
? <FontAwesome style={styles.ratingStyleIconActive} name="star" />
|
||
|
|
: <FontAwesome style={styles.ratingStyleIcon} name="star" />
|
||
|
|
}
|
||
|
|
</TouchableOpacity>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
{
|
||
|
|
listStatusRate.map((item, index) => {
|
||
|
|
const key = index + 1;
|
||
|
|
if (statusRating == key) {
|
||
|
|
return (
|
||
|
|
<Text style={styles.ratingStyleText} key={index}>{item}</Text>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const FormInputReview = () => {
|
||
|
|
return (
|
||
|
|
|
||
|
|
<View style={[styles.boxFormReview]}>
|
||
|
|
<Rating />
|
||
|
|
<View style={styles.boxFormReviewContentText}>
|
||
|
|
<TextInput style={styles.boxFormReviewContent} multiline={true} numberOfLines={4} placeholder="Nhập đánh giá về sản phẩm (tối thiểu 80 ký tự)" />
|
||
|
|
<Pressable style={styles.boxFormReviewFile} onPress={() => Alert.alert('Chức năng up ảnh')}>
|
||
|
|
<Ionicons style={styles.boxFormReviewFileIcon} name="camera-outline" />
|
||
|
|
<Text style={styles.boxFormReviewFileText}>Đính kèm ảnh</Text>
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
<TextInput style={styles.boxFormReviewInput} placeholder="Họ tên" />
|
||
|
|
<TextInput style={styles.boxFormReviewInput} placeholder="Số điện thoại" />
|
||
|
|
<TextInput style={styles.boxFormReviewInput} placeholder="Email" />
|
||
|
|
<Pressable style={styles.boxFormReviewSubmit}>
|
||
|
|
<Text style={styles.boxFormReviewSubmitText}>Gửi đánh giá</Text>
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductDetailComment = () => {
|
||
|
|
const [modalVisible, setModalVisible] = useState(false);
|
||
|
|
return (
|
||
|
|
<View style={[styles.boxFormComment]}>
|
||
|
|
<View style={styles.boxFormReviewContentText}>
|
||
|
|
<TextInput style={styles.boxFormReviewContent} multiline={true} numberOfLines={4} placeholder="Mời bạn để lại bình luận" />
|
||
|
|
<Pressable style={styles.boxFormReviewFile} onPress={() => Alert.alert('Chức năng up ảnh')}>
|
||
|
|
<Ionicons style={styles.boxFormReviewFileIcon} name="camera-outline" />
|
||
|
|
<Text style={styles.boxFormReviewFileText}>Đính kèm ảnh</Text>
|
||
|
|
<Text style={styles.boxFormComentFileText}>Quy định đăng bình luận</Text>
|
||
|
|
</Pressable>
|
||
|
|
<View style={styles.boxFormComentShowForm}>
|
||
|
|
<Pressable style={styles.boxFormComentShowFormButton} onPress={() => setModalVisible(true)}>
|
||
|
|
<Text style={styles.boxFormComentShowFormButtonText}>Gửi bình luận</Text>
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
|
||
|
|
<Pressable onPress={() => setModalVisible(!modalVisible)} style={styles.popupCmt}>
|
||
|
|
<View style={styles.popupCmtContent}>
|
||
|
|
<Pressable onPress={() => setModalVisible(!modalVisible)}>
|
||
|
|
<FontAwesome style={styles.popupCmtClose} name="times" />
|
||
|
|
</Pressable>
|
||
|
|
<TextInput style={styles.boxFormReviewInput} placeholder="Họ tên" />
|
||
|
|
<TextInput style={styles.boxFormReviewInput} placeholder="Số điện thoại" />
|
||
|
|
<TextInput style={styles.boxFormReviewInput} placeholder="Email" />
|
||
|
|
<Pressable style={styles.boxFormReviewSubmit}>
|
||
|
|
<Text style={styles.boxFormReviewSubmitText}>Gửi đánh giá</Text>
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
</Pressable>
|
||
|
|
</Modal>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
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
|
||
|
|
},
|
||
|
|
sliderSwipperDetailBox: {
|
||
|
|
width: winWidth,
|
||
|
|
height: 500 * ratio,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
sliderSwipperDetail: {
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
imgSliderDetailItem: {
|
||
|
|
height: winWidth - 20,
|
||
|
|
width: winWidth - 20,
|
||
|
|
position: 'relative',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
imgSliderDetail: {
|
||
|
|
height: winWidth - 20,
|
||
|
|
width: winWidth - 20,
|
||
|
|
maxHeight: winWidth - 20,
|
||
|
|
maxWidth: winWidth - 20,
|
||
|
|
},
|
||
|
|
boxContentTopDetail: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
ProductDetailTitle: {
|
||
|
|
marginVertical: 5,
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
ProductDetailSkuRate: {
|
||
|
|
marginVertical: 14,
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row'
|
||
|
|
},
|
||
|
|
ProductDetailSku: {
|
||
|
|
fontSize: 14,
|
||
|
|
marginRight: 20,
|
||
|
|
},
|
||
|
|
ProductDetailSkuText: {
|
||
|
|
color: '#f00'
|
||
|
|
},
|
||
|
|
ProductDetailRate: {
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
ProductDetailRateImg: {},
|
||
|
|
ProductDetailBoxPrice: {
|
||
|
|
backgroundColor: '#fcf8e4',
|
||
|
|
padding: 10,
|
||
|
|
borderRadius: 5,
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
backGroundBoxPrice: {
|
||
|
|
backgroundColor: '#fcf8e4',
|
||
|
|
},
|
||
|
|
ProductDetailPrice: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'baseline',
|
||
|
|
paddingBottom: 5,
|
||
|
|
},
|
||
|
|
ProductDetailBoxPriceText: {
|
||
|
|
marginRight: 20,
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#f10000'
|
||
|
|
},
|
||
|
|
ProductDetailBoxPriceVat: {},
|
||
|
|
ProductDetailOldPrice: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
display: 'flex',
|
||
|
|
flexWrap: 'wrap',
|
||
|
|
paddingBottom: 10,
|
||
|
|
},
|
||
|
|
ProductDetailOldPriceTitle: {},
|
||
|
|
ProductDetailOldPriceText: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
fontSize: 14,
|
||
|
|
textDecorationLine: 'line-through',
|
||
|
|
},
|
||
|
|
ProductDetailOldPriceDiscount: {},
|
||
|
|
ProductDetailConfig: {},
|
||
|
|
ProductDetailConfigTitle: {
|
||
|
|
paddingBottom: 5,
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
ProductDetailConfigItem: {
|
||
|
|
paddingBottom: 10,
|
||
|
|
backgroundColor: '#fcf8e4',
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
width: '100%',
|
||
|
|
},
|
||
|
|
ProductDetailConfigItemName: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
paddingVertical: 10,
|
||
|
|
paddingBottom: 5,
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
borderTopLeftRadius: 3,
|
||
|
|
borderTopRightRadius: 3,
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
ProductDetailConfigItemIcon: {
|
||
|
|
fontSize: 16,
|
||
|
|
marginRight: 10,
|
||
|
|
color: '#666'
|
||
|
|
},
|
||
|
|
ProductDetailConfigItemIconCurent: {
|
||
|
|
color: '#26b214',
|
||
|
|
fontSize: 16,
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
ProductDetailConfigItemNamePro: {
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
ProductDetailConfigItemPrice: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
paddingVertical: 10,
|
||
|
|
paddingTop: 5,
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
borderBottomLeftRadius: 3,
|
||
|
|
borderBottomRightRadius: 3,
|
||
|
|
alignItems: 'center',
|
||
|
|
fontSize: 15,
|
||
|
|
color: '#d82a29',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
ProductDetailBoxWarehouse: {
|
||
|
|
marginBottom: 10,
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
},
|
||
|
|
ProductDetailBoxWarehouseTitle: {
|
||
|
|
fontSize: 14,
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
ProductDetailBoxWarehouseList: {
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
},
|
||
|
|
ProductDetailBoxWarehouseItem: {
|
||
|
|
fontSize: 14,
|
||
|
|
marginBottom: 5,
|
||
|
|
color: '#f00',
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
},
|
||
|
|
ProductDetailBoxWarehouseIcon: {
|
||
|
|
color: '#26b214',
|
||
|
|
marginRight: 5,
|
||
|
|
},
|
||
|
|
ProductDetailMgb10: {
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
ProductDetailText14: {
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
detailOfferFix: {
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
detailOfferFixItem: {
|
||
|
|
marginBottom: 10,
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'flex-start',
|
||
|
|
width: '100%'
|
||
|
|
},
|
||
|
|
linearGradientHot: {
|
||
|
|
width: 42,
|
||
|
|
height: 24,
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
borderRadius: 12,
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
linearGradientHotText: {
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
detailOfferFixItemText: {
|
||
|
|
width: winWidth - 72,
|
||
|
|
},
|
||
|
|
detailOffer: {
|
||
|
|
marginBottom: 20,
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column'
|
||
|
|
},
|
||
|
|
linearGradientOffer: {
|
||
|
|
padding: 10,
|
||
|
|
borderRadius: 3,
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
detailOfferTitle: {
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
detailOfferList: {
|
||
|
|
padding: 10,
|
||
|
|
backgroundColor: '#f1f1f1',
|
||
|
|
borderRadius: 3,
|
||
|
|
},
|
||
|
|
detailOfferItem: {
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
productDetailDes: {
|
||
|
|
marginBottom: 20,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
productDetailDesTitle: {
|
||
|
|
padding: 10,
|
||
|
|
backgroundColor: '#243a76',
|
||
|
|
borderRadius: 3,
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#fff',
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
overflow: 'hidden',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
productDetailDesContent: {},
|
||
|
|
productDetailSpec: {
|
||
|
|
marginBottom: 20,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
productDetailSpecTitle: {
|
||
|
|
padding: 10,
|
||
|
|
backgroundColor: '#243a76',
|
||
|
|
borderRadius: 3,
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#fff',
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
overflow: 'hidden',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
productDetailSpecContent: {
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
flexDirection: 'row',
|
||
|
|
},
|
||
|
|
tableTitle: {
|
||
|
|
height: 40,
|
||
|
|
},
|
||
|
|
tableSpec: {
|
||
|
|
width: winWidth - 20,
|
||
|
|
},
|
||
|
|
row: {
|
||
|
|
height: 28,
|
||
|
|
},
|
||
|
|
col: {
|
||
|
|
height: 28,
|
||
|
|
},
|
||
|
|
tableWrapper: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center'
|
||
|
|
},
|
||
|
|
boxproductCombo: {
|
||
|
|
width: winWidth,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxproductComboTotalPrice: {
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
},
|
||
|
|
boxproductComboPrice: {
|
||
|
|
marginTop: 5,
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#e00'
|
||
|
|
},
|
||
|
|
boxproductComboPriceOld: {
|
||
|
|
marginVertical: 5,
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#999',
|
||
|
|
textDecorationLine: 'line-through'
|
||
|
|
},
|
||
|
|
boxproductComboButtonBuy: {
|
||
|
|
width: '100%',
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
height: 42,
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#e00',
|
||
|
|
marginTop: 5,
|
||
|
|
},
|
||
|
|
boxproductComboBuyCount: {
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
borderRadius: 3,
|
||
|
|
},
|
||
|
|
productDetailVideo: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
videoDetail: {
|
||
|
|
width: winWidth - 20,
|
||
|
|
height: 300,
|
||
|
|
},
|
||
|
|
bloxProductHome: {
|
||
|
|
width: winWidth,
|
||
|
|
marginBottom: 20,
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
titleProductHome: {
|
||
|
|
backgroundColor: '#243a76',
|
||
|
|
fontSize: 15,
|
||
|
|
paddingLeft: 10,
|
||
|
|
paddingRight: 10,
|
||
|
|
borderRadius: 3,
|
||
|
|
lineHeight: 40,
|
||
|
|
marginBottom: 5,
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
fontWeight: '700',
|
||
|
|
color: '#fff',
|
||
|
|
overflow: 'hidden',
|
||
|
|
},
|
||
|
|
listProductHomeBao: {
|
||
|
|
overflow: 'hidden',
|
||
|
|
},
|
||
|
|
listProductHome: {
|
||
|
|
marginRight: -5,
|
||
|
|
marginLeft: -5,
|
||
|
|
},
|
||
|
|
boxProductReview: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
reviewRate: {
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
borderRadius: 5,
|
||
|
|
padding: 10,
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
reviewRateTotal: {
|
||
|
|
width: (winWidth - 20) / 2,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
reviewRateTotalNum: {
|
||
|
|
marginRight: 5,
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
reviewRateTotalIcon: {
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
reviewRateList: {
|
||
|
|
},
|
||
|
|
reviewRateListItem: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
reviewRateListItemNum: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
reviewRateListItemCount: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
},
|
||
|
|
reviewRateListText: {
|
||
|
|
|
||
|
|
},
|
||
|
|
reviewRateListIcon: {},
|
||
|
|
reviewRateListCount: {
|
||
|
|
color: '#288ad6',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
reviewRateListCountText: {
|
||
|
|
color: '#288ad6',
|
||
|
|
},
|
||
|
|
reviewButtonShowForm: {
|
||
|
|
width: '100%',
|
||
|
|
borderRadius: 5,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#288ad6',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
height: 46,
|
||
|
|
alignItems: 'center',
|
||
|
|
marginVertical: 10,
|
||
|
|
},
|
||
|
|
reviewButtonShowFormText: {
|
||
|
|
color: '#288ad6',
|
||
|
|
},
|
||
|
|
reviewForm: {},
|
||
|
|
reviewFormContent: {},
|
||
|
|
reviewFormTitle: {
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
ratingStyle: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: 8,
|
||
|
|
},
|
||
|
|
ratingStyleStar: {
|
||
|
|
marginHorizontal: 1,
|
||
|
|
},
|
||
|
|
ratingStyleIcon: {
|
||
|
|
fontSize: 16,
|
||
|
|
color: '#dadada'
|
||
|
|
},
|
||
|
|
ratingStyleIconActive: {
|
||
|
|
fontSize: 16,
|
||
|
|
color: '#ffa53f'
|
||
|
|
},
|
||
|
|
ratingStyleText: {
|
||
|
|
marginLeft: 8,
|
||
|
|
lineHeight: 18,
|
||
|
|
paddingHorizontal: 5,
|
||
|
|
color: '#fff',
|
||
|
|
backgroundColor: '#52b858'
|
||
|
|
},
|
||
|
|
boxFormReview: {
|
||
|
|
},
|
||
|
|
boxFormReviewContentText: {
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
borderWidth: 1,
|
||
|
|
borderRadius: 5,
|
||
|
|
overflow: 'hidden',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxFormReviewContent: {
|
||
|
|
height: 100,
|
||
|
|
padding: 10,
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
borderBottomColor: '#e1e1e1'
|
||
|
|
},
|
||
|
|
boxFormReviewFile: {
|
||
|
|
padding: 10,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#f7f7f7'
|
||
|
|
},
|
||
|
|
boxFormReviewFileIcon: {
|
||
|
|
marginRight: 10,
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
boxFormReviewFileText: {
|
||
|
|
},
|
||
|
|
boxFormReviewInput: {
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
borderWidth: 1,
|
||
|
|
borderRadius: 5,
|
||
|
|
overflow: 'hidden',
|
||
|
|
marginBottom: 10,
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
boxFormReviewSubmit: {
|
||
|
|
width: '100%',
|
||
|
|
borderRadius: 5,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#288ad6',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
height: 46,
|
||
|
|
alignItems: 'center',
|
||
|
|
marginVertical: 10,
|
||
|
|
},
|
||
|
|
boxFormReviewSubmitText: {
|
||
|
|
color: '#288ad6',
|
||
|
|
},
|
||
|
|
boxFormComment: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxFormComentShowForm: {
|
||
|
|
padding: 10,
|
||
|
|
backgroundColor: '#f7f7f7',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'flex-end',
|
||
|
|
},
|
||
|
|
boxFormComentShowFormButton: {
|
||
|
|
padding: 10,
|
||
|
|
width: 150,
|
||
|
|
backgroundColor: '#288ad6',
|
||
|
|
borderRadius: 5,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
},
|
||
|
|
boxFormComentShowFormButtonText: {
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
popupCmt: {
|
||
|
|
flex: 1,
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
||
|
|
position: 'relative',
|
||
|
|
zIndex: 1,
|
||
|
|
},
|
||
|
|
popupCmtContent: {
|
||
|
|
width: winWidth - 30,
|
||
|
|
maxWidth: 300,
|
||
|
|
maxHeight: 450,
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
shadowColor: "#000",
|
||
|
|
shadowOffset: {
|
||
|
|
width: 0,
|
||
|
|
height: 0,
|
||
|
|
},
|
||
|
|
shadowOpacity: 2.22,
|
||
|
|
shadowRadius: 2.22,
|
||
|
|
elevation: 3,
|
||
|
|
borderRadius: 5,
|
||
|
|
position: 'relative',
|
||
|
|
zIndex: 2,
|
||
|
|
padding: 10,
|
||
|
|
paddingTop: 20,
|
||
|
|
},
|
||
|
|
popupCmtClose: {
|
||
|
|
width: 30,
|
||
|
|
height: 30,
|
||
|
|
borderRadius: 15,
|
||
|
|
position: 'absolute',
|
||
|
|
right: -20,
|
||
|
|
top: -30,
|
||
|
|
shadowColor: "#000",
|
||
|
|
shadowOffset: {
|
||
|
|
width: 0,
|
||
|
|
height: 0,
|
||
|
|
},
|
||
|
|
shadowOpacity: 2.22,
|
||
|
|
shadowRadius: 2.22,
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
zIndex: 11,
|
||
|
|
overflow: 'hidden',
|
||
|
|
textAlign: 'center',
|
||
|
|
lineHeight: 30,
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
boxFormComentFileText: {},
|
||
|
|
|
||
|
|
})
|