任务、消息

src/components/TaskCard/ActivityCard/index.tsx

@@ -0,0 +1,42 @@
+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>
+  )
+}