tieptk/bestpc_mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 19/7

Browse Source
This commit is contained in:
Tieptk
2025-07-19 12:08:32 +07:00
parent 3fa4622feb
commit 19f99ca33f
6 changed files with 553 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
src/components/buildpc/CreateBuildpc.tsx Normal file
View File

@@ -0,0 +1,255 @@
import React, { useState } from "react";
import {
View,
Text,
ScrollView,
TouchableOpacity,
Image,
StyleSheet,
Dimensions,
TextInput,
} from "react-native";
import PopupBuildpc from "@components/buildpc/PopupBuildpc"; // Bạn cần tự tạo modal này trong React Native
import Feather from "@expo/vector-icons/Feather";
import AntDesign from "@expo/vector-icons/AntDesign";
const { width } = Dimensions.get("window");
export function CreateBuildpc() {
const [showPopup, setShowPopup] = useState(false);
return (
<ScrollView style={styles.container}>
{/* Item CPU */}
<View style={styles.itemRow}>
<Text style={styles.componentTitle}>CPU</Text>
<View style={styles.productInfo}>
<View style={styles.productLeft}>
<View style={styles.infolinhkien}>
<Image
source={require("../../../assets/images/lienkien-ram.png")}
style={styles.productImage}
resizeMode="contain"
/>
<Text style={styles.productName}>
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</Text>
</View>
<View style={styles.boxQlt}>
<Text>Số lượng</Text>
<TextInput
value="111"
style={styles.inputQl}
keyboardType="numeric"
placeholder="Nhập số"
/>
</View>
<View
style={{
flexDirection: "row",
alignItems: "center",
marginBottom: 10,
}}
>
<Text style={{ marginRight: 10, fontSize: 13 }}>Giá bán:</Text>
<Text style={styles.oldPrice}>4.700.000 Vnđ</Text>
</View>
<View
style={{
flexDirection: "row",
alignItems: "center",
marginBottom: 10,
}}
>
<Text style={{ marginRight: 10, fontSize: 13 }}>Khuyến mãi:</Text>
<Text style={styles.discount}>20%</Text>
</View>
<View
style={{
flexDirection: "row",
alignItems: "center",
marginBottom: 10,
}}
>
<Text style={{ marginRight: 10, fontSize: 13 }}>Thành tiền:</Text>
<Text style={styles.totalPrice}>4.000.000đ</Text>
</View>
<View style={styles.supplierSection}>
<Text style={{ marginRight: 10, fontSize: 13 }}>
Nhà cung cấp
</Text>
<Image
source={require("../../../assets/images/logo-hacom.png")}
style={styles.supplierLogo}
resizeMode="contain"
/>
</View>
</View>
<View style={styles.buttonGroup}>
<TouchableOpacity style={styles.buyButton}>
<Feather name="edit" size={24} color="#1877f2" />
</TouchableOpacity>
<TouchableOpacity style={styles.removeButton}>
<AntDesign name="delete" size={24} color="#ff0000" />
</TouchableOpacity>
</View>
</View>
</View>
{/* Thêm lựa chọn CPU */}
<TouchableOpacity
style={styles.addButton}
onPress={() => setShowPopup(true)}
>
<Text style={styles.addButtonText}>+ Chọn thêm CPU</Text>
</TouchableOpacity>
{/* Tổng tiền */}
<View style={styles.totalSection}>
<Text style={styles.totalText}>Tổng tiền 2 sản phẩm: 8.000.000đ</Text>
<View style={styles.totalButtons}>
<TouchableOpacity style={styles.printButton}>
<Text>🖨️ In đơn hàng</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.checkoutButton}>
<Text style={styles.checkoutText}>Mua hàng tại Hacom</Text>
</TouchableOpacity>
</View>
</View>
{/* Popup */}
{showPopup && (
<PopupBuildpc visible={showPopup} onClose={() => setShowPopup(false)} />
)}
</ScrollView>
);
}
export default CreateBuildpc;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
componentTitle: {
fontWeight: "bold",
fontSize: 15,
marginBottom: 5,
},
itemRow: {
paddingVertical: 12,
borderBottomWidth: 1,
borderColor: "#ccc",
},
productInfo: {
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "space-between",
},
productLeft: {
width: width - 100,
},
infolinhkien: {
flexDirection: "row",
},
productImage: {
width: 60,
height: 60,
marginRight: 10,
borderWidth: 1,
borderColor: "#ccc",
},
productName: {
flexShrink: 1,
},
inputQl: {
borderWidth: 1,
borderColor: "#e3e3e3",
fontSize: 13,
width: 64,
height: 30,
marginLeft: 10,
paddingVertical: 0,
paddingHorizontal: 6,
borderRadius: 4,
paddingLeft: 10,
paddingRight: 10,
lineHeight: 20,
includeFontPadding: false,
},
boxQlt: {
marginBottom: 15,
marginTop: 10,
flexDirection: "row",
alignItems: "center",
height: 30,
flex: 1,
},
oldPrice: {},
discount: {},
totalPrice: {
fontWeight: "bold",
color: "red",
},
supplierSection: {
alignItems: "center",
flexDirection: "row",
},
supplierLogo: {
width: 60,
height: 30,
marginBottom: 6,
},
buttonGroup: {
flexDirection: "row",
alignItems: "center",
width: 60,
},
buyButton: {
marginRight: 6,
},
removeButton: {
paddingVertical: 2,
},
addButton: {
marginTop: 12,
backgroundColor: "#d4d4d4",
borderRadius: 4,
paddingVertical: 6,
alignItems: "center",
},
addButtonText: {
fontSize: 12,
fontWeight: "bold",
},
totalSection: {
marginTop: 24,
},
totalText: {
fontSize: 18,
fontWeight: "bold",
color: "#dc2626",
textAlign: "right",
},
totalButtons: {
flexDirection: "row",
justifyContent: "flex-end",
marginTop: 12,
},
printButton: {
borderWidth: 1,
borderColor: "#b3b3b3",
paddingHorizontal: 16,
paddingVertical: 8,
marginRight: 10,
borderRadius: 4,
},
checkoutButton: {
backgroundColor: "#5b21b6",
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 4,
},
checkoutText: {
color: "#fff",
fontWeight: "bold",
},
});