fish_app/src/components/index/RecommendList/index.jsx

import { View, Text, Swiper, SwiperItem, Image } from "@tarojs/components";
import recommendBg1 from '../../../images/index/recommend-bg1.png'
import recommendBg2 from '../../../images/index/recommend-bg2.png'
import Taro from '@tarojs/taro'
import "./index.less";

const RecommendList = () => {
  // 模拟推荐商品数据
  const recommendProducts = [
    {
      id: 1,
      name: "商品名称商品名称商品名称商品名称商品名称",
      price: 99.99,
      sharePrice: 0.12,
      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6"
    },
    {
      id: 2,
      name: "商品名称商品名称商品名称商品名称",
      price: 88.88,
      sharePrice: 0.12,
      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6"
    },
    {
      id: 3,
      name: "商品名称商品名称商品名称",
      price: 77.77,
      sharePrice: 0.12,
      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6"
    },
    {
      id: 4,
      name: "商品名称商品名称商品名称商品名称",
      price: 66.66,
      sharePrice: 0.12,
      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6"
    },
    {
      id: 5,
      name: "商品名称商品名称商品名称",
      price: 55.55,
      sharePrice: 0.12,
      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6"
    },
    {
      id: 6,
      name: "商品名称商品名称商品名称商品名称",
      price: 44.44,
      sharePrice: 0.12,
      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6"
    }
  ];

  // 将商品数据按每3个分组
  const groupedProducts = recommendProducts.reduce((groups, product, index) => {
    const groupIndex = Math.floor(index / 3);
    if (!groups[groupIndex]) {
      groups[groupIndex] = [];
    }
    groups[groupIndex].push(product);
    return groups;
  }, []);

  return (
    <View className="recommend-wrap">
      <View className="title">邀请人推荐</View>
      <Swiper
        className="recommend-swiper"
        indicatorDots
        indicatorColor="#d8d8d8"
        indicatorActiveColor="#ffcc1a"
      >
        {groupedProducts.map((group, groupIndex) => (
          <SwiperItem key={groupIndex} className="swiper-item">
            <View className="product-group">
              {group.map(product => (
                <View onClick={() => Taro.navigateTo({ url: `/pages/indexSub/productDetail/index?id=${product.id}` })} key={product.id} className="product-item">
                  <Image className="product-img" src={product.image} mode="aspectFill" />
                  <Text className="product-name">{product.name}</Text>
                  <View className="price-info">
                    <Text className="symbol">¥</Text>
                    <Text className="price">{product.price.toFixed(2)}</Text>
                  </View>
                  <View className="share-price-tag">
                    <Text className="share-text">分享价</Text>
                    <Text className="share-symbol">¥</Text>
                    <Text className="share-price">{product.sharePrice.toFixed(2)}</Text>
                  </View>
                </View>
              ))}
            </View>
          </SwiperItem>
        ))}
      </Swiper>
      
      {/* 底部背景图 */}
      <View className="bottom-bg">
        <Image className="bg-left" src={recommendBg1} mode="aspectFit" />
        <Image className="bg-right" src={recommendBg2} mode="aspectFit" />
      </View>
    </View>
  );
};

export default RecommendList;