From 78bb7a0182059cf77e25ad6b308415eb2314d121 Mon Sep 17 00:00:00 2001 From: Tieptk Date: Thu, 14 Aug 2025 14:31:37 +0700 Subject: [PATCH] upload 14/8 --- assets/images/icon-email.png | Bin 0 -> 526 bytes assets/images/icon-locahost.png | Bin 0 -> 956 bytes assets/images/icon-mohinh.png | Bin 0 -> 1348 bytes assets/images/icon-showroom-gray.png | Bin 0 -> 385 bytes assets/images/icon-tel.png | Bin 0 -> 902 bytes assets/images/icon-times.png | Bin 0 -> 2265 bytes assets/images/icon-vipham.png | Bin 0 -> 1108 bytes assets/images/icon-web.png | Bin 0 -> 1153 bytes assets/images/icon_store_gray.png | Bin 0 -> 1035 bytes src/components/repair/BoxReview.tsx | 298 ++++++++++++++++++ src/components/repair/CompanyInfo.tsx | 119 +++++++ src/components/repair/ContactForm.tsx | 4 +- src/components/repair/ShowroomSection.tsx | 113 +++++++ src/screens/question/HomeQuestion.tsx | 15 + .../repair_address/DetailRepairAddress.tsx | 162 +++++++++- 15 files changed, 706 insertions(+), 5 deletions(-) create mode 100644 assets/images/icon-email.png create mode 100644 assets/images/icon-locahost.png create mode 100644 assets/images/icon-mohinh.png create mode 100644 assets/images/icon-showroom-gray.png create mode 100644 assets/images/icon-tel.png create mode 100644 assets/images/icon-times.png create mode 100644 assets/images/icon-vipham.png create mode 100644 assets/images/icon-web.png create mode 100644 assets/images/icon_store_gray.png create mode 100644 src/components/repair/BoxReview.tsx create mode 100644 src/components/repair/CompanyInfo.tsx create mode 100644 src/components/repair/ShowroomSection.tsx create mode 100644 src/screens/question/HomeQuestion.tsx diff --git a/assets/images/icon-email.png b/assets/images/icon-email.png new file mode 100644 index 0000000000000000000000000000000000000000..e7e979d6151f9f1d5f1f72eea059c1142b9e67fb GIT binary patch literal 526 zcmV+p0`dKcP)EeRDsI-mof0_Xsj;5A5)d!w;5K{(hLoCRFT znm1$5oVm}>A4{|bgMovlD*0&DZntL^qtR&O9S#Rya+GCR?*#?`yLv3x@Aq}z_XD|u zVA4Jwk5e2q9G=qSWgHs@#bR;GOvsI;v%3ZK1>Jy5Wt`tArRq5O#anu4$ZQ3S70;P)X*Qcdr_*r|zOkPr3)pyhI2?{)Xo0Q`c%#*7H837V*Qj$7 zS&64vpaV%LUW<*dG2g}f3Eg(P-TCQtg}4Qn1vC!8OSB#xz{%%sx0}QjB;A%uC67>a z1Ayy*F5?(VE-1m<1Lk`SF4YwUgHUIzs literal 0 HcmV?d00001 diff --git a/assets/images/icon-locahost.png b/assets/images/icon-locahost.png new file mode 100644 index 0000000000000000000000000000000000000000..bcb2944df5d4310247d5fdd48fc7a8f7640079de GIT binary patch literal 956 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 literal 0 HcmV?d00001 diff --git a/assets/images/icon-tel.png b/assets/images/icon-tel.png new file mode 100644 index 0000000000000000000000000000000000000000..375e3f9edfa4745884a46df1df9cc25e3d760a19 GIT binary patch literal 902 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 T>lXf00009a7bBm000&x z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yPc2zL`Vfv|4?)TJ5f!r~nQR4_ir+tm4Vk1o8U%`hcdpx3|}I-zRm!qA0Stxw-Fe zZ*ML2vABGCdOE;*+Dqj4`1l@8j;9CqS81A-?l|5x@vZ}+C9HKGSfqoe3EA`de10J2 zt;iZB$h1MG*KmbSPfzzTnF3k_w1?=r`GO=VcXoCzeJqZSj<{HpWIZyMSSQCiHzYeV zGqZ`dNL`8N=VxP~5D7wv+P(Gy1hkONedF8P+ZyvX*r#<(>k7bu3XoU~kq~6ENG~K{ z$FRs!NJgAhQy;9{OzQ&NFBO4RZofK41XzryqK;d(FE1~D6B!2QIL8QE2VGKel%jKd zBKV42Cf|o-U^PoJ8=|We`IWJWsQ$52ySuwVXQeZ`vLRqgtmSe;gvSXEb3vzxO=Pf> zZq$!l864%Mh(5|_JeeVaqtrsPuKIx}h}qfMT)J9~NCaCrlEYdexwH?lNf^&$@=%L_ zfOd69i0F#QsGxUCJ8~k#LL@mdGF*8#~Q^tN&xx}xt5VBi|!;Tp-7^Db{A21&| z*)tD_R@ocYC_rLArk6p|=d3&t*J=>3qHVRpG;kNaVa=Fan9{ zz3qdbj@7*rBLV_v5)o;Et{NOeT86{>9*9AQMbsod5P2=D}3GyZhgH*sb4v}s7XjBL!o>F;Wag3kN|Yw;bU*y zTZ8xa5t2~-ctB|0{89Y;v{y+fpxECEtjBRW{3ecZ!n#$isx37*mHee(IY`7pDz=Uq za-9DG{N3f;);2?lSlE1``WE7sEvPZUYl;-;v_k2V`3=~@A>LB-0R{j7002ovPDHLk FV1nk3-aP;S literal 0 HcmV?d00001 diff --git a/src/components/repair/BoxReview.tsx b/src/components/repair/BoxReview.tsx new file mode 100644 index 0000000..68743a2 --- /dev/null +++ b/src/components/repair/BoxReview.tsx @@ -0,0 +1,298 @@ +import React, { useState } from "react"; +import { + View, + Text, + StyleSheet, + FlatList, + Image, + TouchableOpacity, + ScrollView, +} from "react-native"; +import { Ionicons } from "@expo/vector-icons"; +import ReviewModal from "@components/product/FormReview"; + +const reviews = [ + { + id: "1", + name: "Dino", + time: "10:00pm 20/02/2025", + title: "Laptop Gaming Asus ROG 16GB", + content: + "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", + images: [ + require("../../../assets/images/small-product-detail.png"), + require("../../../assets/images/small-product-detail.png"), + require("../../../assets/images/small-product-detail.png"), + ], + star: 5, + }, + { + id: "2", + name: "Dino", + time: "10:00pm 20/02/2025", + title: "Laptop Gaming Asus ROG 16GB", + content: + "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", + images: [ + require("../../../assets/images/small-product-detail.png"), + require("../../../assets/images/small-product-detail.png"), + ], + star: 4, + }, +]; + +const renderStars = (count: number) => { + return ( + + {Array.from({ length: 5 }).map((_, index) => ( + + ))} + + ); +}; + +const ReviewSection = () => { + const [showReviewModal, setShowReviewModal] = useState(false); + + return ( + + {/* Header */} + + Đánh giá + + + + {/* Right */} + + item.id} + renderItem={({ item }) => ( + + + + + + {item.name} + {item.time} + + {renderStars(item.star)} + + + + + {item.title} + {item.content} + + {item.images.map((img, index) => ( + + ))} + + + + + Bình luận (23) + + + + + Thích (23) + + + + + + )} + /> + + + + Xem thêm 23 bình luận khác + + + + + + + ); +}; + +const styles = StyleSheet.create({ + BoxReview: { + padding: 10, + backgroundColor: "#fff", + marginTop: 20, + borderRadius: 8, + borderWidth: 1, + borderColor: "#D4D4D4", + }, + header: { + flexDirection: "row", + justifyContent: "space-between", + borderBottomWidth: 1, + borderBottomColor: "#B1B1B1", + paddingBottom: 15, + }, + headerTitle: { + fontSize: 16, + fontWeight: "bold", + }, + sortBox: { + borderWidth: 1, + borderColor: "#B1B1B1", + paddingHorizontal: 10, + height: 45, + justifyContent: "center", + borderRadius: 4, + }, + content: { + gap: 25, + marginTop: 20, + }, + left: { + width: "100%", + }, + totalReview: { + textAlign: "center", + fontSize: 22, + fontWeight: "bold", + paddingBottom: 5, + }, + ratingRow: { + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + marginBottom: 10, + }, + star: { + fontSize: 16, + }, + ratingText: { + marginLeft: 5, + fontSize: 16, + fontWeight: 700, + }, + ratingBreakdown: { + borderTopWidth: 1, + borderTopColor: "#E4E4E4", + paddingTop: 10, + }, + ratingLine: { + flexDirection: "row", + justifyContent: "space-between", + marginBottom: 10, + }, + reviewBtnArea: { + borderTopWidth: 1, + borderTopColor: "#E4E4E4", + paddingTop: 10, + marginTop: 20, + }, + reviewPrompt: { + textAlign: "center", + marginTop: 10, + }, + reviewBtn: { + marginTop: 10, + height: 40, + backgroundColor: "#FF7A00", + justifyContent: "center", + alignItems: "center", + borderRadius: 4, + }, + reviewBtnText: { + color: "#fff", + }, + right: { + width: "100%", + }, + reviewItem: { + marginBottom: 15, + paddingBottom: 15, + borderBottomWidth: 1, + borderBottomColor: "rgba(228, 228, 228, 1)", + }, + avatarBox: { + flexDirection: "row", + alignContent: "center", + width: "100%", + alignItems: "center", + marginRight: 20, + }, + avatar: { + width: 30, + height: 30, + borderRadius: 40, + marginRight: 10, + }, + name: { + fontWeight: "bold", + marginRight: 10, + }, + time: { + fontSize: 12, + textAlign: "center", + }, + reviewContent: { + flex: 1, + }, + title: { + fontWeight: "600", + marginBottom: 5, + }, + contentText: { + marginBottom: 5, + }, + imageList: { + flexDirection: "row", + marginBottom: 10, + }, + reviewImage: { + width: 80, + height: 80, + marginRight: 10, + }, + btnRow: { + flexDirection: "row", + }, + btnLink: { + color: "#1877F2", + marginRight: 15, + }, + black: { + color: "#000", + }, + moreBtn: { + color: "#FF7A00", + }, + moreBold: { + fontWeight: "bold", + }, +}); + +export default ReviewSection; diff --git a/src/components/repair/CompanyInfo.tsx b/src/components/repair/CompanyInfo.tsx new file mode 100644 index 0000000..ebe5abd --- /dev/null +++ b/src/components/repair/CompanyInfo.tsx @@ -0,0 +1,119 @@ +import React from "react"; +import { View, StyleSheet, Image, Text } from "react-native"; + +const CompanyInfo = () => { + const infoItems = [ + { + icon: require("../../../assets/images/icon_store_gray.png"), + label: "Lĩnh vực", + value: "Chuyên sửa chữa PC, laptop, linh phụ kiện máy tính", + }, + { + icon: require("../../../assets/images/icon-mohinh.png"), + label: "Mô hình", + value: "Cá nhân", + }, + { + icon: require("../../../assets/images/icon-times.png"), + label: "Năm hoạt động", + value: "5 năm", + }, + { + icon: require("../../../assets/images/icon-locahost.png"), + label: "Địa chỉ", + value: + "Tầng 7, toà nhà số 198 Nguyễn Thị Minh Khai, phường 6, quận 3, TP. Hồ Chí Minh", + }, + { + icon: require("../../../assets/images/icon-vipham.png"), + label: "Phạm vi hoạt động", + value: "Tại cửa hàng / Bán kính quanh 20km", + }, + { + icon: require("../../../assets/images/icon-web.png"), + label: "Website", + value: "https://www.anphatpc.com.vn/", + isLink: true, + }, + { + icon: require("../../../assets/images/icon-tel.png"), + label: "Tel", + value: "1900 0323 0918 557 006", + }, + { + icon: require("../../../assets/images/icon-email.png"), + label: "Gmail", + value: "Giang@anphatpc.com.vn", + }, + ]; + + return ( + + Thông tin + + {infoItems.map((item, index) => ( + + + + {item.label} + + + {item.value} + + + ))} + + + ); +}; +export default CompanyInfo; + +const styles = StyleSheet.create({ + container: { + borderColor: "rgba(212, 212, 212, 1)", + borderRadius: 12, + borderWidth: 1, + marginTop: 9, + padding: 10, + backgroundColor: "#fff", + }, + boxFlex: {}, + items: { + flexDirection: "row", + gap: 10, + marginTop: 10, + }, + title: { + fontSize: 16, + fontWeight: "700", + color: "rgba(0, 0, 0, 1)", + }, + infoRow: { + width: 140, + flexDirection: "row", + alignItems: "center", + }, + icon: { + width: 20, + height: 20, + marginRight: 6, + resizeMode: "contain", + }, + label: { + fontSize: 13, + fontWeight: "400", + color: "#303030", + }, + valueContainer: { + alignSelf: "stretch", + marginTop: 10, + }, + value: { + fontSize: 13, + fontWeight: "400", + color: "#303030", + }, + linkValue: { + color: "rgba(24, 119, 242, 1)", + }, +}); diff --git a/src/components/repair/ContactForm.tsx b/src/components/repair/ContactForm.tsx index 6cf88ec..801c01b 100644 --- a/src/components/repair/ContactForm.tsx +++ b/src/components/repair/ContactForm.tsx @@ -34,7 +34,8 @@ export default ContactForm; const styles = StyleSheet.create({ container: { - marginTop: 56, + marginTop: 20, + marginBottom: 20, }, headerSection: { position: "relative", @@ -71,6 +72,7 @@ const styles = StyleSheet.create({ }, formSection: { padding: 12, + backgroundColor: "#fff", }, inputField: { borderWidth: 1, diff --git a/src/components/repair/ShowroomSection.tsx b/src/components/repair/ShowroomSection.tsx new file mode 100644 index 0000000..6cadac0 --- /dev/null +++ b/src/components/repair/ShowroomSection.tsx @@ -0,0 +1,113 @@ +import React from "react"; +import { View, StyleSheet, Text, Image } from "react-native"; + +const ShowroomSection = () => { + return ( + + HỆ THỐNG SHOWROOM + + + + + + Showroom 1: 49 Thái Hà - Đống Đa - Hà Nội + + + + + + Showroom 2: 151 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội + + + + + + Showroom 3: 63 Trần Thái Tông - Cầu Giấy - Hà Nội + + + + + + Showroom 4: 158 - 160 Lý Thường Kiệt - Quận 10 - TPHCM + + + + + + Showroom 5: 330-332 Võ Văn Tần - P. 5 - Q. 3 - TPHCM + + + + + + Showroom 6: Số 51 Trần Hưng Đạo - Đại Phúc - Bắc Ninh + + + + + ); +}; + +export default ShowroomSection; + +const styles = StyleSheet.create({ + container: { + borderRadius: 12, + borderWidth: 1, + borderColor: "rgba(212, 212, 212, 1)", + padding: 10, + marginTop: 12, + backgroundColor: "#fff", + }, + content: {}, + title: { + fontSize: 14, + fontWeight: "700", + color: "rgba(0, 0, 0, 1)", + textTransform: "uppercase", + }, + divider: { + height: 1, + backgroundColor: "#E3E3E3", + borderWidth: 1, + borderColor: "rgba(227, 227, 227, 1)", + marginTop: 15, + }, + itemShoroom: { + flexDirection: "row", + alignItems: "center", + gap: 9, + marginTop: 10, + }, + imageGrid: { + flexDirection: "column", + }, + showroomImage: { + width: 20, + height: 20, + }, + addressList: { + fontSize: 11, + fontWeight: "400", + color: "rgba(0, 0, 0, 1)", + flex: 1, + }, +}); diff --git a/src/screens/question/HomeQuestion.tsx b/src/screens/question/HomeQuestion.tsx new file mode 100644 index 0000000..6ef2523 --- /dev/null +++ b/src/screens/question/HomeQuestion.tsx @@ -0,0 +1,15 @@ +import React, { useState } from "react"; +import { + View, + Text, + TextInput, + TouchableOpacity, + ScrollView, + Image, + StyleSheet, + Dimensions, + ImageBackground, +} from "react-native"; +import { useNavigation, NavigationProp } from "@react-navigation/native"; +import AppLayout from "@layouts/AppLayout"; +import { Ionicons } from "@expo/vector-icons"; diff --git a/src/screens/repair_address/DetailRepairAddress.tsx b/src/screens/repair_address/DetailRepairAddress.tsx index 5a730fd..428ae47 100644 --- a/src/screens/repair_address/DetailRepairAddress.tsx +++ b/src/screens/repair_address/DetailRepairAddress.tsx @@ -13,9 +13,28 @@ import { import { useNavigation, NavigationProp } from "@react-navigation/native"; import AppLayout from "@layouts/AppLayout"; import { Ionicons } from "@expo/vector-icons"; +import CompanyInfo from "@components/repair/CompanyInfo"; +import BoxReview from "@components/repair/BoxReview"; +import ShowroomSection from "@components/repair/ShowroomSection"; +import ContactForm from "@components/repair/ContactForm"; const { width } = Dimensions.get("window"); +const renderStars = (count: number) => { + return ( + + {Array.from({ length: 5 }).map((_, index) => ( + + ))} + + ); +}; + export default function DetailRepairAddress() { const navigation = useNavigation>(); @@ -41,10 +60,68 @@ export default function DetailRepairAddress() { - Danh sách địa chỉ sửa chữa - - + Danh sách địa chỉ sửa chữa + + + + An Phát + + CÔNG TY CỔ PHẦN THƯƠNG MẠI MÁY TÍNH AN PHÁT + + + {renderStars(4)} + 4.6/5 + (43 đánh giá) + + + + + Giới thiệu + + + Thành lập vào ngày 29/03/2004, trải qua hai thập kỷ không ngừng + phát triển, An Phát Computer đã liên tục tăng trưởng, mở rộng thị + trường và trở thành một trong những doanh nghiệp hàng đầu trong + lĩnh vực bán buôn và bán lẻ các sản phẩm, thiết bị công nghệ thông + tin, thiết bị lưu trữ, thiết bị văn phòng. + {"\n"} + Năm 2024, An Phát Computer vinh dự kỷ niệm 20 năm thành lập, đánh + dấu chặng đường hai thập kỷ uy tín, cam kết không ngừng cải thiện + chất lượng dịch vụ, đem đến cho khách hàng những sản phẩm công + nghệ hi-end, hi-tech nhất thị trường. + {"\n\n"} + Xuyên suốt hành trình xây dựng và phát triển, tiêu chí "Uy tín" và + "Chuyên nghiệp" luôn được An Phát Computer đặt lên hàng đầu. Bên + cạnh đó, những sản phẩm chất lượng với mức giá cạnh tranh, dịch vụ + tư vấn tận tâm, chính sách bán hàng, bảo hành cùng đội ngũ cán bộ + nhân viên được đào tạo chuyên nghiệp cũng góp phần tạo ra những + giá trị đích thực, giúp cho An Phát Computer gặt hái được nhiều + thành công. Tới nay doanh nghiệp đã có 07 showroom bán hàng ở các + thành phố lớn tại Hà Nội, TP. Hồ Chí Minh, Bắc Ninh và 01 Trung + tâm phân phối & dự án. Đến các cửa hàng thuộc hệ thống An Phát + Computer, khách hàng luôn có được sự hài lòng với quy trình tư vấn + bài bản của nhân viên nhằm lựa chọn cho mình những sản phẩm ưng ý + nhất theo phương châm: "Mỗi khách hàng là một con người - một cá + thể riêng biệt, cần được tôn trọng, quan tâm và lắng nghe, thấu + hiểu và phục vụ một cách riêng biệt.". + + + + + {/* thông tin công ty */} + + + {/* đánh giá */} + + + {/* showroom */} + + + {/* form liên hệ */} @@ -54,7 +131,8 @@ export default function DetailRepairAddress() { const styles = StyleSheet.create({ container: { paddingHorizontal: 10, - backgroundColor: "#fff", + backgroundColor: "#F4F4F4", + marginBottom: 15, }, breadcrumb: { flexDirection: "row", @@ -77,4 +155,80 @@ const styles = StyleSheet.create({ marginLeft: 12, color: "#888", }, + companyCard: { + flexDirection: "row", + alignItems: "flex-start", + gap: 12, + marginTop: 10, + }, + companyLogo: { + width: 80, + height: 80, + resizeMode: "contain", + borderWidth: 1, + borderColor: "#D4D4D4", + borderRadius: 4, + padding: 10, + backgroundColor: "#fff", + }, + companyInfo: { + flex: 1, + }, + companyName: { + fontSize: 15, + fontWeight: "700", + color: "#303030", + }, + companyFullName: { + fontSize: 15, + fontWeight: "700", + color: "#303030", + marginTop: 4, + }, + ratingContainer: { + flexDirection: "row", + alignItems: "center", + gap: 6, + marginTop: 4, + }, + rating: { + fontSize: 13, + fontWeight: "400", + color: "#303030", + }, + reviewCount: { + fontSize: 13, + fontWeight: "400", + color: "#303030", + textDecorationLine: "underline", + }, + companyDescription: { + borderRadius: 8, + borderWidth: 1, + borderColor: "rgba(212, 212, 212, 1)", + paddingVertical: 16, + paddingHorizontal: 1, + marginTop: 9, + backgroundColor: "#fff", + }, + titleCompany: { + fontSize: 16, + fontWeight: "700", + color: "rgba(0, 0, 0, 1)", + marginLeft: 11, + }, + dividerCompany: { + height: 1, + backgroundColor: "#E3E3E3", + borderWidth: 1, + borderColor: "rgba(227, 227, 227, 1)", + marginTop: 10, + }, + descriptionCompany: { + fontSize: 13, + fontWeight: "400", + color: "rgba(0, 0, 0, 1)", + lineHeight: 18, + padding: 10, + }, });