them chi tiet tin tuc, dang ky, dang nhap, gioi thieu, lien he, build pc
This commit is contained in:
101
App.tsx
101
App.tsx
@@ -17,6 +17,16 @@ import ProductDetail from './screens/ProductDetail';
|
||||
import CartDetail from './screens/Cart';
|
||||
import ArticleHome from './screens/ArticleHome';
|
||||
import ArticleList from './screens/ArticleList';
|
||||
import ArticleDetail from './screens/ArticleDetail';
|
||||
import Login from './screens/Login';
|
||||
import Register from './screens/Register';
|
||||
import ForgetPassword from './screens/ForgetPassword';
|
||||
import AboutUs from './screens/AboutUs';
|
||||
import ContactUs from './screens/ContactUs';
|
||||
import BuildPc from './screens/BuildPc';
|
||||
|
||||
|
||||
|
||||
|
||||
export default function App() {
|
||||
const isLoadingComplete = useCachedResources();
|
||||
@@ -130,6 +140,90 @@ const ArticleListPage = ({ navigation }: { navigation: any }) => {
|
||||
);
|
||||
}
|
||||
|
||||
const ArticleDetailPage = ({ navigation }: { navigation: any }) => {
|
||||
return (
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="homepage"
|
||||
component={ArticleDetail}
|
||||
options={HeaderAllPageOpion}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const LoginPage = ({ navigation }: { navigation: any }) => {
|
||||
return (
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="homepage"
|
||||
component={Login}
|
||||
options={HeaderAllPageOpion}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const RegisterPage = ({ navigation }: { navigation: any }) => {
|
||||
return (
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="homepage"
|
||||
component={Register}
|
||||
options={HeaderAllPageOpion}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const ForgetPasswordPage = ({ navigation }: { navigation: any }) => {
|
||||
return (
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="homepage"
|
||||
component={ForgetPassword}
|
||||
options={HeaderAllPageOpion}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const AboutUsPage = ({ navigation }: { navigation: any }) => {
|
||||
return (
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="homepage"
|
||||
component={AboutUs}
|
||||
options={HeaderAllPageOpion}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const ContactUsPage = ({ navigation }: { navigation: any }) => {
|
||||
return (
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="homepage"
|
||||
component={ContactUs}
|
||||
options={HeaderAllPageOpion}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const BuildPcPage = ({ navigation }: { navigation: any }) => {
|
||||
return (
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="homepage"
|
||||
component={BuildPc}
|
||||
options={HeaderAllPageOpion}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const MainContentRouter = () => {
|
||||
return (
|
||||
<Drawer.Navigator>
|
||||
@@ -139,6 +233,13 @@ const MainContentRouter = () => {
|
||||
<Drawer.Screen name="cart" component={CartPage} />
|
||||
<Drawer.Screen name="Tin tức" component={ArticleHomePage} />
|
||||
<Drawer.Screen name="Tin khuyến mại" component={ArticleListPage} />
|
||||
<Drawer.Screen name="Chi tiết tin" component={ArticleDetailPage} />
|
||||
<Drawer.Screen name="Đăng nhập" component={LoginPage} />
|
||||
<Drawer.Screen name="Đăng Ký" component={RegisterPage} />
|
||||
<Drawer.Screen name="Quên mật khẩu" component={ForgetPasswordPage} />
|
||||
<Drawer.Screen name="Giới thiệu" component={AboutUsPage} />
|
||||
<Drawer.Screen name="Liên hệ" component={ContactUsPage} />
|
||||
<Drawer.Screen name="Xây dựng cấu hình" component={BuildPcPage} />
|
||||
</Drawer.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
BIN
assets/images/img-cmt.png
Normal file
BIN
assets/images/img-cmt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
86
screens/AboutUs.tsx
Normal file
86
screens/AboutUs.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
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 AboutUs() {
|
||||
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}>Giới thiệu</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.boxAboutUs}>
|
||||
<Text>Nội dung đang được cập nhật!</Text>
|
||||
</View>
|
||||
|
||||
<PolicyFooter />
|
||||
|
||||
<Social />
|
||||
|
||||
<ShowroomList />
|
||||
|
||||
<FooterInfo />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
boxAboutUs: {
|
||||
paddingHorizontal: 10,
|
||||
marginBottom: 20,
|
||||
}
|
||||
})
|
||||
691
screens/ArticleDetail.tsx
Normal file
691
screens/ArticleDetail.tsx
Normal 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',
|
||||
},
|
||||
})
|
||||
711
screens/BuildPc.tsx
Normal file
711
screens/BuildPc.tsx
Normal 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,
|
||||
},
|
||||
})
|
||||
148
screens/ContactUs.tsx
Normal file
148
screens/ContactUs.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
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 ContactUs() {
|
||||
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}>Liên Hệ</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.boxContactUs}>
|
||||
<Text style={styles.boxContactUsText}>Mọi thắc mắc hoặc góp ý, quý khách vui lòng liên hệ trực tiếp với bộ phận chăm sóc khách hàng của chúng tôi bằng cách điền đầy đủ thông tin vào form bên dưới</Text>
|
||||
<View>
|
||||
<View style={styles.formItem}>
|
||||
<Text style={styles.formItemText}>Tên đầy đủ<Text style={styles.formItemTextNote}>*</Text></Text>
|
||||
<TextInput style={styles.formItemInput} />
|
||||
</View>
|
||||
<View style={styles.formItem}>
|
||||
<Text style={styles.formItemText}>Email<Text style={styles.formItemTextNote}>*</Text></Text>
|
||||
<TextInput style={styles.formItemInput} />
|
||||
</View>
|
||||
<View style={styles.formItem}>
|
||||
<Text style={styles.formItemText}>Số điện thoại</Text>
|
||||
<TextInput style={styles.formItemInput} />
|
||||
</View>
|
||||
<View style={styles.formItem}>
|
||||
<Text style={styles.formItemText}>Thông tin liên hệ<Text style={styles.formItemTextNote}>*</Text></Text>
|
||||
<TextInput style={styles.formItemArea} />
|
||||
</View>
|
||||
<Pressable style={styles.formSubmit}>
|
||||
<Text style={styles.formSubmitText}>Gửi liên hệ</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<PolicyFooter />
|
||||
|
||||
<Social />
|
||||
|
||||
<ShowroomList />
|
||||
|
||||
<FooterInfo />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
boxContactUs: {
|
||||
paddingHorizontal: 10,
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxContactUsText: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
formItem: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
formItemText: {
|
||||
marginBottom: 5,
|
||||
},
|
||||
formItemTextNote: {
|
||||
color: '#ff0000'
|
||||
},
|
||||
formItemInput: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 5,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
formItemArea: {
|
||||
width: '100%',
|
||||
height: 110,
|
||||
borderRadius: 5,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
padding: 10,
|
||||
},
|
||||
formSubmit: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#243a76'
|
||||
},
|
||||
formSubmitText: {
|
||||
fontWeight: 'bold',
|
||||
color: '#fff'
|
||||
},
|
||||
})
|
||||
136
screens/ForgetPassword.tsx
Normal file
136
screens/ForgetPassword.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
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 ForgetPassword() {
|
||||
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}>Quên mật khẩu</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.boxForgetPassword}>
|
||||
<Text style={styles.boxForgetPasswordTitle}>Bạn quên mật khẩu vào tài khoản?</Text>
|
||||
<Text style={styles.boxForgetPasswordNote}>Vui lòng nhập địa chỉ email đã đăng ký với chúng tôi để tạo mật khẩu mới. Chúng tôi sẽ gửi 1 email vào địa chỉ email cung cấp và yêu cầu xác minh trước khi có thể tạo mật khẩu mới</Text>
|
||||
<View>
|
||||
<View style={styles.boxForgetPasswordItem}>
|
||||
<Text style={styles.boxForgetPasswordText}>Nhập địa chỉ email đăng ký</Text>
|
||||
<TextInput style={styles.boxForgetPasswordInput} />
|
||||
</View>
|
||||
<View style={styles.boxForgetPasswordItem}>
|
||||
<Text style={styles.boxForgetPasswordText}>Mã bảo mật</Text>
|
||||
<TextInput style={styles.boxForgetPasswordInput} />
|
||||
</View>
|
||||
<Pressable style={styles.boxForgetPasswordSubmit}>
|
||||
<Text style={styles.boxForgetPasswordSubmitText}>Lấy lại mật khẩu</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<PolicyFooter />
|
||||
|
||||
<Social />
|
||||
|
||||
<ShowroomList />
|
||||
|
||||
<FooterInfo />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
boxForgetPassword: {
|
||||
paddingHorizontal: 10,
|
||||
width: winWidth,
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxForgetPasswordTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
boxForgetPasswordNote: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxForgetPasswordItem: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxForgetPasswordText: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
boxForgetPasswordInput: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 5,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
boxForgetPasswordSubmit: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#243a76'
|
||||
},
|
||||
boxForgetPasswordSubmitText: {
|
||||
fontWeight: 'bold',
|
||||
color: '#fff'
|
||||
},
|
||||
})
|
||||
237
screens/Login.tsx
Normal file
237
screens/Login.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
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 Login() {
|
||||
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}>Đăng nhập</Text>
|
||||
</View>
|
||||
|
||||
<LoginBox />
|
||||
|
||||
<NoteLogin />
|
||||
|
||||
<PolicyFooter />
|
||||
|
||||
<Social />
|
||||
|
||||
<ShowroomList />
|
||||
|
||||
<FooterInfo />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
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 LoginBox = () => {
|
||||
return (
|
||||
<View style={styles.login}>
|
||||
<Text style={styles.loginTitle}>Thông tin khách hàng đăng nhập hệ thống</Text>
|
||||
<View style={styles.loginContent}>
|
||||
<View style={styles.loginItem}>
|
||||
<Text style={styles.loginText}>Email Đăng nhập</Text>
|
||||
<TextInput style={styles.loginInput} />
|
||||
</View>
|
||||
<View style={styles.loginItem}>
|
||||
<Text style={styles.loginText}>Mật khẩu</Text>
|
||||
<TextInput style={styles.loginInput} />
|
||||
</View>
|
||||
<Pressable style={styles.loginSubmit}>
|
||||
<Text style={styles.loginSubmitText}>Đăng nhập</Text>
|
||||
</Pressable>
|
||||
<View style={styles.loginGoogle}>
|
||||
<View style={styles.loginSocialIcon}>
|
||||
<FontAwesome style={styles.loginSocialIconCt} name="google-plus" />
|
||||
</View>
|
||||
<Text style={styles.loginSocialText}>Đăng nhập bằng google</Text>
|
||||
</View>
|
||||
<View style={styles.loginFace}>
|
||||
<View style={styles.loginSocialIcon}>
|
||||
<FontAwesome style={styles.loginSocialIconCt} name="facebook" />
|
||||
</View>
|
||||
<Text style={styles.loginSocialText}>Đăng nhập bằng Facebook</Text>
|
||||
</View>
|
||||
<View style={styles.loginZalo}>
|
||||
<View style={styles.loginSocialIcon}>
|
||||
<Image style={styles.loginZaloImg} source={{ uri: 'https://www.hanoicomputer.vn/template/may2020/images/logo-zalo-png-vertor-jpeg.jpg' }} />
|
||||
</View>
|
||||
<Text style={styles.loginSocialText}>Đăng nhập bằng Zalo</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const NoteLogin = () => {
|
||||
return (
|
||||
<View style={styles.noteLogin}>
|
||||
<Text style={styles.noteLoginTitle}>Trợ giúp</Text>
|
||||
<View>
|
||||
<Text style={styles.noteLoginText}>1. Nếu bạn chưa là thành viên, vui lòng <Pressable><Text style={styles.noteLoginTextLink}>Đăng ký tài khoản</Text></Pressable></Text>
|
||||
<Text style={styles.noteLoginText}>2. Nếu bạn quên mật khẩu, vui lòng yêu cầu <Pressable><Text style={styles.noteLoginTextLink}>quên mật khẩu</Text></Pressable></Text>
|
||||
<Text style={styles.noteLoginText}>3. Nếu bạn không đăng ký thành viên được, vui lòng gửi email tới chúng tôi</Text>
|
||||
<Text style={styles.noteLoginText}>4. Hoặc gọi điện tới chúng tôi để được tư vấn.</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
login: {
|
||||
width: winWidth,
|
||||
marginBottom: 20,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
loginTitle: {
|
||||
fontSize: 13,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginContent: {},
|
||||
loginItem: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
loginText: {
|
||||
marginBottom: 5,
|
||||
},
|
||||
loginInput: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
},
|
||||
loginSubmit: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgb(253, 216, 53)',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginSubmitText: {},
|
||||
loginGoogle: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#df4a32',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginSocialIcon: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRightWidth: 1,
|
||||
borderRightColor: '#fff',
|
||||
backgroundColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
loginSocialIconCt: {
|
||||
fontSize: 25,
|
||||
color: '#fff'
|
||||
},
|
||||
loginSocialText: {
|
||||
textAlign: 'center',
|
||||
width: winWidthP10 - 41,
|
||||
color: '#fff'
|
||||
},
|
||||
loginFace: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#3b5998',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginZalo: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#3b5998',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginZaloImg: {
|
||||
width: 25,
|
||||
height: 25,
|
||||
},
|
||||
noteLogin: {
|
||||
paddingHorizontal: 10,
|
||||
paddingTop: 20,
|
||||
borderTopColor: '#e1e1e1',
|
||||
borderTopWidth: 1,
|
||||
marginBottom: 20,
|
||||
},
|
||||
noteLoginTitle: {
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
noteLoginText: {
|
||||
marginBottom: 5,
|
||||
},
|
||||
noteLoginTextLink: {
|
||||
color: '#3b5998'
|
||||
},
|
||||
})
|
||||
283
screens/Register.tsx
Normal file
283
screens/Register.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
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 Register() {
|
||||
const [selectedDay, setSelectedDay] = useState();
|
||||
const [selectedMonth, setSelectedMonth] = useState();
|
||||
const [selectedYear, setSelectedYear] = useState();
|
||||
const [selectedProvince, setSelectedProvince] = useState();
|
||||
const [checked, setChecked] = React.useState('male');
|
||||
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}>Đăng ký</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.boxRegister}>
|
||||
<Text style={styles.boxRegisterTitle}>Đăng ký</Text>
|
||||
<View>
|
||||
<View style={styles.registerItem}>
|
||||
<Text style={styles.registerItemText}>Địa chỉ Email<Text style={styles.registerItemWn}>*</Text></Text>
|
||||
<TextInput style={styles.registerItemInput} />
|
||||
</View>
|
||||
<View style={styles.registerItem}>
|
||||
<Text style={styles.registerItemText}>Tên<Text style={styles.registerItemWn}>*</Text></Text>
|
||||
<TextInput style={styles.registerItemInput} />
|
||||
</View>
|
||||
<View style={styles.registerItem}>
|
||||
<Text style={styles.registerItemText}>Số máy bàn</Text>
|
||||
<TextInput style={styles.registerItemInput} />
|
||||
</View>
|
||||
<View style={styles.registerItem}>
|
||||
<Text style={styles.registerItemText}>Số di động<Text style={styles.registerItemWn}>*</Text></Text>
|
||||
<TextInput style={styles.registerItemInput} />
|
||||
</View>
|
||||
<View style={styles.registerItem}>
|
||||
<Text style={styles.registerItemText}>Giới tính</Text>
|
||||
<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 style={styles.registerItem}>
|
||||
<Text style={styles.registerItemText}>Ngày sinh</Text>
|
||||
<View style={styles.registerBirthDay}>
|
||||
<View style={styles.registerBirthDayItem}>
|
||||
<Picker
|
||||
style={styles.picker}
|
||||
itemStyle={styles.onePickerItem}
|
||||
selectedValue={selectedDay}
|
||||
onValueChange={(itemValue, itemIndex) =>
|
||||
setSelectedDay(itemValue)
|
||||
}
|
||||
>
|
||||
<Picker.Item label="Ngày" value="0" />
|
||||
<Picker.Item label="01" value="1" />
|
||||
<Picker.Item label="02" value="2" />
|
||||
<Picker.Item label="03" value="3" />
|
||||
<Picker.Item label="04" value="4" />
|
||||
</Picker>
|
||||
</View>
|
||||
<View style={styles.registerBirthDayItem}>
|
||||
<Picker
|
||||
style={styles.picker}
|
||||
itemStyle={styles.onePickerItem}
|
||||
selectedValue={selectedMonth}
|
||||
onValueChange={(itemValue, itemIndex) =>
|
||||
setSelectedMonth(itemValue)
|
||||
}
|
||||
>
|
||||
<Picker.Item label="Tháng" value="0" />
|
||||
<Picker.Item label="01" value="1" />
|
||||
<Picker.Item label="02" value="2" />
|
||||
<Picker.Item label="03" value="3" />
|
||||
<Picker.Item label="04" value="4" />
|
||||
</Picker>
|
||||
</View>
|
||||
<View style={styles.registerBirthDayItem}>
|
||||
<Picker
|
||||
style={styles.picker}
|
||||
itemStyle={styles.onePickerItem}
|
||||
selectedValue={selectedYear}
|
||||
onValueChange={(itemValue, itemIndex) =>
|
||||
setSelectedYear(itemValue)
|
||||
}
|
||||
>
|
||||
<Picker.Item label="Năm" value="0" />
|
||||
<Picker.Item label="2020" value="2020" />
|
||||
<Picker.Item label="2019" value="2019" />
|
||||
<Picker.Item label="2018" value="2018" />
|
||||
<Picker.Item label="2017" value="2017" />
|
||||
</Picker>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.registerItem}>
|
||||
<Text style={styles.registerItemText}>Mật khẩu<Text style={styles.registerItemWn}>*</Text></Text>
|
||||
<TextInput style={styles.registerItemInput} />
|
||||
</View>
|
||||
<View style={styles.registerItem}>
|
||||
<Text style={styles.registerItemText}>Nhập lại mật khẩu<Text style={styles.registerItemWn}>*</Text></Text>
|
||||
<TextInput style={styles.registerItemInput} />
|
||||
</View>
|
||||
<View style={styles.registerItem}>
|
||||
<Text style={styles.registerItemText}>Tỉnh/TP</Text>
|
||||
<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>
|
||||
<Pressable style={styles.boxRegisterSubmit}>
|
||||
<Text style={styles.boxRegisterSubmitText}>Đăng ký</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<PolicyFooter />
|
||||
|
||||
<Social />
|
||||
|
||||
<ShowroomList />
|
||||
|
||||
<FooterInfo />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
boxRegister: {
|
||||
width: winWidth,
|
||||
paddingHorizontal: 10,
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxRegisterTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 20,
|
||||
},
|
||||
registerItem: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
registerItemText: {
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 5,
|
||||
},
|
||||
registerItemWn: {
|
||||
color: '#ff0000',
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
registerItemInput: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 5,
|
||||
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,
|
||||
},
|
||||
boxRegisterSubmit: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'red',
|
||||
borderRadius: 5,
|
||||
},
|
||||
boxRegisterSubmitText: {
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
registerBirthDay: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
registerBirthDayItem: {
|
||||
width: '32%'
|
||||
},
|
||||
picker: {
|
||||
height: 46,
|
||||
width: '100%',
|
||||
},
|
||||
onePickerItem: {
|
||||
height: 46,
|
||||
color: '#222',
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
width: '100%',
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user