You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1347 lines
39 KiB
1347 lines
39 KiB
import React, { useEffect } from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
StyleSheet, |
|
TouchableOpacity, |
|
ScrollView, |
|
Dimensions, |
|
useWindowDimensions, |
|
Animated, |
|
BackHandler, |
|
} from "react-native"; |
|
import fontSize from "../utils/fontsizeUtils"; |
|
import widthUtils from "../utils/widthUtils"; |
|
import DiagonalArrowIcon from "../components/DiagonalArrowIcon"; |
|
import Carousel from "react-native-reanimated-carousel"; |
|
import WhiteCircleIcon from "../components/WhiteCircleIconIcon"; |
|
import ShoppingCartIcon from "../components/ShoppingCartIcon"; |
|
import { useState } from "react"; |
|
import { |
|
productApi, |
|
ProductDetailParams, |
|
Similars, |
|
SkuAttribute, |
|
ProductGroupList |
|
} from "../services/api/productApi"; |
|
import { useNavigation, useRoute } from "@react-navigation/native"; |
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
import { RouteProp } from "@react-navigation/native"; |
|
import BackIcon from "../components/BackIcon"; |
|
import CameraIcon from "../components/CameraIcon"; |
|
import ProductCard from "./ProductCard"; |
|
import CloseIcon from "../components/CloseIcon"; |
|
type ProductDetailRouteParams = { |
|
offer_id: string; |
|
searchKeyword?: string; |
|
price: number; |
|
}; |
|
|
|
|
|
|
|
export const ProductDetailScreen = () => { |
|
const { width } = useWindowDimensions(); // 移动到组件内部 |
|
const navigation = useNavigation<NativeStackNavigationProp<any>>(); |
|
const route = |
|
useRoute<RouteProp<Record<string, ProductDetailRouteParams>, string>>(); |
|
const [activeIndex, setActiveIndex] = useState(0); |
|
const screenWidth = Dimensions.get("window").width; |
|
const [expandedGroups, setExpandedGroups] = useState<{ |
|
[key: string]: boolean; |
|
}>({}); |
|
|
|
const [product, setProduct] = useState<ProductDetailParams>(); |
|
const [groupList, setGroupList] = useState<ProductGroupList[]>([]); |
|
|
|
const [similars, setSimilars] = useState<Similars>(); |
|
const [isSimilarsFlag, setIsSimilarsFlag] = useState(false); |
|
const [imageUrls, setImageUrls] = useState<any[]>([]); |
|
const [imageHeights, setImageHeights] = useState<{ [key: string]: number }>({}); |
|
const [priceSelectedSku, setPriceSelectedSku] = useState<any>(); |
|
const [showBottomSheet, setShowBottomSheet] = useState(false); |
|
|
|
const groupData = (res: ProductDetailParams,priceSelectedSku:SkuAttribute[]) => { |
|
let result = {} as any; |
|
// 遍历数据 |
|
res.skus.forEach((item) => { |
|
item.attributes.forEach((attribute) => { |
|
const { attribute_name, value } = attribute; |
|
// 如果结果对象中没有对应的属性名，则创建一个空数组 |
|
if (!result[attribute_name]) { |
|
result[attribute_name] = []; |
|
} |
|
|
|
// 如果当前属性的值（value）已经存在于该组内，跳过 |
|
if ( |
|
!result[attribute_name].some( |
|
(existingAttribute: any) => existingAttribute.value === value |
|
) |
|
) { |
|
result[attribute_name].push(attribute); |
|
} |
|
}); |
|
}); |
|
|
|
const list: ProductGroupList[] = []; |
|
|
|
// Iterate over each attribute and transform the data |
|
for (const [attributeName, attributes] of Object.entries(result)) { |
|
const withImage: any[] = []; |
|
const withoutImage: any[] = []; |
|
|
|
// @ts-ignore |
|
attributes.forEach((attribute) => { |
|
attribute.has_color = false; |
|
// Check if sku_image_url is not null or undefined |
|
const hasImage = |
|
attribute.sku_image_url !== null && |
|
attribute.sku_image_url !== undefined; |
|
|
|
// Push the attribute to the appropriate array |
|
if (hasImage) { |
|
withImage.push(attribute); |
|
} else { |
|
withoutImage.push(attribute); |
|
} |
|
}); |
|
|
|
// Add has_image to the list item |
|
list.push({ |
|
attribute_name: attributeName, |
|
has_image: withImage.length > 0, // If there are any items with images, set has_image to true |
|
attributes: [...withImage, ...withoutImage], |
|
}); |
|
} |
|
|
|
if(!priceSelectedSku){ |
|
list.forEach(item => { |
|
item.attributes[0].has_color = true; |
|
}) |
|
return list; |
|
} |
|
|
|
if(priceSelectedSku.length >= 1){ |
|
priceSelectedSku.forEach(item => { |
|
list.forEach(item1 => { |
|
item1.attributes.forEach(attribute => { |
|
if(attribute.value === item.value){ |
|
attribute.has_color = true; |
|
} |
|
}) |
|
}) |
|
}) |
|
return list; |
|
} |
|
return list; |
|
}; |
|
|
|
// 处理展开/收起 |
|
const toggleExpand = (attributeName: string) => { |
|
setExpandedGroups((prev) => ({ |
|
...prev, |
|
[attributeName]: !prev[attributeName], |
|
})); |
|
}; |
|
|
|
// 获取要显示的属性 |
|
const getDisplayAttributes = (attributes: any[], attributeName: string) => { |
|
if (expandedGroups[attributeName]) { |
|
return attributes; |
|
} |
|
return attributes.slice(0, 6); |
|
}; |
|
|
|
// 处理尺码选择 |
|
const handleSizeSelect = (size: string, index: number) => { |
|
const newGroupList = [...groupList]; |
|
const attributeIndex = newGroupList[index]?.attributes.findIndex( |
|
(item) => item.value === size |
|
); |
|
if (attributeIndex !== -1) { |
|
newGroupList[index].attributes = newGroupList[index].attributes.map( |
|
(item, i) => { |
|
if (i === attributeIndex) { |
|
return { ...item, has_color: true }; |
|
} |
|
return { ...item, has_color: false }; |
|
} |
|
); |
|
setGroupList(newGroupList); |
|
} |
|
const selectedSku:SkuAttribute[] = [] |
|
groupList.forEach(item => { |
|
item.attributes.forEach(attribute => { |
|
if(attribute.has_color){ |
|
selectedSku.push(attribute); |
|
} |
|
}) |
|
}) |
|
|
|
let price = 0 |
|
product?.skus.forEach(item => { |
|
const values1 = item.attributes.map(item => item.value).sort(); |
|
const values2 = selectedSku.map(item => item.value).sort(); |
|
if(values1.every((val, index) => val === values2[index])){ |
|
if(item.offer_price){ |
|
price = item.offer_price |
|
}else{ |
|
price = product.sale_info.price_range_list[product.sale_info.price_range_list.length - 1].price |
|
} |
|
} |
|
}) |
|
if(product) { |
|
setProduct({ |
|
...product, |
|
price: price === 0 ? '无货' : price |
|
}) |
|
} |
|
}; |
|
|
|
// 处理颜色选择 |
|
const handleColorSelect = (colorId: string, index: number) => { |
|
const newGroupList = [...groupList]; |
|
const attributeIndex = newGroupList[index]?.attributes.findIndex( |
|
(item) => item.value === colorId |
|
); |
|
if (attributeIndex !== -1) { |
|
newGroupList[index].attributes = newGroupList[index].attributes.map( |
|
(item, i) => { |
|
if (i === attributeIndex) { |
|
return { ...item, has_color: true }; |
|
} |
|
return { ...item, has_color: false }; |
|
} |
|
); |
|
setGroupList(newGroupList); |
|
} |
|
|
|
const selectedSku:SkuAttribute[] = [] |
|
groupList.forEach(item => { |
|
item.attributes.forEach(attribute => { |
|
if(attribute.has_color){ |
|
selectedSku.push(attribute); |
|
} |
|
}) |
|
}) |
|
|
|
let price = 0 |
|
product?.skus.forEach(item => { |
|
const values1 = item.attributes.map(item => item.value).sort(); |
|
const values2 = selectedSku.map(item => item.value).sort(); |
|
|
|
if(values1.every((val, index) => val === values2[index])){ |
|
if(item.offer_price){ |
|
price = item.offer_price |
|
}else{ |
|
price = product.sale_info.price_range_list[product.sale_info.price_range_list.length - 1].price |
|
} |
|
} |
|
}) |
|
if(product) { |
|
setProduct({ |
|
...product, |
|
price: price === 0 ? '无货' : price |
|
}) |
|
} |
|
}; |
|
|
|
const getProductDetail = async () => { |
|
if (!route.params?.offer_id) return; |
|
const res = await productApi.getProductDetail(route.params.offer_id); |
|
if (res.skus != null) { |
|
const priceSelectedSku = res.skus.find( |
|
(item) => item.offer_price === route.params.price |
|
); |
|
if (priceSelectedSku) { |
|
res.price = priceSelectedSku.offer_price; |
|
} else { |
|
res.price = res.sale_info.price_range_list[res.sale_info.price_range_list.length - 1]?.price; |
|
} |
|
}else{ |
|
res.price = route.params.price |
|
} |
|
if (res.skus != null) { |
|
const priceSelectedSku = res.skus.find(item => item.offer_price === route.params.price) |
|
if (priceSelectedSku) { |
|
setPriceSelectedSku({ |
|
price:route.params.price, |
|
}) |
|
} |
|
} |
|
setPriceSelectedSku(priceSelectedSku) |
|
setProduct(res); |
|
let list:ProductGroupList[] = [] |
|
if(res.skus != null){ |
|
list = groupData(res,priceSelectedSku?.attributes as SkuAttribute[]); |
|
}else{ |
|
list = [] |
|
} |
|
const imageUrls = []; |
|
const regex = /<img[^>]+src="([^"]+)"/g; |
|
let match; |
|
|
|
while ((match = regex.exec(res.description)) !== null) { |
|
imageUrls.push(match[1]); // match[1] 是 src 属性的值 |
|
} |
|
setImageUrls(imageUrls); |
|
setGroupList(list); |
|
}; |
|
|
|
const getSimilars = () => { |
|
productApi.getSimilarProducts(route.params.offer_id).then((res) => { |
|
setSimilars(res); |
|
setIsSimilarsFlag(true); |
|
}); |
|
}; |
|
useEffect(() => { |
|
getProductDetail(); |
|
getSimilars(); |
|
}, []); |
|
|
|
useEffect(() => { |
|
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { |
|
if (showBottomSheet) { |
|
setShowBottomSheet(false); |
|
return true; |
|
} |
|
return false; |
|
}); |
|
|
|
return () => backHandler.remove(); |
|
}, [showBottomSheet]); |
|
|
|
const handleImageLoad = (src: string, event: any) => { |
|
const { width: imageWidth, height: imageHeight } = event.nativeEvent.source; |
|
const aspectRatio = imageHeight / imageWidth; |
|
const calculatedHeight = width * aspectRatio; |
|
setImageHeights(prev => ({ |
|
...prev, |
|
[src]: calculatedHeight |
|
})); |
|
}; |
|
|
|
return ( |
|
<View style={{ flex: 1 }}> |
|
<ScrollView |
|
style={styles.scrollView} |
|
contentContainerStyle={styles.scrollViewContent} |
|
> |
|
<View style={styles.productDetailsContainer3}> |
|
<View style={styles.timeCardContainer}> |
|
<View style={styles.searchContainer1}> |
|
<TouchableOpacity onPress={() => { |
|
if (showBottomSheet) { |
|
setShowBottomSheet(false); |
|
} else { |
|
navigation.goBack(); |
|
} |
|
}}> |
|
<View style={styles.svgContainer}> |
|
<BackIcon size={fontSize(20)}/> |
|
</View> |
|
</TouchableOpacity> |
|
|
|
<View style={styles.searchContainer2}> |
|
<Text style={styles.searchTitleTextStyle}>Recherche</Text> |
|
<View style={styles.svgContainer1}> |
|
<CameraIcon color="#373737" size={fontSize(18)}/> |
|
{/* Replace with your SVG component or icon */} |
|
</View> |
|
</View> |
|
<View style={styles.searchContainer}> |
|
<View style={styles.svgContainer1}> |
|
{/* Replace with your SVG component or icon */} |
|
</View> |
|
<View style={styles.svgContainer2}> |
|
{/* Replace with your SVG component or icon */} |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.centerColumnWithPagination}> |
|
<View style={{ position: "relative" }}> |
|
<Carousel |
|
loop |
|
width={screenWidth} |
|
data={product?.product_image_urls as string[]} |
|
height={widthUtils(430, 430).height} |
|
onSnapToItem={(index) => setActiveIndex(index)} |
|
modeConfig={{ |
|
parallaxScrollingScale: 0.9, |
|
parallaxScrollingOffset: 50, |
|
}} |
|
renderItem={({ item }) => ( |
|
<View |
|
style={{ |
|
flex: 1, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
backgroundColor: "#f2f2f2", |
|
borderRadius: 10, |
|
}} |
|
> |
|
<Image |
|
source={{ uri: item }} |
|
style={{ width: "100%", height: "100%" }} |
|
/> |
|
</View> |
|
)} |
|
/> |
|
|
|
{/* 底部指示灯 - 固定在右下角 */} |
|
<View |
|
style={{ |
|
position: "absolute", |
|
bottom: 20, |
|
right: 20, |
|
backgroundColor: "gray", // 可选，看得清楚 |
|
borderRadius: 13, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}} |
|
> |
|
<Text style={styles.activeIndexText}> |
|
{activeIndex + 1}/{product?.product_image_urls.length} |
|
</Text> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.productDetailsContainer2}> |
|
<View style={styles.nightLampProductCard}> |
|
<Text style={styles.creativeHeading}>{product?.subject}</Text> |
|
<View style={styles.productInfoContainer1}> |
|
<View style={styles.productInfoContainer}> |
|
<View style={styles.salesInfoContainer}> |
|
<Text style={styles.highlightedText}>{product?.price}</Text> |
|
<Text style={styles.orangeHighlightedText}>FCFA</Text> |
|
<View style={styles.priceBox}> |
|
<Text style={styles.priceLabel}>3000FCFA</Text> |
|
<View style={styles.priceContainer}></View> |
|
</View> |
|
</View> |
|
|
|
<Text style={styles.salesCountLabel}> |
|
{product?.sold_out} ventes |
|
</Text> |
|
</View> |
|
|
|
<View style={styles.discountInfoContainer}> |
|
<Text style={styles.emphasizedTextWidget}>-5%</Text> |
|
<View style={styles.svgContainer4}> |
|
{/* Replace with your SVG component or icon */} |
|
</View> |
|
</View> |
|
<View style={styles.specialHighlightedSection}> |
|
<View style={styles.svgContainer5}> |
|
{/* Replace with your SVG component or icon */} |
|
</View> |
|
</View> |
|
<View style={styles.vipStatusContainer}> |
|
<View style={styles.vipBadgeContainer}> |
|
<Text style={styles.vipStatusNumeric}> |
|
<Text style={styles.emphasizedTextVip}>VIP</Text> |
|
<Text style={styles.emphasizedText}> 1</Text> |
|
</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.productDetailsContainer}> |
|
<View style={styles.productDetailsContainer1}> |
|
<View style={styles.blackThemeContainer}> |
|
{groupList.map((item, index) => |
|
item.has_image ? ( |
|
<View key={item.attribute_name}> |
|
<Text style={styles.uniqueTextBlock}> |
|
{item.attribute_name} : {item.attributes.find(item => item.has_color)?.value} |
|
</Text> |
|
<View style={styles.horizontalFlexContainer}> |
|
{getDisplayAttributes( |
|
item.attributes, |
|
item.attribute_name |
|
).map((attribute) => ( |
|
<TouchableOpacity |
|
key={attribute.value} |
|
onPress={() => |
|
handleColorSelect(attribute.value, index) |
|
} |
|
style={[ |
|
styles.colorImageContainer, |
|
attribute.has_color && |
|
styles.selectedColorImageContainer, |
|
]} |
|
> |
|
<Image |
|
source={{ uri: attribute.sku_image_url }} |
|
style={styles.imageContainer} |
|
/> |
|
</TouchableOpacity> |
|
))} |
|
|
|
{!expandedGroups[item.attribute_name] && |
|
item.attributes.length > 6 && ( |
|
<TouchableOpacity |
|
style={styles.expandButton} |
|
onPress={() => |
|
toggleExpand(item.attribute_name) |
|
} |
|
> |
|
<Text style={styles.expandButtonText}> |
|
更多 |
|
</Text> |
|
</TouchableOpacity> |
|
)} |
|
|
|
{expandedGroups[item.attribute_name] && ( |
|
<TouchableOpacity |
|
style={styles.expandButton} |
|
onPress={() => toggleExpand(item.attribute_name)} |
|
> |
|
<Text style={styles.expandButtonText}>收起</Text> |
|
</TouchableOpacity> |
|
)} |
|
</View> |
|
|
|
{ |
|
groupList.length > 1 && index === 0 && ( |
|
<TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}> |
|
<View style={styles.svgContainer6}> |
|
<DiagonalArrowIcon size={fontSize(18)}/> |
|
</View> |
|
</TouchableOpacity> |
|
) |
|
} |
|
{ |
|
groupList.length === 1 && index === 0 && ( |
|
<TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}> |
|
<View style={styles.svgContainer6}> |
|
<DiagonalArrowIcon size={fontSize(18)}/> |
|
</View> |
|
</TouchableOpacity> |
|
) |
|
} |
|
</View> |
|
) : ( |
|
<View key={item.attribute_name}> |
|
<Text style={styles.uniqueTextBlock}> |
|
{item.attribute_name} |
|
</Text> |
|
|
|
<View style={styles.horizontalFlexContainer}> |
|
{getDisplayAttributes( |
|
item.attributes, |
|
item.attribute_name |
|
).map((attribute) => ( |
|
<TouchableOpacity |
|
key={attribute.value} |
|
onPress={() => |
|
handleSizeSelect(attribute.value, index) |
|
} |
|
style={[ |
|
styles.sizeButton, |
|
attribute.has_color && |
|
styles.selectedSizeButton, |
|
]} |
|
> |
|
<Text |
|
style={[ |
|
styles.sizeButtonText, |
|
attribute.has_color && |
|
styles.selectedSizeText, |
|
]} |
|
> |
|
{attribute.value} |
|
</Text> |
|
</TouchableOpacity> |
|
))} |
|
|
|
{!expandedGroups[item.attribute_name] && |
|
item.attributes.length > 6 && ( |
|
<TouchableOpacity |
|
style={styles.expandButton} |
|
onPress={() => |
|
toggleExpand(item.attribute_name) |
|
} |
|
> |
|
<Text style={styles.expandButtonText}> |
|
更多 |
|
</Text> |
|
</TouchableOpacity> |
|
)} |
|
|
|
{expandedGroups[item.attribute_name] && ( |
|
<TouchableOpacity |
|
style={styles.expandButton} |
|
onPress={() => toggleExpand(item.attribute_name)} |
|
> |
|
<Text style={styles.expandButtonText}>收起</Text> |
|
</TouchableOpacity> |
|
)} |
|
</View> |
|
{ |
|
groupList.length === 1 && ( |
|
<TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}> |
|
<View style={styles.svgContainer6}> |
|
<DiagonalArrowIcon size={fontSize(18)}/> |
|
</View> |
|
</TouchableOpacity> |
|
) |
|
} |
|
|
|
{ |
|
groupList.length === 2 && index === 0 && ( |
|
<TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}> |
|
<View style={styles.svgContainer6}> |
|
<DiagonalArrowIcon size={fontSize(18)}/> |
|
</View> |
|
</TouchableOpacity> |
|
) |
|
} |
|
</View> |
|
) |
|
)} |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.storeRecommendationsContainer}> |
|
<View style={styles.storeInfoContainer}> |
|
<Text style={styles.storeSectionTitle}> |
|
More from this store |
|
</Text> |
|
<Text style={styles.storeMoreLink}>View All</Text> |
|
</View> |
|
|
|
<ScrollView |
|
horizontal |
|
showsHorizontalScrollIndicator={false} |
|
contentContainerStyle={styles.productGridContainer} |
|
> |
|
{isSimilarsFlag && |
|
similars?.map((item) => ( |
|
<View style={styles.productCard} key={item.offer_id}> |
|
<View style={styles.cardContainerWithPrice}> |
|
<Image |
|
source={{ uri: item.product_image_urls[0] }} |
|
style={styles.imageContainerCompact} |
|
/> |
|
</View> |
|
<View style={styles.priceContainerFlex}> |
|
<Text style={styles.highlightedText1}> |
|
{item.max_price} |
|
</Text> |
|
<Text style={styles.highlightedTextWithBorder}> |
|
FCFA |
|
</Text> |
|
</View> |
|
</View> |
|
))} |
|
</ScrollView> |
|
</View> |
|
<View style={{ width: "100%" }}> |
|
{imageUrls.map((src, index) => ( |
|
<View key={index} style={{ width: "100%" }}> |
|
<Image |
|
style={{ |
|
width: "100%", |
|
height: imageHeights[src] || 200, |
|
backgroundColor: "#f5f5f5", |
|
}} |
|
source={{ uri: src }} |
|
resizeMode="contain" |
|
onLoad={(event) => handleImageLoad(src, event)} |
|
/> |
|
</View> |
|
))} |
|
</View> |
|
</View> |
|
</View> |
|
</ScrollView> |
|
<View style={styles.fixedBottomBar}> |
|
<TouchableOpacity style={styles.chatNowButton}> |
|
<WhiteCircleIcon color="#fff" size={fontSize(20)} /> |
|
<Text style={styles.chatNowText}>chatNow</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={styles.addToCartButton} |
|
// onPress={() => setShowBottomSheet(true)} |
|
> |
|
<ShoppingCartIcon color="#fff" size={fontSize(20)} /> |
|
<Text style={styles.addToCartText}>addToCart</Text> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
{showBottomSheet && product && ( |
|
<View style={styles.bottomSheetOverlay}> |
|
<Animated.View |
|
style={[ |
|
styles.bottomSheet, |
|
]} |
|
> |
|
<ProductCard onClose={() => setShowBottomSheet(false)} product={product} groupList={groupList}></ProductCard> |
|
</Animated.View> |
|
</View> |
|
)} |
|
</View> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
scrollView: { |
|
flex: 1, |
|
backgroundColor: "white", |
|
}, |
|
scrollViewContent: { |
|
flexGrow: 1, |
|
}, |
|
productDetailsContainer3: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
backgroundColor: "white", |
|
}, |
|
timeCardContainer: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
paddingTop: 3, |
|
paddingBottom: 15, |
|
paddingLeft: 18, |
|
}, |
|
timeInfoContainer: { |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
paddingLeft: 38, |
|
}, |
|
timeDisplay: { |
|
width: 42, |
|
fontWeight: "600", |
|
fontSize: fontSize(17), |
|
color: "black", |
|
textAlign: "center", |
|
}, |
|
timeDisplayContainer: { |
|
width: widthUtils(54,154).width, |
|
height: widthUtils(54,54).height, |
|
}, |
|
searchContainer1: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: 2, |
|
}, |
|
svgContainer: { |
|
width: widthUtils(18,18).width, |
|
height: widthUtils(18,18).height, |
|
}, |
|
searchContainer2: { |
|
flex: 1, |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
height: widthUtils(50,50).height, |
|
paddingRight: 20, |
|
paddingLeft: 16, |
|
marginLeft: 4, |
|
backgroundColor: "#f4f4f4", |
|
borderWidth: 1, |
|
borderColor: "#eeeeee", |
|
borderRadius: 25, |
|
}, |
|
searchTitleTextStyle: { |
|
fontWeight: "600", |
|
fontSize: fontSize(16), |
|
color: "#747474", |
|
}, |
|
svgContainer1: { |
|
width: widthUtils(24,24).width, |
|
height: widthUtils(24,24).height, |
|
color: "#373737", |
|
}, |
|
searchContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginLeft: 9, |
|
}, |
|
svgContainer2: { |
|
width: widthUtils(24,24).width, |
|
height: widthUtils(24,24).height, |
|
marginLeft: 11, |
|
color: "#373737", |
|
}, |
|
productDetailsContainer2: { |
|
backgroundColor: "#f4f4f4", |
|
}, |
|
centerColumnWithPagination: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
width: "100%", |
|
backgroundColor: "#f4f4f4", |
|
}, |
|
centerContentWithPaginationButton: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
}, |
|
sidebarContainer: { |
|
paddingLeft: 350, |
|
}, |
|
centerIconContainer: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
width: widthUtils(40,40).width, |
|
height: widthUtils(40,40).height, |
|
backgroundColor: "#efefef", |
|
borderRadius: 25, |
|
}, |
|
centerBox1: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
width: widthUtils(60,60).width, |
|
height: widthUtils(60,60).height, |
|
marginTop: 125, |
|
backgroundColor: "rgba(92, 92, 92, 0.6)", |
|
borderWidth: 1, |
|
borderColor: "white", |
|
borderRadius: 35, |
|
}, |
|
svgContainer3: { |
|
width: widthUtils(20,20).width, |
|
height: widthUtils(20,20).height, |
|
color: "#ffffff", |
|
}, |
|
darkButton: { |
|
alignSelf: "flex-end", |
|
width: widthUtils(26,50).width, |
|
height: widthUtils(26,50).height, |
|
|
|
minWidth: 50, |
|
marginTop: 147, |
|
fontWeight: "600", |
|
fontSize: fontSize(12), |
|
color: "white", |
|
backgroundColor: "rgba(44, 44, 44, 0.7)", |
|
borderRadius: 13, |
|
}, |
|
nightLampProductCard: { |
|
width: "100%", |
|
padding: 16, |
|
paddingLeft: 19, |
|
paddingBottom: 23, |
|
backgroundColor: "white", |
|
}, |
|
creativeHeading: { |
|
width: "100%", |
|
fontWeight: "600", |
|
fontSize: fontSize(18), |
|
lineHeight: 22, |
|
color: "black", |
|
textAlign: "left", |
|
}, |
|
productInfoContainer1: { |
|
flexDirection: "row", |
|
alignItems: "flex-end", |
|
justifyContent: "flex-start", |
|
marginTop: 10.5, |
|
}, |
|
productInfoContainer: { |
|
alignSelf: "flex-start", |
|
}, |
|
salesInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
}, |
|
highlightedText: { |
|
fontWeight: "700", |
|
fontSize: fontSize(30), |
|
color: "#ff5100", |
|
}, |
|
orangeHighlightedText: { |
|
fontWeight: "700", |
|
fontSize: fontSize(14), |
|
marginLeft: 1.25, |
|
color: "#ff5100", |
|
lineHeight: 28, |
|
}, |
|
salesCountLabel: { |
|
marginTop: 6.75, |
|
fontWeight: "600", |
|
fontSize: fontSize(14), |
|
color: "#7c7c7c", |
|
}, |
|
priceBox: { |
|
paddingTop: 12, |
|
marginLeft: -0.2, |
|
}, |
|
priceLabel: { |
|
fontWeight: "600", |
|
fontSize: fontSize(12), |
|
color: "#9a9a9a", |
|
}, |
|
priceContainer: { |
|
width: "100%", |
|
marginTop: -4.75, |
|
borderTopWidth: 1, |
|
borderTopColor: "#9a9a9a", |
|
}, |
|
discountInfoContainer: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
alignSelf: "flex-start", |
|
justifyContent: "flex-start", |
|
paddingBottom: 16, |
|
marginLeft: 10.5, |
|
}, |
|
emphasizedTextWidget: { |
|
fontStyle: "italic", |
|
fontWeight: "900", |
|
fontSize: fontSize(11), |
|
color: "#4e2000", |
|
}, |
|
svgContainer4: { |
|
width: widthUtils(32,32).width, |
|
height: widthUtils(32,32).height, |
|
marginTop: -26, |
|
}, |
|
specialHighlightedSection: { |
|
paddingBottom: 20.5, |
|
marginLeft: -1.75, |
|
}, |
|
svgContainer5: { |
|
width: widthUtils(10,10).width, |
|
height: widthUtils(10,10).height, |
|
color: "#3b3b3b", |
|
}, |
|
vipStatusContainer: { |
|
paddingBottom: 21, |
|
marginLeft: -2.5, |
|
}, |
|
vipBadgeContainer: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-end", |
|
paddingRight: 10, |
|
paddingLeft: 10, |
|
backgroundColor: "#3b3b3b", |
|
borderRadius: 5, |
|
borderBottomLeftRadius: 0, |
|
}, |
|
vipStatusNumeric: { |
|
fontStyle: "italic", |
|
fontWeight: "900", |
|
fontSize: fontSize(14), |
|
}, |
|
emphasizedTextVip: { |
|
fontStyle: "italic", |
|
fontWeight: "900", |
|
fontSize: fontSize(14), |
|
}, |
|
emphasizedText: { |
|
fontStyle: "italic", |
|
fontWeight: "900", |
|
fontSize: fontSize(14), |
|
letterSpacing: -2, |
|
}, |
|
productDetailsContainer: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
padding: 10, |
|
paddingLeft: 19, |
|
paddingBottom: 13, |
|
marginTop: 8, |
|
backgroundColor: "white", |
|
}, |
|
productDetailsContainer1: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
}, |
|
blackThemeContainer: {}, |
|
uniqueTextBlock: { |
|
fontWeight: "600", |
|
fontSize: fontSize(16), |
|
lineHeight: 20, |
|
color: "black", |
|
}, |
|
horizontalFlexContainer: { |
|
width: "100%", |
|
flexDirection: "row", |
|
flexWrap: "wrap", |
|
gap: 10, |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: 8, |
|
}, |
|
imageContainer: { |
|
width: widthUtils(40,40).width, |
|
height: widthUtils(40,40).height, |
|
borderRadius: 5, |
|
}, |
|
centerBox: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
width: widthUtils(40,40).width, |
|
backgroundColor: "#e0e0e0", |
|
borderRadius: 5, |
|
}, |
|
imageContainerStyles: { |
|
height: widthUtils(40,40).height, |
|
}, |
|
svgContainer6: { |
|
alignSelf: "flex-end", |
|
width: widthUtils(18,18).width, |
|
height: widthUtils(18,18).height, |
|
}, |
|
sizeSelector: { |
|
marginTop: 0, |
|
}, |
|
numericHighlightedTextContainer: { |
|
alignItems: "center", |
|
justifyContent: "center", |
|
height: widthUtils(30, 30).height, |
|
paddingHorizontal: 11, |
|
fontWeight: "400", |
|
fontSize: fontSize(14), |
|
color: "#ff5100", |
|
backgroundColor: "#fff5f0", |
|
borderWidth: 1, |
|
borderColor: "#ff5100", |
|
borderRadius: 5, |
|
}, |
|
numberBadge: { |
|
alignItems: "center", |
|
justifyContent: "center", |
|
height: widthUtils(30, 40).height, |
|
paddingHorizontal: 11, |
|
fontWeight: "400", |
|
fontSize: fontSize(14), |
|
color: "#373737", |
|
backgroundColor: "#efefef", |
|
borderRadius: 5, |
|
lineHeight: widthUtils(40, 40).height, |
|
marginBottom: 10, |
|
}, |
|
sizeButton: { |
|
alignItems: "center", |
|
justifyContent: "center", |
|
height: widthUtils(30, 40).height, |
|
paddingHorizontal: 11, |
|
backgroundColor: "#efefef", |
|
borderRadius: 5, |
|
marginBottom: 10, |
|
}, |
|
sizeButtonText: { |
|
fontWeight: "400", |
|
fontSize: fontSize(14), |
|
color: "#373737", |
|
lineHeight: widthUtils(40, 40).height, |
|
}, |
|
selectedSizeButton: { |
|
backgroundColor: "#fff5f0", |
|
borderWidth: 1, |
|
borderColor: "#ff5217", |
|
}, |
|
selectedSizeText: { |
|
color: "#ff5217", |
|
fontWeight: "600", |
|
}, |
|
expandButton: { |
|
alignItems: "center", |
|
justifyContent: "center", |
|
height: widthUtils(30, 40).height, |
|
paddingHorizontal: 11, |
|
fontWeight: "600", |
|
fontSize: fontSize(14), |
|
color: "#ff5100", |
|
backgroundColor: "#fff5f0", |
|
borderRadius: 5, |
|
lineHeight: widthUtils(40, 40).height, |
|
marginBottom: 10, |
|
borderWidth: 1, |
|
borderColor: "#ff5100", |
|
}, |
|
expandButtonText: { |
|
color: "#ff5100", |
|
fontWeight: "600", |
|
}, |
|
storeRecommendationsContainer: { |
|
width: "100%", |
|
padding: 10, |
|
paddingLeft: 19, |
|
paddingBottom: 19, |
|
marginTop: 8, |
|
backgroundColor: "white", |
|
}, |
|
storeInfoContainer: { |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
width: "100%", |
|
}, |
|
storeSectionTitle: { |
|
fontWeight: "600", |
|
fontSize: fontSize(16), |
|
lineHeight: 20, |
|
color: "black", |
|
}, |
|
storeMoreLink: { |
|
fontWeight: "600", |
|
fontSize: fontSize(12), |
|
color: "#747474", |
|
}, |
|
productGridContainer: { |
|
flexDirection: "row", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
marginTop: 12, |
|
paddingRight: 10, |
|
}, |
|
productCard: { |
|
width: widthUtils(115,90).width, |
|
height: widthUtils(115,90).height, |
|
marginRight: 10, |
|
}, |
|
cardContainerWithPrice: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
width: "100%", |
|
backgroundColor: "#e0e0e0", |
|
borderRadius: 5, |
|
}, |
|
imageContainerCompact: { |
|
height: widthUtils(90,90).height, |
|
width: widthUtils(90,90).width, |
|
}, |
|
priceContainerFlex: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: 2, |
|
}, |
|
highlightedText1: { |
|
fontWeight: "700", |
|
fontSize: fontSize(16), |
|
lineHeight: 20, |
|
color: "#ff5100", |
|
}, |
|
highlightedTextWithBorder: { |
|
fontWeight: "700", |
|
fontSize: fontSize(10), |
|
marginLeft: 1.25, |
|
color: "#ff5100", |
|
}, |
|
productImageContainer: { |
|
width: "100%", |
|
height: widthUtils(90,90).height, |
|
borderRadius: 5, |
|
}, |
|
orangeHighlightTextStyle: { |
|
fontWeight: "700", |
|
fontSize: fontSize(16), |
|
lineHeight: widthUtils(20,20).height, |
|
marginTop: 2, |
|
color: "#ff5100", |
|
}, |
|
productDetailsContainer4: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
marginTop: 8, |
|
backgroundColor: "white", |
|
}, |
|
productDetailsContainer5: { |
|
padding: 10, |
|
paddingLeft: 19, |
|
paddingBottom: 183, |
|
}, |
|
productDetailsDescription: { |
|
width: "100%", |
|
marginTop: 8, |
|
fontWeight: "400", |
|
fontSize: fontSize(14), |
|
lineHeight: widthUtils(20,20).height, |
|
color: "#373737", |
|
textAlign: "left", |
|
}, |
|
imageContainer1: { |
|
marginTop: -165, |
|
marginRight: 20, |
|
marginLeft: 20, |
|
}, |
|
imageContainerStyles1: { |
|
width: widthUtils(229,390).width, |
|
height: widthUtils(229,390).height, |
|
}, |
|
flexCenterButtons: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
height: widthUtils(64,64).height, |
|
paddingRight: 20, |
|
paddingLeft: 20, |
|
marginTop: -64, |
|
backgroundColor: "white", |
|
}, |
|
gradientButton: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
gap: 4, |
|
width: widthUtils(50,160).width, |
|
height: widthUtils(50,160).height, |
|
minWidth: 160, |
|
fontWeight: "700", |
|
fontSize: fontSize(18), |
|
lineHeight: 22, |
|
color: "white", |
|
backgroundColor: |
|
"linear-gradient(90deg, rgba(0, 183, 68, 1) 0%, rgba(28, 207, 95, 1) 100%)", |
|
borderRadius: 30, |
|
}, |
|
svgContainer7: { |
|
width: widthUtils(24,24).width, |
|
height: widthUtils(24,24).height, |
|
color: "#ffffff", |
|
}, |
|
orangeGradientButton: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
gap: 7, |
|
width: widthUtils(50,220).width, |
|
height: widthUtils(50,220).height, |
|
minWidth: 220, |
|
marginLeft: 10, |
|
fontWeight: "700", |
|
fontSize: fontSize(18), |
|
lineHeight: 22, |
|
color: "white", |
|
backgroundColor: |
|
"linear-gradient(90deg, rgba(255, 128, 0, 1) 0%, rgba(255, 81, 0, 1) 100%)", |
|
borderRadius: 30, |
|
}, |
|
activeIndexText: { |
|
color: "white", |
|
fontSize: fontSize(12), |
|
width: widthUtils(26, 50).width, |
|
height: widthUtils(26, 50).height, |
|
textAlign: "center", |
|
lineHeight: widthUtils(26, 50).height + 2, |
|
}, |
|
colorImageContainer: { |
|
padding: 2, |
|
borderRadius: 5, |
|
}, |
|
selectedColorImageContainer: { |
|
backgroundColor: "#fff5f0", |
|
borderWidth: 1, |
|
borderColor: "#ff5217", |
|
}, |
|
fixedBottomBar: { |
|
position: "absolute", |
|
bottom: 10, |
|
left: 0, |
|
right: 0, |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
paddingHorizontal: 15, |
|
backgroundColor: "transparent", |
|
zIndex: 100, |
|
height: widthUtils(60,60).height, |
|
}, |
|
chatNowButton: { |
|
width: "40%", |
|
height: widthUtils(50, 50).height, |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
paddingVertical: 0, |
|
borderRadius: 30, |
|
backgroundColor: "#4CAF50", |
|
marginRight: 10, |
|
elevation: 4, |
|
shadowColor: "#000", |
|
shadowOffset: { width: 0, height: 2 }, |
|
shadowOpacity: 0.2, |
|
shadowRadius: 3, |
|
}, |
|
chatNowText: { |
|
fontSize: fontSize(18), |
|
color: "#fff", |
|
fontWeight: "bold", |
|
marginLeft: 8, |
|
}, |
|
addToCartButton: { |
|
width: "60%", |
|
height: widthUtils(50,50).height, |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
paddingVertical: 0, |
|
borderRadius: 30, |
|
backgroundColor: "#FF5722", |
|
marginLeft: 10, |
|
elevation: 4, |
|
shadowColor: "#000", |
|
shadowOffset: { width: 0, height: 2 }, |
|
shadowOpacity: 0.2, |
|
shadowRadius: 3, |
|
}, |
|
addToCartText: { |
|
fontSize: fontSize(18), |
|
color: "#fff", |
|
fontWeight: "bold", |
|
marginLeft: 8, |
|
}, |
|
modalContainer: { |
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
|
justifyContent: 'flex-end', |
|
}, |
|
modalContent: { |
|
height: '90%', |
|
backgroundColor: 'white', |
|
borderTopLeftRadius: 20, |
|
borderTopRightRadius: 20, |
|
padding: 20, |
|
}, |
|
closeButton: { |
|
alignSelf: 'flex-end', |
|
padding: 10, |
|
}, |
|
closeButtonText: { |
|
fontSize: fontSize(16), |
|
color: '#333', |
|
}, |
|
bottomSheetOverlay: { |
|
position: "absolute", |
|
top: 0, |
|
left: 0, |
|
right: 0, |
|
bottom: 0, |
|
justifyContent: "flex-end", |
|
zIndex: 200, |
|
}, |
|
bottomSheet: { |
|
backgroundColor: "#fff", |
|
borderTopLeftRadius: 20, |
|
borderTopRightRadius: 20, |
|
height: "85%", |
|
zIndex: 1, |
|
}, |
|
});
|
|
|