|
|
|
|
import React, { useEffect, useCallback, useState } from "react";
|
|
|
|
|
import {
|
|
|
|
|
View,
|
|
|
|
|
Text,
|
|
|
|
|
Image,
|
|
|
|
|
StyleSheet,
|
|
|
|
|
TouchableOpacity,
|
|
|
|
|
ScrollView,
|
|
|
|
|
Modal,
|
|
|
|
|
InteractionManager,
|
|
|
|
|
Alert,
|
|
|
|
|
TextInput,
|
|
|
|
|
} 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 {
|
|
|
|
|
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";
|
|
|
|
|
|
|
|
|
|
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 {
|
|
|
|
|
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 (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) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
});
|
|
|
|
|
} 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(res);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
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}>
|
|
|
|
|
<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.price}>
|
|
|
|
|
<Text style={styles.priceInfoText}>{price}</Text>
|
|
|
|
|
<Text style={styles.priceInfoTextCon}>FCFA</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<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}>
|
|
|
|
|
<Image
|
|
|
|
|
source={require("../../assets/img/vip1.png")}
|
|
|
|
|
style={styles.priceInfoVipImg}
|
|
|
|
|
/>
|
|
|
|
|
</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}>FCFA</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 && (
|
|
|
|
|
<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}
|
|
|
|
|
</Text>
|
|
|
|
|
<Text
|
|
|
|
|
style={styles.sizePriceBoxItemText}
|
|
|
|
|
numberOfLines={1}
|
|
|
|
|
ellipsizeMode="tail"
|
|
|
|
|
>
|
|
|
|
|
{list.attributes[0].value}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<Text style={styles.amountText}>
|
|
|
|
|
库存 {list?.amount_on_sale}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.sizePriceBoxStepForward}>
|
|
|
|
|
<TouchableOpacity
|
|
|
|
|
style={styles.sizePriceBoxStepForwardButton}
|
|
|
|
|
onPress={() =>
|
|
|
|
|
handleSizeSelect(
|
|
|
|
|
list?.attributes[0]?.value,
|
|
|
|
|
"-",
|
|
|
|
|
index1,
|
|
|
|
|
list.amount_on_sale
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<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
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<TouchableOpacity
|
|
|
|
|
style={styles.sizePriceBoxStepForwardButton}
|
|
|
|
|
onPress={() =>
|
|
|
|
|
handleSizeSelect(
|
|
|
|
|
list?.attributes[0]?.value,
|
|
|
|
|
"+",
|
|
|
|
|
index1,
|
|
|
|
|
list.amount_on_sale
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<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>
|
|
|
|
|
<ScrollView
|
|
|
|
|
style={[styles.sizePrice, { maxHeight: 200 }]}
|
|
|
|
|
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}
|
|
|
|
|
</Text>
|
|
|
|
|
<Text
|
|
|
|
|
style={styles.sizePriceBoxItemText}
|
|
|
|
|
numberOfLines={1}
|
|
|
|
|
ellipsizeMode="tail"
|
|
|
|
|
>
|
|
|
|
|
{list.attributes[0].value}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<Text style={styles.amountText}>
|
|
|
|
|
库存 {list?.amount_on_sale}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.sizePriceBoxStepForward}>
|
|
|
|
|
<TouchableOpacity
|
|
|
|
|
style={styles.sizePriceBoxStepForwardButton}
|
|
|
|
|
onPress={() =>
|
|
|
|
|
handleSizeSelect(
|
|
|
|
|
list?.attributes[0]?.value,
|
|
|
|
|
"-",
|
|
|
|
|
index1,
|
|
|
|
|
list.amount_on_sale
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<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
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<TouchableOpacity
|
|
|
|
|
style={styles.sizePriceBoxStepForwardButton}
|
|
|
|
|
onPress={() =>
|
|
|
|
|
handleSizeSelect(
|
|
|
|
|
list?.attributes[0]?.value,
|
|
|
|
|
"+",
|
|
|
|
|
index1,
|
|
|
|
|
list.amount_on_sale
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<Text>+</Text>
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
</View>
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</View>
|
|
|
|
|
)}
|
|
|
|
|
{/* 只有一个文字 */}
|
|
|
|
|
{noImgList && groupList.length === 1 && !flag && (
|
|
|
|
|
<View style={styles.productBox}>
|
|
|
|
|
<View style={styles.productTit}>
|
|
|
|
|
<Text style={styles.productTitText}>{sizeTitle}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<ScrollView
|
|
|
|
|
style={[styles.sizePrice, { maxHeight: 200 }]}
|
|
|
|
|
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}
|
|
|
|
|
</Text>
|
|
|
|
|
<Text
|
|
|
|
|
style={styles.sizePriceBoxItemText}
|
|
|
|
|
numberOfLines={1}
|
|
|
|
|
ellipsizeMode="tail"
|
|
|
|
|
>
|
|
|
|
|
{list.attributes[0].value}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<Text style={styles.amountText}>
|
|
|
|
|
库存 {list?.amount_on_sale}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.sizePriceBoxStepForward}>
|
|
|
|
|
<TouchableOpacity
|
|
|
|
|
style={styles.sizePriceBoxStepForwardButton}
|
|
|
|
|
onPress={() =>
|
|
|
|
|
handleNoImgSizeSelect(
|
|
|
|
|
list?.attributes[0]?.value,
|
|
|
|
|
"-",
|
|
|
|
|
index1,
|
|
|
|
|
list.amount_on_sale
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<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
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<TouchableOpacity
|
|
|
|
|
style={styles.sizePriceBoxStepForwardButton}
|
|
|
|
|
onPress={() =>
|
|
|
|
|
handleNoImgSizeSelect(
|
|
|
|
|
list?.attributes[0]?.value,
|
|
|
|
|
"+",
|
|
|
|
|
index1,
|
|
|
|
|
list.amount_on_sale
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<Text>+</Text>
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</View>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{/* 只有图片 */}
|
|
|
|
|
{noImgList && groupList.length === 1 && flag && (
|
|
|
|
|
<View style={styles.productBox}>
|
|
|
|
|
<View style={styles.productTit}>
|
|
|
|
|
<Text style={styles.productTitText}>{sizeTitle}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<ScrollView
|
|
|
|
|
style={[styles.sizePrice, { maxHeight: 200 }]}
|
|
|
|
|
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}
|
|
|
|
|
</Text>
|
|
|
|
|
<Text
|
|
|
|
|
style={styles.allImageBoxListBoxText}
|
|
|
|
|
numberOfLines={1}
|
|
|
|
|
ellipsizeMode="tail"
|
|
|
|
|
>
|
|
|
|
|
{list.attributes[0].value}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
<Text style={styles.amountText}>
|
|
|
|
|
库存 {list?.amount_on_sale}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.allImageBoxListStop}>
|
|
|
|
|
<TouchableOpacity
|
|
|
|
|
style={styles.sizePriceBoxStepForwardButton}
|
|
|
|
|
onPress={() =>
|
|
|
|
|
handleNoImgSizeSelect(
|
|
|
|
|
list.attributes[0]?.value,
|
|
|
|
|
"-",
|
|
|
|
|
index1,
|
|
|
|
|
list.amount_on_sale
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<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
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<TouchableOpacity
|
|
|
|
|
style={styles.sizePriceBoxStepForwardButton}
|
|
|
|
|
onPress={() =>
|
|
|
|
|
handleNoImgSizeSelect(
|
|
|
|
|
list.attributes[0]?.value,
|
|
|
|
|
"+",
|
|
|
|
|
index1,
|
|
|
|
|
list.amount_on_sale
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<Text>+</Text>
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</View>
|
|
|
|
|
)}
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
<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)} FCFA
|
|
|
|
|
</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%",
|
|
|
|
|
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%",
|
|
|
|
|
},
|
|
|
|
|
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;
|
