diff --git a/App.tsx b/App.tsx index 27a9f8c..2e68f79 100644 --- a/App.tsx +++ b/App.tsx @@ -24,6 +24,7 @@ import ForgetPassword from './screens/ForgetPassword'; import AboutUs from './screens/AboutUs'; import ContactUs from './screens/ContactUs'; import BuildPc from './screens/BuildPc'; +import AccountHome from './screens/AccountHome'; @@ -224,6 +225,18 @@ const BuildPcPage = ({ navigation }: { navigation: any }) => { ); } +const AccountHomePage = ({ navigation }: { navigation: any }) => { + return ( + + + + ); +} + const MainContentRouter = () => { return ( @@ -240,6 +253,7 @@ const MainContentRouter = () => { + ); } diff --git a/components/product/productItem.tsx b/components/product/productItem.tsx index 7607a3b..f1757fa 100644 --- a/components/product/productItem.tsx +++ b/components/product/productItem.tsx @@ -51,6 +51,34 @@ const ShowProductItem = (props: { id: number, productName: string, productSKU: s ); } +const ShowProductItemSave = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number, privateStyle: object }) => { + + const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity, privateStyle } = props; + const discount = Math.ceil(100 - (price / marketPrice * 100)); + + + return ( + + + + + + {productSKU} + -{discount}% + + + + + + {productName} + + {summary} + {formatCurrency(price)} đ + {formatCurrency(marketPrice)} đ + + ); +} + const ItemComboSet = (props: { id: number, productName: string, productSKU: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number }) => { const { id, productName, productSKU, productImage, price, marketPrice, quantity } = props; @@ -102,7 +130,7 @@ const ItemComboSetProDetail = (props: { id: number, productName: string, product ); } -export { ShowProductItem, ItemComboSet, ItemComboSetProDetail }; +export { ShowProductItem, ItemComboSet, ItemComboSetProDetail, ShowProductItemSave }; let winWidth = Dimensions.get('window').width; //full width let winHeight = Dimensions.get('window').height; //full height @@ -241,5 +269,12 @@ const styles = StyleSheet.create({ lineHeight: 22, marginHorizontal: 10 }, - + pProductDelete: {}, + pProductDeleteIcon: { + fontSize: 18, + }, + pSummaryProduct: { + marginBottom: 10, + lineHeight: 20, + }, }) \ No newline at end of file diff --git a/screens/AccountHome.tsx b/screens/AccountHome.tsx new file mode 100644 index 0000000..6ba791e --- /dev/null +++ b/screens/AccountHome.tsx @@ -0,0 +1,497 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain'; + +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; +import { ArticleItem } from '../components/article/ArticleItem'; +import { ShowProductItemSave } from '../components/product/productItem'; + +export default function AccountHome() { + return ( + + + + Trang chủ + + Tài khoản của bạn + + + + + + + + + Tài khoản + Hurasoft test + + + + + + + Bạn đang ở trang tài khoản. Vui lòng chọn XEM THÔNG TIN để xem các mục. + + + + + + + + + + + + + + + + + + + + ) +} + +const MenuAccount = () => { + const [showMenuAccount, setShowMenuAccount] = useState(true) + return ( + + setShowMenuAccount(!showMenuAccount)}> + Xem thông tin + + + + + + Thông tin tài khoản + + + + Quản lý đơn hàng + + + + Sản phẩm đã xem + + + + Sản phẩm đã lưu + + + + Sản phẩm bạn đã đánh giá + + + + Sản phẩm bạn đã thích + + + + Thay đổi mật khẩu + + + + Logout + + + + ) +} + +const CustommerInfo = () => { + return ( + + Thông tin tài khoản + Họ tên: Hurasoft Test + Giới tính: Nữ + Email: test@mail.com + Địa chỉ: 30 Nguyên Hồng - Láng Hạ - Đống Đa - HN + Tỉnh/Thành phố: Hà Nội + Số điện thoại: 0912345678 + + Chỉnh sửa thông tin cá nhân + + + ) +} + +const CustommerInfoChange = () => { + const [selectedProvince, setSelectedProvince] = useState(); + const [checked, setChecked] = React.useState('male'); + return ( + + Cập nhật thông tin cá nhân + + + Họ tên + + + + + + Giới tính + + + + Nam + + setChecked('male')} /> + + + + Nữ + + setChecked('female')} /> + + + + + + + Địa chỉ email + + + + + + Địa chỉ nhà + + + + + + Tỉnh/TP + + + setSelectedProvince(itemValue) + } + > + + + + + + + + + Điện thoại cố định + + + + + + Điện thoại di động + + + + + + + Thay đổi + + + + + ) +} + +const productData = [ + { + id: 1, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, + { + id: 2, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 25000000, + marketPrice: 50000000, + quantity: 0, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, +] + +const ProductSave = () => { + const itemProductStyle = { + width: '100%', + borderBottomWidth: 1, + borderBottomColor: '#e8e8e8', + position: 'relative', + } + return ( + + Sản phẩm mua sau + + { + productData.map(item => ) + } + + + ) +} + +const ProductFavorite = () => { + const itemProductStyle = { + width: '100%', + borderBottomWidth: 1, + borderBottomColor: '#e8e8e8', + position: 'relative', + } + return ( + + Sản phẩm Bạn đã thích + + { + productData.map(item => ) + } + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + brecrumb: { + display: 'flex', + width: winWidth, + paddingLeft: 10, + paddingRight: 10, + flexDirection: 'row', + height: 18, + alignItems: 'center', + marginTop: 10, + marginBottom: 10, + }, + brecrumbText: { + fontSize: 13, + color: '#222', + }, + brecrumbTextLast: { + fontSize: 13, + color: '#b7b7b7', + }, + brecrumbIcon: { + fontSize: 13, + color: '#222', + marginLeft: 6, + marginRight: 6 + }, + accountBox: { + marginBottom: 20, + width: winWidth, + paddingHorizontal: 10, + }, + accountBoxHeader: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: 20, + }, + accountBoxHeaderIcon: { + width: 60, + height: 60, + borderRadius: 30, + overflow: 'hidden', + backgroundColor: '#008445', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + marginRight: 20, + }, + accountBoxHeaderIconFont: { + fontSize: 40, + color: '#fff', + lineHeight: 40, + }, + accountBoxHeaderInfo: { + width: winWidthP10 - 80, + }, + accountBoxHeaderInfoText: { + marginBottom: 10, + }, + accountBoxHeaderInfoName: { + fontSize: 16, + textTransform: 'uppercase', + fontWeight: 'bold' + }, + accountBoxSelec: { + marginBottom: 20, + }, + accountBoxSelecBox: { + borderRadius: 3, + borderWidth: 1, + borderColor: '#999', + paddingHorizontal: 10, + height: 40, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + accountBoxSelecBoxText: { + textTransform: 'uppercase', + fontWeight: 'bold', + }, + accountBoxSelecBoxIcon: {}, + accountBoxSelecList: { + width: '100%', + borderRadius: 3, + borderWidth: 1, + borderColor: '#999', + display: 'none', + }, + active: { + display: 'flex', + }, + accountNameTab: { + padding: 10, + flexDirection: 'row', + alignItems: 'center', + }, + accountNameTabIcon: { + fontSize: 24, + color: '#7b7b7b', + marginRight: 8, + }, + accountNameTabText: {}, + accountBoxContent: {}, + accountBoxTextHome: {}, + custommerInfo: { + }, + custommerInfoItemHeader: { + marginBottom: 10, + fontWeight: 'bold', + }, + custommerInfoItem: { + marginBottom: 10, + }, + custommerInfoButtonText: { + color: '#ed1b24' + }, + boxCustommerInfoChange: {}, + boxCustommerInfoChangeList: { + padding: 10, + borderColor: '#e1e1e1', + borderWidth: 1, + borderRadius: 5, + }, + boxCustommerInfoChangeTitle: { + fontSize: 16, + fontWeight: 'bold', + marginBottom: 10, + }, + custommerInfoChangeItem: { + marginBottom: 15, + flexDirection: 'row', + alignItems: 'center' + }, + custommerInfoChangeItemText: { + width: 148, + }, + custommerInfoChangeItemContent: { + width: winWidthP10 - 170, + }, + custommerInfoChangeItemInput: { + width: '100%', + height: 36, + borderRadius: 3, + borderWidth: 1, + borderColor: '#e1e1e1', + paddingHorizontal: 10, + }, + registerItemSex: { + flexDirection: 'row', + alignItems: 'center', + }, + registerItemSexItem: { + flexDirection: 'row', + alignItems: 'center', + marginRight: 20, + }, + registerItemSexText: { + marginRight: 5, + }, + registerItemSexRadio: { + width: 36, + height: 36, + borderColor: '#333', + borderWidth: 1, + borderRadius: 18, + }, + picker: { + height: 46, + width: '100%', + }, + onePickerItem: { + height: 46, + color: '#222', + fontSize: 14, + textAlign: 'center', + width: '100%', + }, + boxCustommerInfoChangeSubmit: { + width: 150, + height: 36, + backgroundColor: 'red', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 5, + }, + boxCustommerInfoChangeSubmitText: { + color: '#fff' + }, + boxProductSave: {}, + boxProductSaveTitle: { + fontSize: 16, + fontWeight: 'bold', + marginBottom: 15, + }, + listProductSave: {}, +}) \ No newline at end of file diff --git a/screens/BuildPc.tsx b/screens/BuildPc.tsx index ea5eb09..5e4f3c0 100644 --- a/screens/BuildPc.tsx +++ b/screens/BuildPc.tsx @@ -14,6 +14,8 @@ import { TextInput } from 'react-native-gesture-handler'; import { RadioButton, Checkbox } from 'react-native-paper'; import { Picker } from '@react-native-picker/picker'; import { ArticleItem } from '../components/article/ArticleItem'; +import Swiper from 'react-native-swiper'; +import { ShowProductItem } from '../components/product/productItem'; export default function BuildPc() { return ( @@ -27,6 +29,8 @@ export default function BuildPc() { + + @@ -77,7 +81,35 @@ const BuildPcBox = () => { - + + Chi phí dự tính 30.000.000 đ + + + + Lưu cấu hình + + + + tải file excel cấu hình + + + + tải ảnh cấu hình + + + + chia sẻ cấu hình + + + + Xem & in + + + + Thêm vào giỏ hàng + + + ) } @@ -247,9 +279,25 @@ const ListItemBuildPc = () => { } { setModalVisible(!modalVisible); }}> - setModalVisible(!modalVisible)}> - - + + + Chọn linh kiện + setModalVisible(!modalVisible)}> + + + + + + + + + + + + + + + @@ -259,90 +307,226 @@ const ListItemBuildPc = () => { ) } +const SearchPopBuildPc = () => { + return ( + + + + + + + ) +} + +const FilterPopBuildPc = () => { + const [openFilter, setopenFilter] = useState(true); + return ( + + setopenFilter(!openFilter)}> + + Lọc + + + Lọc sản phẩm theo + + + + + + + + + ) +} + +const FinterBuildPcItem = () => { + const [checkedFilter, setCheckedFilter] = useState(false); + return ( + + Hãng sản xuất + + + + setCheckedFilter(!checkedFilter)} /> + + AMD (50) + + + + setCheckedFilter(!checkedFilter)} /> + + AMD (50) + + + + setCheckedFilter(!checkedFilter)} /> + + AMD (50) + + + + setCheckedFilter(!checkedFilter)} /> + + AMD (50) + + + + ); +} + +const SortProBuildPc = () => { + const [showSortProBuildPc, setshowSortProBuildPc] = useState(true); + return ( + + Sắp Xếp + setshowSortProBuildPc(!showSortProBuildPc)}> + Tùy chọn + + + + Mới nhất + Giá tăng dần + + + ) +} + +const WarehouseProBuildPc = () => { + const [showSortProBuildPc, setshowSortProBuildPc] = useState(true); + return ( + + Kho hàng + setshowSortProBuildPc(!showSortProBuildPc)}> + Tất cả + + + + 01: 131 Lê Thanh Nghị - Q. Hai Bà Trưng - Hà Nội + 02: 43 Thái Hà - Q. Đống Đa - Hà Nội + 03: A1-6 Lô 8A Lê Hồng Phong - Q. Ngô Quyền - Hải Phòng + 04: 79 Nguyễn Văn Huyên - Q. Cầu Giấy - Hà Nội + 05: 511 Quang Trung - Q. Hà Đông - Hà Nội + 06: 520 Cách Mạng Tháng 8 - Quận 3 - TP HCM + 07: 398 Nguyễn Văn Cừ - Q. Long Biên - Hà Nội + 08: 299 Minh Khai - Từ Sơn - Bắc Ninh + + + ) +} + +const PagingProBuildPc = () => { + return ( + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + ) +} + function formatCurrency(price: string | number) { let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); let len = priceConvert.length; return priceConvert.substring(0, len - 3); } +const productData = [ + { + id: 1, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + warrantry: '36 Tháng', + }, + { + id: 2, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 25000000, + marketPrice: 50000000, + quantity: 0, + warrantry: '36 Tháng', + }, + { + id: 3, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 35000000, + marketPrice: 50000000, + quantity: 1, + warrantry: '36 Tháng', + }, + { + id: 4, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 40000000, + marketPrice: 50000000, + quantity: 1, + warrantry: '36 Tháng', + }, + { + id: 5, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + warrantry: '36 Tháng', + }, +] + const ProductBuildPC = () => { - const productData = [ - { - id: 1, - productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', - productSKU: 'TESTSKU', - productImage: { - small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - }, - price: 30000000, - marketPrice: 50000000, - quantity: 1, - warrantry: '36 Tháng', - }, - { - id: 2, - productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', - productSKU: 'TESTSKU', - productImage: { - small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - }, - price: 25000000, - marketPrice: 50000000, - quantity: 0, - warrantry: '36 Tháng', - }, - { - id: 3, - productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', - productSKU: 'TESTSKU', - productImage: { - small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - }, - price: 35000000, - marketPrice: 50000000, - quantity: 1, - warrantry: '36 Tháng', - }, - { - id: 4, - productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', - productSKU: 'TESTSKU', - productImage: { - small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - }, - price: 40000000, - marketPrice: 50000000, - quantity: 1, - warrantry: '36 Tháng', - }, - { - id: 5, - productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', - productSKU: 'TESTSKU', - productImage: { - small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', - }, - price: 30000000, - marketPrice: 50000000, - quantity: 1, - warrantry: '36 Tháng', - }, - ] return ( @@ -390,7 +574,7 @@ const ProductBuildPC = () => { : - } + } ) @@ -402,6 +586,33 @@ const ProductBuildPC = () => { ) } +const ProductOtherBuildPc = () => { + const itemProductStyle = { + width: '100%', + flexDirection: 'column', + } + return ( + + Cấu hình tham khảo + + + { + productData.map(item => ) + } + + + + + Xem thêm 19 sản phẩm + + + + + ) +} + const winWidth = Dimensions.get('window').width; //full width const winHeight = Dimensions.get('window').height; //full height const winWidthP10 = winWidth - 20; @@ -579,11 +790,10 @@ const styles = StyleSheet.create({ lineHeight: 36, }, itemBuildPCPop: { - backgroundColor: '#fff', flex: 1, - padding: 10, position: 'relative', - paddingTop: 50, + paddingTop: 25, + backgroundColor: '#243a76', }, itemBuildPCPopClose: { width: 30, @@ -592,11 +802,11 @@ const styles = StyleSheet.create({ justifyContent: 'center', flexDirection: 'row', alignItems: 'center', - position: 'absolute', - top: 15, - right: 10, + borderColor: '#fff' + }, + itemBuildPCPopCloseIcon: { + color: '#fff' }, - itemBuildPCPopCloseIcon: {}, boxPrductBuildPc: { width: winWidth, paddingHorizontal: 10, @@ -708,4 +918,295 @@ const styles = StyleSheet.create({ color: '#fff', lineHeight: 36, }, + headerPopBuildPC: { + width: winWidth, + flexDirection: 'column', + zIndex: 9, + }, + headerPopBuildPCContentSt: { + flexDirection: 'row', + justifyContent: 'space-between', + width: '100%', + backgroundColor: '#243a76', + height: 40, + alignItems: 'center', + paddingHorizontal: 10, + }, + headerPopBuildPCTitle: { + fontSize: 20, + fontWeight: 'bold', + color: '#fff' + }, + headerPopBuildPCContentNd: { + flexDirection: 'row', + justifyContent: 'space-between', + width: winWidth, + backgroundColor: '#243a76', + padding: 10, + zIndex: 9, + }, + headerPopBuildPCSearch: { + width: winWidthP10 - 60, + backgroundColor: '#fff', + position: 'relative', + borderRadius: 3, + overflow: 'hidden', + }, + headerPopBuildPCSearchInput: { + width: '100%', + height: 40, + paddingHorizontal: 10, + paddingRight: 40, + }, + headerPopBuildPCSearchButton: { + width: 40, + height: 40, + position: 'absolute', + right: 0, + top: 0, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center' + }, + headerPopBuildPCSearchIcon: { + fontSize: 18, + color: '#ec1b23' + }, + headerPopBuildPCContentFilter: { + width: 60, + height: 40, + position: 'relative', + backgroundColor: 'rgba(0,0,0,0)' + }, + headerPopBuildPCFilter: { + width: '100%', + height: 40, + flexDirection: 'row', + justifyContent: 'flex-end', + alignItems: 'center', + zIndex: 9, + }, + headerPopBuildPCFinterIcon: { + fontSize: 16, + color: '#fff', + marginRight: 5, + }, + headerPopBuildPCFinterText: { + fontSize: 16, + color: '#fff' + }, + headerPopBuildPCContentFilterShowHide: { + width: winWidth, + position: 'absolute', + top: 50, + right: -10, + padding: 10, + backgroundColor: '#fff', + zIndex: 9, + display: 'none', + }, + headerPopBuildPCContentFilterShow: { + width: winWidth, + position: 'absolute', + top: 50, + right: -10, + padding: 10, + backgroundColor: '#fff', + zIndex: 9, + }, + headerPopBuildPCContentFilterTitle: { + fontSize: 16, + fontWeight: 'bold', + color: '#243a76', + lineHeight: 32, + }, + headerPopBuildPCContentFilterBox: { + paddingVertical: 10, + borderTopColor: '#e1e1e1', + borderTopWidth: 1, + }, + headerPopBuildPCContentFilterName: { + fontSize: 16, + fontWeight: 'bold', + marginBottom: 10, + }, + headerPopBuildPCContentFilterList: { + width: '100%', + flexDirection: 'row', + justifyContent: 'space-between', + flexWrap: 'wrap', + alignItems: 'center', + }, + headerPopBuildPCContentFilterItem: { + width: '100%', + flexDirection: 'row', + marginBottom: 10, + alignItems: 'center' + }, + headerPopBuildPCContentFilterCheck: { + width: 35, + height: 35, + borderWidth: 1, + borderColor: '#999', + marginRight: 10, + position: 'relative', + }, + headerPopBuildPCContentFilterText: {}, + headerPopBuildPCContentRd: { + flexDirection: 'column', + width: winWidth, + padding: 10, + borderBottomColor: '#f7f7f7', + borderBottomWidth: 1, + }, + headerPopBuildPCContentRdTop: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: 10, + position: 'relative', + zIndex: 8, + }, + headerPopBuildPCContentSelect: { + flexDirection: 'row', + alignItems: 'center', + width: '49%', + position: 'relative', + zIndex: 9, + }, + headerPopBuildPCContentSelectTite: { + marginRight: 10, + fontWeight: 'bold', + width: 65, + }, + headerPopBuildPCContentSelectBox: { + paddingHorizontal: 10, + height: 32, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + borderWidth: 1, + borderColor: '#e1e1e1', + borderRadius: 3, + }, + headerPopBuildPCContentSelectBoxText: { + marginRight: 10, + }, + headerPopBuildPCContentSelectBoxIcon: {}, + headerPopBuildPCContentSelectList: { + position: 'absolute', + width: winWidthP10, + top: 35, + padding: 10, + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.22, + shadowRadius: 2.22, + elevation: 3, + display: 'none', + }, + active: { + display: 'flex', + }, + poRight: { + right: 0, + }, + poLeft: { + left: 0, + }, + headerPopBuildPCContentSelectItem: { + marginBottom: 10, + }, + pagingBuildPc: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + flexWrap: 'wrap', + }, + pagingBuildPcItem: { + width: 28, + height: 28, + borderRadius: 3, + backgroundColor: '#243a76', + marginHorizontal: 2, + color: '#fff', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderColor: '#243a76', + borderWidth: 1, + }, + pagingBuildPcItemActive: { + backgroundColor: '#fff', + }, + pagingBuildPcText: { + color: '#fff', + fontWeight: 'bold', + }, + pagingBuildPcTextActive: { + color: '#ec0000', + fontWeight: 'bold', + }, + buttonBuildPcFt: { + width: '100%', + marginTop: 10, + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#2d3877', + borderRadius: 3, + }, + buttonBuildPcFtText: { + fontSize: 14, + textTransform: 'uppercase', + color: '#fff', + marginRight: 10, + fontWeight: 'bold', + }, + buttonBuildPcFtIcon: { + fontSize: 14, + color: '#fff', + }, + sliderSwipper: { + flexDirection: 'row', + height: 500, + }, + ProductOtherBuildPc: { + marginVertical: 20, + paddingHorizontal: 10, + borderTopWidth: 1, + borderTopColor: '#e1e1e1' + }, + ProductOtherBuildPcTitle: { + width: '100%', + paddingVertical: 10, + fontWeight: 'bold', + fontSize: 24, + textTransform: 'uppercase', + color: '#2d3877', + textAlign: 'center' + }, + ProductOtherBuildPcList: { + width: '100%', + }, + ProductOtherBuildPcButton: { + width: '100%', + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderRadius: 3, + backgroundColor: '#2d3877' + }, + ProductOtherBuildPcButtonText: { + color: '#fff', + marginRight: 10, + }, + ProductOtherBuildPcButtonIcon: { + color: '#fff' + }, }) \ No newline at end of file diff --git a/screens/test.tsx b/screens/test.tsx deleted file mode 100644 index a577bf7..0000000 --- a/screens/test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Text, View } from 'react-native' -import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; - -function HomeScreen() { - return ( - - Home Screen - - ); -} \ No newline at end of file