toutoukan_front/miniprogram/pages/activities/activities.ts

// 定义活动数据类型
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}`
    });
  }
});