mini-programs/src/components/ListCard/index.tsx

import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import img from "../../config/images";
import { ListCardProps } from "../../../types/list/types";
import "./index.scss";

const ListCard: React.FC<ListCardProps> = ({
  id,
  title,
  start_time,
  location,
  distance_km,
  current_players,
  max_players,
  skill_level_min,
  skill_level_max,
  play_type,
  image_list = [],
  court_type,
  key
}) => {
  const renderItemImage = (src: string) => {
    return <Image src={src} className="image" mode="aspectFill"
    lazyLoad
    defaultSource='https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center'
    />;
  };

  const handleViewDetail = () => {
    console.log('id', id)
    Taro.navigateTo({
      url: `/pages/detail/index?id=${id || 1}&from=list&autoShare=0`,
    });
  };

  // 根据图片数量决定展示样式
  const renderImages = () => {
    if (image_list?.length === 0) return null;

    if (image_list?.length === 1) {
      return (
        <View className="single-image">
          <View className="image-container">{renderItemImage(image_list?.[0])}</View>
        </View>
      );
    }

    if (image_list?.length === 2) {
      return (
        <View className="double-image">
          <View className="image-container">{renderItemImage(image_list?.[0])}</View>
          <View className="image-container">{renderItemImage(image_list?.[1])}</View>
        </View>
      );
    }

    // 3张或更多图片
    return (
      <View className="triple-image">
        <View className="image-container">{renderItemImage(image_list?.[0])}</View>
        <View className="image-container">{renderItemImage(image_list?.[1])}</View>
        <View className="image-container">{renderItemImage(image_list?.[2])}</View>
      </View>
    );
  };
  return (
    <View className="listCard" key={key}>
      <View className="listItem" onClick={handleViewDetail}>
        {/* 左侧内容区域 */}
        <View className="content">
          {/* 标题 */}
          {title && <View className="titleWrapper">
            <Text className="title">{title}</Text>
            <Image
              src={img.ICON_LIST_RIGHT_ARROW}
              className="title-right-arrow"
              mode="aspectFit"
            />
          </View>}

          {/* 时间信息 */}
          <View className="date-time">
            <Text>{start_time}</Text>
          </View>

          {/* 地点,室内外,距离 */}

          <View className="location">
            {location &&
              <Text className="location-text location-position">{location}</Text>}
            <Text className="location-text location-time-distance">
              {court_type && `・${court_type}`}
              {distance_km && `・${distance_km}km`}
            </Text>
          </View>

          {/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
          <View className="bottom-info">
            <View className="left-section">
              <View className="avatar-group">
                {Array.from({ length: 3 }).map(
                  (_, index) => (
                    <View key={index} className="avatar">
                      <Image
                        className="avatar-image"
                        src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
                        mode="aspectFill"
                      />
                    </View>
                  )
                )}
              </View>
            </View>

            <View className="tags">
              <View className="tag">
                <Text className="tag-text">
                  报名人数 {current_players}/
                  <Text className="tag-text-max">{max_players}</Text>
                </Text>
              </View>
              <View className="tag">
                <Text className="tag-text">{skill_level_min} 至 {skill_level_max}</Text>
              </View>
              {play_type && <View className="tag">
                <Text className="tag-text">{play_type}</Text>
              </View>}
            </View>
          </View>
        </View>

        {/* 右侧图片区域 */}
        <View className="image-section">{renderImages()}</View>
      </View>
      {/* 畅打球局 */}
      <View className="smoothPlayingGame">
        <View className="smoothWrapper">
          <Image src={img.ICON_LIST_PLAYING_GAME} className="iconListPlayingGame" />
          <Text className="smoothTitle">畅打球局</Text>
        </View>
        <View className="line" />
        <View>场馆方:</View>
        <View className="localAreaWrapper">
          <Image className="localArea" src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center" />
          <Text className="localAreaText">仁恒河滨花园网球场</Text>
        </View>
      </View>
    </View>
  );
};

export default ListCard;