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

demo app hanoicomputer home category productdetail cart

Browse Source
This commit is contained in:
ducht
2021-03-16 17:00:55 +07:00
commit 6db1634f60
35 changed files with 36093 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

369
components/footer/footerMain.tsx Normal file
View File

@@ -0,0 +1,369 @@
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,
},
})