773 lines
24 KiB
TypeScript
773 lines
24 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';
|
|
|
|
export default function ProductList() {
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<ScrollView>
|
|
|
|
<SortAndFilter />
|
|
|
|
<ListCatCategory />
|
|
|
|
<ProductCategory />
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const SortAndFilter = () => {
|
|
const [openSort, setopenSort] = useState(true);
|
|
const [openFilter, setOpenFilter] = useState(false);
|
|
return (
|
|
<View style={styles.sortAndFilter}>
|
|
<View style={styles.boxSort}>
|
|
<TouchableOpacity style={styles.boxSortButton} onPress={() => setopenSort(!openSort)}>
|
|
<Text style={styles.boxSortButtonTextBold}>Sắp xếp: </Text>
|
|
<Text style={styles.boxSortButtonActive}>Mới nhất</Text>
|
|
<Ionicons style={styles.boxSortButtonIcon} name="caret-down-outline" />
|
|
</TouchableOpacity>
|
|
<View style={openSort ? styles.boxSortList : [styles.boxSortList, styles.boxSortListActive]}>
|
|
<TouchableOpacity style={[styles.boxSortItem, styles.boxSortItemActive]}>
|
|
<Text style={[styles.boxSortItemText, styles.boxSortItemTextActive]}>Mới nhất</Text>
|
|
<Ionicons style={styles.boxSortItemTextIcon} name="checkmark-outline" />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.boxSortItem}>
|
|
<Text style={styles.boxSortItemText}>Giá giảm dần</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.boxSortItem}>
|
|
<Text style={styles.boxSortItemText}>Giá tăng dần</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<View style={styles.boxFilter}>
|
|
<TouchableOpacity style={styles.boxFilterButton} onPress={() => setOpenFilter(true)}>
|
|
<Ionicons style={styles.boxFilterIcon} name="funnel-outline" />
|
|
<Text style={styles.boxFilterText}>Lọc</Text>
|
|
</TouchableOpacity>
|
|
<Modal visible={openFilter} animationType="slide" transparent={true} onRequestClose={() => { setOpenFilter(!openFilter); }}>
|
|
<View style={styles.filterItemContent}>
|
|
<Pressable onPress={() => setOpenFilter(!openFilter)} style={styles.filterItemContentBg}>
|
|
</Pressable>
|
|
<View style={styles.filterItemList}>
|
|
<View style={styles.headerPopFilter}>
|
|
<Pressable onPress={() => setOpenFilter(!openFilter)}>
|
|
<Ionicons style={styles.filterItemListClose} name="close-outline" />
|
|
</Pressable>
|
|
<Text style={styles.headerPopFilterText}>Bộ lọc</Text>
|
|
</View>
|
|
<View style={styles.listBoxFilter}>
|
|
<ScrollView>
|
|
<PriceFilterList />
|
|
|
|
<OtherFilterList />
|
|
|
|
<OtherFilterListT />
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const PriceFilterList = () => {
|
|
const dataPriceFilter = [
|
|
{
|
|
url: '/',
|
|
name: 'Dưới 200.000',
|
|
is_current: 1,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: 'Từ 200.000 đến 500.000',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: 'Từ 500.000 đến 1.000.000',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: 'Từ 1.000.000 đến 5.000.000',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: 'Từ 5.000.000 đến 15.000.000',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: 'Trên 15.000.000',
|
|
is_current: 0,
|
|
},
|
|
]
|
|
return (
|
|
<View style={styles.filterItemBox}>
|
|
<Text style={styles.filterItemListTitleName}>Khoảng giá</Text>
|
|
<View style={styles.filterItemBoxList}>
|
|
{
|
|
dataPriceFilter.map((item, index) =>
|
|
<FilterItem key={index} name={item.name} isCurrent={item.is_current} />
|
|
)
|
|
}
|
|
</View>
|
|
<View style={styles.filterItemBoxInput}>
|
|
<Text style={styles.filterItemBoxInputText}>Hoặc nhập giá ở ô dưới đây</Text>
|
|
<View style={styles.filterItemBoxInputCtList}>
|
|
<TextInput style={styles.filterItemBoxInputCt} placeholder="Từ 0đ" />
|
|
<TextInput style={styles.filterItemBoxInputCt} placeholder="đến 10.000.00đ" />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const OtherFilterList = () => {
|
|
const [openAllFilter, setOpenAllFilter] = useState(true);
|
|
const dataPriceFilter = [
|
|
{
|
|
url: '/',
|
|
name: '1 - 2 lít',
|
|
is_current: 1,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '2 - 3 lít',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '3 - 4 lít',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '4 - 9 lít',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '9 - 12 lít',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '12 - 15 lít',
|
|
is_current: 0,
|
|
},
|
|
]
|
|
return (
|
|
<View style={styles.filterItemBox}>
|
|
<Text style={styles.filterItemListTitleName}>Dung tích</Text>
|
|
<View style={openAllFilter ? styles.filterItemBoxListHeight : [styles.filterItemBoxListHeight, styles.filterItemBoxListHeightAuto]}>
|
|
{
|
|
dataPriceFilter.map((item, index) =>
|
|
<FilterItem key={index} name={item.name} isCurrent={item.is_current} />
|
|
)
|
|
}
|
|
</View>
|
|
<View style={styles.filterItemBoxVm}>
|
|
<TouchableOpacity onPress={() => setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}>
|
|
<Text style={styles.filterItemBoxVmButtonText}>Xem thêm</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const OtherFilterListT = () => {
|
|
const [openAllFilter, setOpenAllFilter] = useState(true);
|
|
const dataPriceFilter = [
|
|
{
|
|
url: '/',
|
|
name: '30W - 100W',
|
|
is_current: 1,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '100W - 300W',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '300W - 500W',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '500W - 1000W',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '1000W - 2000W',
|
|
is_current: 0,
|
|
},
|
|
{
|
|
url: '/',
|
|
name: '2000W - 5000W',
|
|
is_current: 0,
|
|
},
|
|
]
|
|
return (
|
|
<View style={styles.filterItemBox}>
|
|
<Text style={styles.filterItemListTitleName}>Công xuất</Text>
|
|
<View style={openAllFilter ? styles.filterItemBoxListHeight : [styles.filterItemBoxListHeight, styles.filterItemBoxListHeightAuto]}>
|
|
{
|
|
dataPriceFilter.map((item, index) =>
|
|
<FilterItem key={index} name={item.name} isCurrent={item.is_current} />
|
|
)
|
|
}
|
|
</View>
|
|
<View style={styles.filterItemBoxVm}>
|
|
<TouchableOpacity onPress={() => setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}>
|
|
<Text style={styles.filterItemBoxVmButtonText}>Xem thêm</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const FilterItem = (props: { name: string, isCurrent: number }) => {
|
|
const { name, isCurrent } = props;
|
|
return (
|
|
<Pressable style={isCurrent > 0 ? [styles.filterItem, styles.filterItemActive] : styles.filterItem} onPress={() => Alert.alert('danh muc sp')}>
|
|
<Text style={styles.filterItemName}>{name}</Text>
|
|
{
|
|
isCurrent > 0 ?
|
|
<View style={styles.filterCurrent}>
|
|
<Image style={styles.filterCurrentImg} source={require('../assets/images/filter-check.png')} />
|
|
<Ionicons style={styles.filterCurrentIcon} name="checkmark-outline" />
|
|
</View>
|
|
: <View></View>
|
|
}
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const ListCatCategory = () => {
|
|
const dataCat = [
|
|
{
|
|
id: 1,
|
|
url: '/',
|
|
name: 'Ấm siêu tốc'
|
|
},
|
|
{
|
|
id: 2,
|
|
url: '/',
|
|
name: 'Bàn là'
|
|
},
|
|
{
|
|
id: 3,
|
|
url: '/',
|
|
name: 'Bếp từ'
|
|
},
|
|
{
|
|
id: 4,
|
|
url: '/',
|
|
name: 'Bếp hồng ngoại'
|
|
},
|
|
{
|
|
id: 5,
|
|
url: '/',
|
|
name: 'Bình thủy điện'
|
|
},
|
|
]
|
|
let dataCatLength = dataCat.length;
|
|
return (
|
|
<View style={styles.boxCatCategory}>
|
|
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
|
|
{
|
|
dataCat.map((item, index) =>
|
|
<TouchableOpacity style={(index + 1) == dataCatLength ? [styles.boxCatCategoryItem, styles.boxCatCategoryItemLast] : styles.boxCatCategoryItem} key={item.id}>
|
|
<Text style={styles.boxCatCategoryItemText}>{item.name}</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const ProductCategory = () => {
|
|
const navigation = useNavigation();
|
|
return (
|
|
<View style={styles.boxProductCategoryList}>
|
|
<View style={styles.pItem}>
|
|
<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}>
|
|
<TouchableOpacity onPress={() => navigation.navigate('ProductDetail')}>
|
|
<Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
|
</TouchableOpacity>
|
|
<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.pOffer}>
|
|
<Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
|
|
<Text style={styles.pOfferPrice}>500.000đ</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.pItem}>
|
|
<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.pOffer}>
|
|
<Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
|
|
<Text style={styles.pOfferPrice}>500.000đ</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.pItem}>
|
|
<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.pOffer}>
|
|
<Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
|
|
<Text style={styles.pOfferPrice}>500.000đ</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.pItem}>
|
|
<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.pOffer}>
|
|
<Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
|
|
<Text style={styles.pOfferPrice}>500.000đ</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</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',
|
|
},
|
|
sortAndFilter: {
|
|
width: winWidth,
|
|
padding: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
position: 'relative',
|
|
borderBottomColor: '#e1e1e1',
|
|
borderBottomWidth: 1,
|
|
zIndex: 5,
|
|
},
|
|
boxSort: {
|
|
zIndex: 1,
|
|
},
|
|
boxSortButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
height: 30,
|
|
},
|
|
boxSortButtonTextBold: {
|
|
fontSize: 14,
|
|
fontWeight: 'bold'
|
|
},
|
|
boxSortButtonActive: {},
|
|
boxSortButtonIcon: {
|
|
marginLeft: 5,
|
|
},
|
|
boxSortList: {
|
|
width: winWidth,
|
|
paddingHorizontal: 10,
|
|
position: 'absolute',
|
|
left: -10,
|
|
top: 40,
|
|
display: 'none',
|
|
},
|
|
boxSortListActive: {
|
|
display: 'flex',
|
|
},
|
|
boxSortItem: {
|
|
paddingVertical: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
boxSortItemActive: {
|
|
borderBottomColor: '#D8262F',
|
|
borderBottomWidth: 1,
|
|
},
|
|
boxSortItemText: {
|
|
fontSize: 14,
|
|
},
|
|
boxSortItemTextActive: {
|
|
color: '#D8262F'
|
|
},
|
|
boxSortItemTextIcon: {
|
|
color: '#D8262F'
|
|
},
|
|
boxFilter: {
|
|
width: 70,
|
|
height: 30,
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
borderLeftWidth: 1,
|
|
borderLeftColor: '#e1e1e1'
|
|
},
|
|
boxFilterButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center'
|
|
},
|
|
boxFilterIcon: {
|
|
fontSize: 18,
|
|
marginRight: 10,
|
|
},
|
|
boxFilterText: {
|
|
fontSize: 14,
|
|
},
|
|
filterItemContent: {
|
|
flex: 1,
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'flex-end',
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
flexDirection: 'row',
|
|
},
|
|
filterItemContentBg: {
|
|
width: winWidth - 300,
|
|
height: winHeight,
|
|
},
|
|
headerPopFilter: {
|
|
width: '100%',
|
|
paddingTop: 30,
|
|
paddingHorizontal: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e1e1e1',
|
|
position: 'relative',
|
|
},
|
|
filterItemListClose: {
|
|
width: 40,
|
|
height: 40,
|
|
lineHeight: 40,
|
|
fontSize: 26,
|
|
},
|
|
headerPopFilterText: {
|
|
textAlign: 'center',
|
|
fontSize: 17,
|
|
fontWeight: 'bold',
|
|
width: '100%',
|
|
paddingRight: 40,
|
|
},
|
|
filterItemList: {
|
|
width: 300,
|
|
height: winHeight,
|
|
backgroundColor: '#fff',
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
shadowOpacity: 2.22,
|
|
shadowRadius: 2.22,
|
|
elevation: 3,
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
zIndex: 2,
|
|
},
|
|
listBoxFilter: {
|
|
width: '100%',
|
|
height: winHeight - 80,
|
|
},
|
|
filterItemListTitleName: {
|
|
fontWeight: 'bold',
|
|
marginBottom: 10,
|
|
},
|
|
filterItemBoxList: {
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
filterItem: {
|
|
width: 135,
|
|
height: 40,
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'rgba(0,0,0,0.2)',
|
|
borderRadius: 3,
|
|
marginBottom: 10,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(0,0,0,0.2)',
|
|
position: 'relative',
|
|
},
|
|
filterItemActive: {
|
|
borderColor: '#D8262F'
|
|
},
|
|
filterItemName: {
|
|
width: '100%',
|
|
textAlign: 'center'
|
|
},
|
|
boxProductCategory: {
|
|
width: winWidth,
|
|
},
|
|
filterItemBox: {
|
|
width: '100%',
|
|
padding: 10,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e1e1e1',
|
|
},
|
|
filterCurrent: {
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0,
|
|
},
|
|
filterCurrentImg: {
|
|
width: 24,
|
|
height: 22,
|
|
},
|
|
filterCurrentIcon: {
|
|
position: 'absolute',
|
|
zIndex: 1,
|
|
color: '#fff',
|
|
right: 0,
|
|
top: 0,
|
|
},
|
|
filterItemBoxInput: {
|
|
width: '100%',
|
|
marginTop: 10,
|
|
},
|
|
filterItemBoxInputText: {
|
|
marginBottom: 10,
|
|
},
|
|
filterItemBoxInputCtList: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
filterItemBoxInputCt: {
|
|
width: 135,
|
|
height: 40,
|
|
paddingHorizontal: 10,
|
|
borderColor: '#e1e1e1',
|
|
borderWidth: 1,
|
|
borderRadius: 3,
|
|
},
|
|
filterItemBoxListHeight: {
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
maxHeight: 100,
|
|
overflow: 'hidden'
|
|
},
|
|
filterItemBoxListHeightAuto: {
|
|
maxHeight: 'auto'
|
|
},
|
|
filterItemBoxVm: {
|
|
width: '100%',
|
|
marginBottom: 10,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
marginTop: 10,
|
|
},
|
|
filterItemBoxVmButton: {
|
|
width: 128,
|
|
height: 40,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
borderColor: '#56C4F5',
|
|
borderRadius: 3,
|
|
},
|
|
filterItemBoxVmButtonText: {
|
|
color: '#56C4F5',
|
|
fontSize: 14,
|
|
},
|
|
boxCatCategory: {
|
|
padding: 10,
|
|
},
|
|
boxCatCategoryItem: {
|
|
display: 'flex',
|
|
padding: 10,
|
|
backgroundColor: 'rgba(0,0,0,0.08)',
|
|
marginRight: 10,
|
|
},
|
|
boxCatCategoryItemLast: {
|
|
marginRight: 0,
|
|
},
|
|
boxCatCategoryItemText: {
|
|
fontSize: 14,
|
|
},
|
|
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',
|
|
},
|
|
pItem: {
|
|
width: winWidth / 2 - 15,
|
|
marginBottom: 10,
|
|
borderRadius: 5,
|
|
overflow: 'hidden',
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 3,
|
|
},
|
|
shadowOpacity: 0.27,
|
|
shadowRadius: 4.65,
|
|
elevation: 6,
|
|
},
|
|
boxProductCategoryList: {
|
|
width: winWidth,
|
|
padding: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
flexWrap: 'wrap',
|
|
backgroundColor: '#f2f2f2',
|
|
},
|
|
});
|