处理列表

src/components/ListCard/index.scss

@@ -269,6 +269,15 @@
     display: flex;
     align-items: center;
     gap: 5px;
+    flex-shrink: 0;
+  }
+
+  .localAreaWrapper {
+    max-width: 69%;
+  }
+
+  .localAreaTitle {
+    flex-shrink: 0;
   }
 
   .smoothTitle {
@@ -291,5 +300,11 @@
   .localArea {
     border: 0.5px solid #FFFFFFA6;
     border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .localAreaText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }

src/components/ListCard/index.tsx

@@ -18,7 +18,21 @@ const ListCard: React.FC<ListCardProps> = ({
   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
@@ -32,7 +46,6 @@ const ListCard: React.FC<ListCardProps> = ({
   };
 
   const handleViewDetail = () => {
-    console.log("id", id);
     Taro.navigateTo({
       url: `/game_pages/detail/index?id=${id || 1}&from=list`,
     });
@@ -120,11 +133,11 @@ const ListCard: React.FC<ListCardProps> = ({
           <View className="bottom-info">
             <View className="left-section">
               <View className="avatar-group">
-                {Array.from({ length: 3 }).map((_, index) => (
+                {(participantsImageList || []).map((item, 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"
+                      src={item?.user?.avatar_url}
                       mode="aspectFill"
                     />
                   </View>
@@ -157,24 +170,24 @@ const ListCard: React.FC<ListCardProps> = ({
         <View className="image-section">{renderImages()}</View>
       </View>
       {/* 畅打球局 */}
-      <View className="smoothPlayingGame">
+      {isShowSmoothPlayingGame && <View className="smoothPlayingGame">
         <View className="smoothWrapper">
           <Image
             src={img.ICON_LIST_PLAYING_GAME}
             className="iconListPlayingGame"
           />
-          <Text className="smoothTitle">畅打球局</Text>
+          <Text className="smoothTitle">{game_type}</Text>
         </View>
         <View className="line" />
-        <View>场馆方:</View>
+        <View className="localAreaTitle">场馆方:</View>
         <View className="localAreaWrapper">
           <Image
             className="localArea"
-            src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
+            src={venueImage}
           />
-          <Text className="localAreaText">仁恒河滨花园网球场</Text>
+          <Text className="localAreaText">{venue_description}</Text>
         </View>
-      </View>
+      </View>}
     </View>
   );
 };