369 lines
13 KiB
TypeScript
369 lines
13 KiB
TypeScript
import * as React from 'react';
|
|
import { useState } from 'react';
|
|
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
|
|
import { Text, View, } from '../Themed';
|
|
import { TextInput } from 'react-native-gesture-handler';
|
|
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
|
|
const PolicyFooter = () => {
|
|
return (
|
|
<View style={styles.homePolicy}>
|
|
<LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.bgLinearGradient}>
|
|
<Text style={styles.homePolicyTitle}>
|
|
Chính sách bán hàng
|
|
</Text>
|
|
</LinearGradient>
|
|
<View style={styles.homePolicyList}>
|
|
<View style={styles.homePolicyItem}>
|
|
<FontAwesome style={styles.homePolicyIcon} name="truck" size={25} />
|
|
<View>
|
|
<Text style={styles.homePolicyTextSt}>CHÍNH SÁCH GIAO HÀNG</Text>
|
|
<Text style={styles.homePolicyTextNd}>Nhận hàng và thanh toán tại nhà</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.homePolicyItem}>
|
|
<FontAwesome style={styles.homePolicyIcon} name="refresh" size={25} />
|
|
<View>
|
|
<Text style={styles.homePolicyTextSt}>ĐỔI TRẢ DỄ DÀNG</Text>
|
|
<Text style={styles.homePolicyTextNd}>Dùng thử trong vòng 3 ngày</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.homePolicyItem}>
|
|
<FontAwesome style={styles.homePolicyIcon} name="credit-card" size={25} />
|
|
<View>
|
|
<Text style={styles.homePolicyTextSt}>THANH TOÁN TIỆN LỢI</Text>
|
|
<Text style={styles.homePolicyTextNd}>Trả tiền mặt, CK, trả góp 0%</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.homePolicyItem}>
|
|
<FontAwesome style={styles.homePolicyIcon} name="comments-o" size={25} />
|
|
<View>
|
|
<Text style={styles.homePolicyTextSt}>HỖ TRỢ NHIỆT TÌNH</Text>
|
|
<Text style={styles.homePolicyTextNd}>Tư vấn, giải đáp mọi thắc mắc</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const Social = () => {
|
|
return (
|
|
<View style={styles.homeSocial}>
|
|
<LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.bgLinearGradient}>
|
|
<Text style={styles.homePolicyTitle}>
|
|
Kết nối với chúng tôi
|
|
</Text>
|
|
</LinearGradient>
|
|
<View style={styles.homeSocialList}>
|
|
<View style={styles.homeSocialItem}>
|
|
<FontAwesome style={styles.homeSocialIconFace} name="facebook" size={25} />
|
|
</View>
|
|
<View style={styles.homeSocialItem}>
|
|
<FontAwesome style={styles.homeSocialIconYoutube} name="youtube-play" size={25} />
|
|
</View>
|
|
<View style={styles.homeSocialItem}>
|
|
<LinearGradient colors={['#f09433', '#e6683c', '#dc2743', '#cc2366', '#bc1888']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.homeSocialItemBg}>
|
|
<FontAwesome style={styles.homeSocialIconInsta} name="instagram" size={25} />
|
|
</LinearGradient>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const ShowroomList = () => {
|
|
const [showFooter, setFooter] = useState('');
|
|
|
|
const ShowroomData = [
|
|
{
|
|
id: 'id1',
|
|
title: 'HANOICOMPUTER - HAI BÀ TRƯNG',
|
|
address: '- 129+131 Lê Thanh Nghị - Đồng Tâm - Hai Bà Trưng - Hà Nội\n- Tel: (024) 36282024\n- Email: kinhdoanhle.lethanhnghi@hanoicomputer.com\n\n'
|
|
},
|
|
{
|
|
id: 'id2',
|
|
title: 'HANOICOMPUTER - ĐỐNG ĐA',
|
|
address: '- 43 Thái Hà - Trung Liệt - Đống Đa - Hà Nội\n- Tel: 1900 1903 (máy lẻ 201) - (024) 35380088\n- Email: kinhdoanhle.thaiha@hanoicomputer.com\n\n'
|
|
},
|
|
{
|
|
id: 'id3',
|
|
title: 'HANOICOMPUTER - CẦU GIẤY',
|
|
address: '- 79 Nguyễn Văn Huyên - Cầu Giấy - Hà Nội\n- Tel: 1900 1903 (máy lẻ 503) - (024) 38610088\n- Email: kinhdoanhle.caugiay@hanoicomputer.com\n\n'
|
|
},
|
|
{
|
|
id: 'id4',
|
|
title: 'HANOICOMPUTER - HÀ ĐÔNG',
|
|
address: '- 511+513 Quang Trung - Hà Đông - Hà Nội\n- Tel: 1900 1903 (máy lẻ 600) - (024) 38580088\n- Email: kinhdoanhle.hadong@hanoicomputer.com\n\n'
|
|
},
|
|
{
|
|
id: 'id5',
|
|
title: 'HANOICOMPUTER - HẢI PHÒNG',
|
|
address: '- A1-6 Lô 8A, Lê Hồng Phong, Quận Ngô Quyền, Hải Phòng\n- Tel: 1900 1903 (máy lẻ 301) - (022) 58830013\n- Email: kinhdoanhle.haiphong@hanoicomputer.com\n\n'
|
|
},
|
|
{
|
|
id: 'id6',
|
|
title: 'HANOICOMPUTER - TP. HỒ CHÍ MINH',
|
|
address: '- 520 Cách Mạng Tháng Tám - Phường 11 - Quận 3 - TP. Hồ Chí Minh\n- Tel: 1900 1903 (máy lẻ 710) - (028) 73078877\n- Email: kd.hcmq3@hanoicomputer.com\n\n'
|
|
},
|
|
{
|
|
id: 'id7',
|
|
title: 'HANOICOMPUTER - LONG BIÊN',
|
|
address: '- Số 398 Nguyễn Văn Cừ - Long Biên - Hà Nội\n- Tel: 19001903 (máy lẻ 808) - (024) 73088877\n- Email: kinhdoanh.longbien@hanoicomputer.com\n\n'
|
|
},
|
|
{
|
|
id: 'id8',
|
|
title: 'PHÒNG CAMERA & TB AN NINH',
|
|
address: '- 43 Thái Hà - Trung Liệt - Đống Đa - Hà Nội\n- Phụ trách: Anh Nguyễn Văn Hiển\n- Mobile: 096.411.0606\n- Email: hiennv@hanoicomputer.com\n\n'
|
|
},
|
|
{
|
|
id: 'id9',
|
|
title: 'PHÒNG BÁN HÀNG DỰ ÁN',
|
|
address: '- 129 + 131 Lê Thanh Nghị, Đồng Tâm, Hai Bà Trưng, Hà Nội\n- Tel: 0913.226.335\n- Email: diepnm@hanoicomputer.com\n\n'
|
|
},
|
|
{
|
|
id: 'id10',
|
|
title: 'PHÒNG BÁN HÀNG TRỰC TUYẾN',
|
|
address: '- 129 + 131 Lê Thanh Nghị, Đồng Tâm, Hai Bà Trưng, Hà Nội\n- Tel: 098.33033.90 / 096.266.0316\n- Email: thuydb@hanoicomputer.com\n\n'
|
|
},
|
|
];
|
|
|
|
return (
|
|
<View style={styles.homeShowrrom}>
|
|
<LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.bgLinearGradient}>
|
|
<Text style={styles.homePolicyTitle}>
|
|
Hệ thông showroom
|
|
</Text>
|
|
</LinearGradient>
|
|
<View style={styles.homeShowrromList}>
|
|
|
|
{
|
|
ShowroomData.map(item => <ShowroomOneItem key={item.id}
|
|
title={item.title} id={item.id} setFooter={setFooter} address={item.address} current_show_id={showFooter} />)
|
|
}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const ShowroomOneItem = (props: { id: string, current_show_id: string, title: string, address: string, setFooter: (id: string) => void }) => {
|
|
|
|
const { id, current_show_id, title, address, setFooter } = props;
|
|
|
|
return (
|
|
<View style={styles.homeShowrromItem}>
|
|
<TouchableOpacity onPress={() => setFooter(id)} style={styles.homeShowrromItemTitle}>
|
|
<Text style={styles.homeShowrromItemTitleText}>{title}</Text>
|
|
<Text style={styles.homeShowrromItemTitleIcon}>{current_show_id == id ? '-' : '+'}</Text>
|
|
</TouchableOpacity>
|
|
<View style={current_show_id == id ? styles.homeShowrromItemContentHienThi : styles.homeShowrromItemContent}>
|
|
<Text>
|
|
{address}
|
|
<TouchableOpacity onPress={() => Alert.alert('Go to map')} style={styles.homeShowrromItemContentMap}>
|
|
<Text style={styles.homeShowrromItemContentMapText}>- Xem bản đồ</Text>
|
|
</TouchableOpacity>
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const FooterInfo = () => {
|
|
return (
|
|
<View style={styles.footer}>
|
|
<Text style={styles.footerBold}>© 2020 Công Ty Cổ Phần Máy Tính Hà Nội</Text>
|
|
<Text style={styles.footerText}>
|
|
Địa chỉ: Số 129 + 131, phố Lê Thanh Nghị, Phường Đồng Tâm, Quận Hai Bà Trưng, Hà Nội{'\n'}{'\n'}
|
|
GPĐKKD số 0101161194 do Sở KHĐT Tp.Hà Nội cấp ngày 31/8/2001{'\n'}{'\n'}
|
|
Email: hnc@hanoicomputer.com. Điện thoại: 1900 1903
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export { PolicyFooter, Social, ShowroomList, FooterInfo }
|
|
|
|
let winWidth = Dimensions.get('window').width; //full width
|
|
let winHeight = Dimensions.get('window').height; //full height
|
|
|
|
const styles = StyleSheet.create({
|
|
bgLinearGradient: {
|
|
marginBottom: 20,
|
|
borderRadius: 5,
|
|
overflow: 'hidden',
|
|
},
|
|
homePolicy: {
|
|
width: winWidth,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
},
|
|
homePolicyTitle: {
|
|
width: '100%',
|
|
fontSize: 15,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
borderRadius: 3,
|
|
lineHeight: 40,
|
|
textTransform: 'uppercase',
|
|
fontWeight: '700',
|
|
color: '#fff',
|
|
overflow: 'hidden',
|
|
},
|
|
homePolicyList: {
|
|
paddingTop: 10,
|
|
paddingBottom: 10,
|
|
},
|
|
homePolicyItem: {
|
|
marginBottom: 10,
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
padding: 10,
|
|
borderWidth: 1,
|
|
borderColor: '#d9d9d9',
|
|
borderRadius: 5,
|
|
alignItems: 'center',
|
|
},
|
|
homePolicyIcon: {
|
|
width: 50,
|
|
height: 50,
|
|
textAlign: 'center',
|
|
lineHeight: 50,
|
|
borderRadius: 25,
|
|
backgroundColor: '#2b3179',
|
|
color: '#fff',
|
|
fontSize: 23,
|
|
overflow: 'hidden',
|
|
marginRight: 10.
|
|
},
|
|
homePolicyTextSt: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
marginBottom: 5,
|
|
},
|
|
homePolicyTextNd: {
|
|
fontSize: 13,
|
|
},
|
|
homeSocial: {
|
|
marginBottom: 20,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
},
|
|
homeSocialList: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
homeSocialItem: {
|
|
marginRight: 10,
|
|
},
|
|
homeSocialIconFace: {
|
|
width: 50,
|
|
height: 50,
|
|
textAlign: 'center',
|
|
lineHeight: 50,
|
|
borderRadius: 25,
|
|
backgroundColor: '#2b3179',
|
|
color: '#fff',
|
|
fontSize: 23,
|
|
overflow: 'hidden',
|
|
},
|
|
homeSocialIconYoutube: {
|
|
width: 50,
|
|
height: 50,
|
|
textAlign: 'center',
|
|
lineHeight: 50,
|
|
borderRadius: 25,
|
|
backgroundColor: '#ff0000',
|
|
color: '#fff',
|
|
fontSize: 23,
|
|
overflow: 'hidden',
|
|
},
|
|
homeSocialIconInsta: {
|
|
width: 50,
|
|
height: 50,
|
|
textAlign: 'center',
|
|
lineHeight: 50,
|
|
borderRadius: 25,
|
|
color: '#fff',
|
|
fontSize: 23,
|
|
overflow: 'hidden',
|
|
},
|
|
homeSocialItemBg: {
|
|
width: 50,
|
|
height: 50,
|
|
textAlign: 'center',
|
|
lineHeight: 50,
|
|
borderRadius: 25,
|
|
color: '#fff',
|
|
fontSize: 23,
|
|
overflow: 'hidden',
|
|
},
|
|
homeShowrrom: {
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
marginBottom: 20,
|
|
},
|
|
homeShowrromList: {
|
|
borderWidth: 1,
|
|
borderRadius: 5,
|
|
borderColor: '#d9d9d9',
|
|
overflow: 'hidden',
|
|
},
|
|
homeShowrromItem: {
|
|
|
|
},
|
|
homeShowrromItemTitle: {
|
|
position: 'relative',
|
|
backgroundColor: '#fff',
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
borderColor: '#d9d9d9',
|
|
borderBottomWidth: 1,
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
homeShowrromItemTitleText: {
|
|
color: '#333',
|
|
lineHeight: 40,
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
},
|
|
homeShowrromItemTitleIcon: {
|
|
color: '#333',
|
|
lineHeight: 40,
|
|
fontSize: 16,
|
|
},
|
|
homeShowrromItemContent: {
|
|
padding: 10,
|
|
fontSize: 12,
|
|
borderColor: '#d9d9d9',
|
|
borderBottomWidth: 1,
|
|
overflow: 'hidden',
|
|
display: 'none',
|
|
},
|
|
homeShowrromItemContentHienThi: {
|
|
padding: 10,
|
|
fontSize: 12,
|
|
borderColor: '#d9d9d9',
|
|
borderBottomWidth: 1,
|
|
},
|
|
homeShowrromItemContentMap: {},
|
|
homeShowrromItemContentMapText: {
|
|
color: '#0063C3'
|
|
},
|
|
footer: {
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
},
|
|
footerBold: {
|
|
textAlign: 'center',
|
|
fontSize: 14,
|
|
fontWeight: 'bold',
|
|
},
|
|
footerText: {
|
|
textAlign: 'center',
|
|
fontSize: 14,
|
|
},
|
|
}) |