添加活动列表页面

2025-09-28 01:01:21 +08:00
parent ca84b75bd1
commit 5faa33deda
6 changed files with 495 additions and 3 deletions
--- a/miniprogram/pages/activities/activities.ts
+++ b/miniprogram/pages/activities/activities.ts
@@ -0,0 +1,191 @@
+// 定义活动数据类型
+interface Activity {
+  id: number;
+  title: string;
+  description: string;
+  imageUrl: string;
+  startTime: string;
+  endTime: string;
+  participants: number;
+  category: string;
+  status: 'ongoing' | 'upcoming';
+}
+
+// 定义分类数据类型
+interface Category {
+  id: string;
+  name: string;
+}
+
+Page({
+  data: {
+    // 搜索关键词
+    searchKeyword: '',
+    
+    // 当前选中的分类
+    currentCategory: 'all',
+    
+    // 活动分类
+    categories: [] as Category[],
+    
+    // 所有活动数据
+    activities: [] as Activity[],
+    
+    // 过滤后的活动列表
+    filteredActivities: [] as Activity[]
+  },
+  
+  onLoad() {
+    // 初始化分类
+    this.initCategories();
+    
+    // 初始化活动数据
+    this.initActivities();
+  },
+  
+  // 初始化分类
+  initCategories() {
+    const categories: Category[] = [
+      { id: 'all', name: '全部活动' },
+      { id: 'online', name: '线上活动' },
+      { id: 'offline', name: '线下活动' },
+      { id: 'exhibition', name: '展览活动' },
+      { id: 'lecture', name: '讲座活动' }
+    ];
+    
+    this.setData({
+      categories
+    });
+  },
+  
+  // 初始化活动数据
+  initActivities() {
+    const activities: Activity[] = [
+      {
+        id: 1,
+        title: '2023年度科技创新峰会',
+        description: '汇聚行业精英，探讨科技创新趋势与未来发展方向',
+        imageUrl: 'https://picsum.photos/400/300?random=1',
+        startTime: '2023-10-15',
+        endTime: '2023-10-17',
+        participants: 356,
+        category: 'offline',
+        status: 'ongoing'
+      },
+      {
+        id: 2,
+        title: '数字艺术线上展览',
+        description: '探索数字艺术的无限可能，足不出户欣赏艺术盛宴',
+        imageUrl: 'https://picsum.photos/400/300?random=2',
+        startTime: '2023-10-10',
+        endTime: '2023-11-10',
+        participants: 1243,
+        category: 'online',
+        status: 'ongoing'
+      },
+      {
+        id: 3,
+        title: '环保志愿者招募活动',
+        description: '一起参与环保行动，为城市绿化贡献一份力量',
+        imageUrl: 'https://picsum.photos/400/300?random=3',
+        startTime: '2023-10-20',
+        endTime: '2023-10-20',
+        participants: 89,
+        category: 'offline',
+        status: 'upcoming'
+      },
+      {
+        id: 4,
+        title: '现代艺术作品展',
+        description: '展示当代艺术家的最新创作，感受艺术的多元魅力',
+        imageUrl: 'https://picsum.photos/400/300?random=4',
+        startTime: '2023-10-05',
+        endTime: '2023-10-25',
+        participants: 752,
+        category: 'exhibition',
+        status: 'ongoing'
+      },
+      {
+        id: 5,
+        title: '人工智能前沿讲座',
+        description: '知名专家解析AI发展现状与未来应用场景',
+        imageUrl: 'https://picsum.photos/400/300?random=5',
+        startTime: '2023-10-22',
+        endTime: '2023-10-22',
+        participants: 156,
+        category: 'lecture',
+        status: 'upcoming'
+      },
+      {
+        id: 6,
+        title: '创意写作工作坊',
+        description: '提升写作技巧，激发创作灵感，适合各类写作爱好者',
+        imageUrl: 'https://picsum.photos/400/300?random=6',
+        startTime: '2023-10-18',
+        endTime: '2023-10-25',
+        participants: 68,
+        category: 'offline',
+        status: 'upcoming'
+      }
+    ];
+    
+    this.setData({
+      activities,
+      filteredActivities: activities
+    });
+  },
+  
+  // 切换分类
+  switchCategory(e: { currentTarget: { dataset: { category: string } } }) {
+    const category = e.currentTarget.dataset.category;
+    this.setData({
+      currentCategory: category
+    }, () => {
+      this.filterActivities();
+    });
+  },
+  
+  // 搜索输入变化
+  onSearchInput(e: { detail: { value: string } }) {
+    const keyword = e.detail.value.trim();
+    this.setData({
+      searchKeyword: keyword
+    }, () => {
+      this.filterActivities();
+    });
+  },
+  
+  // 过滤活动列表
+  filterActivities() {
+    const { activities, currentCategory, searchKeyword } = this.data;
+    
+    let filtered = [...activities];
+    
+    // 按分类过滤
+    if (currentCategory !== 'all') {
+      filtered = filtered.filter(activity => activity.category === currentCategory);
+    }
+    
+    // 按搜索关键词过滤
+    if (searchKeyword) {
+      const keyword = searchKeyword.toLowerCase();
+      filtered = filtered.filter(activity => 
+        activity.title.toLowerCase().includes(keyword) || 
+        activity.description.toLowerCase().includes(keyword)
+      );
+    }
+    
+    this.setData({
+      filteredActivities: filtered
+    });
+  },
+  
+  // 跳转到活动详情页
+  navigateToDetail(e: { currentTarget: { dataset: { id: number } } }) {
+    const id = e.currentTarget.dataset.id;
+    wx.navigateTo({
+      url: `/pages/activityDetail/activityDetail?id=${id}`
+    });
+  }
+});
+