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.
1040 lines
28 KiB
1040 lines
28 KiB
import React, { useEffect, useState } from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
StyleSheet, |
|
TouchableOpacity, |
|
ScrollView, |
|
Alert, |
|
Modal, |
|
} from "react-native"; |
|
import BackIcon from "../components/BackIcon"; |
|
import fontSize from "../utils/fontsizeUtils"; |
|
import CircleOutlineIcon from "../components/CircleOutlineIcon"; |
|
import { |
|
getCartList, |
|
GetCartList, |
|
updateCartItem, |
|
deleteCartItem, |
|
} from "../services/api/cart"; |
|
import widthUtils from "../utils/widthUtils"; |
|
import { Swipeable } from "react-native-gesture-handler"; |
|
import OrangeCircleIcon from "../components/OrangeCircleIcon"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
|
|
export const CartScreen = () => { |
|
const [cartList, setCartList] = useState<GetCartList[]>([]); |
|
const [selectedItems, setSelectedItems] = useState<{ |
|
[key: string]: boolean; |
|
}>({}); |
|
const [allSelected, setAllSelected] = useState(false); |
|
const [deleteModalVisible, setDeleteModalVisible] = useState(false); |
|
const [itemToDelete, setItemToDelete] = useState<{ |
|
cartId: number; |
|
cartItemId: number; |
|
cartId1: number; |
|
} | null>(null); |
|
const navigation = useNavigation<NativeStackNavigationProp<any>>(); |
|
|
|
const changeAllSelected = () => { |
|
const allSkusSelected = cartList.every(item => |
|
item.skus.every(sku => sku.selected === 1) |
|
); |
|
setAllSelected(!allSkusSelected); |
|
} |
|
const toggleSelection = async ( |
|
cartItemId: string, |
|
index1: number, |
|
index: number |
|
) => { |
|
if (index != null) { |
|
const data = { |
|
cart_item_id: cartList[index1].skus[index].cart_item_id, |
|
selected: cartList[index1].skus[index].selected === 1 ? 0 : 1, |
|
quantity: cartList[index1].skus[index].quantity, |
|
}; |
|
|
|
setCartList((prev) => { |
|
const newList = prev.map((item, idx) => { |
|
if (idx === index1) { |
|
const newSkus = item.skus.map((sku) => ({ |
|
...sku, |
|
selected: |
|
sku.cart_item_id === data.cart_item_id |
|
? data.selected |
|
: sku.selected, |
|
})); |
|
const allSelected = newSkus.every((sku) => sku.selected === 1); |
|
updateCartItem(cartList[index1].cart_id, { |
|
quantity: null, |
|
selected: allSelected ? 1 : 0, |
|
}).then((res) => { |
|
console.log(res); |
|
}); |
|
return { |
|
...item, |
|
skus: newSkus, |
|
selected: allSelected ? 1 : 0, |
|
}; |
|
} |
|
return item; |
|
}); |
|
return newList; |
|
}); |
|
|
|
updateCartItem(cartList[index1].cart_id, data).then((res) => { |
|
console.log(res); |
|
}); |
|
setSelectedItems((prev) => ({ |
|
...prev, |
|
[cartItemId]: !prev[cartItemId], |
|
})); |
|
} |
|
|
|
// 检查所有商品的 skus 数组中的 selected 属性是否都为 1 |
|
|
|
changeAllSelected() |
|
}; |
|
|
|
const getCart = async () => { |
|
const res = await getCartList(); |
|
setCartList(res.items); |
|
// 检查所有商品的 skus 数组中的 selected 属性是否都为 1 |
|
const allSkusSelected = res.items.every(item => |
|
item.skus.every(sku => sku.selected === 1) |
|
); |
|
setAllSelected(allSkusSelected); |
|
}; |
|
|
|
const selectAllHandel = () => { |
|
setAllSelected(!allSelected); |
|
setCartList((prev) => { |
|
return prev.map((item) => { |
|
return { ...item, selected: allSelected ? 0 : 1,skus:item.skus.map((sku)=>{ |
|
return { ...sku, selected: allSelected ? 0 : 1 }; |
|
}) }; |
|
}); |
|
}); |
|
}; |
|
|
|
const handleDeleteSku = ( |
|
cartId: number, |
|
cartItemId: number, |
|
cartId1: number |
|
) => { |
|
// 设置要删除的商品信息并显示确认对话框 |
|
setItemToDelete({ cartId, cartItemId, cartId1 }); |
|
setDeleteModalVisible(true); |
|
}; |
|
|
|
const confirmDelete = () => { |
|
if (itemToDelete) { |
|
const { cartId, cartItemId, cartId1 } = itemToDelete; |
|
|
|
setCartList((prev) => { |
|
// 先找到要删除的商品 |
|
const itemToUpdate = prev.find((item) => item.cart_id === cartId); |
|
if (!itemToUpdate) return prev; |
|
|
|
// 计算删除后的 SKU 数量 |
|
const remainingSkus = itemToUpdate.skus.filter( |
|
(sku) => sku.cart_item_id !== cartItemId |
|
); |
|
|
|
// 如果删除后没有 SKU 了，则删除整个商品 |
|
if (remainingSkus.length === 0) { |
|
deleteCartItem(cartId1, cartItemId).then((res) => { |
|
console.log(res); |
|
}); |
|
return prev.filter((item) => item.cart_id !== cartId); |
|
} else { |
|
// 否则只删除特定的 SKU |
|
return prev.map((item) => { |
|
if (item.cart_id === cartId) { |
|
return { |
|
...item, |
|
skus: remainingSkus, |
|
}; |
|
} |
|
return item; |
|
}); |
|
} |
|
}); |
|
} |
|
|
|
// 关闭确认对话框 |
|
setDeleteModalVisible(false); |
|
setItemToDelete(null); |
|
}; |
|
|
|
const cancelDelete = () => { |
|
// 关闭确认对话框 |
|
setDeleteModalVisible(false); |
|
setItemToDelete(null); |
|
}; |
|
|
|
useEffect(() => { |
|
getCart(); |
|
}, []); |
|
return ( |
|
<View style={styles.shoppingCartLayout}> |
|
<ScrollView |
|
style={styles.scrollContainer} |
|
contentContainerStyle={styles.scrollContentContainer} |
|
> |
|
<View style={styles.productListingContainer}> |
|
<View style={styles.shoppingCartSection}> |
|
<View style={styles.productCardContainer7}> |
|
<View style={styles.svgContainer}> |
|
{/* Replace SVG with actual icon component or image */} |
|
<BackIcon size={fontSize(18)} /> |
|
</View> |
|
<Text style={styles.shoppingCartTitle}>Panier (5)</Text> |
|
</View> |
|
{cartList.map((item, index1) => ( |
|
<View style={styles.productCardListing} key={item.cart_id}> |
|
<View style={styles.productCardContainer5}> |
|
<View style={styles.svgContainer1}> |
|
<TouchableOpacity> |
|
<View style={[styles.iconContainer]}> |
|
{item.selected === 1 ? ( |
|
<OrangeCircleIcon size={fontSize(24)} /> |
|
) : ( |
|
<CircleOutlineIcon size={fontSize(24)} /> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
<Image |
|
source={{ uri: item.product_image }} |
|
style={styles.imageThumbnail} |
|
/> |
|
<View style={styles.productInfoContainer2}> |
|
<Text style={styles.casualTextSnippet}>{item.subject}</Text> |
|
<Text style={styles.productDetailsTextStyle1}> |
|
Commande min. : {item.min_order_quantity}pièces |
|
</Text> |
|
</View> |
|
</View> |
|
{item.skus.map((sku, index) => ( |
|
<Swipeable |
|
key={sku.cart_item_id} |
|
renderRightActions={() => ( |
|
<TouchableOpacity |
|
style={{ |
|
backgroundColor: "#ff5217", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
width: 80, |
|
}} |
|
onPress={() => |
|
handleDeleteSku( |
|
item.cart_id, |
|
sku.cart_item_id, |
|
item.cart_id |
|
) |
|
} |
|
> |
|
<Text style={{ color: "white", fontWeight: "bold" }}> |
|
删除 |
|
</Text> |
|
</TouchableOpacity> |
|
)} |
|
> |
|
<View |
|
style={[ |
|
styles.productCardContainer5, |
|
styles.productCardContainer4, |
|
]} |
|
> |
|
<View style={styles.svgContainer1}> |
|
<TouchableOpacity |
|
onPress={() => |
|
toggleSelection( |
|
String(sku.cart_item_id), |
|
index1, |
|
index |
|
) |
|
} |
|
> |
|
<View |
|
style={[ |
|
styles.iconContainer, |
|
|
|
]} |
|
> |
|
{sku.selected === 1 ? ( |
|
<OrangeCircleIcon size={fontSize(24)} /> |
|
) : ( |
|
<CircleOutlineIcon size={fontSize(24)} /> |
|
)} |
|
{/* <CircleOutlineIcon size={fontSize(24)} strokeColor={sku.selected === 1 ? "#FF5100" : "#C6C6C6"}/> */} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
<Image |
|
source={{ |
|
uri: sku.attributes[0]?.sku_image_url |
|
? sku.attributes[0]?.sku_image_url |
|
: item.product_image, |
|
}} |
|
style={styles.productImageDisplayStyle} |
|
/> |
|
<View style={styles.productCardWidget1}> |
|
{sku.attributes[0]?.value && ( |
|
<View style={styles.longLifeRougeStyle}> |
|
<Text |
|
style={styles.longLifeTextSnippet} |
|
numberOfLines={2} |
|
ellipsizeMode="tail" |
|
> |
|
{sku.attributes[0]?.value}{" "} |
|
{sku.attributes[1] ? "/" : ""}{" "} |
|
{sku.attributes[1]?.value} |
|
</Text> |
|
</View> |
|
)} |
|
<View style={styles.productCardContainer3}> |
|
<View style={styles.productInfoContainer4}> |
|
<Text style={styles.productCodeLabel}> |
|
{sku.price} |
|
</Text> |
|
<Text style={styles.productDetailsTextStyle}> |
|
FCFA |
|
</Text> |
|
</View> |
|
<View style={styles.productInfoContainer1}> |
|
<View style={styles.priceInfoContainer1}> |
|
<Text style={styles.discountPriceLabel}> |
|
3500FCFA |
|
</Text> |
|
</View> |
|
<View style={styles.discountInfoContainer1}> |
|
<Text style={styles.discountPercentageTextStyle}> |
|
-5% |
|
</Text> |
|
<View style={styles.svgContainer2}></View> |
|
</View> |
|
</View> |
|
<View style={styles.orderQuantityContainer}> |
|
<View style={styles.svgContainer4}> |
|
<Text>-</Text> |
|
</View> |
|
<View style={styles.quantityLabelContainer}> |
|
<Text>{sku.quantity}</Text> |
|
</View> |
|
<View style={styles.svgContainer4}> |
|
<Text>+</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</Swipeable> |
|
))} |
|
</View> |
|
))} |
|
|
|
{/* 商品 */} |
|
</View> |
|
</View> |
|
|
|
{/* Divider */} |
|
|
|
{/* Coffee Cup Product */} |
|
|
|
{/* More product sections... */} |
|
</ScrollView> |
|
|
|
{/* Fixed Bottom Section */} |
|
<View style={styles.fixedBottomContainer}> |
|
{/* Order Summary */} |
|
<View style={styles.orderSummaryHeader}> |
|
<View style={styles.svgContainer6}> |
|
<Image |
|
source={require("../../assets/img/Vector.png")} |
|
style={{ width: 18, height: 18, tintColor: "#FF5100" }} |
|
/> |
|
</View> |
|
|
|
<Text style={styles.orderQuantityInfo}> |
|
<Text>Quantité minimale de commande </Text> |
|
<Text style={styles.tiltWarpText}>50,000FCFA</Text> |
|
</Text> |
|
</View> |
|
|
|
<View style={styles.flexboxContainerWithButton}> |
|
<View style={styles.productInfoContainer}> |
|
<TouchableOpacity onPress={selectAllHandel}> |
|
<View style={styles.svgContainer1}> |
|
{allSelected ? ( |
|
<OrangeCircleIcon size={fontSize(24)} /> |
|
) : ( |
|
<CircleOutlineIcon size={fontSize(24)} /> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
|
|
<Text style={styles.headerTitle}>Tout</Text> |
|
</View> |
|
|
|
<View style={styles.productInfoContainer}> |
|
<View style={styles.productInfoContainer}> |
|
<Text style={styles.highlightedText1}>24928</Text> |
|
<Text style={styles.priceLabel}>FCFA</Text> |
|
</View> |
|
<TouchableOpacity style={styles.submitButtonStyle} onPress={()=>{ |
|
navigation.navigate("Recipient") |
|
}}> |
|
<Text |
|
style={{ |
|
color: "white", |
|
fontSize: fontSize(18), |
|
fontWeight: "700", |
|
}} |
|
> |
|
Submit |
|
</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</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={confirmDelete}> |
|
<Text style={styles.confirmText}>Oui</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
</Modal> |
|
|
|
|
|
</View> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
shoppingCartLayout: { |
|
flex: 1, |
|
backgroundColor: "white", |
|
}, |
|
scrollContainer: { |
|
flex: 1, |
|
}, |
|
scrollContentContainer: { |
|
paddingBottom: widthUtils(100, 100).height, |
|
}, |
|
productListingContainer: { |
|
paddingTop: 3, |
|
paddingLeft: 16, |
|
paddingRight: 16, |
|
}, |
|
|
|
shoppingCartSection: { |
|
marginTop: 14, |
|
}, |
|
productCardContainer7: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
svgContainer: { |
|
width: widthUtils(18, 18).width, |
|
height: widthUtils(18, 18).height, |
|
}, |
|
shoppingCartTitle: { |
|
marginLeft: 8, |
|
fontSize: fontSize(24), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "600", |
|
color: "black", |
|
}, |
|
productCardListing: { |
|
width: "100%", |
|
paddingRight: 4, |
|
paddingLeft: 4, |
|
marginTop: 16, |
|
}, |
|
productCardContainer5: { |
|
flexDirection: "row", |
|
gap: 10, |
|
alignItems: "center", |
|
}, |
|
svgContainer1: { |
|
width: widthUtils(24, 24).width, |
|
height: widthUtils(24, 24).height, |
|
}, |
|
imageThumbnail: { |
|
width: widthUtils(50, 50).width, |
|
height: widthUtils(50, 50).height, |
|
borderRadius: 5, |
|
}, |
|
productInfoContainer2: { |
|
flex: 1, |
|
maxWidth: 288, |
|
}, |
|
casualTextSnippet: { |
|
width: "100%", |
|
fontSize: fontSize(16), |
|
lineHeight: fontSize(18), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
textAlign: "left", |
|
}, |
|
productDetailsTextStyle1: { |
|
marginTop: 5, |
|
fontSize: fontSize(12), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
}, |
|
productCardContainer6: { |
|
width: "100%", |
|
marginTop: 11, |
|
}, |
|
productCardContainer4: { |
|
marginTop: 12, |
|
marginBottom: 12, |
|
}, |
|
productImageDisplayStyle: { |
|
width: widthUtils(80, 80).width, |
|
height: widthUtils(80, 80).height, |
|
borderRadius: 5, |
|
}, |
|
productCardWidget1: { |
|
paddingBottom: 5, |
|
}, |
|
longLifeRougeStyle: { |
|
paddingRight: 13, |
|
paddingBottom: 4, |
|
paddingLeft: 13, |
|
paddingTop: 4, |
|
fontFamily: "Segoe UI", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 18, |
|
alignSelf: "flex-start", |
|
maxWidth: widthUtils(249, 249).width, |
|
}, |
|
longLifeTextSnippet: { |
|
color: "#747474", |
|
fontSize: fontSize(16), |
|
lineHeight: 15, |
|
fontFamily: "Segoe UI", |
|
}, |
|
productVariantButton: { |
|
width: widthUtils(24, 80).width, |
|
height: widthUtils(24, 80).height, |
|
fontSize: fontSize(16), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 12, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
productCardContainer3: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginTop: 18, |
|
}, |
|
productInfoContainer4: { |
|
width: widthUtils(76, 76).width, |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
productInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
productCodeLabel: { |
|
fontSize: fontSize(20), |
|
lineHeight: 22, |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "#FF5100", |
|
}, |
|
productDetailsTextStyle: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "#FF5100", |
|
lineHeight: fontSize(13), |
|
marginLeft: 3, |
|
}, |
|
productInfoContainer1: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 3.75, |
|
}, |
|
priceInfoContainer1: { |
|
paddingTop: 10, |
|
paddingBottom: 5, |
|
}, |
|
discountPriceLabel: { |
|
fontSize: fontSize(12), |
|
fontFamily: "PingFang SC", |
|
fontWeight: "600", |
|
color: "#9a9a9a", |
|
}, |
|
borderBoxDivider: { |
|
width: "100%", |
|
marginTop: -4.75, |
|
borderTopWidth: 1, |
|
borderTopColor: "#9a9a9a", |
|
}, |
|
discountInfoContainer1: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
marginLeft: 3.25, |
|
width: widthUtils(22, 22).width, |
|
height: widthUtils(22, 22).height, |
|
}, |
|
discountPercentageTextStyle: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
color: "#4e2000", |
|
}, |
|
svgContainer2: { |
|
width: widthUtils(32, 32).width, |
|
height: widthUtils(32, 32).height, |
|
marginTop: -26, |
|
}, |
|
orderQuantityContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 9, |
|
width: widthUtils(24, 72).width, |
|
height: widthUtils(24, 72).height, |
|
}, |
|
borderBoxDivider1: { |
|
width: widthUtils(9, 9).width, |
|
borderTopWidth: 1, |
|
borderTopColor: "black", |
|
}, |
|
svgContainer3: { |
|
width: widthUtils(12, 12).width, |
|
height: widthUtils(12, 12).height, |
|
}, |
|
quantityLabelContainer: { |
|
height: widthUtils(24, 24).height, |
|
paddingHorizontal: 15, |
|
marginLeft: 7, |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 5, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
svgContainer4: { |
|
marginLeft: 8, |
|
}, |
|
flexDivider: { |
|
height: widthUtils(8, 8).height, |
|
width: "120%", |
|
marginLeft: -20, |
|
}, |
|
productCardContainer2: { |
|
padding: 12, |
|
paddingLeft: 20, |
|
paddingRight: 20, |
|
paddingBottom: 16, |
|
}, |
|
coffeeCupImage: { |
|
width: widthUtils(50, 50).width, |
|
height: widthUtils(50, 50).height, |
|
borderRadius: 5, |
|
marginLeft: 7, |
|
}, |
|
coffeeCupDetailsContainer: { |
|
marginLeft: 14, |
|
}, |
|
coffeeCupDescriptionTextStyle: { |
|
fontSize: fontSize(16), |
|
lineHeight: fontSize(18), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
textAlign: "left", |
|
}, |
|
productInfoTextStyle: { |
|
marginTop: 3, |
|
fontSize: fontSize(12), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
}, |
|
productCardWidget: { |
|
flexDirection: "row", |
|
gap: 10, |
|
alignItems: "flex-start", |
|
marginTop: 8, |
|
}, |
|
svgContainer5: { |
|
width: widthUtils(24, 24).width, |
|
height: widthUtils(24, 24).height, |
|
alignSelf: "center", |
|
}, |
|
productCard: { |
|
paddingBottom: 7, |
|
}, |
|
productCardButton: { |
|
width: widthUtils(24, 110).width, |
|
height: widthUtils(24, 110).height, |
|
minWidth: widthUtils(24, 110).width, |
|
fontSize: fontSize(16), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 12, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
productCardDetails: { |
|
flexDirection: "row", |
|
alignItems: "flex-end", |
|
marginTop: 16, |
|
}, |
|
priceInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "flex-end", |
|
}, |
|
orangeHighlightedText: { |
|
fontSize: fontSize(20), |
|
lineHeight: fontSize(22), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "#FF5100", |
|
}, |
|
highlightedText: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "#FF5100", |
|
marginLeft: -1, |
|
}, |
|
priceTag: { |
|
width: widthUtils(23, 62).width, |
|
height: widthUtils(23, 62).height, |
|
marginLeft: 4.75, |
|
}, |
|
discountInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 3, |
|
}, |
|
centerContentSvg: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
}, |
|
emphasizedPercentageText: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
color: "#4e2000", |
|
}, |
|
horizontalTextContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 14.5, |
|
}, |
|
numericBadge: { |
|
height: widthUtils(24, 24).height, |
|
paddingHorizontal: 15, |
|
marginLeft: 7.5, |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 5, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
productCardContainer: { |
|
padding: 17, |
|
paddingLeft: 20, |
|
paddingRight: 20, |
|
paddingBottom: 14, |
|
}, |
|
textInfoStyle: { |
|
marginTop: 2, |
|
fontSize: fontSize(12), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
}, |
|
productCardContainer1: { |
|
height: widthUtils(80, 80).height, |
|
justifyContent: "center", |
|
}, |
|
productDescriptionStyle: { |
|
paddingRight: 13, |
|
paddingBottom: 4, |
|
paddingLeft: 13, |
|
fontSize: fontSize(13), |
|
lineHeight: 15, |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
textAlign: "left", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 18, |
|
}, |
|
productPriceDiscountBadge: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginTop: 4, |
|
}, |
|
priceContainer: { |
|
flexDirection: "row", |
|
alignItems: "stretch", |
|
height: widthUtils(24, 24).height, |
|
}, |
|
verticalPriceContainer: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
marginLeft: 3.75, |
|
}, |
|
priceLabel1: { |
|
fontSize: fontSize(12), |
|
fontFamily: "PingFang SC", |
|
fontWeight: "600", |
|
color: "#9a9a9a", |
|
alignSelf: "center", |
|
}, |
|
priceDivider: { |
|
marginTop: -4.75, |
|
borderTopWidth: 1, |
|
borderTopColor: "#9a9a9a", |
|
}, |
|
discountInfoContainer2: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 3.25, |
|
}, |
|
orderSummaryHeader: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
height: widthUtils(33, 33).height, |
|
paddingRight: 20, |
|
paddingLeft: 20, |
|
backgroundColor: |
|
"linear-gradient(90deg, rgba(255, 231, 213, 1) 0%, rgba(255, 218, 218, 1) 98.56%)", |
|
borderRadius: 10, |
|
borderBottomLeftRadius: 0, |
|
borderBottomRightRadius: 0, |
|
}, |
|
svgContainer6: { |
|
width: widthUtils(18, 18).width, |
|
height: widthUtils(18, 18).height, |
|
}, |
|
orderQuantityInfo: { |
|
marginLeft: 7, |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
}, |
|
tiltWarpText: { |
|
fontSize: fontSize(14), |
|
fontFamily: "Tilt Warp", |
|
}, |
|
flexboxContainerWithButton: { |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
height: widthUtils(70, 70).height, |
|
paddingRight: 20, |
|
paddingLeft: 20, |
|
width: "100%", |
|
}, |
|
headerTitle: { |
|
marginLeft: 7, |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "600", |
|
color: "black", |
|
}, |
|
highlightedText1: { |
|
fontSize: fontSize(24), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "black", |
|
}, |
|
priceLabel: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "black", |
|
lineHeight: fontSize(13), |
|
marginTop: fontSize(-8), |
|
}, |
|
submitButtonStyle: { |
|
width: widthUtils(50, 160).width, |
|
height: widthUtils(50, 160).height, |
|
minWidth: widthUtils(50, 160).width, |
|
marginLeft: 11.5, |
|
fontSize: fontSize(18), |
|
lineHeight: fontSize(22), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "white", |
|
backgroundColor: "#FF5100", |
|
borderRadius: 30, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
fixedBottomContainer: { |
|
position: "absolute", |
|
bottom: 0, |
|
left: 0, |
|
right: 0, |
|
backgroundColor: "white", |
|
}, |
|
iconContainer: { |
|
width: widthUtils(24, 24).width, |
|
height: widthUtils(24, 24).height, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
borderRadius: 12, |
|
}, |
|
selectedIconContainer: { |
|
backgroundColor: "#ff5217", |
|
}, |
|
checkmark: { |
|
color: "white", |
|
fontSize: fontSize(16), |
|
fontWeight: "bold", |
|
}, |
|
modalOverlay: { |
|
flex: 1, |
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
|
justifyContent: 'center', |
|
alignItems: 'center', |
|
}, |
|
modalContent: { |
|
backgroundColor: 'white', |
|
borderRadius: 10, |
|
padding: 20, |
|
width: '80%', |
|
alignItems: 'center', |
|
}, |
|
modalTitle: { |
|
fontSize: fontSize(18), |
|
fontWeight: 'bold', |
|
marginBottom: 10, |
|
}, |
|
modalMessage: { |
|
fontSize: fontSize(16), |
|
marginBottom: 20, |
|
textAlign: 'center', |
|
}, |
|
modalButtons: { |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
width: '100%', |
|
}, |
|
modalButton: { |
|
paddingVertical: 10, |
|
paddingHorizontal: 20, |
|
borderRadius: 5, |
|
width: '45%', |
|
alignItems: 'center', |
|
}, |
|
cancelButton: { |
|
backgroundColor: '#f0f0f0', |
|
}, |
|
deleteButton: { |
|
backgroundColor: '#ff5217', |
|
}, |
|
cancelButtonText: { |
|
color: '#333', |
|
fontSize: fontSize(16), |
|
fontWeight: '500', |
|
}, |
|
deleteButtonText: { |
|
color: 'white', |
|
fontSize: fontSize(16), |
|
fontWeight: '500', |
|
}, |
|
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: 80, |
|
height: 80, |
|
borderRadius: 5, |
|
resizeMode: "cover", |
|
}, |
|
promptText: { |
|
fontSize: 20, |
|
fontWeight: "600", |
|
color: "black", |
|
fontFamily: "Segoe UI", // 注意要在项目中配置字体 |
|
}, |
|
buttonContainer: { |
|
flexDirection: "row", |
|
justifyContent: "center", |
|
marginTop: 10, |
|
}, |
|
cancelButton1: { |
|
width: 160, |
|
height: 50, |
|
borderRadius: 25, |
|
backgroundColor: "#f2f3f5", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
confirmButton: { |
|
width: 160, |
|
height: 50, |
|
borderRadius: 25, |
|
backgroundColor: "#002fa7", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
marginLeft: 20, |
|
}, |
|
cancelText: { |
|
fontSize: 16, |
|
fontWeight: "500", |
|
color: "#333333", |
|
fontFamily: "Source Han Sans CN", // 注意要在项目中配置字体 |
|
}, |
|
confirmText: { |
|
fontSize: 16, |
|
fontWeight: "500", |
|
color: "#ffffff", |
|
fontFamily: "Source Han Sans CN", // 同上 |
|
}, |
|
});
|
|
|