forum

miniprogram/src/subpackages/forum/activity/detail.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '活动详情'
+})

miniprogram/src/subpackages/forum/activity/detail.scss

@@ -0,0 +1,79 @@
+.activity-detail {
+  padding-bottom: 80px;
+
+  .cover {
+    width: 100%;
+    display: block;
+  }
+
+  .content {
+    padding: 20px;
+
+    .title {
+      font-size: 24px;
+      font-weight: bold;
+      display: block;
+      margin-bottom: 20px;
+    }
+
+    .meta-box {
+      background: #f9f9f9;
+      padding: 15px;
+      border-radius: 8px;
+      margin-bottom: 20px;
+
+      .meta-row {
+        display: flex;
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: #333;
+
+        .label {
+          color: #666;
+          width: 50px;
+          flex-shrink: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .section-title {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        border-left: 4px solid #00b96b;
+        padding-left: 10px;
+    }
+
+    .description {
+        font-size: 16px;
+        line-height: 1.6;
+        color: #333;
+    }
+  }
+
+  .footer-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    padding: 10px 20px;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
+    padding-bottom: calc(10px + env(safe-area-inset-bottom));
+
+    .btn-signup {
+      width: 100%;
+      background: #00b96b;
+      border: none;
+      
+      &[disabled] {
+          background: #ccc;
+          color: #fff;
+      }
+    }
+  }
+}

miniprogram/src/subpackages/forum/activity/detail.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react'
+import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro'
+import { View, Text, Image, Button, RichText } from '@tarojs/components'
+import { getActivityDetail, signupActivity } from '../../../api'
+import { marked } from 'marked'
+import './detail.scss'
+
+const ActivityDetail = () => {
+  const router = useRouter()
+  const { id } = router.params
+  
+  const [activity, setActivity] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [htmlContent, setHtmlContent] = useState('')
+
+  useEffect(() => {
+    if (id) {
+        fetchDetail()
+    }
+  }, [id])
+
+  const fetchDetail = async () => {
+    try {
+      const res = await getActivityDetail(Number(id))
+      setActivity(res.data)
+      if (res.data.description) {
+          const html = marked.parse(res.data.description)
+          setHtmlContent((html as string).replace(/<img/g, '<img style="max-width:100%;border-radius:8px;"'))
+      }
+    } catch (error) {
+      console.error(error)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSignup = async () => {
+    const token = Taro.getStorageSync('token')
+    if (!token) {
+        Taro.showToast({ title: '请先登录', icon: 'none' })
+        return
+    }
+
+    setSubmitting(true)
+    try {
+        await signupActivity(Number(id))
+        Taro.showToast({ title: '报名成功', icon: 'success' })
+        fetchDetail() // Refresh status
+    } catch (error) {
+        console.error(error)
+        const msg = error.response?.data?.error || '报名失败'
+        Taro.showToast({ title: msg, icon: 'none' })
+    } finally {
+        setSubmitting(false)
+    }
+  }
+
+  useShareAppMessage(() => {
+      return {
+          title: activity?.title || '社区活动',
+          path: `/subpackages/forum/activity/detail?id=${id}`
+      }
+  })
+
+  if (loading) return <View>Loading...</View>
+  if (!activity) return <View>活动不存在</View>
+
+  return (
+    <View className='activity-detail'>
+      <Image src={activity.cover_image} mode='widthFix' className='cover' />
+      
+      <View className='content'>
+        <Text className='title'>{activity.title}</Text>
+        
+        <View className='meta-box'>
+            <View className='meta-row'>
+                <Text className='label'>时间：</Text>
+                <Text>{new Date(activity.start_time).toLocaleString()} ~ {new Date(activity.end_time).toLocaleString()}</Text>
+            </View>
+            <View className='meta-row'>
+                <Text className='label'>地点：</Text>
+                <Text>{activity.location || '线上活动'}</Text>
+            </View>
+            <View className='meta-row'>
+                <Text className='label'>名额：</Text>
+                <Text>{activity.current_signups} / {activity.max_participants > 0 ? activity.max_participants : '不限'}</Text>
+            </View>
+        </View>
+
+        <View className='description'>
+            <View className='section-title'>活动详情</View>
+            <RichText nodes={htmlContent} />
+        </View>
+      </View>
+
+      <View className='footer-bar'>
+        <Button 
+            className='btn-signup' 
+            type='primary' 
+            disabled={activity.has_signed_up || activity.status !== 'open' || submitting}
+            onClick={handleSignup}
+        >
+            {activity.has_signed_up ? '已报名' : (activity.status === 'open' ? '立即报名' : '无法报名')}
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+export default ActivityDetail

miniprogram/src/subpackages/forum/activity/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '社区活动',
+  enablePullDownRefresh: true
+})

miniprogram/src/subpackages/forum/activity/index.scss

@@ -0,0 +1,109 @@
+.activity-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 20px;
+
+  .tabs {
+    display: flex;
+    background: #fff;
+    padding: 10px 0;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+
+    .tab {
+      flex: 1;
+      text-align: center;
+      font-size: 16px;
+      color: #666;
+      padding: 10px 0;
+      position: relative;
+
+      &.active {
+        color: #00b96b;
+        font-weight: bold;
+
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 30px;
+          height: 3px;
+          background: #00b96b;
+          border-radius: 2px;
+        }
+      }
+    }
+  }
+
+  .list-container {
+    padding: 15px;
+  }
+
+  .empty {
+    text-align: center;
+    color: #999;
+    padding: 50px 0;
+  }
+
+  .activity-card {
+    background: #fff;
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+
+    .cover {
+      width: 100%;
+      height: 150px;
+    }
+
+    .info {
+      padding: 15px;
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 10px;
+
+        .title {
+          font-size: 18px;
+          font-weight: bold;
+          flex: 1;
+          margin-right: 10px;
+        }
+
+        .status {
+          font-size: 12px;
+          padding: 2px 8px;
+          border-radius: 4px;
+          background: #eee;
+          color: #666;
+
+          &.open { background: #e6ffed; color: #00b96b; }
+          &.upcoming { background: #e6f7ff; color: #1890ff; }
+          &.ended { background: #f5f5f5; color: #999; }
+        }
+      }
+
+      .meta {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        font-size: 14px;
+        color: #666;
+      }
+
+      .signup-status {
+          margin-top: 10px;
+          text-align: right;
+          color: #00b96b;
+          font-size: 14px;
+      }
+    }
+  }
+}

miniprogram/src/subpackages/forum/activity/index.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react'
+import Taro, { usePullDownRefresh } from '@tarojs/taro'
+import { View, Text, Image, Button } from '@tarojs/components'
+import { getActivities, getMySignups } from '../../../api'
+import './index.scss'
+
+const ActivityList = () => {
+  const [activities, setActivities] = useState<any[]>([])
+  const [loading, setLoading] = useState(false)
+  const [tab, setTab] = useState<'all' | 'mine'>('all')
+  const [mySignups, setMySignups] = useState<any[]>([])
+
+  const fetchData = async () => {
+    setLoading(true)
+    try {
+      if (tab === 'all') {
+        const res = await getActivities()
+        setActivities(res.results || res.data || [])
+      } else {
+        const res = await getMySignups()
+        setMySignups(res.results || res.data || [])
+      }
+    } catch (error) {
+      console.error(error)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+      Taro.stopPullDownRefresh()
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [tab])
+
+  usePullDownRefresh(() => {
+    fetchData()
+  })
+
+  const goDetail = (id) => {
+    Taro.navigateTo({ url: `/subpackages/forum/activity/detail?id=${id}` })
+  }
+
+  const getStatusText = (status) => {
+    const map = {
+      'upcoming': '即将开始',
+      'open': '报名中',
+      'ongoing': '进行中',
+      'ended': '已结束'
+    }
+    return map[status] || status
+  }
+
+  const renderList = (list) => {
+    if (list.length === 0 && !loading) return <View className='empty'>暂无活动</View>
+
+    return list.map(item => (
+      <View key={item.id} className='activity-card' onClick={() => goDetail(item.id)}>
+        <Image src={item.cover_image || 'https://via.placeholder.com/350x150'} mode='aspectFill' className='cover' />
+        <View className='info'>
+          <View className='header'>
+            <Text className='title'>{item.title}</Text>
+            <Text className={`status ${item.status}`}>{getStatusText(item.status)}</Text>
+          </View>
+          <View className='meta'>
+            <Text>📅 {new Date(item.start_time).toLocaleDateString()}</Text>
+            <Text>📍 {item.location || '线上活动'}</Text>
+          </View>
+          {tab === 'mine' && (
+              <View className='signup-status'>
+                  <Text>已报名</Text>
+              </View>
+          )}
+        </View>
+      </View>
+    ))
+  }
+
+  return (
+    <View className='activity-page'>
+      <View className='tabs'>
+        <View className={`tab ${tab === 'all' ? 'active' : ''}`} onClick={() => setTab('all')}>精彩活动</View>
+        <View className={`tab ${tab === 'mine' ? 'active' : ''}`} onClick={() => setTab('mine')}>我的报名</View>
+      </View>
+
+      <View className='list-container'>
+        {renderList(tab === 'all' ? activities : mySignups)}
+      </View>
+    </View>
+  )
+}
+
+export default ActivityList