From b296e442a611c4bc474d74aec742e51021050515 Mon Sep 17 00:00:00 2001 From: ducht Date: Mon, 12 Apr 2021 17:24:57 +0700 Subject: [PATCH] add cart, login, product search, update navigation --- assets/images/icon-zalo.png | Bin 0 -> 1842 bytes assets/images/icon_xu.png | Bin 0 -> 4982 bytes assets/images/img-cart-voucher.png | Bin 0 -> 1341 bytes assets/images/pay_1.png | Bin 0 -> 2593 bytes assets/images/pay_2.png | Bin 0 -> 1697 bytes assets/images/pay_3.png | Bin 0 -> 4457 bytes components/header/HeaderAllPage.tsx | 40 +- components/product/ProductItem.tsx | 4 +- navigation/BottomTabNavigator.tsx | 93 ++- screens/Cart.tsx | 1195 +++++++++++++++++++++++++++ screens/Login.tsx | 182 ++++ screens/ProductList.tsx | 27 +- screens/ProductSearch.tsx | 751 +++++++++++++++++ 13 files changed, 2282 insertions(+), 10 deletions(-) create mode 100644 assets/images/icon-zalo.png create mode 100644 assets/images/icon_xu.png create mode 100644 assets/images/img-cart-voucher.png create mode 100644 assets/images/pay_1.png create mode 100644 assets/images/pay_2.png create mode 100644 assets/images/pay_3.png create mode 100644 screens/Cart.tsx create mode 100644 screens/Login.tsx create mode 100644 screens/ProductSearch.tsx diff --git a/assets/images/icon-zalo.png b/assets/images/icon-zalo.png new file mode 100644 index 0000000000000000000000000000000000000000..d5718d950ebab491f19941e860f8aa9144eac6ad GIT binary patch literal 1842 zcmaJ?c~BE~7!3uHLsSZb7wR@3qLLGmKuSc&0YMTl28jolYmq3)hRtGvMMkcQf~Z6* zQfv!G1O)^{Cu+rjq97vHQ7MQwqDTQPBVN>YgP{GRbZ2*e$GrEx@B4jkXLm&KgB|Q< z+hH&m2W|*UfR3K#$Hp3c=X^9O(P0+C79lI4SVSvvN0I{0G(PQ+XNzj6x^UtF|dQ@E?@zLoPmv^@Q6G$ z6O2=YY=Oa*TlhlRmQ6B0IW}M^;IE^j0!k2(06Jy7N<-H%u%o(kbZ*`zV1ZExvWbEH zl$3}U0WcvL1SoiKoQy~!0aPlUeqfe~~PHGzaDnoAl7@_7FbRVqKDHHZNGlJ9>C zYlKN^kRSjxP$Dct8yD+l4yC3uVNilVun>ac$4@aL4niPJ9Ha)AE2)5IltLwkw3y1#-wfBqoJTq>OV} zkStLNs*rK6{0rB2Lax~gN;Mjp1;UEWpqv9kN?^2Px?+IpLN&X+v1fLH1E)sHzD#=Q?q8Y2^mR>$qc=AFHX6xlBsSe)|G zDcWaOWQ4$K2jKDKjJNiAOG`4DtG|}1rxAw8gWYu><~Fu(D?QekEty+oA+kq?D%P78 zie2(oI4_7AoEJLR5Hxcb!!%6=9=_BEn1aP$>88{Wwzf{kS{t?%cjkv#>}_;+vC7+c zW+Xg%-8aRLIL-Z*@W!DGzRVZ{U*z2=*zcZ-*LJTV94rWtt_V~9Y&g`ExmH)cN~+Qy z>A3ZESK+F=1a|JJ$j8)LrtI^6U(Xr3kXYDPx{Esv5{hte)Z|ynY-SB>kE3v12u@k$uygZ@y z9nQ;0NIsWy-0?6%e;Dfanj7HQ6`!Dqpf|LcEQ`8BZQjIK45mh!VtzVN+wr?-@X5`J zE7E)XPOs?nWA>c*V&u~PEQR=pxQ(>`>PdN{V_%6ArR)bz`EbQ;Dz?E=FU>pfqH)i! z)xTj*0gg%JX>~-M2C4a&2F8Uks&pRZ)J?+EKYNtoJ~DVwmq6P zCwRL=s5V@9JJNbGz2M^W>lF6@!{HA$9q+%bug`rI(%&GdyDrlUZbM~d)j+UA8@GPZ zywI2>G0!sl{IZ`-^6kkRnO;XL1lf^3Max?69dPXq6(z5Gdu2}QcU={;YIZS*le(-= zTMFBvOJ7`b&V2lIRb0)3XW4>y|7q(i>nydp4wXKD!tC5pP`I`7wD^KJ%HvJb-7D@3 z54zNfR`>J{d$wdX%t*gcYf@0%CzEe!NG>AmLT4Oq1-h!GyV!sJlk}N-}fw)$D!z}RQ<1}d;2N==bx~N3~UFPyL6?+^G^PGb>HMBuu%}c*NHYiF?`N$E#~wa;Wc;Z zGMxGl?STh;lm&0LFiy)KVg|o?p=i1qx z%N($I(c9~A8CU6jC1|~7hOvHXujgi~sO3YpdqQs{gbbFoYto&G&DH^DDhmy{({=p@ z5{;h+y74>CAA1TfZDMfp-InEl=&3B3X#<7EbhQr{M%Hh$z);^gWYlQci1{zZW%F5; ILE^N30Qe*1?EnA( literal 0 HcmV?d00001 diff --git a/assets/images/icon_xu.png b/assets/images/icon_xu.png new file mode 100644 index 0000000000000000000000000000000000000000..edcce4036ab826a5f05b85999d746c22c783e9ae GIT binary patch literal 4982 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 literal 0 HcmV?d00001 diff --git a/assets/images/pay_1.png b/assets/images/pay_1.png new file mode 100644 index 0000000000000000000000000000000000000000..bd0540d843e0f6d8719aba873edfd788b439c8a2 GIT binary patch literal 2593 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 literal 0 HcmV?d00001 diff --git a/assets/images/pay_3.png b/assets/images/pay_3.png new file mode 100644 index 0000000000000000000000000000000000000000..bd0152e2f0caf6cb3f9b20c254ac11e594efd1f0 GIT binary patch literal 4457 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 literal 0 HcmV?d00001 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', + }, +});