water-sys/app/screens/CartScreen.tsx

import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Modal,
  TextInput,
  Alert,
} 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 { useCallback } from "react";
import useCreateOrderStore from "../store/createOrder";
import useUserStore from "../store/user";

export const CartScreen = () => {
  const [cartList, setCartList] = useState<GetCartList[]>([]);
  const {
    user: { user_id },
  } = 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 (
    <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
                      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}>FCFA</Text>
            </View>
            <TouchableOpacity
              style={styles.submitButtonStyle}
              onPress={gotoOrder}
            >
              <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>

      {/* 数量输入弹窗 */}
      <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>
    </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,
    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",
  },
});