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

492
screens/Cart.tsx Normal file
View File

@@ -0,0 +1,492 @@
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: {},
})