316 lines
10 KiB
TypeScript
316 lines
10 KiB
TypeScript
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 { useNavigation } from '@react-navigation/native';
|
|
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';
|
|
|
|
export default function AccountOrderDetail() {
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View>
|
|
<ScrollView>
|
|
<HeaderAccountOrderList />
|
|
|
|
<AccountOrderDetailContent />
|
|
</ScrollView>
|
|
<AccountOrderDetailBottom />
|
|
</View>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
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 HeaderAccountOrderList = () => {
|
|
const navigation = useNavigation();
|
|
return (
|
|
<View style={styles.headerAOL}>
|
|
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
|
|
<FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
|
|
</TouchableOpacity>
|
|
<Text style={styles.headerAOLTitle}>Đơn hàng 88899999</Text>
|
|
<TouchableOpacity style={styles.headerAOLChat}>
|
|
<Ionicons style={styles.headerAOLChatIcon} name="chatbubble-ellipses-outline" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const AccountOrderDetailContent = () => {
|
|
return (
|
|
<View style={styles.boxAccOrDt}>
|
|
<View style={styles.boxAccOrDtCtTop}>
|
|
<Text style={styles.boxAccOrDtCtTopTextLeft}>Thời gian đặt mua: </Text>
|
|
<Text style={styles.boxAccOrDtCtTopTextRight}>06-05-2021, 4:01 pm</Text>
|
|
</View>
|
|
<View style={styles.boxAccOrDtCtTop}>
|
|
<Text style={styles.boxAccOrDtCtTopTextLeft}>Tình trạng: </Text>
|
|
<Text style={[styles.boxAccOrDtCtTopTextRight, styles.OrangeColor]}>Giao hàng thành công</Text>
|
|
</View>
|
|
<View style={styles.boxAccOrDtCus}>
|
|
<View style={styles.boxAccOrDtTitle}>
|
|
<Text style={styles.boxAccOrDtTitleNum}>1</Text>
|
|
<Text style={styles.boxAccOrDtTitleText}>Thông tin khách hàng</Text>
|
|
</View>
|
|
<View style={styles.boxAccOrDtCusInfo}>
|
|
<View style={styles.boxAccOrDtCusInfoItem}>
|
|
<Text style={styles.boxAccOrDtCusInfoItemLeft}>Họ tên:</Text>
|
|
<Text style={styles.boxAccOrDtCusInfoItemRight}>Nguyễn Quỳnh</Text>
|
|
</View>
|
|
<View style={styles.boxAccOrDtCusInfoItem}>
|
|
<Text style={styles.boxAccOrDtCusInfoItemLeft}>Email:</Text>
|
|
<Text style={styles.boxAccOrDtCusInfoItemRight}>Quynhqt@gmail.com</Text>
|
|
</View>
|
|
<View style={styles.boxAccOrDtCusInfoItem}>
|
|
<Text style={styles.boxAccOrDtCusInfoItemLeft}>Số điện thoại:</Text>
|
|
<Text style={styles.boxAccOrDtCusInfoItemRight}>0932108199</Text>
|
|
</View>
|
|
<View style={styles.boxAccOrDtCusInfoItem}>
|
|
<Text style={styles.boxAccOrDtCusInfoItemLeft}>Địa chỉ:</Text>
|
|
<Text style={styles.boxAccOrDtCusInfoItemRight}>100 Láng Hạ</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View>
|
|
<View style={styles.boxAccOrDtTitle}>
|
|
<Text style={styles.boxAccOrDtTitleNum}>1</Text>
|
|
<Text style={styles.boxAccOrDtTitleText}>Thông tin đơn hàng</Text>
|
|
</View>
|
|
<View style={styles.boxAccOrDtList}>
|
|
<View style={styles.boxAccOrDtListItem}>
|
|
<Image style={styles.boxAccOrDtListItemImg} source={require('../assets/images/product.png')} />
|
|
<View style={styles.boxAccOrDtListItemInfo}>
|
|
<Text style={styles.boxAccOrDtListItemName}>ĐIỀU HÒA 1 CHIỀU 9000 BTU/H NAGAKAWA NS-C09R1M05 - MADE IN MALAYSIA - BẢO HÀNH 2 NĂM()</Text>
|
|
<Text style={styles.boxAccOrDtListItemPrice}>15.000.000đ</Text>
|
|
<Text style={styles.boxAccOrDtListItemQuan}>Số lượng: 1</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const AccountOrderDetailBottom = () => {
|
|
return (
|
|
<View style={styles.accDtBt}>
|
|
<View style={styles.accDtBtItem}>
|
|
<Text style={styles.accDtBtItemTextLeft}>Giá trị</Text>
|
|
<Text style={styles.accDtBtItemTextRight}>10.500.000đ</Text>
|
|
</View>
|
|
<View style={styles.accDtBtItem}>
|
|
<Text style={styles.accDtBtItemTextLeft}>Phí vận chuyển</Text>
|
|
<Text style={styles.accDtBtItemTextRight}>0đ</Text>
|
|
</View>
|
|
<View style={styles.accDtBtItem}>
|
|
<Text style={styles.accDtBtItemTextLeft}>Tổng giá trị đơn hàng</Text>
|
|
<Text style={styles.accDtBtItemTextRight}>10.500.000đ</Text>
|
|
</View>
|
|
<TouchableOpacity style={styles.accDtBtButton}>
|
|
<Text style={styles.accDtBtButtonText}>Đặt lại</Text>
|
|
</TouchableOpacity>
|
|
</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',
|
|
},
|
|
headerAOL: {
|
|
width: winWidth,
|
|
padding: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
headerAOLBack: {
|
|
width: 40,
|
|
height: 40,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
headerAOLBackIcon: {
|
|
fontSize: 24,
|
|
},
|
|
headerAOLSearch: {
|
|
width: 40,
|
|
height: 40,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
headerAOLSearchIcon: {
|
|
fontSize: 24,
|
|
},
|
|
headerAOLTitle: {
|
|
width: winWidth - 100,
|
|
textAlign: 'center',
|
|
fontWeight: '700',
|
|
},
|
|
headerAOLChat: {
|
|
width: 40,
|
|
height: 40,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
},
|
|
headerAOLChatIcon: {
|
|
fontSize: 24,
|
|
},
|
|
GreenColor: {
|
|
color: '#008445',
|
|
},
|
|
OrangeColor: {
|
|
color: '#FE9923',
|
|
},
|
|
RedColor: {
|
|
color: '#D8262F',
|
|
},
|
|
boxAccOrDt: {
|
|
width: winWidth,
|
|
padding: 10,
|
|
},
|
|
boxAccOrDtCtTop: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flexWrap: 'wrap',
|
|
marginBottom: 10,
|
|
},
|
|
boxAccOrDtCtTopTextLeft: {
|
|
fontWeight: '700',
|
|
},
|
|
boxAccOrDtCtTopTextRight: {},
|
|
boxAccOrDtCus: {
|
|
marginBottom: 10,
|
|
marginTop: 10,
|
|
},
|
|
boxAccOrDtTitle: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingBottom: 5,
|
|
marginBottom: 10,
|
|
borderBottomColor: '#ababab',
|
|
borderBottomWidth: 1,
|
|
},
|
|
boxAccOrDtTitleNum: {
|
|
width: 20,
|
|
height: 20,
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: '#008445',
|
|
textAlign: 'center',
|
|
lineHeight: 20,
|
|
borderColor: '#008445',
|
|
borderWidth: 1,
|
|
marginRight: 5,
|
|
borderRadius: 10,
|
|
},
|
|
boxAccOrDtTitleText: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: '#008445',
|
|
textTransform: 'uppercase',
|
|
},
|
|
boxAccOrDtCusInfo: {},
|
|
boxAccOrDtCusInfoItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 10,
|
|
},
|
|
boxAccOrDtCusInfoItemLeft: {
|
|
width: 100,
|
|
fontWeight: '300',
|
|
},
|
|
boxAccOrDtCusInfoItemRight: {
|
|
width: winWidth - 120,
|
|
fontWeight: '300',
|
|
},
|
|
boxAccOrDtList: {},
|
|
boxAccOrDtListItem: {
|
|
width: '100%',
|
|
marginBottom: 10,
|
|
flexDirection: 'row',
|
|
},
|
|
boxAccOrDtListItemImg: {
|
|
width: 48,
|
|
height: 48,
|
|
marginRight: 10,
|
|
},
|
|
boxAccOrDtListItemInfo: {
|
|
width: winWidth - 78,
|
|
},
|
|
boxAccOrDtListItemName: {
|
|
fontWeight: '700',
|
|
fontSize: 16,
|
|
marginBottom: 10,
|
|
},
|
|
boxAccOrDtListItemPrice: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
color: '#D8262F',
|
|
marginBottom: 10,
|
|
},
|
|
boxAccOrDtListItemQuan: {},
|
|
accDtBt: {
|
|
width: winWidth,
|
|
padding: 10,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 1,
|
|
},
|
|
shadowOpacity: 0.20,
|
|
shadowRadius: 1.41,
|
|
elevation: 2,
|
|
},
|
|
accDtBtItem: {
|
|
marginBottom: 5,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'center',
|
|
},
|
|
accDtBtItemTextLeft: {
|
|
fontSize: 12,
|
|
marginRight: 10,
|
|
},
|
|
accDtBtItemTextRight: {
|
|
fontWeight: '700',
|
|
width: 150,
|
|
},
|
|
accDtBtButton: {
|
|
width: '100%',
|
|
height: 40,
|
|
backgroundColor: '#D8262F',
|
|
borderRadius: 5,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
accDtBtButtonText: {
|
|
textTransform: 'uppercase',
|
|
fontWeight: '700',
|
|
color: '#fff'
|
|
},
|
|
}) |