fish_app/src/components/index/ProductList/index.jsx

import React, { useState, useEffect } from "react";
import { View, Text, Image } from "@tarojs/components";
import { AtCheckbox } from "taro-ui";
import Taro from "@tarojs/taro";
import "./index.less";
import joinStoreBg from "../../../images/index/jionStore.png";
import saveMoneyBg from "../../../images/index/save-money.png";
import shareEarnBg from "../../../images/index/share-earn.png";
import seckillIcon from "../../../images/seckill/seckillIcon.png";
const ProductList = (props) => {
  const { isSeckill } = props; //是否是秒杀产品引用
  const { isManagement } = props; //是否是管理产品引用
  const { isManagementStatus } = props; //是否是管理状态引用
  const { isSelectAll } = props; //是否是全选
  const [selectedProducts, setSelectedProducts] = useState([]); // 管理选中的商品列表
  // 模拟商品数据
  const products = [
    {
      id: 1,
      image:
        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
      name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
      price: 99.99,
      originalPrice: 199.99,
      saveMoney: 10,
      shareEarn: 20,
    },
    {
      id: 2,
      image:
        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
      name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
      price: 99.99,
      originalPrice: 199.99,
      saveMoney: 10,
      shareEarn: 20,
    },
    {
      id: 3,
      image:
        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
      name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
      price: 99.99,
      originalPrice: 199.99,
      saveMoney: 10,
      shareEarn: 20,
    },
  ];
  // 跳转产品详情
  const toDetail = (id) => {
    if (isManagementStatus) {
      selectProduct(id);
    } else {
      Taro.navigateTo({
        url: `/pages/productDetail/index?id=${id}`,
      });
    }
  };
  // 监听 isSelectAll 的变化
  useEffect(() => {
    if (isSelectAll) {
      // 如果 isSelectAll 为 true，选中所有商品
      setSelectedProducts(products.map((product) => product.id));
    } else {
      // 如果 isSelectAll 为 false，取消所有选中
      setSelectedProducts([]);
    }
  }, [isSelectAll]); // 依赖项是 isSelectAll
  // 单选
  const selectProduct = (productId) => {
    setSelectedProducts((prevSelected) => {
      const isSelected = prevSelected.includes(productId);
      if (isSelected) {
        // 如果已经选中，则取消选择
        return prevSelected.filter((id) => id !== productId);
      } else {
        // 如果未选中，则添加到选中列表
        return [...prevSelected, productId];
      }
    });
  };
  return (
    <View className="product-list-wrap">
      {isSeckill && (
        <View className="seckill-icon">
          <Image src={seckillIcon} mode="aspectFit" />
          <Text>每日疯抢 限时秒杀</Text>
        </View>
      )}
      {products.map((product, index) => (
        <View key={product.id}>
          <View onClick={() => toDetail(product.id)} className="product-item">
            {isManagement && isManagementStatus && (
              <AtCheckbox
                options={[{ value: product.id.toString(), label: "" }]} // 确保每个复选框的 options 是独立的
                selectedList={selectedProducts.map((id) => id.toString())}
                onChange={(selectedList) => selectProduct(product.id)} // 传递当前 product.id
              />
            )}
            <View className="right">
              <Image
                className="product-img"
                src={product.image}
                mode="aspectFill"
              />
              <View className="product-info">
                <View
                  className="product-name"
                  style={{ WebkitBoxOrient: "vertical" }}
                >
                  <Text className="self-tag">
                    {!isSeckill ? "自营" : "鱼市秒杀"}
                  </Text>
                  {product.name}
                </View>
                <View className="price-line">
                  <View className="price-info">
                    <Text className="symbol">¥</Text>
                    <Text className="price">{product.price}</Text>
                    <Text className="original-price">
                      ¥{product.originalPrice}
                    </Text>
                  </View>
                  {!isSeckill && !isManagement && (
                    <View className="add-btn">
                      <Image
                        className="join-store-bg"
                        src={joinStoreBg}
                        mode="aspectFit"
                      />
                      <Text className="btn-text">加入小店</Text>
                    </View>
                  )}
                </View>
                <View className="profit-line">
                  <View className="save-money">
                    <Image className="bg" src={saveMoneyBg} mode="aspectFit" />
                    <View className="content">
                      <Text className="label">自购省</Text>
                      <Text className="money">¥{product.saveMoney}</Text>
                    </View>
                  </View>
                  <View className="share-earn">
                    <Image className="bg" src={shareEarnBg} mode="aspectFit" />
                    <View className="content">
                      <Text className="label">分享赚</Text>
                      <Text className="money">¥{product.shareEarn}</Text>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
          {index !== products.length - 1 && <View className="divider"></View>}
        </View>
      ))}
    </View>
  );
};

ProductList.defaultProps = {
  isSeckill: false,
};

export default ProductList;