492 lines
16 KiB
TypeScript
492 lines
16 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 { 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';
|
||
|
|
|
||
|
|
|
||
|
|
export default function CartDetail() {
|
||
|
|
return (
|
||
|
|
<SafeAreaView style={styles.container}>
|
||
|
|
<ScrollView>
|
||
|
|
<View style={styles.boxCartPage}>
|
||
|
|
<View style={styles.boxCartPageHeader}>
|
||
|
|
<View style={styles.boxCartPageBackHome}>
|
||
|
|
<Pressable>
|
||
|
|
<Ionicons style={styles.boxCartPageBackHomeIcon} name="arrow-back-outline" />
|
||
|
|
</Pressable>
|
||
|
|
<Text style={styles.boxCartPageBackHomeText}>Giỏ hàng</Text>
|
||
|
|
</View>
|
||
|
|
<Pressable style={styles.boxCartPageDeleteAll}>
|
||
|
|
<Text style={styles.boxCartPageDeleteAllText}>Xóa toàn bộ</Text>
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxCartPageListProduct}>
|
||
|
|
<CartItem />
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<Voucher />
|
||
|
|
|
||
|
|
<PayOption />
|
||
|
|
|
||
|
|
<CustommerInfoCart />
|
||
|
|
|
||
|
|
<PolicyFooter />
|
||
|
|
|
||
|
|
<Social />
|
||
|
|
|
||
|
|
<ShowroomList />
|
||
|
|
|
||
|
|
<FooterInfo />
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
</SafeAreaView>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const CartItem = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.cartItem}>
|
||
|
|
<View style={styles.cartItemImg}>
|
||
|
|
<Image style={styles.cartItemImgContent} source={{ uri: 'https://hanoicomputercdn.com/media/product/250_56516_vosro3405__4_.png' }} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.cartItemCtNd}>
|
||
|
|
<Text style={styles.cartItemProName} numberOfLines={2}>
|
||
|
|
Laptop Dell Vostro 3405 (V4R53500U003W) (R5 3500U 8GB asa asas )
|
||
|
|
</Text>
|
||
|
|
<TouchableOpacity style={styles.cartItemDelete}>
|
||
|
|
<FontAwesome style={styles.cartItemDeleteIcon} name="trash-o" />
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.cartItemCtRd}>
|
||
|
|
<Text style={styles.cartItemPrice}>20.000.000 đ</Text>
|
||
|
|
<View style={styles.cartItemQuantity}>
|
||
|
|
<Pressable style={styles.cartItemQuantityChange}><Text style={styles.cartItemQuantityChangeText}>-</Text></Pressable>
|
||
|
|
<TextInput style={styles.cartItemQuantityInput} value="1" />
|
||
|
|
<Pressable style={styles.cartItemQuantityChange}><Text style={styles.cartItemQuantityChangeText}>+</Text></Pressable>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const Voucher = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.voucher}>
|
||
|
|
<Text style={styles.voucherTitle}>Mã giảm giả / Quà tặng</Text>
|
||
|
|
<View style={styles.voucherContent}>
|
||
|
|
<TextInput style={styles.voucherInput} placeholder="Nhập mã giảm giá" />
|
||
|
|
<Pressable style={styles.voucherSubmit}>
|
||
|
|
<LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradientBg}>
|
||
|
|
<Text style={styles.voucherSubmitText}>Áp dụng</Text>
|
||
|
|
</LinearGradient>
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const PayOption = () => {
|
||
|
|
const [checked, setChecked] = React.useState('pay1');
|
||
|
|
const listPayment = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: 'Thanh toán tiền mặt khi nhận hàng (tiền mặt / quẹt thẻ ATM, Visa, Master)',
|
||
|
|
description: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
name: 'Thanh toán qua chuyển khoản qua tài khoản ngân hàng (khuyên dùng)',
|
||
|
|
description: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
name: 'Thanh toán qua Ngân Lượng (ATM nội địa, Visa, Master)',
|
||
|
|
description: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
name: 'Trả góp qua Alepay (Ngân Lượng)',
|
||
|
|
description: '',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
return (
|
||
|
|
<View style={styles.BoxPayment}>
|
||
|
|
<Text style={styles.BoxPaymentTitle}>Lựa chọn hình thức thanh toán</Text>
|
||
|
|
<View style={styles.BoxPaymentList}>
|
||
|
|
{
|
||
|
|
listPayment.map(item => {
|
||
|
|
let idpay = 'pay' + item.id;
|
||
|
|
return (
|
||
|
|
<View style={styles.paymentItem} key={item.id}>
|
||
|
|
<View style={styles.paymentItemRadio}>
|
||
|
|
<RadioButton color={'#243a76'} value={idpay} status={checked === idpay ? 'checked' : 'unchecked'} onPress={() => setChecked(idpay)} />
|
||
|
|
</View>
|
||
|
|
<Text style={styles.paymentItemText}>{item.name}</Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const CustommerInfoCart = () => {
|
||
|
|
const [selectedLanguage, setSelectedLanguage] = useState();
|
||
|
|
const [checked, setChecked] = React.useState(false);
|
||
|
|
return (
|
||
|
|
<View style={styles.BoxCustommerInfoCart}>
|
||
|
|
<Text style={styles.BoxPaymentTitle}>Thông tin khách hàng</Text>
|
||
|
|
<View style={styles.BoxCustommerInfoCartList}>
|
||
|
|
<View style={styles.cartCusItem}>
|
||
|
|
<Text style={styles.cartCusItemText}>Họ và tên*</Text>
|
||
|
|
<TextInput style={styles.cartCusItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.cartCusItem}>
|
||
|
|
<Text style={styles.cartCusItemText}>Email*</Text>
|
||
|
|
<TextInput style={styles.cartCusItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.cartCusItem}>
|
||
|
|
<Text style={styles.cartCusItemText}>Số điện thoại*</Text>
|
||
|
|
<TextInput style={styles.cartCusItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.cartCusItem}>
|
||
|
|
<Text style={styles.cartCusItemText}>Chọn tỉnh thành phố*</Text>
|
||
|
|
<Picker
|
||
|
|
style={styles.picker}
|
||
|
|
itemStyle={styles.onePickerItem}
|
||
|
|
selectedValue={selectedLanguage}
|
||
|
|
onValueChange={(itemValue, itemIndex) =>
|
||
|
|
setSelectedLanguage(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>
|
||
|
|
<View style={styles.cartCusItem}>
|
||
|
|
<Text style={styles.cartCusItemText}>Địa chỉ*</Text>
|
||
|
|
<TextInput multiline={true} numberOfLines={3} style={styles.cartCusItemArea} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.cartCusItem}>
|
||
|
|
<Text style={styles.cartCusItemText}>Ghi chú</Text>
|
||
|
|
<TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.companyCart}>
|
||
|
|
<View style={styles.companyCartCheck}>
|
||
|
|
<View style={styles.companyCartCheckBox}>
|
||
|
|
<Checkbox.IOS status={checked ? 'checked' : 'unchecked'} onPress={() => setChecked(!checked)} />
|
||
|
|
</View>
|
||
|
|
<Text style={styles.companyCartCheckText}>Xuất hóa đơn công ty</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.companyCartList}>
|
||
|
|
<View style={styles.cartCusItem}>
|
||
|
|
<Text style={styles.cartCusItemText}>Công ty/ tổ chức*:</Text>
|
||
|
|
<TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.cartCusItem}>
|
||
|
|
<Text style={styles.cartCusItemText}>Địa chỉ*:</Text>
|
||
|
|
<TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.cartCusItem}>
|
||
|
|
<Text style={styles.cartCusItemText}>Mã số thuế*:</Text>
|
||
|
|
<TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const winWidth = Dimensions.get('window').width; //full width
|
||
|
|
const winHeight = Dimensions.get('window').height; //full height
|
||
|
|
const halfWinWidth = winWidth / 2;
|
||
|
|
const ratio = winWidth / 500; //541 is actual image width
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
},
|
||
|
|
boxCartPage: {
|
||
|
|
marginBottom: 20,
|
||
|
|
width: winWidth
|
||
|
|
},
|
||
|
|
boxCartPageHeader: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
width: '100%',
|
||
|
|
height: 40,
|
||
|
|
alignItems: 'center',
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
borderBottomColor: '#d42333',
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
},
|
||
|
|
boxCartPageBackHome: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
boxCartPageBackHomeIcon: {
|
||
|
|
fontSize: 14,
|
||
|
|
marginRight: 8,
|
||
|
|
width: 30
|
||
|
|
},
|
||
|
|
boxCartPageBackHomeText: {
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
boxCartPageDeleteAll: {},
|
||
|
|
boxCartPageDeleteAllText: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#f00'
|
||
|
|
},
|
||
|
|
boxCartPageListProduct: {
|
||
|
|
width: winWidth - 20,
|
||
|
|
marginLeft: 10,
|
||
|
|
marginTop: 20,
|
||
|
|
shadowColor: "#000",
|
||
|
|
shadowOffset: {
|
||
|
|
width: 0,
|
||
|
|
height: 2,
|
||
|
|
},
|
||
|
|
shadowOpacity: 0.25,
|
||
|
|
shadowRadius: 3.84,
|
||
|
|
elevation: 5,
|
||
|
|
marginBottom: 15,
|
||
|
|
},
|
||
|
|
cartItem: {
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
cartItemImg: {
|
||
|
|
position: 'relative',
|
||
|
|
paddingTop: '100%',
|
||
|
|
overflow: 'hidden',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
flexDirection: 'row',
|
||
|
|
width: '100%',
|
||
|
|
},
|
||
|
|
cartItemImgContent: {
|
||
|
|
position: 'absolute',
|
||
|
|
top: 0,
|
||
|
|
left: '5%',
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
maxHeight: 500,
|
||
|
|
width: '90%',
|
||
|
|
},
|
||
|
|
cartItemCtNd: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
marginBottom: 5,
|
||
|
|
width: '100%',
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
cartItemProName: {
|
||
|
|
fontSize: 14,
|
||
|
|
height: 40,
|
||
|
|
lineHeight: 20,
|
||
|
|
width: winWidth - 80,
|
||
|
|
},
|
||
|
|
cartItemDelete: {
|
||
|
|
width: 60,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
height: 40,
|
||
|
|
alignItems: 'center',
|
||
|
|
display: 'flex',
|
||
|
|
},
|
||
|
|
cartItemDeleteIcon: {
|
||
|
|
fontSize: 24,
|
||
|
|
color: '#f00'
|
||
|
|
},
|
||
|
|
cartItemCtRd: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
width: '100%',
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
cartItemPrice: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#e00'
|
||
|
|
},
|
||
|
|
cartItemQuantity: {
|
||
|
|
width: 100,
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
borderWidth: 1,
|
||
|
|
},
|
||
|
|
cartItemQuantityChange: {
|
||
|
|
width: 30,
|
||
|
|
height: 30,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
cartItemQuantityChangeText: {},
|
||
|
|
cartItemQuantityInput: {
|
||
|
|
width: 40,
|
||
|
|
height: 30,
|
||
|
|
textAlign: 'center',
|
||
|
|
borderLeftWidth: 1,
|
||
|
|
borderRightWidth: 1,
|
||
|
|
borderLeftColor: '#e1e1e1',
|
||
|
|
borderRightColor: '#e1e1e1',
|
||
|
|
},
|
||
|
|
voucher: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
voucherTitle: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
fontSize: 14,
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
voucherContent: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
},
|
||
|
|
voucherInput: {
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#ccc',
|
||
|
|
height: 34,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
borderRadius: 5,
|
||
|
|
width: winWidth - 110,
|
||
|
|
},
|
||
|
|
voucherSubmit: {
|
||
|
|
width: 85,
|
||
|
|
marginLeft: 5,
|
||
|
|
},
|
||
|
|
linearGradientBg: {
|
||
|
|
width: '100%',
|
||
|
|
height: 34,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
voucherSubmitText: {
|
||
|
|
color: '#fff',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
BoxPayment: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
BoxPaymentTitle: {
|
||
|
|
padding: 10,
|
||
|
|
backgroundColor: '#243a76',
|
||
|
|
borderRadius: 3,
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#fff',
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
overflow: 'hidden',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
BoxPaymentList: {
|
||
|
|
flexDirection: 'column',
|
||
|
|
},
|
||
|
|
paymentItem: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
marginBottom: 10,
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
paymentItemRadio: {
|
||
|
|
width: 36,
|
||
|
|
height: 36,
|
||
|
|
borderRadius: 18,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#222',
|
||
|
|
marginRight: 10,
|
||
|
|
position: 'relative',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
overflow: 'hidden',
|
||
|
|
},
|
||
|
|
paymentItemText: {
|
||
|
|
width: winWidth - 56,
|
||
|
|
},
|
||
|
|
BoxCustommerInfoCart: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
BoxCustommerInfoCartList: {
|
||
|
|
flexDirection: 'column',
|
||
|
|
},
|
||
|
|
cartCusItem: {
|
||
|
|
flexDirection: 'column',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
cartCusItemText: {
|
||
|
|
fontSize: 14,
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
cartCusItemInput: {
|
||
|
|
height: 34,
|
||
|
|
width: '100%',
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
borderWidth: 1,
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
cartCusItemArea: {
|
||
|
|
height: 65,
|
||
|
|
width: '100%',
|
||
|
|
padding: 10,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
borderWidth: 1,
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
picker: {
|
||
|
|
height: 42,
|
||
|
|
width: '100%',
|
||
|
|
},
|
||
|
|
onePickerItem: {
|
||
|
|
height: 46,
|
||
|
|
color: '#222',
|
||
|
|
fontSize: 14,
|
||
|
|
textAlign: 'center',
|
||
|
|
width: '100%',
|
||
|
|
},
|
||
|
|
companyCart: {
|
||
|
|
marginTop: 5,
|
||
|
|
},
|
||
|
|
companyCartCheck: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
companyCartCheckBox: {
|
||
|
|
width: 36,
|
||
|
|
height: 36,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
marginRight: 10,
|
||
|
|
borderRadius: 18,
|
||
|
|
},
|
||
|
|
companyCartCheckText: {},
|
||
|
|
companyCartList: {},
|
||
|
|
})
|