1196 lines
45 KiB
TypeScript
1196 lines
45 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal } from 'react-native';
|
||
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
||
|
|
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
||
|
|
import EditScreenInfo from '../components/EditScreenInfo';
|
||
|
|
import { Text, View } from '../components/Themed';
|
||
|
|
import { TextInput } from 'react-native-gesture-handler';
|
||
|
|
import Swiper from 'react-native-swiper';
|
||
|
|
import { Asset } from 'expo-asset';
|
||
|
|
import { RadioButton, Checkbox } from 'react-native-paper';
|
||
|
|
import { Picker } from '@react-native-picker/picker';
|
||
|
|
|
||
|
|
export default function Cart() {
|
||
|
|
return (
|
||
|
|
<SafeAreaView style={styles.container}>
|
||
|
|
<ScrollView>
|
||
|
|
<CustommerInfo />
|
||
|
|
</ScrollView>
|
||
|
|
</SafeAreaView>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const CustommerInfo = () => {
|
||
|
|
const [selecTab, setSelecTab] = React.useState('cus')
|
||
|
|
return (
|
||
|
|
<View style={styles.boxCustommerInfoCart}>
|
||
|
|
<View style={styles.boxCustommerInfoCartHeader}>
|
||
|
|
<TouchableOpacity style={selecTab == 'login' ? [styles.boxCustommerInfoCartTab, styles.boxCustommerInfoCartTabActive] : styles.boxCustommerInfoCartTab} onPress={() => setSelecTab('login')}>
|
||
|
|
<Text style={selecTab == 'login' ? [styles.boxCustommerInfoCartTextSt, styles.green] : styles.boxCustommerInfoCartTextSt}>Đăng nhập</Text>
|
||
|
|
<Text style={selecTab == 'login' ? [styles.boxCustommerInfoCartTextNd, styles.green] : styles.boxCustommerInfoCartTextNd}>Đã là thành viên của Nagakawa</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity style={selecTab == 'cus' ? [styles.boxCustommerInfoCartTab, styles.boxCustommerInfoCartTabActive] : styles.boxCustommerInfoCartTab} onPress={() => setSelecTab('cus')}>
|
||
|
|
<Text style={selecTab == 'cus' ? [styles.boxCustommerInfoCartTextSt, styles.green] : styles.boxCustommerInfoCartTextSt}>Mua hàng nhanh</Text>
|
||
|
|
<Text style={selecTab == 'cus' ? [styles.boxCustommerInfoCartTextNd, styles.green] : styles.boxCustommerInfoCartTextNd}>Dành cho khách hàng mới</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={selecTab == 'login' ? [styles.boxCustommerInfoCartLoginContent, styles.active] : styles.boxCustommerInfoCartLoginContent}>
|
||
|
|
<LoginCart />
|
||
|
|
</View>
|
||
|
|
<View style={selecTab == 'cus' ? [styles.boxInfoCusCart, styles.active] : styles.boxInfoCusCart}>
|
||
|
|
<CustommerInfoCart />
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<SelecPayOption />
|
||
|
|
|
||
|
|
<Bill />
|
||
|
|
|
||
|
|
<CartItem />
|
||
|
|
|
||
|
|
<Voucher />
|
||
|
|
|
||
|
|
<TotalCart />
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const LoginCart = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.noBg}>
|
||
|
|
<Text style={styles.loginCartTitle}>Thanh toán đơn hàng chỉ trong 1 bước với</Text>
|
||
|
|
<View style={styles.loginCartSocial}>
|
||
|
|
<TouchableOpacity style={styles.loginCartSocialButtonFace}>
|
||
|
|
<View style={styles.loginCartSocialIcCt}>
|
||
|
|
<FontAwesome style={styles.loginCartSocialButtonIcon} name="facebook" />
|
||
|
|
</View>
|
||
|
|
<Text style={styles.loginCartSocialButtonText}>Facebook</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity style={styles.loginCartSocialButtonGoogle}>
|
||
|
|
<View style={styles.loginCartSocialIcCt}>
|
||
|
|
<FontAwesome style={styles.loginCartSocialButtonIcon} name="google" />
|
||
|
|
</View>
|
||
|
|
<Text style={styles.loginCartSocialButtonText}>Google</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity style={styles.loginCartSocialButtonZalo}>
|
||
|
|
<View style={styles.loginCartSocialIcCt}>
|
||
|
|
<Image style={styles.loginCartSocialButtonImg} source={require('../assets/images/icon-zalo.png')} />
|
||
|
|
</View>
|
||
|
|
<Text style={styles.loginCartSocialButtonText}>Facebook</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.loginCartSocialForm}>
|
||
|
|
<View style={styles.loginCartSocialFormItem}>
|
||
|
|
<Text style={styles.loginCartSocialFormItemText}>Email đăng nhập</Text>
|
||
|
|
<TextInput style={styles.loginCartSocialFormItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.loginCartSocialFormItem}>
|
||
|
|
<Text style={styles.loginCartSocialFormItemText}>Mật khẩu</Text>
|
||
|
|
<TextInput style={styles.loginCartSocialFormItemInput} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.loginCartSocialFormNote}>
|
||
|
|
<Text style={styles.loginCartSocialFormNoteText}>Quên mật khẩu? Khôi phục mật khẩu </Text>
|
||
|
|
<TouchableOpacity style={styles.loginCartSocialFormNoteButton}>
|
||
|
|
<Text style={styles.green}>Tại đây</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<TouchableOpacity style={styles.loginCartSocialFormButton}>
|
||
|
|
<Text style={styles.loginCartSocialFormButtonText}>Đăng nhập</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const CustommerInfoCart = () => {
|
||
|
|
const [selecSex, setSelecSex] = React.useState('male');
|
||
|
|
const [checkedInfo, setCheckedInfo] = React.useState(false);
|
||
|
|
const [selectedProvince, setSelectedProvince] = React.useState();
|
||
|
|
const [selectedDistrict, setSelectedDistrict] = React.useState();
|
||
|
|
return (
|
||
|
|
<View style={styles.noBg}>
|
||
|
|
<Text style={styles.boxInfoCusCartTitle}>Thông tin khách hàng</Text>
|
||
|
|
<View style={styles.boxInfoCusCartHeading}>
|
||
|
|
<Text style={styles.boxInfoCusCartHeadingText}>Thông tin người mua</Text>
|
||
|
|
<Text style={styles.boxInfoCusCartHeadingNote}>(<Text style={styles.red}>*</Text>) Thông tin bắt buộc</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItemSex}>
|
||
|
|
<View style={styles.boxInfoCusCartItemSexIt}>
|
||
|
|
<View style={styles.itemRadio}>
|
||
|
|
<RadioButton color={'#243a76'} value={'male'} status={selecSex === 'male' ? 'checked' : 'unchecked'} onPress={() => setSelecSex('male')} />
|
||
|
|
</View>
|
||
|
|
<Text>Anh</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItemSexIt}>
|
||
|
|
<View style={styles.itemRadio}>
|
||
|
|
<RadioButton color={'#243a76'} value={'female'} status={selecSex === 'female' ? 'checked' : 'unchecked'} onPress={() => setSelecSex('female')} />
|
||
|
|
</View>
|
||
|
|
<Text>Chị</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartContent}>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<View style={styles.boxInfoCusCartItemHalf}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Họ tên*" />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItemHalf}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="SĐT*" />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Email*" />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Email*" />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Địa chỉ (Tên đường, Số nhà)*" />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemArea} multiline={true} numberOfLines={3} placeholder="Ghi chú" />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartHeading}>
|
||
|
|
<Text style={styles.boxInfoCusCartHeadingText}>Thông tin người nhận</Text>
|
||
|
|
<Text style={styles.boxInfoCusCartHeadingNote}>(<Text style={styles.red}>*</Text>) Thông tin bắt buộc</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItemCheckInfo}>
|
||
|
|
<View style={styles.itemRadio}>
|
||
|
|
<Checkbox status={checkedInfo ? 'checked' : 'unchecked'} onPress={() => setCheckedInfo(!checkedInfo)} />
|
||
|
|
</View>
|
||
|
|
<Text>Lấy thông tin người mua</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartContent}>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<View style={styles.boxInfoCusCartItemHalf}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Họ tên*" />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItemHalf}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="SĐT*" />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<View style={styles.boxInfoCusCartItemHalf}>
|
||
|
|
<Picker
|
||
|
|
style={styles.picker}
|
||
|
|
itemStyle={styles.onePickerItem}
|
||
|
|
selectedValue={selectedProvince}
|
||
|
|
onValueChange={(itemValue, itemIndex) =>
|
||
|
|
setSelectedProvince(itemValue)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Picker.Item label="-- Chọn tỉnh/TP --" value="0" />
|
||
|
|
<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.boxInfoCusCartItemHalf}>
|
||
|
|
<Picker
|
||
|
|
style={styles.picker}
|
||
|
|
itemStyle={styles.onePickerItem}
|
||
|
|
selectedValue={selectedDistrict}
|
||
|
|
onValueChange={(itemValue, itemIndex) =>
|
||
|
|
setSelectedDistrict(itemValue)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Picker.Item label="-- Chọn Quận/Huyện --" value="0" />
|
||
|
|
<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>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Địa chỉ (tên đường, số nhà)*" />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const SelecPayOption = () => {
|
||
|
|
const [checkedPayment, setCheckedPayment] = React.useState('pay1');
|
||
|
|
const listPayment = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: 'COD - Thanh toán khi nhận hàng',
|
||
|
|
description: '',
|
||
|
|
image: require('../assets/images/pay_1.png'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
name: 'Thanh toán trực tuyến (bằng thẻ ATM, VISA, MASTER) ',
|
||
|
|
description: '',
|
||
|
|
image: require('../assets/images/pay_2.png'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
name: 'Trả góp qua Alepay (Ngân Lượng)',
|
||
|
|
description: '',
|
||
|
|
image: require('../assets/images/pay_2.png'),
|
||
|
|
},
|
||
|
|
]
|
||
|
|
return (
|
||
|
|
<View style={styles.boxPayment}>
|
||
|
|
<Text style={styles.boxPaymentHead}>Phương thức thanh toán</Text>
|
||
|
|
<Text style={styles.boxPaymentTitle}>Chọn phương 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.paymentItemImage}>
|
||
|
|
<Image style={styles.paymentItemImageCt} source={item.image} />
|
||
|
|
</View>
|
||
|
|
<Text style={styles.paymentItemText}>{item.name}</Text>
|
||
|
|
<View style={styles.paymentItemRadio}>
|
||
|
|
<RadioButton color={'#243a76'} value={idpay} status={checkedPayment === idpay ? 'checked' : 'unchecked'} onPress={() => setCheckedPayment(idpay)} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const Bill = () => {
|
||
|
|
const [checkedBill, setCheckedBill] = React.useState(false);
|
||
|
|
return (
|
||
|
|
<View style={styles.boxBill}>
|
||
|
|
<View style={styles.boxInfoCusCartItemCheckInfo}>
|
||
|
|
<View style={styles.itemRadio}>
|
||
|
|
<Checkbox status={checkedBill ? 'checked' : 'unchecked'} onPress={() => setCheckedBill(!checkedBill)} />
|
||
|
|
</View>
|
||
|
|
<Text style={styles.boxBillText}>Yêu cầu xuất hóa đơn GTGT cho đơn hàng này</Text>
|
||
|
|
</View>
|
||
|
|
<View style={checkedBill ? [styles.boxBillList, styles.active] : styles.boxBillList}>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Tên công ty*" />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Địa chỉ*" />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxInfoCusCartItem}>
|
||
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Mã số thuế*" />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const CartItem = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.boxCartItem}>
|
||
|
|
<TouchableOpacity style={styles.boxCartItemBuyOther}>
|
||
|
|
<FontAwesome style={styles.boxCartItemBuyOtherIcon} name="long-arrow-left" />
|
||
|
|
<Text style={styles.boxCartItemBuyOtherIconText}>Quay lại mua thêm sản phẩm khác</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<View style={styles.boxCartItemContent}>
|
||
|
|
<Text style={styles.boxCartItemContentTitle}>Giỏ hàng của bạn</Text>
|
||
|
|
<View style={styles.boxCartItemList}>
|
||
|
|
<View style={styles.boxCartItemItem}>
|
||
|
|
<View style={styles.boxCartItemItemImage}>
|
||
|
|
<TouchableOpacity>
|
||
|
|
<View style={styles.boxCartItemItemImageCt}>
|
||
|
|
<Image style={styles.boxCartItemItemImageCtImg} source={require('../assets/images/product.png')} />
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity style={styles.boxCartItemItemDelete}>
|
||
|
|
<Ionicons style={styles.boxCartItemItemDeleteIcon} name="trash-outline" />
|
||
|
|
<Text style={styles.boxCartItemItemDeleteText}>Xóa</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxCartItemItemContent}>
|
||
|
|
<TouchableOpacity>
|
||
|
|
<Text style={styles.boxCartItemItemImageName}>Khẩu trang vải kháng khuẩn Nagakawa 2 lớp - Công nghệ Nhật Bản Hộp 10 chiếc (Hộp 10 chiếc - L)</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity>
|
||
|
|
<Text style={styles.boxCartItemItemImageBuyAfter}>Để dành mua sau</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxCartItemItemPriceAll}>
|
||
|
|
<Text style={styles.boxCartItemItemPrice}>121.000.000 đ</Text>
|
||
|
|
<View style={styles.selecCountContent}>
|
||
|
|
<TouchableOpacity style={styles.selecCountButton}>
|
||
|
|
<Text style={styles.selecCountButtonText}>+</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TextInput style={styles.selecCountInput} value="1" />
|
||
|
|
<TouchableOpacity style={styles.selecCountButton}>
|
||
|
|
<Text style={styles.selecCountButtonText}>-</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const Voucher = () => {
|
||
|
|
const [openPopVoucher, setOpenPopVoucher] = useState(false);
|
||
|
|
const [checkedVoucher, setCheckedVoucher,] = useState('');
|
||
|
|
return (
|
||
|
|
<View style={styles.boxVoucher}>
|
||
|
|
<View style={styles.boxVoucherForm}>
|
||
|
|
<TextInput style={styles.boxVoucherFormInput} placeholder="Mã voucher" />
|
||
|
|
<TouchableOpacity style={styles.boxVoucherFormButton}>
|
||
|
|
<Text style={styles.boxVoucherFormButtonText}>Áp dụng</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxVoucherShowPop}>
|
||
|
|
<TouchableOpacity style={styles.boxVoucherShowPopButton} onPress={() => setOpenPopVoucher(true)}>
|
||
|
|
<Image style={styles.boxVoucherShowPopImg} source={require('../assets/images/img-cart-voucher.png')} />
|
||
|
|
<Text style={styles.boxVoucherShowPopText}>Chọn mã voucher</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxVoucherNote}>
|
||
|
|
<Text style={styles.boxVoucherNoteText}><Text style={styles.TextBold}>Lưu ý:</Text> Mã giảm giá không áp dụng kèm với chương trình trả góp 0%, sản phẩm Flash sale.</Text>
|
||
|
|
<Text style={styles.boxVoucherNoteText}>- Các mã giảm giá được áp dụng đồng thời nếu đủ điều kiện.</Text>
|
||
|
|
<Text style={styles.boxVoucherNoteText}>- Tài khoản đăng ký chưa được xác thực dùng NagaXu hệ thống sẽ tự động hủy đơn hàng</Text>
|
||
|
|
</View>
|
||
|
|
<Modal visible={openPopVoucher} animationType="slide" transparent={true} onRequestClose={() => { setOpenPopVoucher(!openPopVoucher); }}>
|
||
|
|
<View style={styles.boxCloseModalVoucher}>
|
||
|
|
<TouchableOpacity style={styles.boxCloseModalVoucherPress} onPress={() => setOpenPopVoucher(false)}>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucher}>
|
||
|
|
<Text style={styles.contentPopVoucherTitle}>Chọn Nagakawa Voucher</Text>
|
||
|
|
<View style={styles.contentPopVoucherForm}>
|
||
|
|
<Text style={styles.contentPopVoucherFormText}>Mã Voucher</Text>
|
||
|
|
<TextInput style={styles.contentPopVoucherFormInput} />
|
||
|
|
<TouchableOpacity style={styles.contentPopVoucherFormButton}>
|
||
|
|
<Text style={styles.contentPopVoucherFormButtonText}>Áp dụng</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPop}>
|
||
|
|
<Text style={styles.contentPopVoucherPopTitle}>Voucher có thể áp dụng</Text>
|
||
|
|
<View style={styles.contentPopVoucherPopList}>
|
||
|
|
<ScrollView>
|
||
|
|
<View style={styles.contentPopVoucherPopItem}>
|
||
|
|
<View style={styles.contentPopVoucherPopItemLeft}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCenter}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCheck}>
|
||
|
|
<Checkbox color={'#00a456'} status={checkedVoucher === 'vc1' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc1')} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItem}>
|
||
|
|
<View style={styles.contentPopVoucherPopItemLeft}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCenter}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCheck}>
|
||
|
|
<Checkbox color={'#00a456'} status={checkedVoucher === 'vc2' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc2')} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItem}>
|
||
|
|
<View style={styles.contentPopVoucherPopItemLeft}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCenter}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCheck}>
|
||
|
|
<Checkbox color={'#00a456'} status={checkedVoucher === 'vc3' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc3')} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItem}>
|
||
|
|
<View style={styles.contentPopVoucherPopItemLeft}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCenter}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCheck}>
|
||
|
|
<Checkbox color={'#00a456'} status={checkedVoucher === 'vc4' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc4')} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItem}>
|
||
|
|
<View style={styles.contentPopVoucherPopItemLeft}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCenter}>
|
||
|
|
<Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopItemCheck}>
|
||
|
|
<Checkbox color={'#00a456'} status={checkedVoucher === 'vc5' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc5')} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentPopVoucherPopBot}>
|
||
|
|
<TouchableOpacity style={styles.contentPopVoucherPopBotBack} onPress={() => setOpenPopVoucher(false)}>
|
||
|
|
<Text style={styles.contentPopVoucherPopBotBackText}>Trở lại</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity style={styles.contentPopVoucherPopBotOk} onPress={() => setOpenPopVoucher(false)}>
|
||
|
|
<Text style={styles.contentPopVoucherPopBotOkText}>Ok</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Modal>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const TotalCart = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.boxTotalCart}>
|
||
|
|
<View style={styles.boxTotalCartXu}>
|
||
|
|
<Image style={styles.boxTotalCartXuImg} source={require('../assets/images/icon_xu.png')} />
|
||
|
|
<TouchableOpacity style={styles.boxTotalCartXuButton}>
|
||
|
|
<Text style={styles.boxTotalCartButtonTex}>Bạn chưa có Naga Xu </Text>
|
||
|
|
<FontAwesome style={styles.boxTotalCartButtonIcon} name="question-circle" />
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxTotalCartItem}>
|
||
|
|
<Text style={styles.boxTotalCartItemLeft}>Tổng cộng</Text>
|
||
|
|
<Text style={styles.boxTotalCartItemRight}>5.000.000đ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxTotalCartItem}>
|
||
|
|
<Text style={styles.boxTotalCartItemLeft}>Giảm giá</Text>
|
||
|
|
<Text style={styles.boxTotalCartItemRight}>00đ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxTotalCartItem}>
|
||
|
|
<Text style={styles.boxTotalCartItemLeft}>Phí giao hàng</Text>
|
||
|
|
<Text style={styles.boxTotalCartItemRight}>00đ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxTotalCartItem}>
|
||
|
|
<Text style={[styles.boxTotalCartItemLeft, styles.TextBold]}>Thanh toán</Text>
|
||
|
|
<Text style={[styles.boxTotalCartItemRight, styles.TextBold, styles.red]}>5.000.000đ</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxTotalCartSubmit}>
|
||
|
|
<TouchableOpacity style={styles.boxTotalCartSubmitButton}>
|
||
|
|
<Ionicons style={styles.boxTotalCartSubmitIcon} name="checkmark-outline" />
|
||
|
|
<Text style={styles.boxTotalCartSubmitText}>Thanh toán</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const winWidth = Dimensions.get('window').width; //full width
|
||
|
|
const winHeight = Dimensions.get('window').height; //full height
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
backgroundColor: '#f2f2f2',
|
||
|
|
},
|
||
|
|
boxCustommerInfoCart: {
|
||
|
|
width: winWidth,
|
||
|
|
padding: 10,
|
||
|
|
backgroundColor: '#f2f2f2',
|
||
|
|
},
|
||
|
|
boxCustommerInfoCartHeader: {
|
||
|
|
width: '100%',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxCustommerInfoCartTab: {
|
||
|
|
width: winWidth / 2 - 15,
|
||
|
|
padding: 10,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#ddd',
|
||
|
|
borderRadius: 5,
|
||
|
|
flexDirection: 'column',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
boxCustommerInfoCartTextSt: {
|
||
|
|
fontSize: 13,
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
boxCustommerInfoCartTextNd: {
|
||
|
|
fontSize: 10,
|
||
|
|
},
|
||
|
|
boxCustommerInfoCartTabActive: {
|
||
|
|
borderColor: '#008445',
|
||
|
|
},
|
||
|
|
green: {
|
||
|
|
color: '#008445',
|
||
|
|
},
|
||
|
|
boxCustommerInfoCartLoginContent: {
|
||
|
|
width: '100%',
|
||
|
|
padding: 5,
|
||
|
|
display: 'none',
|
||
|
|
},
|
||
|
|
loginCartTitle: {
|
||
|
|
width: '100%',
|
||
|
|
textAlign: 'center',
|
||
|
|
paddingVertical: 10,
|
||
|
|
},
|
||
|
|
loginCartSocial: {
|
||
|
|
width: '100%',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
marginBottom: 10,
|
||
|
|
paddingBottom: 10,
|
||
|
|
borderBottomColor: '#e1e1e1',
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
},
|
||
|
|
loginCartSocialButtonFace: {
|
||
|
|
width: 110,
|
||
|
|
height: 30,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#3b5998',
|
||
|
|
borderRadius: 3,
|
||
|
|
},
|
||
|
|
loginCartSocialIcCt: {
|
||
|
|
width: 30,
|
||
|
|
height: 30,
|
||
|
|
borderRightWidth: 1,
|
||
|
|
borderRightColor: '#fff',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
||
|
|
},
|
||
|
|
loginCartSocialButtonIcon: {
|
||
|
|
fontSize: 24,
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
loginCartSocialButtonText: {
|
||
|
|
width: 80,
|
||
|
|
textAlign: 'center',
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
loginCartSocialButtonGoogle: {
|
||
|
|
width: 110,
|
||
|
|
height: 30,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#df4a32',
|
||
|
|
borderRadius: 3,
|
||
|
|
},
|
||
|
|
loginCartSocialButtonImg: {
|
||
|
|
width: 24,
|
||
|
|
height: 24,
|
||
|
|
},
|
||
|
|
loginCartSocialButtonZalo: {
|
||
|
|
width: 110,
|
||
|
|
height: 30,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#0f8edd',
|
||
|
|
borderRadius: 3,
|
||
|
|
},
|
||
|
|
loginCartSocialForm: {
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
loginCartSocialFormItem: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
loginCartSocialFormItemText: {
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
loginCartSocialFormItemInput: {
|
||
|
|
width: '100%',
|
||
|
|
height: 40,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
loginCartSocialFormNote: {
|
||
|
|
marginBottom: 10,
|
||
|
|
flexDirection: 'row',
|
||
|
|
},
|
||
|
|
loginCartSocialFormNoteText: {},
|
||
|
|
loginCartSocialFormNoteButton: {},
|
||
|
|
loginCartSocialFormButton: {
|
||
|
|
width: '100%',
|
||
|
|
height: 40,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
borderRadius: 5,
|
||
|
|
overflow: 'hidden',
|
||
|
|
backgroundColor: '#d9282f',
|
||
|
|
},
|
||
|
|
loginCartSocialFormButtonText: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
boxInfoCusCart: {
|
||
|
|
width: '100%',
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
||
|
|
display: 'none',
|
||
|
|
},
|
||
|
|
boxInfoCusCartTitle: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 10,
|
||
|
|
backgroundColor: '#008445',
|
||
|
|
lineHeight: 40,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
boxInfoCusCartHeading: {
|
||
|
|
marginBottom: 10,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
boxInfoCusCartHeadingText: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
marginRight: 5,
|
||
|
|
},
|
||
|
|
boxInfoCusCartHeadingNote: {},
|
||
|
|
boxInfoCusCartItemSex: {
|
||
|
|
padding: 10,
|
||
|
|
marginBottom: 10,
|
||
|
|
width: '100%',
|
||
|
|
flexDirection: 'row',
|
||
|
|
},
|
||
|
|
boxInfoCusCartItemSexIt: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginRight: 20,
|
||
|
|
},
|
||
|
|
itemRadio: {
|
||
|
|
width: 36,
|
||
|
|
height: 36,
|
||
|
|
borderRadius: 18,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
marginRight: 5,
|
||
|
|
},
|
||
|
|
boxInfoCusCartContent: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 10,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
||
|
|
},
|
||
|
|
boxInfoCusCartItem: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 10,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
boxInfoCusCartItemInput: {
|
||
|
|
width: '100%',
|
||
|
|
height: 42,
|
||
|
|
borderRadius: 5,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
},
|
||
|
|
red: {
|
||
|
|
color: '#d9282f'
|
||
|
|
},
|
||
|
|
boxInfoCusCartItemHalf: {
|
||
|
|
width: winWidth / 2 - 15,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
||
|
|
},
|
||
|
|
boxInfoCusCartItemArea: {
|
||
|
|
width: '100%',
|
||
|
|
height: 85,
|
||
|
|
borderRadius: 5,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
},
|
||
|
|
boxInfoCusCartItemCheckInfo: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: 10,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
||
|
|
},
|
||
|
|
picker: {
|
||
|
|
height: 42,
|
||
|
|
width: '100%',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
onePickerItem: {
|
||
|
|
height: 46,
|
||
|
|
color: '#222',
|
||
|
|
fontSize: 14,
|
||
|
|
textAlign: 'center',
|
||
|
|
width: '100%',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
},
|
||
|
|
active: {
|
||
|
|
display: 'flex',
|
||
|
|
},
|
||
|
|
noBg: {
|
||
|
|
width: '100%',
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
||
|
|
},
|
||
|
|
boxPayment: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 20,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
||
|
|
},
|
||
|
|
boxPaymentHead: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 10,
|
||
|
|
backgroundColor: '#008445',
|
||
|
|
lineHeight: 40,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
boxPaymentTitle: {
|
||
|
|
marginBottom: 10,
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
boxPaymentList: {},
|
||
|
|
paymentItem: {
|
||
|
|
width: '100%',
|
||
|
|
padding: 10,
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
borderBottomColor: '#e1e1e1',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
},
|
||
|
|
paymentItemImage: {
|
||
|
|
width: 31,
|
||
|
|
height: 31,
|
||
|
|
borderRadius: 15.5,
|
||
|
|
overflow: 'hidden',
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
paymentItemImageCt: {
|
||
|
|
width: 31,
|
||
|
|
height: 31,
|
||
|
|
},
|
||
|
|
paymentItemText: {
|
||
|
|
width: winWidth - 130,
|
||
|
|
},
|
||
|
|
paymentItemRadio: {
|
||
|
|
width: 36,
|
||
|
|
height: 36,
|
||
|
|
borderRadius: 18,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
marginLeft: 10,
|
||
|
|
},
|
||
|
|
boxBill: {
|
||
|
|
width: '100%',
|
||
|
|
padding: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxBillList: {
|
||
|
|
display: 'none',
|
||
|
|
},
|
||
|
|
boxBillText: {
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
boxCartItem: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 20,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
||
|
|
},
|
||
|
|
boxCartItemBuyOther: {
|
||
|
|
marginBottom: 10,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
boxCartItemBuyOtherIcon: {
|
||
|
|
fontSize: 15,
|
||
|
|
color: '#d9282f',
|
||
|
|
marginRight: 5,
|
||
|
|
},
|
||
|
|
boxCartItemBuyOtherIconText: {
|
||
|
|
fontSize: 15,
|
||
|
|
color: '#d9282f',
|
||
|
|
marginRight: 5,
|
||
|
|
textTransform: 'uppercase'
|
||
|
|
},
|
||
|
|
boxCartItemContent: {
|
||
|
|
width: '100%',
|
||
|
|
padding: 5,
|
||
|
|
},
|
||
|
|
boxCartItemContentTitle: {
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
lineHeight: 40,
|
||
|
|
},
|
||
|
|
boxCartItemList: {},
|
||
|
|
boxCartItemItem: {
|
||
|
|
width: '100%',
|
||
|
|
paddingVertical: 10,
|
||
|
|
flexDirection: 'row',
|
||
|
|
borderTopColor: '#e1e1e1',
|
||
|
|
borderTopWidth: 1,
|
||
|
|
},
|
||
|
|
boxCartItemItemImage: {
|
||
|
|
width: 90,
|
||
|
|
},
|
||
|
|
boxCartItemItemImageCt: {
|
||
|
|
width: 90,
|
||
|
|
height: 90,
|
||
|
|
position: 'relative',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxCartItemItemImageCtImg: {
|
||
|
|
width: 90,
|
||
|
|
height: 90,
|
||
|
|
position: 'absolute',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
},
|
||
|
|
boxCartItemItemDelete: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
},
|
||
|
|
boxCartItemItemDeleteIcon: {
|
||
|
|
fontSize: 18,
|
||
|
|
color: '#999',
|
||
|
|
},
|
||
|
|
boxCartItemItemDeleteText: {
|
||
|
|
fontSize: 18,
|
||
|
|
color: '#999',
|
||
|
|
},
|
||
|
|
boxCartItemItemContent: {
|
||
|
|
width: winWidth - 230,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
boxCartItemItemImageName: {
|
||
|
|
marginBottom: 10,
|
||
|
|
fontWeight: '500',
|
||
|
|
},
|
||
|
|
boxCartItemItemImageBuyAfter: {
|
||
|
|
color: '#00a456',
|
||
|
|
},
|
||
|
|
boxCartItemItemPriceAll: {
|
||
|
|
width: 110,
|
||
|
|
},
|
||
|
|
boxCartItemItemPrice: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: '500',
|
||
|
|
color: '#d9282f',
|
||
|
|
marginBottom: 10,
|
||
|
|
textAlign: 'left',
|
||
|
|
},
|
||
|
|
selecCountContent: {
|
||
|
|
width: 100,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'flex-end',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
selecCountButton: {
|
||
|
|
width: 30,
|
||
|
|
height: 30,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#DFDFDF',
|
||
|
|
},
|
||
|
|
selecCountButtonText: {
|
||
|
|
fontSize: 24,
|
||
|
|
},
|
||
|
|
selecCountInput: {
|
||
|
|
width: 50,
|
||
|
|
height: 30,
|
||
|
|
textAlign: 'center',
|
||
|
|
backgroundColor: '#f2f2f2',
|
||
|
|
fontSize: 22,
|
||
|
|
},
|
||
|
|
boxVoucher: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 20,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
||
|
|
},
|
||
|
|
boxVoucherForm: {
|
||
|
|
marginBottom: 10,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
boxVoucherFormInput: {
|
||
|
|
width: winWidth - 98,
|
||
|
|
height: 40,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
borderTopLeftRadius: 5,
|
||
|
|
borderBottomLeftRadius: 5,
|
||
|
|
overflow: 'hidden',
|
||
|
|
},
|
||
|
|
boxVoucherFormButton: {
|
||
|
|
width: 78,
|
||
|
|
height: 40,
|
||
|
|
backgroundColor: '#6c757d',
|
||
|
|
borderTopRightRadius: 5,
|
||
|
|
borderBottomRightRadius: 5,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
},
|
||
|
|
boxVoucherFormButtonText: {
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
boxVoucherShowPop: {
|
||
|
|
width: '100%',
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
||
|
|
},
|
||
|
|
boxVoucherShowPopButton: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: 15,
|
||
|
|
},
|
||
|
|
boxVoucherShowPopImg: {
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
boxVoucherShowPopText: {
|
||
|
|
color: '#d9282f',
|
||
|
|
},
|
||
|
|
boxVoucherNote: {
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
||
|
|
},
|
||
|
|
boxVoucherNoteText: {
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
TextBold: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
boxCloseModalVoucher: {
|
||
|
|
width: winWidth,
|
||
|
|
height: 100,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0.5)'
|
||
|
|
},
|
||
|
|
boxCloseModalVoucherPress: {
|
||
|
|
width: '100%',
|
||
|
|
height: 100,
|
||
|
|
},
|
||
|
|
contentPopVoucher: {
|
||
|
|
width: winWidth,
|
||
|
|
padding: 10,
|
||
|
|
height: winHeight - 100,
|
||
|
|
},
|
||
|
|
contentPopVoucherTitle: {
|
||
|
|
width: '100%',
|
||
|
|
fontSize: 18,
|
||
|
|
lineHeight: 25,
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
contentPopVoucherForm: {
|
||
|
|
width: '100%',
|
||
|
|
padding: 10,
|
||
|
|
borderRadius: 5,
|
||
|
|
backgroundColor: '#f5f5f5',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
contentPopVoucherFormText: {
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
contentPopVoucherFormInput: {
|
||
|
|
width: '100%',
|
||
|
|
height: 40,
|
||
|
|
borderRadius: 5,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
contentPopVoucherFormButton: {
|
||
|
|
width: '100%',
|
||
|
|
height: 40,
|
||
|
|
borderRadius: 5,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
backgroundColor: '#d9282f',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
},
|
||
|
|
contentPopVoucherFormButtonText: {
|
||
|
|
fontSize: 18,
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
color: '#fff',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
contentPopVoucherPop: {
|
||
|
|
width: '100%',
|
||
|
|
height: winHeight - 350,
|
||
|
|
},
|
||
|
|
contentPopVoucherPopTitle: {
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
contentPopVoucherPopList: {
|
||
|
|
width: '100%',
|
||
|
|
height: winHeight - 370,
|
||
|
|
},
|
||
|
|
contentPopVoucherPopItem: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 10,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#999',
|
||
|
|
flexDirection: 'row',
|
||
|
|
borderRadius: 5,
|
||
|
|
overflow: 'hidden',
|
||
|
|
alignItems: 'center',
|
||
|
|
paddingRight: 8,
|
||
|
|
},
|
||
|
|
contentPopVoucherPopItemLeft: {
|
||
|
|
width: 130,
|
||
|
|
padding: 10,
|
||
|
|
backgroundColor: '#999',
|
||
|
|
flexDirection: 'column',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
contentPopVoucherPopItemLeftSt: {
|
||
|
|
color: '#fff',
|
||
|
|
marginBottom: 5,
|
||
|
|
fontSize: 15,
|
||
|
|
},
|
||
|
|
contentPopVoucherPopItemLeftNd: {
|
||
|
|
color: '#fff',
|
||
|
|
marginBottom: 5,
|
||
|
|
fontSize: 15,
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
contentPopVoucherPopItemCenter: {
|
||
|
|
|
||
|
|
},
|
||
|
|
contentPopVoucherPopItemCenterText: {
|
||
|
|
width: winWidth - 194,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
contentPopVoucherPopItemCheck: {
|
||
|
|
width: 36,
|
||
|
|
height: 36,
|
||
|
|
borderRadius: 18,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#999',
|
||
|
|
},
|
||
|
|
contentPopVoucherPopBot: {
|
||
|
|
width: '100%',
|
||
|
|
height: 60,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
contentPopVoucherPopBotBack: {
|
||
|
|
width: winWidth / 2 - 15,
|
||
|
|
backgroundColor: '#ebebeb',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
borderRadius: 5,
|
||
|
|
height: 40,
|
||
|
|
},
|
||
|
|
contentPopVoucherPopBotBackText: {
|
||
|
|
fontSize: 18,
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
},
|
||
|
|
contentPopVoucherPopBotOk: {
|
||
|
|
width: winWidth / 2 - 15,
|
||
|
|
backgroundColor: '#d9282f',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
borderRadius: 5,
|
||
|
|
height: 40,
|
||
|
|
},
|
||
|
|
contentPopVoucherPopBotOkText: {
|
||
|
|
fontSize: 18,
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
color: '#fff',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
boxTotalCart: {
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
boxTotalCartXu: {
|
||
|
|
width: '100%',
|
||
|
|
paddingVertical: 15,
|
||
|
|
borderBottomColor: '#e1e1e1',
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
boxTotalCartXuImg: {
|
||
|
|
width: 20,
|
||
|
|
height: 20,
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
boxTotalCartXuButton: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
boxTotalCartButtonTex: {},
|
||
|
|
boxTotalCartButtonIcon: {},
|
||
|
|
boxTotalCartItem: {
|
||
|
|
width: '100%',
|
||
|
|
paddingVertical: 15,
|
||
|
|
borderBottomColor: '#e1e1e1',
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
},
|
||
|
|
boxTotalCartItemLeft: {
|
||
|
|
fontSize: 14,
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
},
|
||
|
|
boxTotalCartItemRight: {
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
boxTotalCartSubmit: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'flex-end',
|
||
|
|
paddingVertical: 10,
|
||
|
|
},
|
||
|
|
boxTotalCartSubmitButton: {
|
||
|
|
width: 155,
|
||
|
|
height: 40,
|
||
|
|
backgroundColor: '#d9282f',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
boxTotalCartSubmitIcon: {
|
||
|
|
fontSize: 15,
|
||
|
|
color: '#fff',
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
boxTotalCartSubmitText: {
|
||
|
|
fontSize: 15,
|
||
|
|
color: '#fff',
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
});
|