43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import type { Task } from '@/types/task'
|
|
import { View, Text, Image } from '@tarojs/components'
|
|
import './index.less'
|
|
|
|
interface Props { task: Task }
|
|
|
|
export default function ActivityCard({ task }: Props) {
|
|
const progress = task.maxParticipants
|
|
? Math.round(((task.participants || 0) / task.maxParticipants) * 100)
|
|
: 0
|
|
|
|
return (
|
|
<View className='task-card activity-card'>
|
|
<View className='card-top'>
|
|
<View className='task-info'>
|
|
<View className='task-type-row'>
|
|
<Text className='type-badge activity'>校园活动</Text>
|
|
<Text className='participants-count'>👥 {task.participants}/{task.maxParticipants}人</Text>
|
|
</View>
|
|
<Text className='task-title'>{task.title}</Text>
|
|
<Text className='task-desc'>{task.desc}</Text>
|
|
</View>
|
|
</View>
|
|
{/* 参与进度条 */}
|
|
{task.maxParticipants && (
|
|
<View className='progress-bar-wrap'>
|
|
<View className='progress-bar' style={{ width: `${progress}%` }} />
|
|
</View>
|
|
)}
|
|
<View className='card-bottom'>
|
|
<View className='publisher'>
|
|
<Image className='pub-avatar' src={task.publisher.avatar} mode='aspectFill' />
|
|
<Text className='pub-name'>{task.publisher.name}</Text>
|
|
</View>
|
|
<View className='task-meta'>
|
|
<Text className='meta-item'>📍 {task.location}</Text>
|
|
<Text className='meta-item'>🕐 {task.time}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|