diff --git a/assets/images/icon-zalo.png b/assets/images/icon-zalo.png
new file mode 100644
index 0000000..d5718d9
Binary files /dev/null and b/assets/images/icon-zalo.png differ
diff --git a/assets/images/icon_xu.png b/assets/images/icon_xu.png
new file mode 100644
index 0000000..edcce40
Binary files /dev/null and b/assets/images/icon_xu.png differ
diff --git a/assets/images/img-cart-voucher.png b/assets/images/img-cart-voucher.png
new file mode 100644
index 0000000..32743ed
Binary files /dev/null and b/assets/images/img-cart-voucher.png differ
diff --git a/assets/images/pay_1.png b/assets/images/pay_1.png
new file mode 100644
index 0000000..bd0540d
Binary files /dev/null and b/assets/images/pay_1.png differ
diff --git a/assets/images/pay_2.png b/assets/images/pay_2.png
new file mode 100644
index 0000000..8949894
Binary files /dev/null and b/assets/images/pay_2.png differ
diff --git a/assets/images/pay_3.png b/assets/images/pay_3.png
new file mode 100644
index 0000000..bd0152e
Binary files /dev/null and b/assets/images/pay_3.png differ
diff --git a/components/header/HeaderAllPage.tsx b/components/header/HeaderAllPage.tsx
index 82f0b8b..06fe93d 100644
--- a/components/header/HeaderAllPage.tsx
+++ b/components/header/HeaderAllPage.tsx
@@ -16,11 +16,12 @@ const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const HeaderHome = () => {
+ const navigation = useNavigation();
return (
-
+ navigation.navigate('ProductSearch')}>
@@ -33,6 +34,7 @@ const HeaderHome = () => {
const HeaderCategory = () => {
const [openSearch, setopenSearch] = useState(true);
+ const navigation = useNavigation();
return (
@@ -44,7 +46,7 @@ const HeaderCategory = () => {
-
+ navigation.navigate('ProductSearch')} style={styles.headerCategorySearchSubmit}>
@@ -56,7 +58,7 @@ const HeaderCategory = () => {
-
+ navigation.navigate('Cart')}>
0
@@ -77,7 +79,29 @@ const HeaderProductDetail = () => {
navigation.navigate('Home')} style={styles.boxHeaderProductDetailHome}>
-
+ navigation.navigate('Cart')}>
+
+ 0
+
+
+
+ )
+}
+
+const HeaderAllOtherPage = (props : {headerTitle: string}) => {
+ const {headerTitle} = props
+ const navigation = useNavigation();
+ return (
+
+ navigation.goBack()} style={styles.boxHeaderProductDetailGoBack}>
+
+
+ {headerTitle}
+
+ navigation.navigate('Home')} style={styles.boxHeaderProductDetailHome}>
+
+
+ navigation.navigate('Cart')}>
0
@@ -87,7 +111,7 @@ const HeaderProductDetail = () => {
}
-export { HeaderHome, HeaderCategory, HeaderProductDetail };
+export { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage };
const styles = StyleSheet.create({
container: {
@@ -288,4 +312,10 @@ const styles = StyleSheet.create({
top: 5,
right: 0,
},
+ boxHeaderProductDetailTitle: {
+ width: winWidth - 140,
+ textAlign: 'center',
+ fontWeight: 'bold',
+ fontSize: 16,
+ },
})
\ No newline at end of file
diff --git a/components/product/ProductItem.tsx b/components/product/ProductItem.tsx
index 0b89554..e0cb32a 100644
--- a/components/product/ProductItem.tsx
+++ b/components/product/ProductItem.tsx
@@ -17,7 +17,9 @@ const winHeight = Dimensions.get('window').height; //full height
const ProductItemSt = () => {
return (
-
+
+
+
)
}
diff --git a/navigation/BottomTabNavigator.tsx b/navigation/BottomTabNavigator.tsx
index 9d0a3de..c064d35 100644
--- a/navigation/BottomTabNavigator.tsx
+++ b/navigation/BottomTabNavigator.tsx
@@ -11,7 +11,10 @@ import HomePage from '../screens/HomePage';
import ProductList from '../screens/ProductList';
import MenuCategory from '../screens/MenuCategory';
import ProductDetail from '../screens/ProductDetail';
-import { HeaderHome, HeaderCategory, HeaderProductDetail } from '../components/header/HeaderAllPage'
+import Cart from '../screens/Cart';
+import Login from '../screens/Login';
+import ProductSearch from '../screens/ProductSearch';
+import { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage } from '../components/header/HeaderAllPage'
const BottomTab = createBottomTabNavigator();
@@ -37,7 +40,7 @@ export default function BottomTabNavigator() {
/>
,
}}
@@ -51,7 +54,7 @@ export default function BottomTabNavigator() {
/>
,
}}
@@ -158,6 +161,75 @@ function ProductDetailNavigation() {
);
}
+const CartStack = createStackNavigator();
+
+function CartNavigation() {
+ return (
+
+ (
+
+ ),
+ headerStyle: {
+ backgroundColor: '#fff',
+ height: 80,
+ }
+ }}
+ />
+
+ );
+}
+
+const LoginStack = createStackNavigator();
+
+function LoginNavigation() {
+ return (
+
+ (
+
+ ),
+ headerStyle: {
+ backgroundColor: '#fff',
+ height: 80,
+ }
+ }}
+ />
+
+ );
+}
+
+const ProductSearchStack = createStackNavigator();
+
+function ProductSearchNavigation() {
+ return (
+
+ (
+
+ ),
+ headerStyle: {
+ backgroundColor: '#fff',
+ height: 80,
+ }
+ }}
+ />
+
+ );
+}
+
const AllStack = createStackNavigator();
function AllStackNavigation() {
return (
@@ -182,6 +254,21 @@ function AllStackNavigation() {
component={ProductDetailNavigation}
options={{ headerShown: false }}
/>
+
+
+
);
}
diff --git a/screens/Cart.tsx b/screens/Cart.tsx
new file mode 100644
index 0000000..bb90ade
--- /dev/null
+++ b/screens/Cart.tsx
@@ -0,0 +1,1195 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal } 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 Swiper from 'react-native-swiper';
+import { Asset } from 'expo-asset';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+
+export default function Cart() {
+ return (
+
+
+
+
+
+ );
+}
+
+const CustommerInfo = () => {
+ const [selecTab, setSelecTab] = React.useState('cus')
+ return (
+
+
+ setSelecTab('login')}>
+ Đăng nhập
+ Đã là thành viên của Nagakawa
+
+ setSelecTab('cus')}>
+ Mua hàng nhanh
+ Dành cho khách hàng mới
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const LoginCart = () => {
+ return (
+
+ Thanh toán đơn hàng chỉ trong 1 bước với
+
+
+
+
+
+ Facebook
+
+
+
+
+
+ Google
+
+
+
+
+
+ Facebook
+
+
+
+
+ Email đăng nhập
+
+
+
+ Mật khẩu
+
+
+
+
+ Quên mật khẩu? Khôi phục mật khẩu
+
+ Tại đây
+
+
+
+ Đăng nhập
+
+
+ )
+}
+
+const CustommerInfoCart = () => {
+ const [selecSex, setSelecSex] = React.useState('male');
+ const [checkedInfo, setCheckedInfo] = React.useState(false);
+ const [selectedProvince, setSelectedProvince] = React.useState();
+ const [selectedDistrict, setSelectedDistrict] = React.useState();
+ return (
+
+ Thông tin khách hàng
+
+ Thông tin người mua
+ (*) Thông tin bắt buộc
+
+
+
+
+ setSelecSex('male')} />
+
+ Anh
+
+
+
+ setSelecSex('female')} />
+
+ Chị
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Thông tin người nhận
+ (*) Thông tin bắt buộc
+
+
+
+ setCheckedInfo(!checkedInfo)} />
+
+ Lấy thông tin người mua
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setSelectedProvince(itemValue)
+ }
+ >
+
+
+
+
+
+
+
+
+
+ setSelectedDistrict(itemValue)
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const SelecPayOption = () => {
+ const [checkedPayment, setCheckedPayment] = React.useState('pay1');
+ const listPayment = [
+ {
+ id: 1,
+ name: 'COD - Thanh toán khi nhận hàng',
+ description: '',
+ image: require('../assets/images/pay_1.png'),
+ },
+ {
+ id: 2,
+ name: 'Thanh toán trực tuyến (bằng thẻ ATM, VISA, MASTER) ',
+ description: '',
+ image: require('../assets/images/pay_2.png'),
+ },
+ {
+ id: 3,
+ name: 'Trả góp qua Alepay (Ngân Lượng)',
+ description: '',
+ image: require('../assets/images/pay_2.png'),
+ },
+ ]
+ return (
+
+ Phương thức thanh toán
+ Chọn phương thức thanh toán
+
+ {
+ listPayment.map(item => {
+ let idpay = 'pay' + item.id;
+ return (
+
+
+
+
+ {item.name}
+
+ setCheckedPayment(idpay)} />
+
+
+ )
+ })
+ }
+
+
+ )
+}
+
+const Bill = () => {
+ const [checkedBill, setCheckedBill] = React.useState(false);
+ return (
+
+
+
+ setCheckedBill(!checkedBill)} />
+
+ Yêu cầu xuất hóa đơn GTGT cho đơn hàng này
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const CartItem = () => {
+ return (
+
+
+
+ Quay lại mua thêm sản phẩm khác
+
+
+ Giỏ hàng của bạn
+
+
+
+
+
+
+
+
+
+
+ Xóa
+
+
+
+
+ Khẩu trang vải kháng khuẩn Nagakawa 2 lớp - Công nghệ Nhật Bản Hộp 10 chiếc (Hộp 10 chiếc - L)
+
+
+ Để dành mua sau
+
+
+
+ 121.000.000 đ
+
+
+ +
+
+
+
+ -
+
+
+
+
+
+
+
+ )
+}
+
+const Voucher = () => {
+ const [openPopVoucher, setOpenPopVoucher] = useState(false);
+ const [checkedVoucher, setCheckedVoucher,] = useState('');
+ return (
+
+
+
+
+ Áp dụng
+
+
+
+ setOpenPopVoucher(true)}>
+
+ Chọn mã voucher
+
+
+
+ Lưu ý: Mã giảm giá không áp dụng kèm với chương trình trả góp 0%, sản phẩm Flash sale.
+ - Các mã giảm giá được áp dụng đồng thời nếu đủ điều kiện.
+ - Tài khoản đăng ký chưa được xác thực dùng NagaXu hệ thống sẽ tự động hủy đơn hàng
+
+ { setOpenPopVoucher(!openPopVoucher); }}>
+
+ setOpenPopVoucher(false)}>
+
+
+
+ Chọn Nagakawa Voucher
+
+ Mã Voucher
+
+
+ Áp dụng
+
+
+
+ Voucher có thể áp dụng
+
+
+
+
+ Nhập
+ NAG9CVFGZ
+
+
+ Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ
+
+
+ setCheckedVoucher('vc1')} />
+
+
+
+
+ Nhập
+ NAG9CVFGZ
+
+
+ Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ
+
+
+ setCheckedVoucher('vc2')} />
+
+
+
+
+ Nhập
+ NAG9CVFGZ
+
+
+ Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ
+
+
+ setCheckedVoucher('vc3')} />
+
+
+
+
+ Nhập
+ NAG9CVFGZ
+
+
+ Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ
+
+
+ setCheckedVoucher('vc4')} />
+
+
+
+
+ Nhập
+ NAG9CVFGZ
+
+
+ Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ
+
+
+ setCheckedVoucher('vc5')} />
+
+
+
+
+
+
+ setOpenPopVoucher(false)}>
+ Trở lại
+
+ setOpenPopVoucher(false)}>
+ Ok
+
+
+
+
+
+ )
+}
+
+const TotalCart = () => {
+ return (
+
+
+
+
+ Bạn chưa có Naga Xu
+
+
+
+
+ Tổng cộng
+ 5.000.000đ
+
+
+ Giảm giá
+ 00đ
+
+
+ Phí giao hàng
+ 00đ
+
+
+ Thanh toán
+ 5.000.000đ
+
+
+
+
+ Thanh toán
+
+
+
+ )
+}
+
+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',
+ backgroundColor: '#f2f2f2',
+ },
+ boxCustommerInfoCart: {
+ width: winWidth,
+ padding: 10,
+ backgroundColor: '#f2f2f2',
+ },
+ boxCustommerInfoCartHeader: {
+ width: '100%',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ backgroundColor: 'rgba(0,0,0,0)',
+ marginBottom: 10,
+ },
+ boxCustommerInfoCartTab: {
+ width: winWidth / 2 - 15,
+ padding: 10,
+ borderWidth: 1,
+ borderColor: '#ddd',
+ borderRadius: 5,
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ boxCustommerInfoCartTextSt: {
+ fontSize: 13,
+ textTransform: 'uppercase',
+ fontWeight: 'bold',
+ },
+ boxCustommerInfoCartTextNd: {
+ fontSize: 10,
+ },
+ boxCustommerInfoCartTabActive: {
+ borderColor: '#008445',
+ },
+ green: {
+ color: '#008445',
+ },
+ boxCustommerInfoCartLoginContent: {
+ width: '100%',
+ padding: 5,
+ display: 'none',
+ },
+ loginCartTitle: {
+ width: '100%',
+ textAlign: 'center',
+ paddingVertical: 10,
+ },
+ loginCartSocial: {
+ width: '100%',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ marginBottom: 10,
+ paddingBottom: 10,
+ borderBottomColor: '#e1e1e1',
+ borderBottomWidth: 1,
+ },
+ loginCartSocialButtonFace: {
+ width: 110,
+ height: 30,
+ flexDirection: 'row',
+ alignItems: 'center',
+ backgroundColor: '#3b5998',
+ borderRadius: 3,
+ },
+ loginCartSocialIcCt: {
+ width: 30,
+ height: 30,
+ borderRightWidth: 1,
+ borderRightColor: '#fff',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: 'rgba(0,0,0,0)',
+ },
+ loginCartSocialButtonIcon: {
+ fontSize: 24,
+ color: '#fff'
+ },
+ loginCartSocialButtonText: {
+ width: 80,
+ textAlign: 'center',
+ color: '#fff',
+ },
+ loginCartSocialButtonGoogle: {
+ width: 110,
+ height: 30,
+ flexDirection: 'row',
+ alignItems: 'center',
+ backgroundColor: '#df4a32',
+ borderRadius: 3,
+ },
+ loginCartSocialButtonImg: {
+ width: 24,
+ height: 24,
+ },
+ loginCartSocialButtonZalo: {
+ width: 110,
+ height: 30,
+ flexDirection: 'row',
+ alignItems: 'center',
+ backgroundColor: '#0f8edd',
+ borderRadius: 3,
+ },
+ loginCartSocialForm: {
+ marginBottom: 10,
+ },
+ loginCartSocialFormItem: {
+ width: '100%',
+ marginBottom: 10,
+ },
+ loginCartSocialFormItemText: {
+ marginBottom: 5,
+ },
+ loginCartSocialFormItemInput: {
+ width: '100%',
+ height: 40,
+ borderWidth: 1,
+ borderColor: '#e1e1e1',
+ borderRadius: 5,
+ },
+ loginCartSocialFormNote: {
+ marginBottom: 10,
+ flexDirection: 'row',
+ },
+ loginCartSocialFormNoteText: {},
+ loginCartSocialFormNoteButton: {},
+ loginCartSocialFormButton: {
+ width: '100%',
+ height: 40,
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: 5,
+ overflow: 'hidden',
+ backgroundColor: '#d9282f',
+ },
+ loginCartSocialFormButtonText: {
+ fontWeight: 'bold',
+ color: '#fff'
+ },
+ boxInfoCusCart: {
+ width: '100%',
+ backgroundColor: 'rgba(0,0,0,0)',
+ display: 'none',
+ },
+ boxInfoCusCartTitle: {
+ width: '100%',
+ marginBottom: 10,
+ backgroundColor: '#008445',
+ lineHeight: 40,
+ paddingHorizontal: 10,
+ fontSize: 18,
+ fontWeight: 'bold',
+ textTransform: 'uppercase',
+ color: '#fff',
+ },
+ boxInfoCusCartHeading: {
+ marginBottom: 10,
+ backgroundColor: 'rgba(0,0,0,0)',
+ flexDirection: 'row',
+ alignItems: 'center'
+ },
+ boxInfoCusCartHeadingText: {
+ fontSize: 16,
+ fontWeight: 'bold',
+ marginRight: 5,
+ },
+ boxInfoCusCartHeadingNote: {},
+ boxInfoCusCartItemSex: {
+ padding: 10,
+ marginBottom: 10,
+ width: '100%',
+ flexDirection: 'row',
+ },
+ boxInfoCusCartItemSexIt: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginRight: 20,
+ },
+ itemRadio: {
+ width: 36,
+ height: 36,
+ borderRadius: 18,
+ borderWidth: 1,
+ borderColor: '#e1e1e1',
+ marginRight: 5,
+ },
+ boxInfoCusCartContent: {
+ width: '100%',
+ marginBottom: 10,
+ backgroundColor: 'rgba(0,0,0,0)',
+ },
+ boxInfoCusCartItem: {
+ width: '100%',
+ marginBottom: 10,
+ backgroundColor: 'rgba(0,0,0,0)',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+ boxInfoCusCartItemInput: {
+ width: '100%',
+ height: 42,
+ borderRadius: 5,
+ borderWidth: 1,
+ borderColor: '#e1e1e1',
+ paddingHorizontal: 10,
+ backgroundColor: '#fff',
+ },
+ red: {
+ color: '#d9282f'
+ },
+ boxInfoCusCartItemHalf: {
+ width: winWidth / 2 - 15,
+ backgroundColor: 'rgba(0,0,0,0)',
+ },
+ boxInfoCusCartItemArea: {
+ width: '100%',
+ height: 85,
+ borderRadius: 5,
+ borderWidth: 1,
+ borderColor: '#e1e1e1',
+ paddingHorizontal: 10,
+ backgroundColor: '#fff',
+ },
+ boxInfoCusCartItemCheckInfo: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginBottom: 10,
+ backgroundColor: 'rgba(0,0,0,0)'
+ },
+ picker: {
+ height: 42,
+ width: '100%',
+ backgroundColor: '#fff',
+ borderRadius: 5,
+ },
+ onePickerItem: {
+ height: 46,
+ color: '#222',
+ fontSize: 14,
+ textAlign: 'center',
+ width: '100%',
+ backgroundColor: '#fff',
+ },
+ active: {
+ display: 'flex',
+ },
+ noBg: {
+ width: '100%',
+ backgroundColor: 'rgba(0,0,0,0)'
+ },
+ boxPayment: {
+ width: '100%',
+ marginBottom: 20,
+ backgroundColor: 'rgba(0,0,0,0)'
+ },
+ boxPaymentHead: {
+ width: '100%',
+ marginBottom: 10,
+ backgroundColor: '#008445',
+ lineHeight: 40,
+ paddingHorizontal: 10,
+ fontSize: 18,
+ fontWeight: 'bold',
+ textTransform: 'uppercase',
+ color: '#fff',
+ },
+ boxPaymentTitle: {
+ marginBottom: 10,
+ fontSize: 16,
+ fontWeight: 'bold',
+ },
+ boxPaymentList: {},
+ paymentItem: {
+ width: '100%',
+ padding: 10,
+ borderBottomWidth: 1,
+ borderBottomColor: '#e1e1e1',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ paymentItemImage: {
+ width: 31,
+ height: 31,
+ borderRadius: 15.5,
+ overflow: 'hidden',
+ marginRight: 10,
+ },
+ paymentItemImageCt: {
+ width: 31,
+ height: 31,
+ },
+ paymentItemText: {
+ width: winWidth - 130,
+ },
+ paymentItemRadio: {
+ width: 36,
+ height: 36,
+ borderRadius: 18,
+ borderWidth: 1,
+ borderColor: '#e1e1e1',
+ marginLeft: 10,
+ },
+ boxBill: {
+ width: '100%',
+ padding: 10,
+ marginBottom: 20,
+ },
+ boxBillList: {
+ display: 'none',
+ },
+ boxBillText: {
+ fontSize: 12,
+ },
+ boxCartItem: {
+ width: '100%',
+ marginBottom: 20,
+ backgroundColor: 'rgba(0,0,0,0)'
+ },
+ boxCartItemBuyOther: {
+ marginBottom: 10,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ boxCartItemBuyOtherIcon: {
+ fontSize: 15,
+ color: '#d9282f',
+ marginRight: 5,
+ },
+ boxCartItemBuyOtherIconText: {
+ fontSize: 15,
+ color: '#d9282f',
+ marginRight: 5,
+ textTransform: 'uppercase'
+ },
+ boxCartItemContent: {
+ width: '100%',
+ padding: 5,
+ },
+ boxCartItemContentTitle: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ lineHeight: 40,
+ },
+ boxCartItemList: {},
+ boxCartItemItem: {
+ width: '100%',
+ paddingVertical: 10,
+ flexDirection: 'row',
+ borderTopColor: '#e1e1e1',
+ borderTopWidth: 1,
+ },
+ boxCartItemItemImage: {
+ width: 90,
+ },
+ boxCartItemItemImageCt: {
+ width: 90,
+ height: 90,
+ position: 'relative',
+ marginBottom: 10,
+ },
+ boxCartItemItemImageCtImg: {
+ width: 90,
+ height: 90,
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ },
+ boxCartItemItemDelete: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ boxCartItemItemDeleteIcon: {
+ fontSize: 18,
+ color: '#999',
+ },
+ boxCartItemItemDeleteText: {
+ fontSize: 18,
+ color: '#999',
+ },
+ boxCartItemItemContent: {
+ width: winWidth - 230,
+ paddingHorizontal: 10,
+ },
+ boxCartItemItemImageName: {
+ marginBottom: 10,
+ fontWeight: '500',
+ },
+ boxCartItemItemImageBuyAfter: {
+ color: '#00a456',
+ },
+ boxCartItemItemPriceAll: {
+ width: 110,
+ },
+ boxCartItemItemPrice: {
+ fontSize: 16,
+ fontWeight: '500',
+ color: '#d9282f',
+ marginBottom: 10,
+ textAlign: 'left',
+ },
+ selecCountContent: {
+ width: 100,
+ flexDirection: 'row',
+ justifyContent: 'flex-end',
+ alignItems: 'center',
+ },
+ selecCountButton: {
+ width: 30,
+ height: 30,
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#DFDFDF',
+ },
+ selecCountButtonText: {
+ fontSize: 24,
+ },
+ selecCountInput: {
+ width: 50,
+ height: 30,
+ textAlign: 'center',
+ backgroundColor: '#f2f2f2',
+ fontSize: 22,
+ },
+ boxVoucher: {
+ width: '100%',
+ marginBottom: 20,
+ backgroundColor: 'rgba(0,0,0,0)'
+ },
+ boxVoucherForm: {
+ marginBottom: 10,
+ flexDirection: 'row',
+ alignItems: 'center',
+ borderRadius: 5,
+ },
+ boxVoucherFormInput: {
+ width: winWidth - 98,
+ height: 40,
+ paddingHorizontal: 10,
+ backgroundColor: '#fff',
+ borderTopLeftRadius: 5,
+ borderBottomLeftRadius: 5,
+ overflow: 'hidden',
+ },
+ boxVoucherFormButton: {
+ width: 78,
+ height: 40,
+ backgroundColor: '#6c757d',
+ borderTopRightRadius: 5,
+ borderBottomRightRadius: 5,
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ boxVoucherFormButtonText: {
+ color: '#fff',
+ },
+ boxVoucherShowPop: {
+ width: '100%',
+ backgroundColor: 'rgba(0,0,0,0)'
+ },
+ boxVoucherShowPopButton: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginBottom: 15,
+ },
+ boxVoucherShowPopImg: {
+ marginRight: 10,
+ },
+ boxVoucherShowPopText: {
+ color: '#d9282f',
+ },
+ boxVoucherNote: {
+ backgroundColor: 'rgba(0,0,0,0)'
+ },
+ boxVoucherNoteText: {
+ marginBottom: 10,
+ },
+ TextBold: {
+ fontWeight: 'bold',
+ },
+ boxCloseModalVoucher: {
+ width: winWidth,
+ height: 100,
+ backgroundColor: 'rgba(0,0,0,0.5)'
+ },
+ boxCloseModalVoucherPress: {
+ width: '100%',
+ height: 100,
+ },
+ contentPopVoucher: {
+ width: winWidth,
+ padding: 10,
+ height: winHeight - 100,
+ },
+ contentPopVoucherTitle: {
+ width: '100%',
+ fontSize: 18,
+ lineHeight: 25,
+ marginBottom: 10,
+ },
+ contentPopVoucherForm: {
+ width: '100%',
+ padding: 10,
+ borderRadius: 5,
+ backgroundColor: '#f5f5f5',
+ marginBottom: 10,
+ },
+ contentPopVoucherFormText: {
+ marginBottom: 5,
+ },
+ contentPopVoucherFormInput: {
+ width: '100%',
+ height: 40,
+ borderRadius: 5,
+ paddingHorizontal: 10,
+ backgroundColor: '#fff',
+ marginBottom: 10,
+ },
+ contentPopVoucherFormButton: {
+ width: '100%',
+ height: 40,
+ borderRadius: 5,
+ paddingHorizontal: 10,
+ backgroundColor: '#d9282f',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ contentPopVoucherFormButtonText: {
+ fontSize: 18,
+ textTransform: 'uppercase',
+ color: '#fff',
+ fontWeight: 'bold'
+ },
+ contentPopVoucherPop: {
+ width: '100%',
+ height: winHeight - 350,
+ },
+ contentPopVoucherPopTitle: {
+ marginBottom: 10,
+ },
+ contentPopVoucherPopList: {
+ width: '100%',
+ height: winHeight - 370,
+ },
+ contentPopVoucherPopItem: {
+ width: '100%',
+ marginBottom: 10,
+ borderWidth: 1,
+ borderColor: '#999',
+ flexDirection: 'row',
+ borderRadius: 5,
+ overflow: 'hidden',
+ alignItems: 'center',
+ paddingRight: 8,
+ },
+ contentPopVoucherPopItemLeft: {
+ width: 130,
+ padding: 10,
+ backgroundColor: '#999',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ contentPopVoucherPopItemLeftSt: {
+ color: '#fff',
+ marginBottom: 5,
+ fontSize: 15,
+ },
+ contentPopVoucherPopItemLeftNd: {
+ color: '#fff',
+ marginBottom: 5,
+ fontSize: 15,
+ textTransform: 'uppercase',
+ fontWeight: 'bold'
+ },
+ contentPopVoucherPopItemCenter: {
+
+ },
+ contentPopVoucherPopItemCenterText: {
+ width: winWidth - 194,
+ paddingHorizontal: 10,
+ },
+ contentPopVoucherPopItemCheck: {
+ width: 36,
+ height: 36,
+ borderRadius: 18,
+ borderWidth: 1,
+ borderColor: '#999',
+ },
+ contentPopVoucherPopBot: {
+ width: '100%',
+ height: 60,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+ contentPopVoucherPopBotBack: {
+ width: winWidth / 2 - 15,
+ backgroundColor: '#ebebeb',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderRadius: 5,
+ height: 40,
+ },
+ contentPopVoucherPopBotBackText: {
+ fontSize: 18,
+ textTransform: 'uppercase',
+ },
+ contentPopVoucherPopBotOk: {
+ width: winWidth / 2 - 15,
+ backgroundColor: '#d9282f',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderRadius: 5,
+ height: 40,
+ },
+ contentPopVoucherPopBotOkText: {
+ fontSize: 18,
+ textTransform: 'uppercase',
+ color: '#fff',
+ fontWeight: 'bold',
+ },
+ boxTotalCart: {
+ paddingHorizontal: 10,
+ },
+ boxTotalCartXu: {
+ width: '100%',
+ paddingVertical: 15,
+ borderBottomColor: '#e1e1e1',
+ borderBottomWidth: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ boxTotalCartXuImg: {
+ width: 20,
+ height: 20,
+ marginRight: 10,
+ },
+ boxTotalCartXuButton: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ boxTotalCartButtonTex: {},
+ boxTotalCartButtonIcon: {},
+ boxTotalCartItem: {
+ width: '100%',
+ paddingVertical: 15,
+ borderBottomColor: '#e1e1e1',
+ borderBottomWidth: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+ boxTotalCartItemLeft: {
+ fontSize: 14,
+ textTransform: 'uppercase',
+ },
+ boxTotalCartItemRight: {
+ fontSize: 14,
+ },
+ boxTotalCartSubmit: {
+ flexDirection: 'row',
+ justifyContent: 'flex-end',
+ paddingVertical: 10,
+ },
+ boxTotalCartSubmitButton: {
+ width: 155,
+ height: 40,
+ backgroundColor: '#d9282f',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: 5,
+ },
+ boxTotalCartSubmitIcon: {
+ fontSize: 15,
+ color: '#fff',
+ marginRight: 10,
+ },
+ boxTotalCartSubmitText: {
+ fontSize: 15,
+ color: '#fff',
+ textTransform: 'uppercase',
+ fontWeight: 'bold',
+ },
+});
diff --git a/screens/Login.tsx b/screens/Login.tsx
new file mode 100644
index 0000000..86e3340
--- /dev/null
+++ b/screens/Login.tsx
@@ -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 (
+
+
+
+
+ Chào mừng đến với Nagakawa!
+ Đăng nhập ngay!
+
+
+ Khách hàng mới?
+
+ Đăng ký
+
+ tại đây
+
+
+
+ Email đăng nhập
+
+
+
+ Mật khẩu
+
+
+
+
+ Quên mật khẩu?
+
+
+
+ Đăng nhập
+
+
+ Hoặc đăng nhập bằng
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+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,
+ },
+});
diff --git a/screens/ProductList.tsx b/screens/ProductList.tsx
index 2bdc050..29420e3 100644
--- a/screens/ProductList.tsx
+++ b/screens/ProductList.tsx
@@ -72,6 +72,11 @@ const SortAndFilter = () => {
+
+
+ Xem 1020 sản phẩm
+
+
@@ -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',
diff --git a/screens/ProductSearch.tsx b/screens/ProductSearch.tsx
new file mode 100644
index 0000000..1629a25
--- /dev/null
+++ b/screens/ProductSearch.tsx
@@ -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 (
+
+
+
+
+
+
+
+
+ );
+}
+
+const SortAndFilter = () => {
+ const [openSort, setopenSort] = useState(true);
+ const [openFilter, setOpenFilter] = useState(false);
+ return (
+
+
+ setopenSort(!openSort)}>
+ Sắp xếp:
+ Mới nhất
+
+
+
+
+ Mới nhất
+
+
+
+ Giá giảm dần
+
+
+ Giá tăng dần
+
+
+
+
+ setOpenFilter(true)}>
+
+ Lọc
+
+ { setOpenFilter(!openFilter); }}>
+
+ setOpenFilter(!openFilter)} style={styles.filterItemContentBg}>
+
+
+
+ setOpenFilter(!openFilter)}>
+
+
+ Bộ lọc
+
+
+
+
+
+
+
+
+
+
+
+
+ Xem 1020 sản phẩm
+
+
+
+
+
+
+
+ )
+}
+
+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 (
+
+ Khoảng giá
+
+ {
+ dataPriceFilter.map((item, index) =>
+
+ )
+ }
+
+
+ Hoặc nhập giá ở ô dưới đây
+
+
+
+
+
+
+ )
+}
+
+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 (
+
+ Dung tích
+
+ {
+ dataPriceFilter.map((item, index) =>
+
+ )
+ }
+
+
+ setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}>
+ Xem thêm
+
+
+
+ )
+}
+
+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 (
+
+ Công xuất
+
+ {
+ dataPriceFilter.map((item, index) =>
+
+ )
+ }
+
+
+ setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}>
+ Xem thêm
+
+
+
+ )
+}
+
+const FilterItem = (props: { name: string, isCurrent: number }) => {
+ const { name, isCurrent } = props;
+ return (
+ 0 ? [styles.filterItem, styles.filterItemActive] : styles.filterItem} onPress={() => Alert.alert('danh muc sp')}>
+ {name}
+ {
+ isCurrent > 0 ?
+
+
+
+
+ :
+ }
+
+ );
+}
+
+const ProductCategory = () => {
+ const navigation = useNavigation();
+ return (
+
+
+
+
+
+
+
+
+
+ navigation.navigate('ProductDetail')}>
+ Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)
+
+ 1.292.000đ
+
+ 1.634.000đ
+ -30%
+
+
+ *3 khuyến mãi trị giá
+ 500.000đ
+
+
+
+
+
+
+
+
+
+
+
+
+ Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)
+ 1.292.000đ
+
+ 1.634.000đ
+ -30%
+
+
+ *3 khuyến mãi trị giá
+ 500.000đ
+
+
+
+
+
+
+
+
+
+
+
+
+ Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)
+ 1.292.000đ
+
+ 1.634.000đ
+ -30%
+
+
+ *3 khuyến mãi trị giá
+ 500.000đ
+
+
+
+
+
+
+
+
+
+
+
+
+ Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)
+ 1.292.000đ
+
+ 1.634.000đ
+ -30%
+
+
+ *3 khuyến mãi trị giá
+ 500.000đ
+
+
+
+
+
+ )
+}
+
+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',
+ },
+});