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 { formatGameTime, calculateDuration } from "@/utils/timeUtils";
import "./index.scss";

const ListCard: React.FC<ListCardProps> = ({
  id,
  title,
  original_start_time,
  start_time,
  end_time,
  location,
  distance_km,
  current_players,
  max_players,
  skill_level_min,
  skill_level_max,
  play_type,
  image_list = [],
  court_type,
  key,
  participants, // 参与者图片
  venue_image_list, // 场馆图片
  venue_description,
  game_type, // 球局类型
}) => {
  // 参与者要前三个数据
  const participantsImageList = participants?.slice(0, 3) || [];
  // 场地 要第一个数据
  // const venueImageList = venue_image_list?.slice(0, 1) || [];
  const venueImage = venue_image_list?.[0]?.url || "";

  // 是否显示畅打球局
  const isShowSmoothPlayingGame = game_type === "畅打球局";

  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 = () => {
    Taro.navigateTo({
      url: `/game_pages/detail/index?id=${id || 1}&from=list`,
    });
  };

  // 根据图片数量决定展示样式
  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>{formatGameTime(original_start_time || start_time)}</Text>
            {/* 时长 如 2小时 */}
            {end_time && (
              <Text>
                {" "}
                {calculateDuration(original_start_time || start_time, end_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">
                {(participantsImageList || []).map((item, index) => (
                  <View key={index} className="avatar">
                    <Image
                      className="avatar-image"
                      src={item?.user?.avatar_url}
                      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>
      {/* 畅打球局 */}
      {isShowSmoothPlayingGame && (
        <View className="smoothPlayingGame">
          <View className="smoothWrapper">
            <Image
              src={img.ICON_LIST_PLAYING_GAME}
              className="iconListPlayingGame"
            />
            <Text className="smoothTitle">{game_type}</Text>
          </View>
          <View className="line" />
          <View className="localAreaTitle">场馆方:</View>
          <View className="localAreaWrapper">
            <Image className="localArea" src={venueImage} />
            <Text className="localAreaText">{venue_description}</Text>
          </View>
        </View>
      )}
    </View>
  );
};

export default ListCard;