water-sys/app/screens/CartScreen.tsx

import React, { useEffect, useState, useCallback } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Modal,
  TextInput,
  Alert,
  Platform,
  StatusBar,
  SafeAreaView
} from "react-native";
import BackIcon from "../components/BackIcon";
import fontSize from "../utils/fontsizeUtils";
import CircleOutlineIcon from "../components/CircleOutlineIcon";
import {
  getCartList,
  GetCartList,
  updateCartItem,
  deleteCartItem,
  updateBatchCartSelected,
} 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";
import { useFocusEffect } from "@react-navigation/native";
import useCreateOrderStore from "../store/createOrder";
import useUserStore from "../store/user";

export const CartScreen = () => {
  const [cartList, setCartList] = useState<GetCartList[]>([]);
  const {
    user: { user_id,currency },
  } = useUserStore();
  const [selectedItems, setSelectedItems] = useState<{
    [key: string]: boolean;
  }>({});
  const [allSelected, setAllSelected] = useState(false);
  const [totalAmount, setTotalAmount] = useState(0);
  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
  const [itemToDelete, setItemToDelete] = useState<{
    cartId: number;
    cartItemId: number;
    cartId1: number;
  } | null>(null);
  const [quantityInputVisible, setQuantityInputVisible] = useState(false);
  const [editingItem, setEditingItem] = useState<{
    cartId: number;
    cartItemId: number;
    currentQuantity: number;
  } | null>(null);
  const [quantityInput, setQuantityInput] = useState("");
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const { setItems } = useCreateOrderStore();
  // 计算选中商品的总金额
  const calculateTotalAmount = (list: GetCartList[]) => {
    let total = 0;
    list.forEach((item) => {
      item.skus.forEach((sku) => {
        if (sku.selected === 1) {
          // 使用 Number.toFixed(2) 保留两位小数，然后转换为数字
          total = Number((total + sku.price * sku.quantity).toFixed(2));
        }
      });
    });
    setTotalAmount(total);
  };

  // 在状态更新后计算总金额
  const updateCartList = (newList: GetCartList[]) => {
    setCartList(newList);
    calculateTotalAmount(newList);

    // 如果购物车为空，设置全选为false
    if (newList.length === 0) {
      setAllSelected(false);
    }
  };

  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 | null
  ) => {
    if (index != null) {
      // 处理子类 SKU 的选择
      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);
            return {
              ...item,
              skus: newSkus,
              selected: allSelected ? 1 : 0,
            };
          }
          return item;
        });
        calculateTotalAmount(newList);
        return newList;
      });

      setSelectedItems((prev) => ({
        ...prev,
        [cartItemId]: !prev[cartItemId],
      }));

      // 在后台发起网络请求
      updateCartItem(cartList[index1].cart_id, data).catch((error) => {
        console.error("更新购物车商品状态失败:", error);
        // 如果请求失败，回滚本地状态
        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 === 1
                      ? 0
                      : 1
                    : sku.selected,
              }));
              const allSelected = newSkus.every((sku) => sku.selected === 1);
              return {
                ...item,
                skus: newSkus,
                selected: allSelected ? 1 : 0,
              };
            }
            return item;
          });
          calculateTotalAmount(newList);
          return newList;
        });
      });
    } else {
      // 处理父类商品的选择
      const newSelected = cartList[index1].selected === 1 ? 0 : 1;

      // 立即更新本地状态
      setCartList((prev) => {
        const newList = prev.map((item, idx) => {
          if (idx === index1) {
            return {
              ...item,
              skus: item.skus.map((sku) => ({
                ...sku,
                selected: newSelected,
              })),
              selected: newSelected,
            };
          }
          return item;
        });
        calculateTotalAmount(newList);
        return newList;
      });

      // 获取所有子类的 cart_item_id
      const cartItemIds = cartList[index1].skus.map((sku) => sku.cart_item_id);

      // 在后台发起网络请求
      updateBatchCartSelected({
        cart_id: cartList[index1].cart_id,
        selected: newSelected,
        offer_ids: cartItemIds,
      }).catch((error) => {
        console.error("批量更新购物车商品状态失败:", error);
        // 如果请求失败，回滚本地状态
        setCartList((prev) => {
          const newList = prev.map((item, idx) => {
            if (idx === index1) {
              return {
                ...item,
                skus: item.skus.map((sku) => ({
                  ...sku,
                  selected: newSelected === 1 ? 0 : 1,
                })),
                selected: newSelected === 1 ? 0 : 1,
              };
            }
            return item;
          });
          calculateTotalAmount(newList);
          return newList;
        });
      });
    }

    changeAllSelected();
  };

  const getCart = async () => {
    if (!user_id) {
      Alert.alert("暂无数据", "请先登录");
      return;
    }
    const res = await getCartList();
    setCartList(res.items);
    calculateTotalAmount(res.items);

    if (res.items.length === 0) {
      // 如果购物车为空，直接设置全选为false
      setAllSelected(false);
    } else {
      // 检查所有商品的 skus 数组中的 selected 属性是否都为 1
      const allSkusSelected = res.items.every((item) =>
        item.skus.every((sku) => sku.selected === 1)
      );
      setAllSelected(allSkusSelected);
    }
  };

  const selectAllHandel = () => {
    const newAllSelected = !allSelected;
    setAllSelected(newAllSelected);

    // 立即更新本地状态
    setCartList((prev) => {
      const newList = prev.map((item) => {
        // 获取所有子类的 cart_item_id
        const cartItemIds = item.skus.map((sku) => sku.cart_item_id);

        // 在后台发起网络请求
        updateBatchCartSelected({
          cart_id: item.cart_id,
          selected: newAllSelected ? 1 : 0,
          offer_ids: cartItemIds,
        }).catch((error) => {
          console.error("批量更新购物车商品状态失败:", error);
          // 如果请求失败，回滚本地状态
          setCartList((prev) => {
            const newList = prev.map((item) => {
              return {
                ...item,
                selected: newAllSelected ? 0 : 1,
                skus: item.skus.map((sku) => ({
                  ...sku,
                  selected: newAllSelected ? 0 : 1,
                })),
              };
            });
            calculateTotalAmount(newList);
            return newList;
          });
          setAllSelected(!newAllSelected);
        });

        return {
          ...item,
          selected: newAllSelected ? 1 : 0,
          skus: item.skus.map((sku) => {
            return { ...sku, selected: newAllSelected ? 1 : 0 };
          }),
        };
      });
      calculateTotalAmount(newList);
      return newList;
    });
  };

  const handleDeleteSku = (
    cartId: number,
    cartItemId: number,
    cartId1: number
  ) => {
    // 设置要删除的商品信息并显示确认对话框
    setItemToDelete({ cartId, cartItemId, cartId1 });
    setDeleteModalVisible(true);
  };

  const confirmDelete = () => {
    if (itemToDelete) {
      const { cartId, cartItemId, cartId1 } = itemToDelete;
      console.log(itemToDelete);

      // 找到要删除的商品，从总价中减去
      const itemToRemove = cartList.find((item) => item.cart_id === cartId);
      if (itemToRemove) {
        const skuToRemove = itemToRemove.skus.find(
          (sku) => sku.cart_item_id === cartItemId
        );
        if (skuToRemove && skuToRemove.selected === 1) {
          // 如果商品是已选中状态，从总价中减去
          setTotalAmount((prev) =>
            Number((prev - skuToRemove.price * skuToRemove.quantity).toFixed(2))
          );
        }
      }

      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);
          });
          const newCartList = prev.filter((item) => item.cart_id !== cartId);

          // 检查是否没有商品了，如果没有则将全选设为false
          if (newCartList.length === 0) {
            setAllSelected(false);
          }

          return newCartList;
        } else {
          // 否则只删除特定的 SKU
          return prev.map((item) => {
            if (item.cart_id === cartId) {
              return {
                ...item,
                skus: remainingSkus,
              };
            }
            return item;
          });
        }
      });
      deleteCartItem(cartId, cartItemId).then((res) => {
        console.log(res);
      });
    }

    // 关闭确认对话框
    setDeleteModalVisible(false);
    setItemToDelete(null);
  };

  const cancelDelete = () => {
    // 关闭确认对话框
    setDeleteModalVisible(false);
    setItemToDelete(null);
  };

  // useEffect(() => {

  // }, []);
  useFocusEffect(
    useCallback(() => {
      getCart();
    }, [])
  );

  const gotoOrder = () => {
    if (!user_id) {
      Alert.alert("添加失败", "请先登录");
      return;
    }
    const items: { cart_item_id: number }[] = [];
    cartList.forEach((item) => {
      item.skus.forEach((sku) => {
        if (sku.selected === 1) {
          if (sku.cart_item_id) {
            items.push({
              cart_item_id: sku.cart_item_id,
            });
          }
        }
      });
    });
    if (items.length === 0) {
      Alert.alert("添加失败", "请先选择商品");
      return;
    }
    setItems(items);
    navigation.navigate("PreviewAddress");
  };

  // 添加更新商品数量的方法
  const updateQuantity = async (
    cartId: number,
    cartItemId: number,
    newQuantity: number
  ) => {
    try {
      // 更新本地状态
      setCartList((prev) => {
        const newList = prev.map((item) => {
          if (item.cart_id === cartId) {
            return {
              ...item,
              skus: item.skus.map((sku) => {
                if (sku.cart_item_id === cartItemId) {
                  return { ...sku, quantity: newQuantity };
                }
                return sku;
              }),
            };
          }
          return item;
        });
        calculateTotalAmount(newList);
        return newList;
      });

      // 调用API更新数量
      await updateCartItem(cartId, {
        cart_item_id: cartItemId,
        quantity: newQuantity,
        selected: 1,
      });
    } catch (error) {
      console.error("更新商品数量失败:", error);
      // 如果更新失败，回滚本地状态
      getCart();
    }
  };

  // 处理减少数量
  const handleDecreaseQuantity = (
    cartId: number,
    cartItemId: number,
    currentQuantity: number
  ) => {
    if (currentQuantity > 1) {
      updateQuantity(cartId, cartItemId, currentQuantity - 1);
    }
  };

  // 处理增加数量
  const handleIncreaseQuantity = (
    cartId: number,
    cartItemId: number,
    currentQuantity: number
  ) => {
    updateQuantity(cartId, cartItemId, currentQuantity + 1);
  };

  // 处理数量输入框确认
  const handleQuantityInputConfirm = () => {
    if (!editingItem) return;

    const newQuantity = parseInt(quantityInput);
    if (isNaN(newQuantity) || newQuantity < 1) {
      Alert.alert("提示", "请输入有效的数量");
      return;
    }

    updateQuantity(editingItem.cartId, editingItem.cartItemId, newQuantity);
    setQuantityInputVisible(false);
    setEditingItem(null);
    setQuantityInput("");
  };

  // 处理点击数量显示
  const handleQuantityPress = (
    cartId: number,
    cartItemId: number,
    currentQuantity: number
  ) => {
    setEditingItem({ cartId, cartItemId, currentQuantity });
    setQuantityInput(currentQuantity.toString());
    setQuantityInputVisible(true);
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <View style={styles.safeAreaContent}>
        <View style={styles.container}>
          <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
                          onPress={() =>
                            toggleSelection(String(item.cart_id), index1, null)
                          }
                        >
                          <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>
                        )}
                      >
                        <TouchableOpacity
                          onPress={() => {
                            navigation.navigate("ProductDetail", {
                              offer_id: item.offer_id,
                              searchKeyword: item.subject,
                              price: sku.price,
                            });
                          }}
                          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}>
                            {/* 1. SKU attributes at the top */}
                            {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>
                            )}

                            {/* 2. Price section - discount and actual price close together */}
                            <View style={styles.priceSection}>
                              <View style={styles.priceColumnContainer}>
                                {/* Discount price */}
                                <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>
                                </View>

                                {/* Actual price - right below discount price */}
                                <View style={styles.productInfoContainer4}>
                                  <Text style={styles.productCodeLabel}>
                                    {sku.price}
                                  </Text>
                                  <Text style={styles.productDetailsTextStyle}>
                                    FCFA
                                  </Text>
                                </View>
                              </View>

                              {/* 3. Quantity controls on the right */}
                              <View style={styles.orderQuantityContainer}>
                                <TouchableOpacity
                                  style={[
                                    styles.svgContainer4,
                                    { borderRightWidth: 0 },
                                  ]}
                                  onPress={() =>
                                    handleDecreaseQuantity(
                                      item.cart_id,
                                      sku.cart_item_id,
                                      sku.quantity
                                    )
                                  }
                                >
                                  <Text
                                    style={{
                                      fontSize: fontSize(18),
                                      color: "#333",
                                      fontWeight: "500",
                                    }}
                                  >
                                    -
                                  </Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                  style={styles.quantityLabelContainer}
                                  onPress={() =>
                                    handleQuantityPress(
                                      item.cart_id,
                                      sku.cart_item_id,
                                      sku.quantity
                                    )
                                  }
                                >
                                  <Text style={styles.quantityText}>
                                    {sku.quantity}
                                  </Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                  style={[
                                    styles.svgContainer4,
                                    { borderLeftWidth: 0, marginLeft: 0 },
                                  ]}
                                  onPress={() =>
                                    handleIncreaseQuantity(
                                      item.cart_id,
                                      sku.cart_item_id,
                                      sku.quantity
                                    )
                                  }
                                >
                                  <Text
                                    style={{
                                      fontSize: fontSize(18),
                                      color: "#333",
                                      fontWeight: "500",
                                    }}
                                  >
                                    +
                                  </Text>
                                </TouchableOpacity>
                              </View>
                            </View>
                          </View>
                        </TouchableOpacity>
                      </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}>{totalAmount}</Text>
                  <Text style={styles.priceLabel}>{currency}</Text>
                </View>
                <TouchableOpacity
                  style={styles.submitButtonStyle}
                  onPress={gotoOrder}
                >
                  <Text
                    style={{
                      color: "white",
                      fontSize: fontSize(18),
                      fontWeight: "700",
                    }}
                  >
                    Submit
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          </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>

      {/* 数量输入弹窗 */}
      <Modal
        visible={quantityInputVisible}
        transparent
        animationType="fade"
        onRequestClose={() => setQuantityInputVisible(false)}
      >
        <View style={styles.overlay}>
          <View style={styles.popup}>
            <Text style={styles.promptText}>修改数量</Text>
            <TextInput
              style={styles.quantityInput}
              value={quantityInput}
              onChangeText={setQuantityInput}
              keyboardType="number-pad"
              maxLength={3}
              autoFocus
            />
            <View style={styles.buttonContainer}>
              <TouchableOpacity
                style={[styles.cancelButton1, { width: "45%" }]}
                onPress={() => {
                  setQuantityInputVisible(false);
                  setEditingItem(null);
                  setQuantityInput("");
                }}
              >
                <Text style={styles.cancelText}>取消</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[
                  styles.confirmButton,
                  { width: "45%", backgroundColor: "#ff5100" },
                ]}
                onPress={handleQuantityInputConfirm}
              >
                <Text style={styles.confirmText}>确定</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  safeAreaContent: {
    flex: 1,
    paddingTop: Platform.OS === 'android' ? 0 : 0,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  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,
    flex: 1,
  },
  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: 8,
    justifyContent: "flex-start",
  },
  productInfoContainer4: {
    width: widthUtils(76, 76).width,
    flexDirection: "row",
    alignItems: "center",
    marginLeft: 3.75,
  },
  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,
    marginBottom: 2,
  },
  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,
  },
  priceSection: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  orderQuantityContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginLeft: 15,
    alignSelf: "flex-end",
  },
  borderBoxDivider1: {
    width: widthUtils(9, 9).width,
    borderTopWidth: 1,
    borderTopColor: "black",
  },
  svgContainer3: {
    width: widthUtils(12, 12).width,
    height: widthUtils(12, 12).height,
  },
  svgContainer4: {
    width: 28,
    height: 28,
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  quantityLabelContainer: {
    height: 28,
    width: 40,
    fontSize: fontSize(14),
    fontFamily: "Segoe UI",
    color: "black",
    backgroundColor: "white",
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: "#ddd",
    justifyContent: "center",
    alignItems: "center",
  },
  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,
    width: "80%",
  },
  image: {
    width: 80,
    height: 80,
    borderRadius: 5,
    resizeMode: "cover",
  },
  promptText: {
    fontSize: 20,
    fontWeight: "600",
    color: "black",
    fontFamily: "Segoe UI", // 注意要在项目中配置字体
  },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    marginTop: 20,
    gap: 20,
  },
  cancelButton1: {
    minWidth: 120,
    height: 50,
    borderRadius: 30,
    backgroundColor: "#f2f3f5",
    justifyContent: "center",
    alignItems: "center",
  },
  confirmButton: {
    minWidth: 120,
    height: 50,
    borderRadius: 30,
    backgroundColor: "#ff5100",
    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", // 同上
  },
  quantityText: {
    fontSize: fontSize(16),
    color: "#333",
    fontWeight: "600",
  },
  quantityButtonText: {
    fontSize: fontSize(18),
    color: "#333",
    fontWeight: "500",
  },
  quantityInput: {
    width: "100%",
    height: 40,
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 5,
    paddingHorizontal: 10,
    fontSize: fontSize(16),
    textAlign: "center",
  },
  priceColumnContainer: {
    flexDirection: "column",
    justifyContent: "center",
  },
});