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

691
screens/ArticleDetail.tsx Normal file
View File

@@ -0,0 +1,691 @@
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 ArticleDetail() {
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}>Tin tức</Text>
</View>
<ArticleDetailContent />
<CommentArticle />
<ArticleDetailNew />
<ArticleDetailHot />
<ArticleDetailProduct />
<PolicyFooter />
<Social />
<ShowroomList />
<FooterInfo />
</ScrollView>
</SafeAreaView>
)
}
const ArticleDetailContent = () => {
return (
<View style={styles.boxArticleDetail}>
<Text style={styles.boxArticleDetailTitle}>Chương trình Khuyến mãi “Play-with Power by MSI”</Text>
<Text style={styles.boxArticleDetailTime}>Từ 17-03-2021, 4:32 pm</Text>
<View style={styles.boxArticleDetailCreateBy}>
<Image style={styles.boxArticleDetailCreateByImg} source={require('../assets/images/img-cmt.png')} />
<View style={styles.boxArticleDetailCreateByText}>
<Text style={styles.boxArticleDetailCreateByTextSt}>By</Text>
<Text style={styles.boxArticleDetailCreateByTextB}>HNC</Text>
<Text style={styles.boxArticleDetailCreateByTextSt}>- 7-03-2021, 4:32 pm</Text>
</View>
</View>
<View>
<Image style={styles.boxArticleDetailImageMain} source={{ uri: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg' }} />
</View>
<View style={styles.boxArticleDetailContent}>
<Text>Nội dung đang được cập nhật!</Text>
</View>
</View>
)
}
const CommentArticle = () => {
return (
<View style={styles.boxCommentArticle}>
<Text style={styles.boxCommentArticleTitle}>Trả lời</Text>
<Text style={styles.boxCommentArticleNote}>Email của bạn sẽ không được hiển thị công khai.</Text>
<Text style={styles.boxCommentArticleNote}>Các trường bắt buộc được đánh dấu <Text>*</Text></Text>
<View style={styles.boxCommentArticleContent}>
<View style={styles.boxCommentArticleItem}>
<Text style={styles.boxCommentArticleItemName}>Bình luận*</Text>
<TextInput style={styles.boxCommentArticleItemArea} multiline={true} numberOfLines={4} />
</View>
<View style={styles.boxCommentArticleItem}>
<Text style={styles.boxCommentArticleItemName}>Tên*</Text>
<TextInput style={styles.boxCommentArticleItemInput} />
</View>
<View style={styles.boxCommentArticleItemStyleNd}>
<View style={styles.boxCommentArticleItemNd}>
<Text style={styles.boxCommentArticleItemName}>Email*</Text>
<TextInput style={styles.boxCommentArticleItemInput} />
</View>
<View style={styles.boxCommentArticleItemNd}>
<Text style={styles.boxCommentArticleItemName}>Trang web</Text>
<TextInput style={styles.boxCommentArticleItemInput} />
</View>
</View>
<View style={styles.boxCommentArticleSubmit}>
<Pressable style={styles.boxCommentArticleSubmitButton}>
<Text style={styles.boxCommentArticleSubmitText}>Phản hồi</Text>
</Pressable>
</View>
</View>
</View>
)
}
const dataArticle = [
{
id: 1,
title: 'Chương trình Khuyến mãi “Play-with Power by MSI”',
image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
category: 'Review sản phẩm',
visit: 10,
comment: 40,
createDate: '12-03-2021, 5:30 pm',
createBy: 'Bùi Phương Thảo',
summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
},
{
id: 2,
title: 'Tự bẻ khóa tính năng hạn chế khai thác tiền ảo của RTX 3060, Nvidia đang \'tiếp tay\' cho dân đào coin?',
image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
category: 'Review sản phẩm',
visit: 10,
comment: 40,
createDate: '13-03-2021, 8:30 pm',
createBy: 'Tiêu Phong',
summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
},
{
id: 3,
title: '3 CPU “thần thánh” sẽ cứu rỗi game thủ',
image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
category: 'Review sản phẩm',
visit: 10,
comment: 40,
createDate: '13-03-2021, 5:30 am',
createBy: 'Gâu Gâu',
summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
},
{
id: 4,
title: 'Chương trình Khuyến mãi “Quà Cực Sốc Khi Dựng Cấu Hình PC Lắp Ráp”',
image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
category: 'Review sản phẩm',
visit: 10,
comment: 40,
createDate: '22-03-2021, 5:30 pm',
createBy: 'Meo Meo',
summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
},
]
const ArticleDetailNew = () => {
const dataArticleNew = dataArticle;
return (
<View style={styles.boxArticleDetailNew}>
<View style={styles.ArticleTitleAll}>
<Text style={styles.ArticleTitleAllText}>Bài viết mới nhất</Text>
<View style={styles.ArticleTitleAllLine}></View>
</View>
<View>
{
dataArticleNew.map((item, index) => {
if (index == 0) {
return (
<View key={item.id} style={styles.boxArticleDetailNewFirstItem}>
<Image style={styles.boxArticleDetailNewFirstItemImg} source={{ uri: item.image }} />
<Text style={styles.boxArticleDetailNewFirstItemName} numberOfLines={2}>{item.title}</Text>
<View style={styles.boxArticleDetailNewFirstItemOther}>
<Text style={styles.boxArticleDetailNewFirstItemOtherText}>By</Text>
<Text style={styles.boxArticleDetailNewFirstItemCus}>{item.createBy}</Text>
<Text style={styles.boxArticleDetailNewFirstItemOtherText}>{item.createDate}</Text>
<View style={styles.boxArticleNewHomeItemView}>
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
<Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
</View>
<View style={styles.boxArticleNewHomeItemView}>
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
<Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
</View>
</View>
<View style={styles.boxArticleDetailNewFirstItemSummary}>
<Text style={styles.boxArticleDetailNewFirstItemSummaryCt} numberOfLines={2}>{item.summary}</Text>
</View>
</View>
)
} else if (index > 0 && index < 4) {
return (
<View key={item.id} style={styles.boxArticleDetailNewItem}>
<View style={styles.boxArticleDetailNewItemImage}>
<Image style={styles.boxArticleDetailNewItemImageCt} source={{ uri: item.image }} />
</View>
<View style={styles.boxArticleDetailNewItemInfo}>
<Text style={styles.boxArticleDetailNewItemName} numberOfLines={2}>{item.title}</Text>
<View style={styles.boxArticleDetailNewItemInfoOther}>
<View style={styles.boxArticleNewHomeItemViewSt}>
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="clock-o" />
<Text style={styles.boxArticleNewHomeItemViewText}>{item.createDate}</Text>
</View>
<View style={styles.boxArticleNewHomeItemView}>
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
<Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
</View>
<View style={styles.boxArticleNewHomeItemView}>
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
<Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
</View>
</View>
</View>
</View>
)
}
})
}
</View>
</View>
)
}
const ArticleDetailHot = () => {
const dataArticleHot = dataArticle;
return (
<View style={styles.boxArticleDetailNew}>
<View style={styles.ArticleTitleAll}>
<Text style={styles.ArticleTitleAllText}>Bài viết nhiều người xem</Text>
<View style={styles.ArticleTitleAllLine}></View>
</View>
<View>
{
dataArticleHot.map((item, index) => {
if (index < 5) {
return (
<View key={item.id} style={styles.boxArticleDetailNewFirstItem}>
<Image style={styles.boxArticleDetailNewFirstItemImg} source={{ uri: item.image }} />
<Text style={styles.boxArticleDetailNewFirstItemName} numberOfLines={2}>{item.title}</Text>
<View style={styles.boxArticleDetailNewFirstItemOther}>
<Text style={styles.boxArticleDetailNewFirstItemOtherText}>By</Text>
<Text style={styles.boxArticleDetailNewFirstItemCus}>{item.createBy}</Text>
<Text style={styles.boxArticleDetailNewFirstItemOtherText}>{item.createDate}</Text>
<View style={styles.boxArticleNewHomeItemView}>
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
<Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
</View>
<View style={styles.boxArticleNewHomeItemView}>
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
<Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
</View>
</View>
<View style={styles.boxArticleDetailNewFirstItemSummary}>
<Text style={styles.boxArticleDetailNewFirstItemSummaryCt} numberOfLines={2}>{item.summary}</Text>
</View>
</View>
)
}
})
}
</View>
</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 ArticleDetailProduct = () => {
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,
},
{
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,
},
{
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,
},
{
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,
},
{
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,
},
]
return(
<View style={styles.boxPrductArticleDetail}>
<View style={styles.ArticleTitleAll}>
<Text style={styles.ArticleTitleAllText}>Sản phẩm bán chạy nhất</Text>
<View style={styles.ArticleTitleAllLine}></View>
</View>
<View style={styles.boxPrductArticleDetailList}>
{
productData.map((item, index) => {
if(index < 5) {
return(
<View style={styles.boxPrductArticleDetailItem} key={index}>
<View style={styles.boxPrductArticleDetailImg}>
<Image style={styles.boxPrductArticleDetailImgCt} source={{ uri: item.productImage.large }} />
</View>
<View style={styles.boxPrductArticleDetailInfo}>
<Text style={styles.boxPrductArticleDetailSku}>Mã SP: {item.productSKU}</Text>
<Text style={styles.boxPrductArticleDetailName} numberOfLines={2}>{item.productName}</Text>
<Text style={styles.boxPrductArticleDetailPrice}>{formatCurrency(item.price)} đ</Text>
<Text style={styles.boxPrductArticleDetailOldPrice}>{formatCurrency(item.marketPrice)}đ</Text>
</View>
</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
},
boxArticleDetail: {
marginBottom: 20,
width: winWidth,
paddingHorizontal: 10,
},
boxArticleDetailTitle: {
fontSize: 30,
fontWeight: 'bold',
color: '#222',
marginBottom: 10,
},
boxArticleDetailTime: {
fontSize: 18,
color: '#888888',
marginBottom: 10,
},
boxArticleDetailCreateBy: {
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
},
boxArticleDetailCreateByImg: {
width: 29,
height: 29,
borderRadius: 3,
overflow: 'hidden',
marginRight: 10,
},
boxArticleDetailCreateByText: {
flexDirection: 'row'
},
boxArticleDetailCreateByTextSt: {
fontSize: 13,
color: '#888'
},
boxArticleDetailCreateByTextB: {
fontSize: 13,
fontWeight: 'bold',
color: '#536be8',
marginHorizontal: 5,
},
boxArticleDetailImageMain: {
width: '100%',
height: ratio * 450,
},
boxArticleDetailContent: {
marginTop: 20,
width: '100%',
paddingBottom: 20,
borderBottomColor: '#e1e1e1',
borderBottomWidth: 1,
},
boxCommentArticle: {
width: winWidth,
paddingHorizontal: 10,
marginBottom: 20,
},
boxCommentArticleTitle: {
fontWeight: 'bold',
fontSize: 24,
marginBottom: 10,
},
boxCommentArticleNote: {
fontSize: 14,
},
boxCommentArticleContent: {
marginTop: 20,
},
boxCommentArticleItem: {
width: '100%',
marginBottom: 20,
},
boxCommentArticleItemNd: {
width: '49%',
marginBottom: 20,
},
boxCommentArticleItemName: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 5,
},
boxCommentArticleItemArea: {
width: '100%',
height: 110,
borderWidth: 1,
borderColor: '#e1e1e1',
borderRadius: 5,
padding: 10,
},
boxCommentArticleItemInput: {
width: '100%',
height: 40,
borderWidth: 1,
borderColor: '#e1e1e1',
borderRadius: 5,
paddingHorizontal: 10,
},
boxCommentArticleItemStyleNd: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
boxCommentArticleSubmit: {
flexDirection: 'row',
},
boxCommentArticleSubmitButton: {
width: 115,
height: 40,
backgroundColor: '#f70d28',
borderRadius: 5,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
boxCommentArticleSubmitText: {
textTransform: 'uppercase',
color: '#fff',
},
boxArticleDetailNew: {
width: winWidth,
paddingHorizontal: 10,
},
ArticleTitleAll: {
paddingVertical: 10,
marginBottom: 10,
borderBottomWidth: 1,
borderBottomColor: '#e1e1e1',
},
ArticleTitleAllText: {
fontSize: 16,
fontWeight: 'bold',
color: '#ce0707',
textTransform: 'uppercase',
},
ArticleTitleAllLine: {
width: 100,
height: 1,
backgroundColor: '#ce0707',
position: 'absolute',
bottom: -1,
left: 0,
},
boxArticleDetailNewFirstItem: {
width: '100%',
marginBottom: 20,
},
boxArticleDetailNewFirstItemImg: {
width: '100%',
marginBottom: 10,
height: ratio * 450,
},
boxArticleDetailNewFirstItemName: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
},
boxArticleDetailNewFirstItemOther: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
boxArticleDetailNewFirstItemOtherText: {
fontSize: 12,
color: '#888'
},
boxArticleDetailNewFirstItemCus: {
fontSize: 12,
color: '#536be8',
textTransform: 'uppercase',
marginHorizontal: 8,
fontWeight: 'bold'
},
boxArticleNewHomeItemView: {
flexDirection: 'row',
marginLeft: 10,
alignItems: 'center'
},
boxArticleNewHomeItemIcon: {
fontSize: 11,
color: '#2e9fff',
marginRight: 2,
},
boxArticleNewHomeItemViewText: {
fontSize: 12,
color: '#888'
},
boxArticleDetailNewFirstItemSummary: {
marginBottom: 10,
},
boxArticleDetailNewFirstItemSummaryCt: {},
boxArticleDetailNewItem: {
flexDirection: 'row',
width: '100%',
marginBottom: 20,
},
boxArticleDetailNewItemImage: {
width: 130,
height: 87,
overflow: 'hidden',
position: 'relative',
marginRight: 10,
},
boxArticleDetailNewItemImageCt: {
width: '100%',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
boxArticleDetailNewItemInfo: {
width: winWidthP10 - 140,
},
boxArticleDetailNewItemName: {
fontWeight: 'bold',
marginBottom: 10,
lineHeight: 23,
},
boxArticleDetailNewItemInfoOther: {
flexDirection: 'row',
alignItems: 'center',
},
boxArticleNewHomeItemViewSt: {
flexDirection: 'row',
alignItems: 'center'
},
boxPrductArticleDetail: {
width: winWidth,
paddingHorizontal: 10,
marginBottom: 20,
},
boxPrductArticleDetailList: {},
boxPrductArticleDetailItem: {
flexDirection: 'row',
marginBottom: 10,
},
boxPrductArticleDetailImg: {
width: 174,
height: 174,
position: 'relative',
overflow: 'hidden',
marginRight: 10,
},
boxPrductArticleDetailImgCt: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
boxPrductArticleDetailInfo: {
width: winWidthP10 - 184,
},
boxPrductArticleDetailName: {
fontWeight: 'bold',
marginBottom: 10,
},
boxPrductArticleDetailSku: {
fontSize: 12,
color: '#ce0707',
marginBottom: 10,
},
boxPrductArticleDetailPrice: {
fontSize: 19,
fontWeight: 'bold',
color: '#f40606',
marginBottom: 7,
},
boxPrductArticleDetailOldPrice: {
color: '#888',
textDecorationLine: 'line-through',
},
})