121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
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 |