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.
1279 lines
41 KiB
1279 lines
41 KiB
import React, { useEffect, useCallback, useState } from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
StyleSheet, |
|
TouchableOpacity, |
|
ScrollView, |
|
Modal, |
|
InteractionManager, |
|
Alert, |
|
TextInput, |
|
ImageBackground, |
|
} from "react-native"; |
|
import widthUtils from "../utils/widthUtils"; |
|
import fontSize from "../utils/fontsizeUtils"; |
|
import CloseIcon from "../components/CloseIcon"; |
|
import XIconBottom from "../components/XIconBottom"; |
|
import XIconTop from "../components/XIconTop"; |
|
import useBurialPointStore from "../store/burialPoint"; |
|
import { |
|
ProductDetailParams, |
|
ProductGroupList, |
|
SkuAttribute, |
|
Sku, |
|
} from "../services/api/productApi"; |
|
import { cartApi } from "../services/api/cart"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
import ImageView from "react-native-image-viewing"; |
|
import useProductCartStore from "../store/productCart"; |
|
import useUserStore from "../store/user"; |
|
interface ProductCardProps { |
|
onClose: () => void; |
|
product: ProductDetailParams; |
|
groupList: ProductGroupList[]; |
|
} |
|
|
|
const ProductCard: React.FC<ProductCardProps> = ({ |
|
onClose, |
|
product: localProduct, |
|
groupList: localGroupList, |
|
}: { |
|
onClose: () => void; |
|
product: ProductDetailParams; |
|
groupList: ProductGroupList[]; |
|
}) => { |
|
const navigation = useNavigation<NativeStackNavigationProp<any>>(); |
|
const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false); |
|
const [images, setImages] = useState<string[]>([]); |
|
const [currentImageIndex, setCurrentImageIndex] = useState(0); |
|
const [imageViewerVisible, setImageViewerVisible] = useState(false); |
|
const { |
|
user: { user_id, vip_level, currency }, |
|
} = useUserStore(); |
|
const { logAddToCart } = useBurialPointStore(); |
|
const { |
|
product, |
|
groupList, |
|
imgTitle, |
|
price, |
|
hasImg, |
|
noImgList, |
|
sizeTitle, |
|
size, |
|
flag, |
|
totalPrice, |
|
selectedSize, |
|
setProduct, |
|
setGroupList, |
|
setImgTitle, |
|
setPrice, |
|
setHasImg, |
|
setNoImgList, |
|
setSizeTitle, |
|
setSize, |
|
setFlag, |
|
setTotalPrice, |
|
setSelectedSize, |
|
processProductData, |
|
handleSizeSelect, |
|
handleNoImgSizeSelect, |
|
handleColorSelect, |
|
} = useProductCartStore(); |
|
|
|
useEffect(() => { |
|
setProduct(localProduct); |
|
setGroupList(localGroupList); |
|
processProductData(); |
|
}, [localProduct, localGroupList]); |
|
|
|
// 加入购物车 |
|
const addCartHandel = () => { |
|
if (!user_id) { |
|
Alert.alert("添加失败", "请先登录"); |
|
return; |
|
} |
|
if (totalPrice === 0) { |
|
Alert.alert("添加失败", "请选择商品"); |
|
return; |
|
} |
|
if (selectedSize < product.min_order_quantity) { |
|
Alert.alert("添加失败", "小于最小购买数量"); |
|
return; |
|
} |
|
if (groupList.length > 1) { |
|
const selectedSku = |
|
hasImg?.attributes?.filter((item) => (item.size ?? 0) > 0) || []; |
|
const skus: { sku_id: number; quantity: number }[] = []; |
|
selectedSku.forEach((item) => { |
|
item.list?.forEach((item) => { |
|
if ((item.size ?? 0) > 0) { |
|
skus.push({ |
|
sku_id: item.sku_id, |
|
quantity: item.size as number, |
|
}); |
|
} |
|
}); |
|
}); |
|
const data = { |
|
offer_id: product.offer_id, |
|
skus, |
|
}; |
|
|
|
cartApi(data) |
|
.then((res) => { |
|
const log = |
|
selectedSku[0].list?.filter((item) => (item.size ?? 0) > 0) || []; |
|
log.forEach((item) => { |
|
const logData = { |
|
offer_id: product?.offer_id || 0, |
|
category_id: product?.category_id || 0, |
|
price: item.offer_price || price || 0, |
|
all_price: totalPrice || 0, |
|
currency: currency || "", |
|
sku_id: item?.sku_id || 0, |
|
quantity: (item?.size as number) || 0, |
|
product_name: product?.subject || "", |
|
timestamp: new Date().toISOString(), |
|
sku_img: selectedSku[0].sku_image_url || "", |
|
all_quantity: selectedSize || 0, |
|
}; |
|
logAddToCart( |
|
logData, |
|
navigation.getState().routes[navigation.getState().index - 1] |
|
?.name as string |
|
); |
|
}); |
|
}) |
|
.catch((err) => { |
|
Alert.alert("添加失败", "请稍后再试"); |
|
}); |
|
} else if (groupList.length === 1) { |
|
const selectedSku = |
|
noImgList.filter((item) => (item.size ?? 0) > 0) || []; |
|
const skus: { sku_id: number; quantity: number }[] = []; |
|
selectedSku.forEach((item) => { |
|
skus.push({ |
|
sku_id: item.sku_id, |
|
quantity: item.size as number, |
|
}); |
|
}); |
|
const data = { |
|
offer_id: product.offer_id, |
|
skus, |
|
}; |
|
cartApi(data) |
|
.then((res) => { |
|
console.log(selectedSku); |
|
|
|
selectedSku.forEach((item) => { |
|
console.log(item); |
|
|
|
const logData = { |
|
offer_id: product?.offer_id || 0, |
|
category_id: product?.category_id || 0, |
|
price: item.offer_price || price || 0, |
|
all_price: totalPrice || 0, |
|
currency: currency || "", |
|
sku_id: item?.sku_id || 0, |
|
quantity: (item?.size as number) || 0, |
|
product_name: product?.subject || "", |
|
timestamp: new Date().toISOString(), |
|
sku_img: selectedSku[0].sku_image_url || "", |
|
all_quantity: selectedSize || 0, |
|
}; |
|
|
|
console.log(logData); |
|
|
|
// logAddToCart(logData,navigation.getState().routes[navigation.getState().index - 1]?.name as string) |
|
}); |
|
}) |
|
.catch((err) => { |
|
Alert.alert("添加失败", "请稍后再试"); |
|
}); |
|
} |
|
setDeleteModalVisible(true); |
|
}; |
|
|
|
const cancelDelete = () => { |
|
// 关闭确认对话框 |
|
setDeleteModalVisible(false); |
|
onClose(); |
|
}; |
|
|
|
const handleNavigateToCart = useCallback(() => { |
|
setDeleteModalVisible(false); |
|
InteractionManager.runAfterInteractions(() => { |
|
navigation.navigate("MainTabs", { screen: "Cart" }); |
|
}); |
|
}, [navigation]); |
|
|
|
// 图片预览 |
|
const handleImagePress = (imageUrl: string) => { |
|
setImages([imageUrl]); |
|
setCurrentImageIndex(0); |
|
setImageViewerVisible(true); |
|
}; |
|
|
|
return ( |
|
<View style={styles.wrapper}> |
|
<ScrollView style={{ flex: 1 }}> |
|
<View style={styles.container}> |
|
<View style={styles.productInfo}> |
|
<View style={styles.productBigImgBox}> |
|
<Image source={{ uri: imgTitle }} style={styles.productBigImg} /> |
|
<View style={styles.cornerView}> |
|
<View style={styles.topRightIcon}> |
|
<XIconTop size={6} /> |
|
</View> |
|
<View style={styles.bottomLeftIcon}> |
|
<XIconBottom size={6} /> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.productInfoBox}> |
|
<View style={styles.priceInfo}> |
|
<View style={styles.priceInfoBox}> |
|
<View style={styles.priceInfoBoxVip}> |
|
{vip_level > 0 && ( |
|
<> |
|
<View style={styles.priceInfoOffer}> |
|
<Image |
|
source={require("../../assets/img/折扣VIP1 (1).png")} |
|
style={styles.priceInfoOfferImg} |
|
/> |
|
<View style={styles.discountTextContainer}> |
|
<Text style={styles.discountText}>-5%</Text> |
|
</View> |
|
</View> |
|
<View style={styles.priceInfoVip}> |
|
<ImageBackground |
|
source={require("../../assets/img/vip1.png")} |
|
style={styles.priceInfoVipImg} |
|
> |
|
<Text style={styles.vipStatusNumeric}> |
|
VIP {vip_level} |
|
</Text> |
|
</ImageBackground> |
|
</View> |
|
</> |
|
)} |
|
</View> |
|
<View style={styles.price}> |
|
<Text style={styles.priceInfoText}>{price}</Text> |
|
<Text style={styles.priceInfoTextCon}>{currency}</Text> |
|
</View> |
|
</View> |
|
<View style={styles.priceInfoClose}> |
|
<TouchableOpacity onPress={() => onClose()}> |
|
<CloseIcon size={fontSize(20)} /> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
|
|
{/* <ScrollView |
|
horizontal |
|
showsHorizontalScrollIndicator={false} |
|
showsVerticalScrollIndicator={false} |
|
style={styles.priceInfoList} |
|
> |
|
{product && |
|
product.sale_info && |
|
product.sale_info.price_range_list && |
|
product.sale_info.price_range_list.length > 0 |
|
? product.sale_info.price_range_list.map((item, index) => { |
|
return ( |
|
<View style={styles.priceList} key={index}> |
|
<View style={styles.priceListBox}> |
|
<Text style={styles.priceListBoxText}> |
|
{item.price} |
|
</Text> |
|
<Text style={styles.priceListBoxTextCon}>{currency}</Text> |
|
</View> |
|
<View style={styles.priceListBoxPie}> |
|
<Text style={styles.priceListBoxListText}> |
|
>= {item.min_quantity} <Text>硬币</Text> |
|
</Text> |
|
</View> |
|
</View> |
|
); |
|
}) |
|
: null} |
|
</ScrollView> */} |
|
</View> |
|
</View> |
|
{/* 图片和文字 */} |
|
{hasImg && groupList.length > 1 && hasImg.has_image && ( |
|
<View style={styles.productBox}> |
|
{hasImg && ( |
|
<> |
|
<View style={styles.productTit}> |
|
<Text style={styles.productTitText}> |
|
{hasImg.attribute_name} :{" "} |
|
</Text> |
|
<Text style={styles.productTitText}>{size}</Text> |
|
</View> |
|
|
|
<ScrollView |
|
style={styles.productBoxImgList} |
|
horizontal |
|
showsHorizontalScrollIndicator={false} |
|
showsVerticalScrollIndicator={false} |
|
> |
|
{hasImg?.attributes?.map((item, index) => { |
|
return ( |
|
<TouchableOpacity |
|
style={[ |
|
styles.productBoxImgListBox, |
|
item?.has_color && |
|
styles.productBoxImgListBoxActive, |
|
]} |
|
key={index} |
|
onPress={() => |
|
handleColorSelect( |
|
item?.value || "", |
|
index, |
|
item?.sku_image_url || "" |
|
) |
|
} |
|
> |
|
<Image |
|
source={{ uri: item?.sku_image_url || "" }} |
|
style={styles.productBoxImgListBoxImg} |
|
/> |
|
{(item?.size ?? 0) > 0 && ( |
|
<View style={styles.fixedCornerView}> |
|
<Text style={styles.fixedCornerViewText}> |
|
x{item.size} |
|
</Text> |
|
</View> |
|
)} |
|
</TouchableOpacity> |
|
); |
|
})} |
|
</ScrollView> |
|
</> |
|
)} |
|
<View style={styles.productTit}> |
|
<Text style={styles.productTitText}>{sizeTitle}</Text> |
|
</View> |
|
<View style={{ flex: 1 }}> |
|
<ScrollView |
|
style={styles.sizePrice} |
|
showsHorizontalScrollIndicator={false} |
|
showsVerticalScrollIndicator={false} |
|
> |
|
<View style={styles.sizePriceBox}> |
|
{hasImg && |
|
hasImg.attributes |
|
?.find((item) => item?.has_color) |
|
?.list.map((list, index1) => ( |
|
<View style={styles.sizePriceBoxItems} key={index1}> |
|
<View style={styles.sizePriceBoxItem}> |
|
<View style={styles.sizePriceBoxItemTextBox}> |
|
{(list?.size ?? 0) > 0 && ( |
|
<Text style={styles.selectedNumText}> |
|
x{list?.size} |
|
</Text> |
|
)} |
|
<Text style={styles.priceText}> |
|
{list?.offer_price || price || 0} |
|
</Text> |
|
<Text |
|
style={styles.sizePriceBoxItemText} |
|
numberOfLines={1} |
|
ellipsizeMode="tail" |
|
> |
|
{list.attributes?.[0]?.value} |
|
</Text> |
|
</View> |
|
<Text style={styles.amountText}> |
|
库存 {list?.amount_on_sale ?? 0} |
|
</Text> |
|
</View> |
|
<View style={styles.sizePriceBoxStepForward}> |
|
<TouchableOpacity |
|
style={styles.sizePriceBoxStepForwardButton} |
|
onPress={() => |
|
handleSizeSelect( |
|
list?.attributes?.[0]?.value, |
|
"-", |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
> |
|
<Text>-</Text> |
|
</TouchableOpacity> |
|
<TextInput |
|
style={styles.sizePriceBoxStepForwardInput} |
|
value={list?.size?.toString() ?? "0"} |
|
keyboardType="numeric" |
|
onChangeText={(text) => |
|
handleSizeSelect( |
|
list?.attributes?.[0]?.value, |
|
text, |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
/> |
|
<TouchableOpacity |
|
style={styles.sizePriceBoxStepForwardButton} |
|
onPress={() => |
|
handleSizeSelect( |
|
list?.attributes?.[0]?.value, |
|
"+", |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
> |
|
<Text>+</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
))} |
|
</View> |
|
</ScrollView> |
|
</View> |
|
</View> |
|
)} |
|
{/* 两个都是文字 */} |
|
{hasImg && groupList.length > 1 && !hasImg.has_image && ( |
|
<View style={styles.productBox}> |
|
<View style={styles.productTit}> |
|
<Text style={styles.productTitText}> |
|
{hasImg?.attribute_name || ""} |
|
</Text> |
|
</View> |
|
|
|
{hasImg.attributes?.map((item, index) => { |
|
return ( |
|
<TouchableOpacity |
|
style={[ |
|
styles.noImgBoxs, |
|
item?.has_color && styles.productBoxImgListBoxActive, |
|
]} |
|
key={index} |
|
onPress={() => { |
|
handleColorSelect( |
|
item?.value || "", |
|
index, |
|
item?.sku_image_url || "" |
|
); |
|
}} |
|
> |
|
{(item?.size ?? 0) > 0 && ( |
|
<Text style={styles.selectedNumText}>x{item?.size}</Text> |
|
)} |
|
<Text style={styles.noImgBoxsText}> |
|
{item?.value || ""} |
|
</Text> |
|
</TouchableOpacity> |
|
); |
|
})} |
|
|
|
<View style={styles.productBox}> |
|
<Text style={styles.productTitText}>{sizeTitle}</Text> |
|
</View> |
|
<View style={{ flex: 1 }}> |
|
<ScrollView |
|
style={[styles.sizePrice]} |
|
showsHorizontalScrollIndicator={false} |
|
showsVerticalScrollIndicator={false} |
|
> |
|
<View style={styles.sizePriceBox}> |
|
{hasImg && |
|
hasImg.attributes |
|
?.find((item) => item?.has_color) |
|
?.list.map((list, index1) => ( |
|
<View style={styles.sizePriceBoxItems} key={index1}> |
|
<View style={styles.sizePriceBoxItem}> |
|
<View style={styles.sizePriceBoxItemTextBox}> |
|
{(list?.size ?? 0) > 0 && ( |
|
<Text style={styles.selectedNumText}> |
|
x{list?.size} |
|
</Text> |
|
)} |
|
<Text style={styles.priceText}> |
|
{list?.offer_price || price || 0} |
|
</Text> |
|
<Text |
|
style={styles.sizePriceBoxItemText} |
|
numberOfLines={1} |
|
ellipsizeMode="tail" |
|
> |
|
{list.attributes?.[0]?.value} |
|
</Text> |
|
</View> |
|
<Text style={styles.amountText}> |
|
库存 {list?.amount_on_sale ?? 0} |
|
</Text> |
|
</View> |
|
<View style={styles.sizePriceBoxStepForward}> |
|
<TouchableOpacity |
|
style={styles.sizePriceBoxStepForwardButton} |
|
onPress={() => |
|
handleSizeSelect( |
|
list?.attributes?.[0]?.value, |
|
"-", |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
> |
|
<Text>-</Text> |
|
</TouchableOpacity> |
|
<TextInput |
|
style={styles.sizePriceBoxStepForwardInput} |
|
value={list?.size?.toString() ?? "0"} |
|
keyboardType="numeric" |
|
onChangeText={(text) => |
|
handleSizeSelect( |
|
list?.attributes?.[0]?.value, |
|
text, |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
/> |
|
<TouchableOpacity |
|
style={styles.sizePriceBoxStepForwardButton} |
|
onPress={() => |
|
handleSizeSelect( |
|
list?.attributes?.[0]?.value, |
|
"+", |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
> |
|
<Text>+</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
))} |
|
</View> |
|
</ScrollView> |
|
</View> |
|
</View> |
|
)} |
|
{/* 只有一个文字 */} |
|
{noImgList && groupList.length === 1 && !flag && ( |
|
<View style={styles.productBox}> |
|
<View style={styles.productTit}> |
|
<Text style={styles.productTitText}>{sizeTitle}</Text> |
|
</View> |
|
<View style={{ flex: 1 }}> |
|
<ScrollView |
|
style={[styles.sizePrice]} |
|
showsVerticalScrollIndicator={false} |
|
> |
|
{noImgList && |
|
noImgList?.map((list, index1) => ( |
|
<View style={styles.sizePriceBoxItems} key={index1}> |
|
<View style={styles.sizePriceBoxItem}> |
|
<View style={styles.sizePriceBoxItemTextBox}> |
|
{(list?.size ?? 0) > 0 && ( |
|
<Text style={styles.selectedNumText}> |
|
x{list?.size} |
|
</Text> |
|
)} |
|
<Text style={styles.priceText}> |
|
{list?.offer_price || price || 0} |
|
</Text> |
|
<Text |
|
style={styles.sizePriceBoxItemText} |
|
numberOfLines={1} |
|
ellipsizeMode="tail" |
|
> |
|
{list.attributes?.[0]?.value} |
|
</Text> |
|
</View> |
|
<Text style={styles.amountText}> |
|
库存 {list?.amount_on_sale ?? 0} |
|
</Text> |
|
</View> |
|
<View style={styles.sizePriceBoxStepForward}> |
|
<TouchableOpacity |
|
style={styles.sizePriceBoxStepForwardButton} |
|
onPress={() => |
|
handleNoImgSizeSelect( |
|
list?.attributes?.[0]?.value, |
|
"-", |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
> |
|
<Text>-</Text> |
|
</TouchableOpacity> |
|
<TextInput |
|
style={styles.sizePriceBoxStepForwardInput} |
|
value={list?.size?.toString() ?? "0"} |
|
keyboardType="numeric" |
|
onChangeText={(text) => |
|
handleNoImgSizeSelect( |
|
list?.attributes?.[0]?.value, |
|
text, |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
/> |
|
<TouchableOpacity |
|
style={styles.sizePriceBoxStepForwardButton} |
|
onPress={() => |
|
handleNoImgSizeSelect( |
|
list?.attributes?.[0]?.value, |
|
"+", |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
> |
|
<Text>+</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
))} |
|
</ScrollView> |
|
</View> |
|
</View> |
|
)} |
|
|
|
{/* 只有图片 */} |
|
{noImgList && groupList.length === 1 && flag && ( |
|
<View style={styles.productBox}> |
|
<View style={styles.productTit}> |
|
<Text style={styles.productTitText}>{sizeTitle}</Text> |
|
</View> |
|
<View style={{ flex: 1 }}> |
|
<ScrollView |
|
style={[styles.sizePrice]} |
|
showsHorizontalScrollIndicator={false} |
|
showsVerticalScrollIndicator={false} |
|
> |
|
{noImgList.map((list, index1) => ( |
|
<View style={styles.allImageBox} key={index1}> |
|
<View style={styles.allImageBoxImg}> |
|
<Image |
|
source={{ uri: list.attributes?.[0]?.sku_image_url }} |
|
style={styles.allImageBoxImgImg} |
|
/> |
|
</View> |
|
|
|
<View style={styles.allImageBoxList}> |
|
<View style={styles.allImageBoxListBox}> |
|
<View |
|
style={{ |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}} |
|
> |
|
<Text |
|
style={{ |
|
fontSize: fontSize(16), |
|
fontWeight: "700", |
|
fontFamily: "Segoe UI", |
|
color: "red", |
|
marginRight: 5, |
|
}} |
|
> |
|
{list?.offer_price || price || 0} |
|
</Text> |
|
<Text |
|
style={styles.allImageBoxListBoxText} |
|
numberOfLines={1} |
|
ellipsizeMode="tail" |
|
> |
|
{list.attributes?.[0]?.value} |
|
</Text> |
|
</View> |
|
|
|
<Text style={styles.amountText}> |
|
库存 {list?.amount_on_sale ?? 0} |
|
</Text> |
|
</View> |
|
<View style={styles.allImageBoxListStop}> |
|
<TouchableOpacity |
|
style={styles.sizePriceBoxStepForwardButton} |
|
onPress={() => |
|
handleNoImgSizeSelect( |
|
list.attributes?.[0]?.value, |
|
"-", |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
> |
|
<Text>-</Text> |
|
</TouchableOpacity> |
|
<TextInput |
|
style={styles.sizePriceBoxStepForwardInput} |
|
keyboardType="numeric" |
|
value={list?.size?.toString() ?? "0"} |
|
onChangeText={(text) => |
|
handleNoImgSizeSelect( |
|
list.attributes?.[0]?.value, |
|
text, |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
/> |
|
<TouchableOpacity |
|
style={styles.sizePriceBoxStepForwardButton} |
|
onPress={() => |
|
handleNoImgSizeSelect( |
|
list.attributes?.[0]?.value, |
|
"+", |
|
index1, |
|
list?.amount_on_sale ?? 0 |
|
) |
|
} |
|
> |
|
<Text>+</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
))} |
|
</ScrollView> |
|
</View> |
|
</View> |
|
)} |
|
</View> |
|
</ScrollView> |
|
|
|
<View style={styles.fixedBottomView}> |
|
<View style={styles.fixedBottomViewBox}> |
|
<View style={styles.fixedBottomViewBoxLeft}> |
|
<Text style={styles.fixedBottomViewBoxLeftText}>总数量:</Text> |
|
<Text style={styles.fixedBottomViewBoxPriceText}> |
|
{selectedSize} |
|
</Text> |
|
</View> |
|
<View style={styles.fixedBottomViewBoxRight}> |
|
<Text style={styles.fixedBottomViewBoxRightText}>总价:</Text> |
|
<Text style={styles.fixedBottomViewBoxPriceText}> |
|
{totalPrice.toFixed(2)} {currency} |
|
</Text> |
|
</View> |
|
</View> |
|
|
|
<TouchableOpacity |
|
style={styles.fixedBottomViewButton} |
|
onPress={addCartHandel} |
|
> |
|
<Text style={styles.fixedBottomViewButtonText}>加入购物车</Text> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
<Modal |
|
visible={deleteModalVisible} |
|
transparent |
|
animationType="fade" |
|
onRequestClose={cancelDelete} |
|
> |
|
<View style={styles.overlay}> |
|
<View style={styles.popup}> |
|
{/* <Image |
|
source={require("../assets/image_5f59afb0.png")} // 替换成你实际的路径 |
|
style={styles.image} |
|
/> */} |
|
<Text style={styles.promptText}>Supprimer l'article ?</Text> |
|
<View style={styles.buttonContainer}> |
|
<TouchableOpacity |
|
style={styles.cancelButton1} |
|
onPress={cancelDelete} |
|
> |
|
<Text style={styles.cancelText}>Non</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={styles.confirmButton} |
|
onPress={handleNavigateToCart} |
|
> |
|
<Text style={styles.confirmText}>Voir le panier</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
</Modal> |
|
</View> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
wrapper: { |
|
flex: 1, |
|
}, |
|
container: { |
|
flex: 1, |
|
padding: 19, |
|
paddingBottom: widthUtils(118, 118).height, |
|
}, |
|
productInfo: { |
|
flexDirection: "row", |
|
height: widthUtils(100, 100).height, |
|
}, |
|
productBigImgBox: { |
|
width: widthUtils(100, 100).width, |
|
height: widthUtils(100, 81000).height, |
|
borderRadius: 10, |
|
}, |
|
productBigImg: { |
|
width: "100%", |
|
height: "100%", |
|
borderRadius: 10, |
|
}, |
|
productInfoBox: { |
|
flex: 1, |
|
paddingLeft: 10, |
|
}, |
|
priceInfo: { |
|
width: "100%", |
|
height: "40%", |
|
flexDirection: "row", |
|
justifyContent: "space-between", |
|
}, |
|
priceInfoBox: { |
|
width: "90%", |
|
height: "100%", |
|
gap: 18, |
|
justifyContent: "space-between", |
|
}, |
|
priceInfoBoxVip: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
gap: 10, |
|
}, |
|
price: { |
|
flexDirection: "row", |
|
|
|
}, |
|
priceInfoText: { |
|
fontWeight: "700", |
|
fontSize: fontSize(30), |
|
fontFamily: "Segoe UI", |
|
color: "#ff5100", |
|
}, |
|
priceListBoxText: { |
|
fontWeight: "700", |
|
fontSize: fontSize(20), |
|
fontFamily: "Segoe UI", |
|
}, |
|
priceListBoxTextCon: { |
|
fontWeight: "700", |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
lineHeight: fontSize(20), |
|
}, |
|
priceListBoxListText: { |
|
fontFamily: "Segoe UI", |
|
}, |
|
priceInfoTextCon: { |
|
fontWeight: "700", |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
color: "#ff5100", |
|
lineHeight: fontSize(30), |
|
}, |
|
priceInfoOffer: { |
|
width: widthUtils(28, 28).width, |
|
height: widthUtils(28, 28).height, |
|
position: "relative", |
|
}, |
|
priceInfoOfferImg: { |
|
width: "100%", |
|
height: "100%", |
|
}, |
|
discountTextContainer: { |
|
position: "absolute", |
|
top: 0, |
|
left: 0, |
|
right: 0, |
|
bottom: 0, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
discountText: { |
|
color: "#512003", |
|
fontSize: fontSize(12), |
|
fontWeight: "600", |
|
fontStyle: "italic", |
|
}, |
|
priceInfoVip: { |
|
width: widthUtils(21, 63).width, |
|
height: widthUtils(21, 63).height, |
|
}, |
|
priceInfoVipImg: { |
|
width: "100%", |
|
height: "100%", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
vipStatusNumeric: { |
|
fontStyle: "italic", |
|
fontWeight: "900", |
|
fontSize: fontSize(18), |
|
color: "#f1c355", |
|
textAlign: "center", |
|
marginLeft: 2, |
|
}, |
|
priceInfoClose: { |
|
width: "10%", |
|
alignItems: "flex-end", |
|
}, |
|
priceInfoList: { |
|
width: "100%", |
|
padding: 5, |
|
backgroundColor: "#f3f4f8", |
|
borderRadius: 10, |
|
height: "60%", |
|
}, |
|
priceList: { |
|
width: widthUtils(100, 100).width, |
|
height: "100%", |
|
borderRadius: 10, |
|
marginRight: 5, |
|
justifyContent: "flex-start", |
|
alignItems: "flex-start", |
|
paddingLeft: 10, |
|
}, |
|
priceListBox: { |
|
flexDirection: "row", |
|
justifyContent: "center", |
|
}, |
|
priceListBoxPie: { |
|
alignItems: "flex-start", |
|
}, |
|
productBox: { |
|
marginTop: 10, |
|
flex: 1, |
|
display: "flex", |
|
flexDirection: "column", |
|
}, |
|
productTit: { |
|
flexDirection: "row", |
|
width: "100%", |
|
}, |
|
productTitText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "700", |
|
fontFamily: "Segoe UI", |
|
color: "#000", |
|
}, |
|
productBoxImgList: { |
|
width: "100%", |
|
paddingTop: 10, |
|
flexGrow: 0, |
|
flexDirection: "row", |
|
flexWrap: "wrap", |
|
}, |
|
productBoxImgListBox: { |
|
width: widthUtils(90, 90).width, |
|
height: widthUtils(90, 90).height, |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 10, |
|
marginRight: 10, |
|
marginBottom: 10, |
|
position: "relative", |
|
}, |
|
productBoxImgListBoxActive: { |
|
borderWidth: 1, |
|
borderColor: "#ff5100", |
|
}, |
|
noImgBoxsText: { |
|
width: "100%", |
|
}, |
|
productBoxImgListBoxImg: { |
|
width: "100%", |
|
height: "100%", |
|
borderRadius: 10, |
|
}, |
|
sizePrice: { |
|
flex: 1, |
|
width: "100%", |
|
}, |
|
sizePriceBox: { |
|
width: "100%", |
|
paddingBottom: 10, |
|
}, |
|
sizePriceBoxItem: { |
|
width: "70%", |
|
}, |
|
sizePriceBoxItemTextBox: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
selectedNumText: { |
|
width: widthUtils(16, 30).width, |
|
height: widthUtils(16, 30).height, |
|
backgroundColor: "#ff5217", |
|
borderRadius: 5, |
|
color: "white", |
|
textAlign: "center", |
|
fontSize: fontSize(12), |
|
fontWeight: "600", |
|
fontFamily: "Segoe UI", |
|
marginRight: 5, |
|
lineHeight: 18, |
|
}, |
|
sizePriceBoxItems: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
marginBottom: 10, |
|
width: "100%", |
|
}, |
|
sizePriceBoxItemText: { |
|
fontSize: fontSize(18), |
|
color: "#000", |
|
}, |
|
priceText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "700", |
|
fontFamily: "Segoe UI", |
|
color: "red", |
|
marginRight: 5, |
|
}, |
|
amountText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "600", |
|
fontFamily: "Segoe UI", |
|
color: "#bdbdbd", |
|
}, |
|
sizePriceBoxStepForward: { |
|
width: "30%", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-end", |
|
}, |
|
sizePriceBoxStepForwardButton: { |
|
width: widthUtils(40, 30).width, |
|
height: widthUtils(40, 30).height, |
|
backgroundColor: "#f3f4f8", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
sizePriceBoxStepForwardInput: { |
|
width: widthUtils(40, 30).width, |
|
height: widthUtils(40, 30).height, |
|
backgroundColor: "#fff", |
|
textAlign: "center", |
|
fontSize: fontSize(14), |
|
borderWidth: 1, |
|
borderColor: "#f3f4f8", |
|
padding: 0, |
|
lineHeight: fontSize(14), |
|
}, |
|
fixedBottomView: { |
|
position: "absolute", |
|
bottom: 0, |
|
left: 0, |
|
right: 0, |
|
height: widthUtils(118, 118).height, |
|
width: "100%", |
|
borderTopWidth: 1, |
|
borderTopColor: "#f3f4f8", |
|
padding: 10, |
|
zIndex: 1000, |
|
backgroundColor: "white", |
|
}, |
|
fixedBottomViewBox: { |
|
width: "100%", |
|
flexDirection: "row", |
|
justifyContent: "space-between", |
|
}, |
|
fixedBottomViewBoxLeft: { |
|
width: "50%", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
fixedBottomViewBoxLeftText: { |
|
fontSize: fontSize(16), |
|
fontFamily: "Segoe UI", |
|
color: "#000", |
|
}, |
|
fixedBottomViewBoxPriceText: { |
|
fontSize: fontSize(20), |
|
fontFamily: "Segoe UI", |
|
color: "#ff5217", |
|
fontWeight: "700", |
|
}, |
|
fixedBottomViewBoxRight: { |
|
width: "50%", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-end", |
|
}, |
|
fixedBottomViewBoxRightText: { |
|
fontSize: fontSize(16), |
|
fontFamily: "Segoe UI", |
|
}, |
|
fixedBottomViewButton: { |
|
marginTop: 10, |
|
width: "100%", |
|
height: widthUtils(50, 50).height, |
|
backgroundColor: "#ff5217", |
|
borderRadius: 10, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
fixedBottomViewButtonText: { |
|
fontSize: fontSize(16), |
|
fontFamily: "Segoe UI", |
|
color: "#fff", |
|
fontWeight: "700", |
|
lineHeight: widthUtils(50, 50).height, |
|
}, |
|
noImgBoxs: { |
|
width: "100%", |
|
marginTop: 10, |
|
padding: 10, |
|
borderRadius: 10, |
|
backgroundColor: "#efefef", |
|
flexDirection: "row", |
|
}, |
|
allImage: { |
|
flex: 1, |
|
}, |
|
allImageBox: { |
|
flexDirection: "row", |
|
marginTop: 10, |
|
alignItems: "center", |
|
}, |
|
allImageBoxImg: { |
|
width: 50, |
|
height: 50, |
|
borderRadius: 10, |
|
}, |
|
allImageBoxImgImg: { |
|
width: "100%", |
|
height: "100%", |
|
borderRadius: 10, |
|
}, |
|
allImageBoxList: { |
|
flex: 1, |
|
paddingLeft: 10, |
|
flexDirection: "row", |
|
}, |
|
allImageBoxListBox: { |
|
width: "60%", |
|
justifyContent: "center", |
|
}, |
|
allImageBoxListBoxText: { |
|
fontSize: fontSize(16), |
|
fontFamily: "Segoe UI", |
|
color: "#000", |
|
}, |
|
allImageBoxListStop: { |
|
width: "40%", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-end", |
|
}, |
|
cornerView: { |
|
position: "absolute", |
|
top: 0, |
|
right: 0, |
|
width: 22, |
|
height: 22, |
|
backgroundColor: "#787675", |
|
}, |
|
topRightIcon: { |
|
position: "absolute", |
|
top: 3, |
|
right: 3, |
|
}, |
|
bottomLeftIcon: { |
|
position: "absolute", |
|
bottom: 3, |
|
left: 3, |
|
}, |
|
fixedCornerView: { |
|
position: "absolute", |
|
top: 0, |
|
left: 0, |
|
width: 30, |
|
height: 16, |
|
backgroundColor: "#ff5217", |
|
borderRadius: 10, |
|
justifyContent: "center", |
|
zIndex: 1, |
|
}, |
|
fixedCornerViewText: { |
|
fontSize: fontSize(12), |
|
fontFamily: "Segoe UI", |
|
color: "#fff", |
|
fontWeight: "700", |
|
textAlign: "center", |
|
lineHeight: 16, |
|
}, |
|
overlay: { |
|
flex: 1, |
|
backgroundColor: "rgba(0,0,0,0.4)", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
popup: { |
|
backgroundColor: "white", |
|
borderRadius: 10, |
|
paddingVertical: 27, |
|
paddingHorizontal: 20, |
|
alignItems: "center", |
|
gap: 21, |
|
}, |
|
image: { |
|
width: widthUtils(80, 80).width, |
|
height: widthUtils(80, 80).height, |
|
borderRadius: 5, |
|
resizeMode: "cover", |
|
}, |
|
promptText: { |
|
fontSize: fontSize(20), |
|
fontWeight: "600", |
|
color: "black", |
|
fontFamily: "Segoe UI", // 注意要在项目中配置字体 |
|
}, |
|
buttonContainer: { |
|
flexDirection: "row", |
|
justifyContent: "center", |
|
marginTop: 10, |
|
}, |
|
cancelButton1: { |
|
width: widthUtils(50, 160).width, |
|
height: widthUtils(50, 160).height, |
|
borderRadius: 25, |
|
backgroundColor: "#f2f3f5", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
confirmButton: { |
|
width: widthUtils(50, 160).width, |
|
height: widthUtils(50, 160).height, |
|
borderRadius: 25, |
|
backgroundColor: "#002fa7", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
marginLeft: 20, |
|
}, |
|
cancelText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "500", |
|
color: "#333333", |
|
fontFamily: "Source Han Sans CN", // 注意要在项目中配置字体 |
|
}, |
|
confirmText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "500", |
|
color: "#ffffff", |
|
fontFamily: "Source Han Sans CN", // 同上 |
|
}, |
|
}); |
|
|
|
export default ProductCard;
|
|
|