通用组件开发

src/components/ListItem/index.tsx

@@ -0,0 +1,121 @@
+import { View, Text, Image } from '@tarojs/components'
+import './index.scss'
+
+interface ListItemProps {
+  title: string
+  dateTime: string
+  location: string
+  distance: string
+  registeredCount: number
+  maxCount: number
+  skillLevel: string
+  matchType: string
+  images: string[]
+}
+
+const ListItem: React.FC<ListItemProps> = ({
+  title,
+  dateTime,
+  location,
+  distance,
+  registeredCount,
+  maxCount,
+  skillLevel,
+  matchType,
+  images
+}) => {
+  // 根据图片数量决定展示样式
+  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" />
+          </View>
+        </View>
+      )
+    }
+    
+    if (images.length === 2) {
+      return (
+        <View className="double-image">
+          <View className="image-container">
+            <Image src={images[0]} className="image" mode="aspectFill" />
+          </View>
+          <View className="image-container">
+            <Image src={images[1]} className="image" mode="aspectFill" />
+          </View>
+        </View>
+      )
+    }
+    
+    // 3张或更多图片
+    return (
+      <View className="triple-image">
+        <View className="image-container">
+          <Image src={images[0]} className="image" mode="aspectFill" />
+        </View>
+        <View className="image-container">
+          <Image src={images[1]} className="image" mode="aspectFill" />
+        </View>
+        <View className="image-container">
+          <Image src={images[2]} className="image" mode="aspectFill" />
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View className="list-item">
+      {/* 左侧内容区域 */}
+      <View className="content">
+        {/* 标题 */}
+        <Text className="title">{title}</Text>
+        
+        {/* 时间信息 */}
+        <Text className="date-time">{dateTime}</Text>
+        
+        {/* 地点和距离 */}
+        <Text className="location">{location}・{distance}</Text>
+        
+        {/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
+        <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" className="avatar-image" 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 ListItem