them build pc, account
This commit is contained in:
497
screens/AccountHome.tsx
Normal file
497
screens/AccountHome.tsx
Normal file
@@ -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 (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
<View style={styles.brecrumb}>
|
||||
<Text style={styles.brecrumbText}>Trang chủ</Text>
|
||||
<FontAwesome style={styles.brecrumbIcon} name="angle-right" />
|
||||
<Text style={styles.brecrumbTextLast}>Tài khoản của bạn</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.accountBox}>
|
||||
<View style={styles.accountBoxHeader}>
|
||||
<View style={styles.accountBoxHeaderIcon}>
|
||||
<FontAwesome style={styles.accountBoxHeaderIconFont} name="user" />
|
||||
</View>
|
||||
<View style={styles.accountBoxHeaderInfo}>
|
||||
<Text style={styles.accountBoxHeaderInfoText}>Tài khoản</Text>
|
||||
<Text style={styles.accountBoxHeaderInfoName}>Hurasoft test</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<MenuAccount />
|
||||
|
||||
<View style={styles.accountBoxContent}>
|
||||
<Text style={styles.accountBoxTextHome}>Bạn đang ở trang tài khoản. Vui lòng chọn XEM THÔNG TIN để xem các mục.</Text>
|
||||
|
||||
<CustommerInfo />
|
||||
|
||||
<CustommerInfoChange />
|
||||
|
||||
<ProductSave />
|
||||
|
||||
<ProductFavorite />
|
||||
</View>
|
||||
</View>
|
||||
<PolicyFooter />
|
||||
|
||||
<Social />
|
||||
|
||||
<ShowroomList />
|
||||
|
||||
<FooterInfo />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const MenuAccount = () => {
|
||||
const [showMenuAccount, setShowMenuAccount] = useState(true)
|
||||
return (
|
||||
<View style={styles.accountBoxSelec}>
|
||||
<TouchableOpacity style={styles.accountBoxSelecBox} onPress={() => setShowMenuAccount(!showMenuAccount)}>
|
||||
<Text style={styles.accountBoxSelecBoxText}>Xem thông tin</Text>
|
||||
<FontAwesome style={styles.accountBoxSelecBoxIcon} name="angle-down" />
|
||||
</TouchableOpacity>
|
||||
<View style={showMenuAccount ? styles.accountBoxSelecList : [styles.accountBoxSelecList, styles.active]}>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="user" />
|
||||
<Text style={styles.accountNameTabText}>Thông tin tài khoản</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="list" />
|
||||
<Text style={styles.accountNameTabText}>Quản lý đơn hàng</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="eye" />
|
||||
<Text style={styles.accountNameTabText}>Sản phẩm đã xem</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="archive" />
|
||||
<Text style={styles.accountNameTabText}>Sản phẩm đã lưu</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="comment" />
|
||||
<Text style={styles.accountNameTabText}>Sản phẩm bạn đã đánh giá</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="heart" />
|
||||
<Text style={styles.accountNameTabText}>Sản phẩm bạn đã thích</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="lock" />
|
||||
<Text style={styles.accountNameTabText}>Thay đổi mật khẩu</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="power-off" />
|
||||
<Text style={styles.accountNameTabText}>Logout</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const CustommerInfo = () => {
|
||||
return (
|
||||
<View style={styles.custommerInfo}>
|
||||
<Text style={styles.custommerInfoItemHeader}>Thông tin tài khoản</Text>
|
||||
<Text style={styles.custommerInfoItem}>Họ tên: Hurasoft Test</Text>
|
||||
<Text style={styles.custommerInfoItem}>Giới tính: Nữ</Text>
|
||||
<Text style={styles.custommerInfoItem}>Email: test@mail.com</Text>
|
||||
<Text style={styles.custommerInfoItem}>Địa chỉ: 30 Nguyên Hồng - Láng Hạ - Đống Đa - HN</Text>
|
||||
<Text style={styles.custommerInfoItem}>Tỉnh/Thành phố: Hà Nội</Text>
|
||||
<Text style={styles.custommerInfoItem}>Số điện thoại: 0912345678</Text>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.custommerInfoButtonText}>Chỉnh sửa thông tin cá nhân</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const CustommerInfoChange = () => {
|
||||
const [selectedProvince, setSelectedProvince] = useState();
|
||||
const [checked, setChecked] = React.useState('male');
|
||||
return (
|
||||
<View style={styles.boxCustommerInfoChange}>
|
||||
<Text style={styles.boxCustommerInfoChangeTitle}>Cập nhật thông tin cá nhân</Text>
|
||||
<View style={styles.boxCustommerInfoChangeList}>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Họ tên</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Giới tính</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<View style={styles.registerItemSex}>
|
||||
<View style={styles.registerItemSexItem}>
|
||||
<Text style={styles.registerItemSexText}>Nam</Text>
|
||||
<View style={styles.registerItemSexRadio}>
|
||||
<RadioButton color={'#243a76'} value={'male'} status={checked === 'male' ? 'checked' : 'unchecked'} onPress={() => setChecked('male')} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.registerItemSexItem}>
|
||||
<Text style={styles.registerItemSexText}>Nữ</Text>
|
||||
<View style={styles.registerItemSexRadio}>
|
||||
<RadioButton color={'#243a76'} value={'female'} status={checked === 'female' ? 'checked' : 'unchecked'} onPress={() => setChecked('female')} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Địa chỉ email</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Địa chỉ nhà</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Tỉnh/TP</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<Picker
|
||||
style={styles.picker}
|
||||
itemStyle={styles.onePickerItem}
|
||||
selectedValue={selectedProvince}
|
||||
onValueChange={(itemValue, itemIndex) =>
|
||||
setSelectedProvince(itemValue)
|
||||
}
|
||||
>
|
||||
<Picker.Item label="Hà Nội" value="1" />
|
||||
<Picker.Item label="Đà Nẵng" value="2" />
|
||||
<Picker.Item label="Hải Phòng" value="3" />
|
||||
<Picker.Item label="TP Hồ Chí Minh" value="4" />
|
||||
</Picker>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Điện thoại cố định</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Điện thoại di động</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<TouchableOpacity style={styles.boxCustommerInfoChangeSubmit}>
|
||||
<Text style={styles.boxCustommerInfoChangeSubmitText}>Thay đổi</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<View style={styles.boxProductSave}>
|
||||
<Text style={styles.boxProductSaveTitle}>Sản phẩm mua sau</Text>
|
||||
<View style={styles.listProductSave}>
|
||||
{
|
||||
productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
|
||||
productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
|
||||
/>)
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ProductFavorite = () => {
|
||||
const itemProductStyle = {
|
||||
width: '100%',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e8e8e8',
|
||||
position: 'relative',
|
||||
}
|
||||
return (
|
||||
<View style={styles.boxProductSave}>
|
||||
<Text style={styles.boxProductSaveTitle}>Sản phẩm Bạn đã thích</Text>
|
||||
<View style={styles.listProductSave}>
|
||||
{
|
||||
productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
|
||||
productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
|
||||
/>)
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
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: {},
|
||||
})
|
||||
@@ -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() {
|
||||
|
||||
<BuildPcBox />
|
||||
|
||||
<ProductOtherBuildPc />
|
||||
|
||||
<PolicyFooter />
|
||||
|
||||
<Social />
|
||||
@@ -77,7 +81,35 @@ const BuildPcBox = () => {
|
||||
<BuildPcListStore />
|
||||
|
||||
<ListItemBuildPc />
|
||||
|
||||
<View>
|
||||
<Text style={styles.boxBuildPcTotalPrice}>Chi phí dự tính <Text style={styles.boxBuildPcTotalPriceNum}>30.000.000 đ</Text></Text>
|
||||
</View>
|
||||
<View>
|
||||
<TouchableOpacity style={styles.buttonBuildPcFt}>
|
||||
<Text style={styles.buttonBuildPcFtText}>Lưu cấu hình</Text>
|
||||
<FontAwesome style={styles.buttonBuildPcFtIcon} name="floppy-o" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.buttonBuildPcFt}>
|
||||
<Text style={styles.buttonBuildPcFtText}>tải file excel cấu hình</Text>
|
||||
<FontAwesome style={styles.buttonBuildPcFtIcon} name="file-excel-o" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.buttonBuildPcFt}>
|
||||
<Text style={styles.buttonBuildPcFtText}>tải ảnh cấu hình</Text>
|
||||
<FontAwesome style={styles.buttonBuildPcFtIcon} name="picture-o" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.buttonBuildPcFt}>
|
||||
<Text style={styles.buttonBuildPcFtText}>chia sẻ cấu hình</Text>
|
||||
<FontAwesome style={styles.buttonBuildPcFtIcon} name="picture-o" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.buttonBuildPcFt}>
|
||||
<Text style={styles.buttonBuildPcFtText}>Xem & in</Text>
|
||||
<FontAwesome style={styles.buttonBuildPcFtIcon} name="picture-o" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.buttonBuildPcFt}>
|
||||
<Text style={styles.buttonBuildPcFtText}>Thêm vào giỏ hàng</Text>
|
||||
<FontAwesome style={styles.buttonBuildPcFtIcon} name="shopping-cart" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -247,9 +279,25 @@ const ListItemBuildPc = () => {
|
||||
}
|
||||
<Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
|
||||
<View style={styles.itemBuildPCPop}>
|
||||
<Pressable style={styles.itemBuildPCPopClose} onPress={() => setModalVisible(!modalVisible)}>
|
||||
<FontAwesome style={styles.itemBuildPCPopCloseIcon} name="times" />
|
||||
</Pressable>
|
||||
<View style={styles.headerPopBuildPC}>
|
||||
<View style={styles.headerPopBuildPCContentSt}>
|
||||
<Text style={styles.headerPopBuildPCTitle}>Chọn linh kiện</Text>
|
||||
<Pressable style={styles.itemBuildPCPopClose} onPress={() => setModalVisible(!modalVisible)}>
|
||||
<FontAwesome style={styles.itemBuildPCPopCloseIcon} name="times" />
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={styles.headerPopBuildPCContentNd}>
|
||||
<SearchPopBuildPc />
|
||||
<FilterPopBuildPc />
|
||||
</View>
|
||||
<View style={styles.headerPopBuildPCContentRd}>
|
||||
<View style={styles.headerPopBuildPCContentRdTop}>
|
||||
<SortProBuildPc />
|
||||
<WarehouseProBuildPc />
|
||||
</View>
|
||||
<PagingProBuildPc />
|
||||
</View>
|
||||
</View>
|
||||
<ScrollView>
|
||||
<ProductBuildPC />
|
||||
</ScrollView>
|
||||
@@ -259,90 +307,226 @@ const ListItemBuildPc = () => {
|
||||
)
|
||||
}
|
||||
|
||||
const SearchPopBuildPc = () => {
|
||||
return (
|
||||
<View style={styles.headerPopBuildPCSearch}>
|
||||
<TextInput style={styles.headerPopBuildPCSearchInput} placeholder="Bạn cần tìm linh kiện gì?" />
|
||||
<Pressable style={styles.headerPopBuildPCSearchButton}>
|
||||
<FontAwesome style={styles.headerPopBuildPCSearchIcon} name="search" />
|
||||
</Pressable>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const FilterPopBuildPc = () => {
|
||||
const [openFilter, setopenFilter] = useState(true);
|
||||
return (
|
||||
<View style={styles.headerPopBuildPCContentFilter}>
|
||||
<TouchableOpacity style={styles.headerPopBuildPCFilter} onPress={() => setopenFilter(!openFilter)}>
|
||||
<Ionicons style={styles.headerPopBuildPCFinterIcon} name="funnel-outline" />
|
||||
<Text style={styles.headerPopBuildPCFinterText}>Lọc</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={openFilter ? styles.headerPopBuildPCContentFilterShowHide : styles.headerPopBuildPCContentFilterShow}>
|
||||
<Text style={styles.headerPopBuildPCContentFilterTitle}>Lọc sản phẩm theo</Text>
|
||||
<ScrollView style={{ maxHeight: 400, }}>
|
||||
<FinterBuildPcItem />
|
||||
<FinterBuildPcItem />
|
||||
<FinterBuildPcItem />
|
||||
<FinterBuildPcItem />
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const FinterBuildPcItem = () => {
|
||||
const [checkedFilter, setCheckedFilter] = useState(false);
|
||||
return (
|
||||
<View style={styles.headerPopBuildPCContentFilterBox}>
|
||||
<Text style={styles.headerPopBuildPCContentFilterName}>Hãng sản xuất</Text>
|
||||
<View style={styles.headerPopBuildPCContentFilterList}>
|
||||
<View style={styles.headerPopBuildPCContentFilterItem}>
|
||||
<View style={styles.headerPopBuildPCContentFilterCheck}>
|
||||
<Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
|
||||
</View>
|
||||
<Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
|
||||
</View>
|
||||
<View style={styles.headerPopBuildPCContentFilterItem}>
|
||||
<View style={styles.headerPopBuildPCContentFilterCheck}>
|
||||
<Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
|
||||
</View>
|
||||
<Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
|
||||
</View>
|
||||
<View style={styles.headerPopBuildPCContentFilterItem}>
|
||||
<View style={styles.headerPopBuildPCContentFilterCheck}>
|
||||
<Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
|
||||
</View>
|
||||
<Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
|
||||
</View>
|
||||
<View style={styles.headerPopBuildPCContentFilterItem}>
|
||||
<View style={styles.headerPopBuildPCContentFilterCheck}>
|
||||
<Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
|
||||
</View>
|
||||
<Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const SortProBuildPc = () => {
|
||||
const [showSortProBuildPc, setshowSortProBuildPc] = useState(true);
|
||||
return (
|
||||
<View style={styles.headerPopBuildPCContentSelect}>
|
||||
<Text style={styles.headerPopBuildPCContentSelectTite}>Sắp Xếp</Text>
|
||||
<TouchableOpacity style={styles.headerPopBuildPCContentSelectBox} onPress={() => setshowSortProBuildPc(!showSortProBuildPc)}>
|
||||
<Text style={styles.headerPopBuildPCContentSelectBoxText}>Tùy chọn</Text>
|
||||
<FontAwesome style={styles.headerPopBuildPCContentSelectBoxIcon} name="angle-down" />
|
||||
</TouchableOpacity>
|
||||
<View style={showSortProBuildPc ? [styles.headerPopBuildPCContentSelectList, styles.poLeft] : [styles.headerPopBuildPCContentSelectList, styles.poLeft, styles.active]}>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>Mới nhất</Text>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>Giá tăng dần</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const WarehouseProBuildPc = () => {
|
||||
const [showSortProBuildPc, setshowSortProBuildPc] = useState(true);
|
||||
return (
|
||||
<View style={styles.headerPopBuildPCContentSelect}>
|
||||
<Text style={styles.headerPopBuildPCContentSelectTite}>Kho hàng</Text>
|
||||
<TouchableOpacity style={styles.headerPopBuildPCContentSelectBox} onPress={() => setshowSortProBuildPc(!showSortProBuildPc)}>
|
||||
<Text style={styles.headerPopBuildPCContentSelectBoxText}>Tất cả</Text>
|
||||
<FontAwesome style={styles.headerPopBuildPCContentSelectBoxIcon} name="angle-down" />
|
||||
</TouchableOpacity>
|
||||
<View style={showSortProBuildPc ? [styles.headerPopBuildPCContentSelectList, styles.poRight] : [styles.headerPopBuildPCContentSelectList, styles.poRight, styles.active]}>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>01: 131 Lê Thanh Nghị - Q. Hai Bà Trưng - Hà Nội</Text>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>02: 43 Thái Hà - Q. Đống Đa - Hà Nội</Text>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>03: A1-6 Lô 8A Lê Hồng Phong - Q. Ngô Quyền - Hải Phòng</Text>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>04: 79 Nguyễn Văn Huyên - Q. Cầu Giấy - Hà Nội</Text>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>05: 511 Quang Trung - Q. Hà Đông - Hà Nội</Text>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>06: 520 Cách Mạng Tháng 8 - Quận 3 - TP HCM</Text>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>07: 398 Nguyễn Văn Cừ - Q. Long Biên - Hà Nội</Text>
|
||||
<Text style={styles.headerPopBuildPCContentSelectItem}>08: 299 Minh Khai - Từ Sơn - Bắc Ninh</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const PagingProBuildPc = () => {
|
||||
return (
|
||||
<View style={styles.pagingBuildPc}>
|
||||
<TouchableOpacity style={[styles.pagingBuildPcItem, styles.pagingBuildPcItemActive]}>
|
||||
<Text style={[styles.pagingBuildPcText, styles.pagingBuildPcTextActive]}>1</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingBuildPcItem}>
|
||||
<Text style={styles.pagingBuildPcText}>2</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingBuildPcItem}>
|
||||
<Text style={styles.pagingBuildPcText}>3</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingBuildPcItem}>
|
||||
<Text style={styles.pagingBuildPcText}>4</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingBuildPcItem}>
|
||||
<Text style={styles.pagingBuildPcText}>5</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingBuildPcItem}>
|
||||
<Text style={styles.pagingBuildPcText}>6</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingBuildPcItem}>
|
||||
<Text style={styles.pagingBuildPcText}>7</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<View style={styles.boxPrductBuildPc}>
|
||||
@@ -390,7 +574,7 @@ const ProductBuildPC = () => {
|
||||
: <View style={styles.boxPrductBuildPcSelecYes}>
|
||||
<FontAwesome style={styles.boxPrductBuildPcSelecIcon} name="plus" />
|
||||
</View>
|
||||
}
|
||||
}
|
||||
</Pressable>
|
||||
</View>
|
||||
)
|
||||
@@ -402,6 +586,33 @@ const ProductBuildPC = () => {
|
||||
)
|
||||
}
|
||||
|
||||
const ProductOtherBuildPc = () => {
|
||||
const itemProductStyle = {
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
}
|
||||
return (
|
||||
<View style={styles.ProductOtherBuildPc}>
|
||||
<Text style={styles.ProductOtherBuildPcTitle}>Cấu hình tham khảo</Text>
|
||||
<View style={styles.ProductOtherBuildPcList}>
|
||||
<Swiper style={styles.sliderSwipper} autoplay={true} showsButtons={false} index={3000} showsPagination={false}>
|
||||
{
|
||||
productData.map(item => <ShowProductItem key={item.id} id={item.id} productName={item.productName}
|
||||
productSKU={item.productSKU} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
|
||||
/>)
|
||||
}
|
||||
</Swiper>
|
||||
</View>
|
||||
<View>
|
||||
<TouchableOpacity style={styles.ProductOtherBuildPcButton}>
|
||||
<Text style={styles.ProductOtherBuildPcButtonText}>Xem thêm 19 sản phẩm</Text>
|
||||
<FontAwesome style={styles.ProductOtherBuildPcButtonIcon} name="caret-right" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
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'
|
||||
},
|
||||
})
|
||||
@@ -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 (
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
|
||||
<Text> Home Screen </Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user