add cart, login, product search, update navigation
This commit is contained in:
1195
screens/Cart.tsx
Normal file
1195
screens/Cart.tsx
Normal file
File diff suppressed because it is too large
Load Diff
182
screens/Login.tsx
Normal file
182
screens/Login.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
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 Login() {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
<View style={styles.boxLogin}>
|
||||
<View style={styles.boxLoginTitle}>
|
||||
<Text style={styles.boxLoginTitleText}>Chào mừng đến với Nagakawa!</Text>
|
||||
<Text style={styles.boxLoginTitleText}>Đăng nhập ngay!</Text>
|
||||
</View>
|
||||
<View style={styles.boxLoginToRegis}>
|
||||
<Text>Khách hàng mới?</Text>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.green}>Đăng ký</Text>
|
||||
</TouchableOpacity>
|
||||
<Text>tại đây</Text>
|
||||
</View>
|
||||
<View style={styles.loginCartSocialForm}>
|
||||
<View style={styles.loginCartSocialFormItem}>
|
||||
<Text style={styles.loginCartSocialFormItemText}>Email đăng nhập</Text>
|
||||
<TextInput style={styles.loginCartSocialFormItemInput} />
|
||||
</View>
|
||||
<View style={styles.loginCartSocialFormItem}>
|
||||
<Text style={styles.loginCartSocialFormItemText}>Mật khẩu</Text>
|
||||
<TextInput style={styles.loginCartSocialFormItemInput} />
|
||||
</View>
|
||||
<View style={styles.boxLoginForgetPass}>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.boxLoginForgetPassText}>Quên mật khẩu?</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.boxLoginSubmit}>
|
||||
<Text style={styles.boxLoginSubmitText}>Đăng nhập</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.boxLoginOther}>
|
||||
<Text style={styles.boxLoginOtherText}>Hoặc đăng nhập bằng</Text>
|
||||
</View>
|
||||
<View style={styles.boxLoginSocial}>
|
||||
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialFace]}>
|
||||
<FontAwesome style={styles.boxLoginSocialIcon} name="facebook" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialGoogle]}>
|
||||
<FontAwesome style={styles.boxLoginSocialIcon} name="google" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialZalo]}>
|
||||
<Image style={styles.boxLoginSocialImg} source={require('../assets/images/icon-zalo.png')} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
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',
|
||||
},
|
||||
boxLogin: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
boxLoginTitle: {
|
||||
width: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxLoginTitleText: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
boxLoginToRegis: {
|
||||
width: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
marginBottom: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
green: {
|
||||
color: '#008445',
|
||||
},
|
||||
loginCartSocialForm: {
|
||||
marginBottom: 10,
|
||||
padding: 10,
|
||||
},
|
||||
loginCartSocialFormItem: {
|
||||
width: '100%',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginCartSocialFormItemText: {
|
||||
marginBottom: 5,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
loginCartSocialFormItemInput: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
borderRadius: 5,
|
||||
},
|
||||
loginCartSocialFormNote: {
|
||||
marginBottom: 10,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
boxLoginForgetPass: {
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
marginBottom: 15,
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
boxLoginForgetPassText: {
|
||||
color: '#008445',
|
||||
},
|
||||
boxLoginSubmit: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 5,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#d9282f',
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxLoginSubmitText: {
|
||||
fontWeight: 'bold',
|
||||
color: '#fff'
|
||||
},
|
||||
boxLoginOther: {
|
||||
marginBottom: 20,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
boxLoginOtherText: {},
|
||||
boxLoginSocial: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxLoginSocialItem: {
|
||||
width: 34,
|
||||
height: 34,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius: 5,
|
||||
marginHorizontal: 5,
|
||||
backgroundColor: '#3b5998',
|
||||
},
|
||||
boxLoginSocialFace: {},
|
||||
boxLoginSocialGoogle: {
|
||||
backgroundColor: '#df4a32',
|
||||
},
|
||||
boxLoginSocialZalo: {
|
||||
backgroundColor: '#0f8edd',
|
||||
},
|
||||
boxLoginSocialIcon: {
|
||||
fontSize: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
boxLoginSocialImg: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
});
|
||||
@@ -72,6 +72,11 @@ const SortAndFilter = () => {
|
||||
<OtherFilterListT />
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View style={styles.filterViewAll}>
|
||||
<TouchableOpacity style={styles.filterViewAllButton}>
|
||||
<Text style={styles.filterViewAllButtonText}>Xem 1020 sản phẩm</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
@@ -535,7 +540,27 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
listBoxFilter: {
|
||||
width: '100%',
|
||||
height: winHeight - 80,
|
||||
height: winHeight - 130,
|
||||
},
|
||||
filterViewAll: {
|
||||
width: '100%',
|
||||
height: 60,
|
||||
paddingHorizontal: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
filterViewAllButton: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#D8262F',
|
||||
borderRadius: 5,
|
||||
},
|
||||
filterViewAllButtonText: {
|
||||
color: '#fff',
|
||||
},
|
||||
filterItemListTitleName: {
|
||||
fontWeight: 'bold',
|
||||
|
||||
751
screens/ProductSearch.tsx
Normal file
751
screens/ProductSearch.tsx
Normal file
@@ -0,0 +1,751 @@
|
||||
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 ProductSearch() {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
|
||||
<SortAndFilter />
|
||||
|
||||
<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 style={styles.filterViewAll}>
|
||||
<TouchableOpacity style={styles.filterViewAllButton}>
|
||||
<Text style={styles.filterViewAllButtonText}>Xem 1020 sản phẩm</Text>
|
||||
</TouchableOpacity>
|
||||
</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 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 - 130,
|
||||
},
|
||||
filterViewAll: {
|
||||
width: '100%',
|
||||
height: 60,
|
||||
paddingHorizontal: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
filterViewAllButton: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#D8262F',
|
||||
borderRadius: 5,
|
||||
},
|
||||
filterViewAllButtonText: {
|
||||
color: '#fff',
|
||||
},
|
||||
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',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user