873 lines
27 KiB
TypeScript
873 lines
27 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';
|
|
import { useNavigation } from '@react-navigation/core';
|
|
|
|
export default function CartStep() {
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<ScrollView>
|
|
<CustommerInfo />
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const CustommerInfo = () => {
|
|
return (
|
|
<View style={styles.boxCustommerInfoCart}>
|
|
<HeaderCart />
|
|
|
|
<CustommerInfoCart />
|
|
|
|
<SelecPayOption />
|
|
|
|
<Bill />
|
|
|
|
<TotalCart />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const HeaderCart = () => {
|
|
const navigation = useNavigation();
|
|
return (
|
|
<View style={styles.headerCartStep}>
|
|
<TouchableOpacity style={styles.goBack} onPress={() => navigation.goBack()}>
|
|
<FontAwesome style={styles.goBackIcon} name="angle-left" />
|
|
</TouchableOpacity>
|
|
<Text style={styles.headerCartStepTitle}>Thanh toán</Text>
|
|
</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}>
|
|
<View style={styles.boxInfoCusCartTitleAll}>
|
|
<Text style={styles.boxInfoCusCartTitleAllNum}>1</Text>
|
|
<Text style={styles.boxInfoCusCartTitle}>Thông tin khách hàng</Text>
|
|
</View>
|
|
<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}>
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Họ tên*" />
|
|
</View>
|
|
<View style={styles.boxInfoCusCartItem}>
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="SĐT*" />
|
|
</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}>
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="Họ tên*" />
|
|
</View>
|
|
<View style={styles.boxInfoCusCartItem}>
|
|
<TextInput style={styles.boxInfoCusCartItemInput} placeholder="SĐT*" />
|
|
</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}>
|
|
<View style={styles.boxInfoCusCartTitleAll}>
|
|
<Text style={styles.boxInfoCusCartTitleAllNum}>1</Text>
|
|
<Text style={styles.boxInfoCusCartTitle}>Phương thức thanh toán</Text>
|
|
</View>
|
|
<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 TotalCart = () => {
|
|
const navigation = useNavigation();
|
|
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á Voucher</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.boxTotalCartItem}>
|
|
<Text style={[styles.boxTotalCartItemCoin, styles.TextBold]}>Nhận thêm 500 xu</Text>
|
|
</View>
|
|
<View style={styles.boxTotalCartItemAll}>
|
|
<Text style={styles.boxTotalCartItemAllText}>Tổng cộng:</Text>
|
|
<Text style={[styles.boxTotalCartItemAllPrice, styles.TextBold]}>5.000.000 đ</Text>
|
|
</View>
|
|
<View style={styles.boxTotalCartSubmit}>
|
|
<TouchableOpacity onPress={() => navigation.navigate('CartPayInstallment')} style={styles.boxTotalCartSubmitButtonTragop}>
|
|
<Text style={styles.boxTotalCartSubmitTextTragop}>Mua trả góp</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.boxTotalCartSubmitButton}>
|
|
<Text style={styles.boxTotalCartSubmitText}>Đặt hàng</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: '#fff',
|
|
},
|
|
headerCartStep: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
},
|
|
goBack: {
|
|
width: 50,
|
|
height: 40,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
goBackIcon: {
|
|
fontSize: 24,
|
|
},
|
|
headerCartStepTitle: {
|
|
fontWeight: '700',
|
|
width: winWidth - 70,
|
|
textAlign: 'center'
|
|
},
|
|
boxCustommerInfoCart: {
|
|
width: winWidth,
|
|
backgroundColor: '#fff',
|
|
paddingHorizontal: 10,
|
|
},
|
|
green: {
|
|
color: '#008445',
|
|
},
|
|
boxInfoCusCart: {
|
|
width: '100%',
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
display: 'none',
|
|
},
|
|
boxInfoCusCartTitle: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
textTransform: 'uppercase',
|
|
color: '#008445',
|
|
},
|
|
boxInfoCusCartTitleAll: {
|
|
width: '100%',
|
|
marginBottom: 10,
|
|
height: 40,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
borderBottomColor: '#ababab',
|
|
borderBottomWidth: 1,
|
|
paddingBottom: 5,
|
|
},
|
|
boxInfoCusCartTitleAllNum: {
|
|
width: 30,
|
|
height: 30,
|
|
textAlign: 'center',
|
|
lineHeight: 30,
|
|
borderColor: '#008445',
|
|
borderWidth: 1,
|
|
borderRadius: 15,
|
|
marginRight: 10,
|
|
},
|
|
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%',
|
|
paddingVertical: 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'
|
|
},
|
|
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',
|
|
justifyContent: 'space-between',
|
|
padding: 10,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e1e1e1'
|
|
},
|
|
boxVoucherShowPopButtonCt: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
boxVoucherShowPopImg: {
|
|
marginRight: 10,
|
|
},
|
|
boxVoucherShowPopText: {
|
|
color: '#d9282f',
|
|
},
|
|
boxVoucherShowPopIcon: {},
|
|
boxXuShowPopButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e1e1e1'
|
|
},
|
|
boxXuShowPopButtonImg: {
|
|
marginRight: 10,
|
|
},
|
|
boxXuShowPopButtonText: {
|
|
marginRight: 10,
|
|
},
|
|
boxXuShowPopButtonIcon: {},
|
|
boxVoucherNote: {
|
|
backgroundColor: '#f2f2f2',
|
|
padding: 10,
|
|
},
|
|
boxVoucherNoteText: {
|
|
marginBottom: 10,
|
|
fontStyle: 'italic',
|
|
},
|
|
TextBold: {
|
|
fontWeight: 'bold',
|
|
},
|
|
boxCloseModalVoucher: {
|
|
width: winWidth,
|
|
backgroundColor: 'rgba(0,0,0,0.5)'
|
|
},
|
|
boxCloseModalVoucherPress: {
|
|
width: '100%',
|
|
},
|
|
contentPopVoucher: {
|
|
width: winWidth,
|
|
padding: 10,
|
|
height: winHeight,
|
|
paddingTop: 50,
|
|
},
|
|
contentPopVoucherHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 10,
|
|
},
|
|
contentPopVoucherBack: {
|
|
width: 50,
|
|
height: 40,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
contentPopVoucherBackIcon: {
|
|
fontSize: 24,
|
|
height: 24,
|
|
},
|
|
contentPopVoucherTitle: {
|
|
width: winWidth - 70,
|
|
fontSize: 18,
|
|
lineHeight: 25,
|
|
textAlign: 'center',
|
|
fontWeight: '700'
|
|
},
|
|
contentPopVoucherForm: {
|
|
width: '100%',
|
|
padding: 10,
|
|
borderRadius: 5,
|
|
backgroundColor: '#f5f5f5',
|
|
marginBottom: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
contentPopVoucherFormText: {
|
|
width: 78,
|
|
},
|
|
contentPopVoucherFormInput: {
|
|
width: winWidth - 205,
|
|
height: 40,
|
|
borderRadius: 5,
|
|
paddingHorizontal: 10,
|
|
backgroundColor: '#fff',
|
|
borderWidth: 1,
|
|
borderColor: '#ababab'
|
|
},
|
|
contentPopVoucherFormButton: {
|
|
width: 72,
|
|
height: 40,
|
|
borderRadius: 5,
|
|
backgroundColor: '#d9282f',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
contentPopVoucherFormButtonText: {
|
|
fontSize: 12,
|
|
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',
|
|
},
|
|
contentPopVoucherPopItemHasUse: {
|
|
borderColor: '#008445',
|
|
},
|
|
contentPopVoucherPopItemLeftHasUse: {
|
|
backgroundColor: '#008445'
|
|
},
|
|
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: {
|
|
},
|
|
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,
|
|
},
|
|
boxTotalCartItemCoin: {
|
|
color: '#FE9923',
|
|
textAlign: 'right',
|
|
width: '100%'
|
|
},
|
|
boxTotalCartSubmit: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
boxTotalCartSubmitButton: {
|
|
width: winWidth / 2 - 15,
|
|
height: 40,
|
|
backgroundColor: '#d9282f',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: 5,
|
|
},
|
|
boxTotalCartSubmitText: {
|
|
fontSize: 15,
|
|
color: '#fff',
|
|
textTransform: 'uppercase',
|
|
fontWeight: 'bold',
|
|
},
|
|
boxTotalCartItemAll: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
paddingVertical: 10,
|
|
},
|
|
boxTotalCartItemAllText: {
|
|
marginRight: 5,
|
|
},
|
|
boxTotalCartItemAllPrice: {
|
|
fontSize: 16,
|
|
color: '#D8262F',
|
|
},
|
|
boxTotalCartSubmitButtonTragop: {
|
|
width: winWidth / 2 - 15,
|
|
height: 40,
|
|
backgroundColor: '#FE9923',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: 5,
|
|
},
|
|
boxTotalCartSubmitTextTragop: {
|
|
fontSize: 15,
|
|
color: '#fff',
|
|
textTransform: 'uppercase',
|
|
fontWeight: 'bold',
|
|
},
|
|
});
|