ducht/Hanoicomputer_App
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

them chi tiet tin tuc, dang ky, dang nhap, gioi thieu, lien he, build pc

Browse Source
This commit is contained in:
ducht
2021-03-18 17:51:32 +07:00
parent d335721278
commit e8a10383f5
9 changed files with 2393 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

711
screens/BuildPc.tsx Normal file
View File

@@ -0,0 +1,711 @@
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';
export default function BuildPc() {
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}>Build PC</Text>
</View>
<BuildPcBox />
<PolicyFooter />
<Social />
<ShowroomList />
<FooterInfo />
</ScrollView>
</SafeAreaView>
)
}
const BuildPcBox = () => {
return (
<View style={styles.boxBuildPc}>
<Text style={styles.boxBuildPcTitle}>Xây dựng máy tính</Text>
<View style={styles.boxBuildPcBanner}>
<Image style={styles.boxBuildPcBannerImg} source={{ uri: 'https://www.hanoicomputer.vn/media/lib/huong-dan-xay-dung-cau-hinh-250420.png' }} />
</View>
<Text style={styles.boxBuildPcNote}>Chọn linh kiện xây dựng cấu hình</Text>
<View style={styles.listConfig}>
<Pressable style={[styles.listConfigItem, styles.listConfigItemActive]}>
<Text style={[styles.listConfigItemText, styles.listConfigItemTextActive]}>Cấu hình 1</Text>
</Pressable>
<Pressable style={styles.listConfigItem}>
<Text style={styles.listConfigItemText}>Cấu hình 2</Text>
</Pressable>
<Pressable style={styles.listConfigItem}>
<Text style={styles.listConfigItemText}>Cấu hình 3</Text>
</Pressable>
<Pressable style={styles.listConfigItem}>
<Text style={styles.listConfigItemText}>Cấu hình 4</Text>
</Pressable>
<Pressable style={styles.listConfigItem}>
<Text style={styles.listConfigItemText}>Cấu hình 5</Text>
</Pressable>
</View>
<View>
<Pressable style={styles.boxBuildPcReload}>
<Text style={styles.boxBuildPcReloadText}>Làm mới</Text>
<FontAwesome style={styles.boxBuildPcReloadIcon} name="refresh" />
</Pressable>
</View>
<View>
<Text style={styles.boxBuildPcTotalPrice}>Chi phí dự tính <Text style={styles.boxBuildPcTotalPriceNum}>30.000.000 đ</Text></Text>
</View>
<BuildPcListStore />
<ListItemBuildPc />
</View>
)
}
const BuildPcListStore = () => {
const [checked, setChecked] = React.useState('store1');
const listStore = [
{
id: 1,
name: '01: 131 Lê Thanh Nghị - Q. Hai Bà Trưng - Hà Nội'
},
{
id: 2,
name: '02: 43 Thái Hà - Q. Đống Đa - Hà Nội'
},
{
id: 3,
name: '03: A1-6 Lô 8A Lê Hồng Phong - Q. Ngô Quyền - Hải Phòng'
},
{
id: 4,
name: '04: 79 Nguyễn Văn Huyên - Q. Cầu Giấy - Hà Nội'
},
{
id: 5,
name: '05: 511 Quang Trung - Q. Hà Đông - Hà Nội'
},
{
id: 6,
name: '06: 520 Cách Mạng Tháng 8 - Quận 3 - TP HCM'
},
{
id: 7,
name: '07: 398 Nguyễn Văn Cừ - Q. Long Biên - Hà Nội'
},
{
id: 8,
name: '08: 299 Minh Khai - Từ Sơn - Bắc Ninh'
},
]
return (
<View style={styles.boxStore}>
<View style={styles.boxStoreItem}>
<View style={styles.boxStoreItemCheck}>
<RadioButton color={'#243a76'} value={'store0'} status={checked === 'store0' ? 'checked' : 'unchecked'} onPress={() => setChecked('store0')} />
</View>
<Text style={styles.boxStoreItemText}>Tất cả kho</Text>
</View>
{
listStore.map(item => {
const value = 'store' + item.id;
return (
<View key={item.id} style={styles.boxStoreItem}>
<View style={styles.boxStoreItemCheck}>
<RadioButton color={'#243a76'} value={value} status={checked === value ? 'checked' : 'unchecked'} onPress={() => setChecked(value)} />
</View>
<Text style={styles.boxStoreItemText}>{item.name}</Text>
</View>
)
})
}
</View>
)
}
const ListItemBuildPc = () => {
const dataListItem = [
{
id: 1,
name: 'Bộ vi xử lý',
},
{
id: 2,
name: 'Bo mạch chủ',
},
{
id: 3,
name: 'RAM',
},
{
id: 4,
name: 'HDD',
},
{
id: 5,
name: 'SSD',
},
{
id: 6,
name: 'VGA',
},
{
id: 7,
name: 'Nguồn',
},
{
id: 8,
name: 'Vỏ Case',
},
{
id: 9,
name: 'Màn hình',
},
{
id: 10,
name: 'Bàn phám, Chuột',
},
{
id: 11,
name: 'Bàn phím',
},
{
id: 12,
name: 'Chuột',
},
{
id: 13,
name: 'Tai nghe',
},
{
id: 14,
name: 'Loa',
},
{
id: 15,
name: 'Ghế gamming',
},
{
id: 16,
name: 'Quạt làm mát',
},
{
id: 17,
name: 'Tản nhiệt nước All in One',
},
{
id: 18,
name: 'Tản nhiệt nước custom',
},
{
id: 19,
name: 'Tản nhiệt khí',
},
{
id: 20,
name: 'Windows bản quyền',
},
{
id: 21,
name: 'Phần mềm Antivirus',
},
];
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.itemBuildPCList}>
{
dataListItem.map((item, index) => {
return (
<View style={styles.itemBuildPC} key={index}>
<Text style={styles.itemBuildPCText}>{index + 1}. {item.name}</Text>
<Pressable style={styles.itemBuildPCShowPop} onPress={() => setModalVisible(true)}>
<Text style={styles.itemBuildPCShowPopText}>+</Text>
</Pressable>
</View>
)
})
}
<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>
<ScrollView>
<ProductBuildPC />
</ScrollView>
</View>
</Modal>
</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 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}>
<View style={styles.boxPrductBuildPcList}>
{
productData.map((item, index) => {
if (index < 5) {
return (
<View style={styles.boxPrductBuildPcItem} key={index}>
<View style={styles.boxPrductBuildPcImg}>
<Image style={styles.boxPrductBuildPcImgCt} source={{ uri: item.productImage.large }} />
</View>
<View style={styles.boxPrductBuildPcInfo}>
<Text style={styles.boxPrductBuildPcName} numberOfLines={2}>{item.productName}</Text>
<View style={styles.boxPrductBuildPcOtherText}>
<Text style={styles.boxPrductBuildPcOtherTextSt}>Mã SP:</Text>
<Text style={styles.boxPrductBuildPcOtherTextNd}>{item.productSKU}</Text>
</View>
<View style={styles.boxPrductBuildPcOtherText}>
<Text style={styles.boxPrductBuildPcOtherTextSt}>Bảo hành:</Text>
<Text style={styles.boxPrductBuildPcOtherTextNd}>{item.warrantry}</Text>
</View>
<View style={styles.boxPrductBuildPcOtherText}>
<Text style={styles.boxPrductBuildPcQuantity}>Kho hàng:</Text>
{
item.quantity == 0
? <View style={styles.boxPrductBuildPcQuantityNo}>
<FontAwesome style={styles.boxPrductBuildPcQuantityNoIcon} name="phone" />
<Text style={styles.boxPrductBuildPcQuantityNoText}>Liên hệ</Text>
</View>
: <View style={styles.boxPrductBuildPcQuantityHas}>
<FontAwesome style={styles.boxPrductBuildPcQuantityHasIcon} name="check" />
<Text style={styles.boxPrductBuildPcQuantityHasText}>Còn hàng</Text>
</View>
}
</View>
<Text style={styles.boxPrductBuildPcPrice}>{formatCurrency(item.price)} đ</Text>
</View>
<Pressable style={styles.boxPrductBuildPcSelec}>
{
item.quantity == 0
? <View style={styles.boxPrductBuildPcSelecNo}>
<FontAwesome style={styles.boxPrductBuildPcSelecIcon} name="ban" />
</View>
: <View style={styles.boxPrductBuildPcSelecYes}>
<FontAwesome style={styles.boxPrductBuildPcSelecIcon} name="plus" />
</View>
}
</Pressable>
</View>
)
}
})
}
</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
},
boxBuildPc: {
paddingHorizontal: 10,
width: winWidth,
marginBottom: 30,
},
boxBuildPcTitle: {
width: '100%',
marginBottom: 20,
fontSize: 22,
fontWeight: 'bold',
textTransform: 'uppercase',
textAlign: 'center',
color: '#ed1b24',
},
boxBuildPcBanner: {
marginBottom: 20,
width: '100%',
height: 72,
position: 'relative',
},
boxBuildPcBannerImg: {
width: '100%',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
boxBuildPcNote: {
marginBottom: 20,
textAlign: 'center',
color: '#2d3877',
fontSize: 15,
fontWeight: 'bold',
},
listConfig: {
flexDirection: 'row',
marginBottom: 20,
flexWrap: 'wrap',
justifyContent: 'space-between',
alignItems: 'center',
paddingBottom: 20,
borderBottomColor: '#e1e1e1',
borderBottomWidth: 1,
},
listConfigItem: {
width: '48%',
marginBottom: 10,
flexDirection: 'row',
height: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#d9d9d9',
borderRadius: 3,
},
listConfigItemText: {
color: '#333',
textTransform: 'uppercase'
},
listConfigItemActive: {
backgroundColor: '#2d3877',
},
listConfigItemTextActive: {
color: '#fff',
},
boxBuildPcReload: {
width: 126,
height: 40,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 3,
backgroundColor: '#2d3877',
marginBottom: 20,
},
boxBuildPcReloadText: {
color: '#fff',
textTransform: 'uppercase',
marginRight: 10,
},
boxBuildPcReloadIcon: {
color: '#fff',
},
boxBuildPcTotalPrice: {
textAlign: 'right'
},
boxBuildPcTotalPriceNum: {
fontWeight: 'bold',
color: 'red'
},
boxStore: {
marginBottom: 20,
paddingBottom: 20,
borderBottomWidth: 1,
borderBottomColor: '#e1e1e1'
},
boxStoreItem: {
marginBottom: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
boxStoreItemCheck: {
width: 36,
height: 36,
borderRadius: 18,
borderWidth: 1,
borderColor: '#666',
marginRight: 10,
},
boxStoreItemText: {
width: winWidthP10 - 46,
},
itemBuildPCList: {},
itemBuildPC: {
marginBottom: 10,
paddingBottom: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: '#e1e1e1'
},
itemBuildPCText: {},
itemBuildPCShowPop: {
width: 50,
height: 40,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 3,
backgroundColor: '#243a76',
},
itemBuildPCShowPopText: {
fontWeight: 'bold',
fontSize: 36,
color: '#fff',
lineHeight: 36,
},
itemBuildPCPop: {
backgroundColor: '#fff',
flex: 1,
padding: 10,
position: 'relative',
paddingTop: 50,
},
itemBuildPCPopClose: {
width: 30,
height: 30,
borderWidth: 1,
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
position: 'absolute',
top: 15,
right: 10,
},
itemBuildPCPopCloseIcon: {},
boxPrductBuildPc: {
width: winWidth,
paddingHorizontal: 10,
marginBottom: 20,
},
boxPrductBuildPcList: {},
boxPrductBuildPcItem: {
flexDirection: 'row',
marginBottom: 15,
alignItems: 'center',
paddingBottom: 15,
borderBottomWidth: 1,
borderBottomColor: '#e1e1e1'
},
boxPrductBuildPcImg: {
width: 60,
height: 60,
position: 'relative',
overflow: 'hidden',
marginRight: 10,
},
boxPrductBuildPcImgCt: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
boxPrductBuildPcInfo: {
width: winWidthP10 - 130,
paddingRight: 10,
},
boxPrductBuildPcName: {
marginBottom: 10,
},
boxPrductBuildPcOtherText: {
marginBottom: 10,
flexDirection: 'row',
},
boxPrductBuildPcOtherTextSt: {
fontSize: 12,
width: 80,
},
boxPrductBuildPcOtherTextNd: {
fontSize: 12,
},
boxPrductBuildPcPrice: {
fontSize: 19,
fontWeight: 'bold',
color: '#f40606',
marginBottom: 7,
},
boxPrductBuildPcOldPrice: {
color: '#888',
textDecorationLine: 'line-through',
},
boxPrductBuildPcQuantity: {
width: 80,
},
boxPrductBuildPcQuantityNo: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
height: 20,
backgroundColor: '#eaeaea',
borderRadius: 3,
},
boxPrductBuildPcQuantityNoIcon: {
marginRight: 5,
},
boxPrductBuildPcQuantityNoText: {},
boxPrductBuildPcQuantityHas: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
height: 20,
backgroundColor: '#278c56',
borderRadius: 3,
},
boxPrductBuildPcQuantityHasIcon: {
marginRight: 5,
color: '#fff',
},
boxPrductBuildPcQuantityHasText: {
color: '#fff'
},
boxPrductBuildPcSelec: {
},
boxPrductBuildPcSelecNo: {
width: 50,
height: 40,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 3,
backgroundColor: '#ec1b23',
},
boxPrductBuildPcSelecYes: {
width: 50,
height: 40,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 3,
backgroundColor: '#243a76',
},
boxPrductBuildPcSelecIcon: {
fontWeight: 'bold',
fontSize: 36,
color: '#fff',
lineHeight: 36,
},
})