列表骨架屏

2025-08-24 19:58:00 +08:00
parent cda1a4b7cc
commit 58bacb3a47
13 changed files with 532 additions and 249 deletions
--- a/src/components/ListCard/index.tsx
+++ b/src/components/ListCard/index.tsx
@@ -0,0 +1,134 @@
+import { View, Text, Image } from "@tarojs/components";
+import img from "../../config/images";
+import { ListCardProps } from "../../../types/list/types";
+import "./index.scss";
+// import SkeletonComponent from "../../components/Skeleton";
+
+const ListCard: React.FC<ListCardProps> = ({
+  title,
+  dateTime,
+  location,
+  distance,
+  registeredCount,
+  maxCount,
+  skillLevel,
+  matchType,
+  images,
+  shinei,
+}) => {
+  const renderItemImage = (src: string) => {
+    return <Image src={src} className="image" mode="aspectFill" />;
+  };
+
+  // 根据图片数量决定展示样式
+  const renderImages = () => {
+    if (images.length === 0) return null;
+
+    if (images.length === 1) {
+      return (
+        <View className="single-image">
+          <View className="image-container">
+            {/* <Image src={images[0]} className="image" mode="aspectFill" /> */}
+            {renderItemImage(images[0])}
+          </View>
+        </View>
+      );
+    }
+
+    if (images.length === 2) {
+      return (
+        <View className="double-image">
+          <View className="image-container">
+            {/* <Image src={images[0]} className="image" mode="aspectFill" /> */}
+            {renderItemImage(images[0])}
+          </View>
+          <View className="image-container">
+            {/* <Image src={images[1]} className="image" mode="aspectFill" /> */}
+            {renderItemImage(images[1])}
+          </View>
+        </View>
+      );
+    }
+
+    // 3张或更多图片
+    return (
+      <View className="triple-image">
+        <View className="image-container">{renderItemImage(images[0])}</View>
+        <View className="image-container">{renderItemImage(images[1])}</View>
+        <View className="image-container">{renderItemImage(images[2])}</View>
+      </View>
+    );
+  };
+  console.log("===ttt", !title);
+  return (
+    <View className="list-item">
+      {/* 左侧内容区域 */}
+      <View className="content">
+        {/* 标题 */}
+        <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>{dateTime}</Text>
+        </View>
+
+        {/* 地点,室内外,距离 */}
+
+        <View className="location">
+          <Text className="location-text location-position">{location}</Text>
+          <Text className="location-text location-time-distance">
+            {shinei && `・${shinei}`}
+            {distance && `・${distance}`}
+          </Text>
+        </View>
+
+        {/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
+        <View className="bottom-info">
+          <View className="left-section">
+            <View className="avatar-group">
+              {Array.from({ length: Math.min(registeredCount, 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">
+                报名人数 {registeredCount}/
+                <Text className="tag-text-max">{maxCount}</Text>
+              </Text>
+            </View>
+            <View className="tag">
+              <Text className="tag-text">{skillLevel}</Text>
+            </View>
+            <View className="tag">
+              <Text className="tag-text">{matchType}</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* 右侧图片区域 */}
+      <View className="image-section">{renderImages()}</View>
+    </View>
+  );
+};
+
+export default ListCard;