wxamp-ymtxUser/pagesB/pages/training/training.js

// pages/training/training.js
Page({
  data: {
    currentTab: 0,
    searchKeyword: '',
    articleActiveCategory: 'all',
    videoActiveCategory: 'all',
    
    // 文章数据
    articles: [
      {
        id: 1,
        title: '微信小程序开发最佳实践',
        description: '深度解析小程序性能优化方案，助你打造流畅用户体验',
        cover: 'https://via.placeholder.com/400x300/3498db/ffffff?text=小程序',
        category: '技术干货',
        author: '张技术',
        readTime: 15,
        date: '2024-01-15',
        views: 2345,
        likes: 189,
        categoryId: 'tech'
      },
      {
        id: 2,
        title: '企业数字化转型的关键路径',
        description: '传统企业如何通过数字化实现业务增长与效率提升',
        cover: 'https://via.placeholder.com/400x300/2ecc71/ffffff?text=数字化',
        category: '商业思维',
        author: '李商业',
        readTime: 20,
        date: '2024-01-12',
        views: 1567,
        likes: 234,
        categoryId: 'business'
      },
      {
        id: 3,
        title: '高效团队管理的7个秘诀',
        description: '打造高绩效团队的实用方法与技巧',
        cover: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=管理',
        category: '管理技能',
        author: '王经理',
        readTime: 12,
        date: '2024-01-10',
        views: 3210,
        likes: 456,
        categoryId: 'management'
      },
      {
        id: 4,
        title: '前端工程师的职业发展路径',
        description: '从初级到专家，前端工程师的成长路线图',
        cover: 'https://via.placeholder.com/400x300/9b59b6/ffffff?text=前端',
        category: '职业发展',
        author: '赵前端',
        readTime: 18,
        date: '2024-01-08',
        views: 1890,
        likes: 345,
        categoryId: 'career'
      },
      {
        id: 5,
        title: '云原生架构设计与实践',
        description: '基于云原生技术的现代应用架构方案',
        cover: 'https://via.placeholder.com/400x300/1abc9c/ffffff?text=云原生',
        category: '技术干货',
        author: '钱架构',
        readTime: 25,
        date: '2024-01-05',
        views: 2789,
        likes: 512,
        categoryId: 'tech'
      },
      {
        id: 6,
        title: '人工智能在商业中的应用',
        description: 'AI技术如何赋能传统行业实现智能化升级',
        cover: 'https://via.placeholder.com/400x300/f39c12/ffffff?text=AI',
        category: '商业思维',
        author: '孙智能',
        readTime: 22,
        date: '2024-01-03',
        views: 4321,
        likes: 678,
        categoryId: 'business'
      }
    ],
    
    // 视频数据
    videos: [
      {
        id: 1,
        title: 'Vue.js 3.0 核心源码解析',
        cover: 'https://via.placeholder.com/400x300/3498db/ffffff?text=Vue3',
        duration: '45:23',
        instructor: {
          name: '前端大神',
          avatar: 'https://via.placeholder.com/40/3498db/ffffff?text=FS'
        },
        level: '高级',
        views: '12.3k',
        tags: ['Vue', '前端', '源码'],
        category: 'tech',
        isRecommended: true
      },
      {
        id: 2,
        title: 'React Hooks 深度解析',
        cover: 'https://via.placeholder.com/400x300/2ecc71/ffffff?text=React',
        duration: '38:45',
        instructor: {
          name: 'React专家',
          avatar: 'https://via.placeholder.com/40/2ecc71/ffffff?text=RE'
        },
        level: '中级',
        views: '8.7k',
        tags: ['React', 'Hooks', '前端'],
        category: 'tech',
        isRecommended: true
      },
      {
        id: 3,
        title: '产品经理必备的7个思维模型',
        cover: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=产品',
        duration: '52:12',
        instructor: {
          name: '产品专家',
          avatar: 'https://via.placeholder.com/40/e74c3c/ffffff?text=PM'
        },
        level: '中级',
        views: '15.2k',
        tags: ['产品', '思维', '方法论'],
        category: 'business',
        isRecommended: false
      },
      {
        id: 4,
        title: 'Python 数据分析实战',
        cover: 'https://via.placeholder.com/400x300/9b59b6/ffffff?text=Python',
        duration: '41:36',
        instructor: {
          name: '数据科学家',
          avatar: 'https://via.placeholder.com/40/9b59b6/ffffff?text=DS'
        },
        level: '初级',
        views: '23.4k',
        tags: ['Python', '数据分析', '实战'],
        category: 'tech',
        isRecommended: true
      },
      {
        id: 5,
        title: '高效沟通的艺术与技巧',
        cover: 'https://via.placeholder.com/400x300/1abc9c/ffffff?text=沟通',
        duration: '36:58',
        instructor: {
          name: '沟通专家',
          avatar: 'https://via.placeholder.com/40/1abc9c/ffffff?text=CM'
        },
        level: '初级',
        views: '9.8k',
        tags: ['沟通', '职场', '技巧'],
        category: 'management',
        isRecommended: false
      },
      {
        id: 6,
        title: 'Node.js 高性能服务开发',
        cover: 'https://via.placeholder.com/400x300/f39c12/ffffff?text=Node',
        duration: '55:42',
        instructor: {
          name: '后端架构师',
          avatar: 'https://via.placeholder.com/40/f39c12/ffffff?text=BE'
        },
        level: '高级',
        views: '6.5k',
        tags: ['Node.js', '后端', '性能'],
        category: 'tech',
        isRecommended: false
      },
      {
        id: 7,
        title: '职场晋升的底层逻辑',
        cover: 'https://via.placeholder.com/400x300/34495e/ffffff?text=晋升',
        duration: '33:27',
        instructor: {
          name: '职业规划师',
          avatar: 'https://via.placeholder.com/40/34495e/ffffff?text=CD'
        },
        level: '中级',
        views: '11.2k',
        tags: ['职场', '晋升', '规划'],
        category: 'career',
        isRecommended: true
      },
      {
        id: 8,
        title: 'JavaScript 入门到精通',
        cover: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=JS',
        duration: '1:15:30',
        instructor: {
          name: '前端导师',
          avatar: 'https://via.placeholder.com/40/e74c3c/ffffff?text=JS'
        },
        level: '初级',
        views: '45.6k',
        tags: ['JavaScript', '入门', '教程'],
        category: 'tech',
        isRecommended: true
      },
      {
        id: 9,
        title: '商业计划书撰写指南',
        cover: 'https://via.placeholder.com/400x300/1abc9c/ffffff?text=商业',
        duration: '28:45',
        instructor: {
          name: '商业顾问',
          avatar: 'https://via.placeholder.com/40/1abc9c/ffffff?text=BC'
        },
        level: '中级',
        views: '7.3k',
        tags: ['商业', '创业', '计划书'],
        category: 'business',
        isRecommended: false
      },
      {
        id: 10,
        title: '团队领导力提升训练',
        cover: 'https://via.placeholder.com/400x300/9b59b6/ffffff?text=领导力',
        duration: '49:18',
        instructor: {
          name: '领导力教练',
          avatar: 'https://via.placeholder.com/40/9b59b6/ffffff?text=LC'
        },
        level: '高级',
        views: '5.9k',
        tags: ['领导力', '管理', '团队'],
        category: 'management',
        isRecommended: true
      }
    ],
    
    filteredArticles: [],
    filteredVideos: []
  },

  onLoad() {
    // 初始化数据
    this.setData({
      filteredArticles: this.data.articles,
      filteredVideos: this.data.videos
    });
  },

  // 切换主选项卡
  switchTab(e) {
    const tab = parseInt(e.currentTarget.dataset.tab);
    this.setData({
      currentTab: tab,
      searchKeyword: ''
    });
    
    // 重置筛选结果
    if (tab === 0) {
      this.setData({
        filteredArticles: this.filterArticles('', this.data.articleActiveCategory)
      });
    } else {
      this.setData({
        filteredVideos: this.filterVideos('', this.data.videoActiveCategory)
      });
    }
  },

  // 搜索输入
  onSearchInput(e) {
    const keyword = e.detail.value;
    this.setData({ searchKeyword: keyword });
    
    if (this.data.currentTab === 0) {
      this.setData({
        filteredArticles: this.filterArticles(keyword, this.data.articleActiveCategory)
      });
    } else {
      this.setData({
        filteredVideos: this.filterVideos(keyword, this.data.videoActiveCategory)
      });
    }
  },

  // 选择文章分类
  selectArticleCategory(e) {
    const category = e.currentTarget.dataset.category;
    this.setData({ articleActiveCategory: category });
    this.setData({
      filteredArticles: this.filterArticles(this.data.searchKeyword, category)
    });
  },

  // 选择视频分类
  selectVideoCategory(e) {
    const category = e.currentTarget.dataset.category;
    this.setData({ videoActiveCategory: category });
    this.setData({
      filteredVideos: this.filterVideos(this.data.searchKeyword, category)
    });
  },

  // 筛选文章函数
  filterArticles(keyword, category) {
    let filtered = this.data.articles;
    
    // 按分类筛选
    if (category !== 'all') {
      const categoryMap = {
        'tech': '技术干货',
        'business': '商业思维',
        'management': '管理技能',
        'career': '职业发展'
      };
      
      filtered = filtered.filter(item => item.category === categoryMap[category]);
    }
    
    // 按关键词筛选
    if (keyword) {
      const lowerKeyword = keyword.toLowerCase();
      filtered = filtered.filter(item =>
        item.title.toLowerCase().includes(lowerKeyword) ||
        item.description.toLowerCase().includes(lowerKeyword) ||
        item.author.toLowerCase().includes(lowerKeyword) ||
        item.category.toLowerCase().includes(lowerKeyword)
      );
    }
    
    return filtered;
  },

  // 筛选视频函数
  filterVideos(keyword, category) {
    let filtered = this.data.videos;
    
    // 按分类筛选
    if (category !== 'all') {
      switch (category) {
        case 'recommend':
          filtered = filtered.filter(item => item.isRecommended);
          break;
        case 'tech':
          filtered = filtered.filter(item => item.category === 'tech');
          break;
        case 'business':
          filtered = filtered.filter(item => item.category === 'business');
          break;
        case 'management':
          filtered = filtered.filter(item => item.category === 'management');
          break;
        case 'career':
          filtered = filtered.filter(item => item.category === 'career');
          break;
        case 'beginner':
          filtered = filtered.filter(item => item.level === '初级');
          break;
        case 'advanced':
          filtered = filtered.filter(item => item.level === '中级' || item.level === '高级');
          break;
      }
    }
    
    // 按关键词筛选
    if (keyword) {
      const lowerKeyword = keyword.toLowerCase();
      filtered = filtered.filter(item =>
        item.title.toLowerCase().includes(lowerKeyword) ||
        item.tags.some(tag => tag.toLowerCase().includes(lowerKeyword)) ||
        item.instructor.name.toLowerCase().includes(lowerKeyword) ||
        item.level.toLowerCase().includes(lowerKeyword)
      );
    }
    
    return filtered;
  },

  // 查看文章详情
  viewArticleDetail(e) {
    const id = e.currentTarget.dataset.id;

  },

  // 播放视频
  playVideo(e) {
    const id = e.currentTarget.dataset.id;


  },

  // 下拉刷新
  onPullDownRefresh() {
    wx.showLoading({
      title: '刷新中...'
    });
    
    // 模拟网络请求
    setTimeout(() => {
      // 重置数据
      this.setData({
        filteredArticles: this.data.articles,
        filteredVideos: this.data.videos,
        articleActiveCategory: 'all',
        videoActiveCategory: 'all',
        searchKeyword: ''
      });
      
      wx.hideLoading();
      wx.stopPullDownRefresh();
      wx.showToast({
        title: '刷新成功',
        icon: 'success'
      });
    }, 1000);
  },

  // 上拉加载更多
  onReachBottom() {
    if (this.data.currentTab === 0) {
      // 文章加载更多
      wx.showLoading({
        title: '加载更多文章...'
      });
      
      setTimeout(() => {
        // 这里可以添加更多文章数据
        wx.hideLoading();
        wx.showToast({
          title: '没有更多了',
          icon: 'none'
        });
      }, 1000);
    } else {
      // 视频加载更多
      wx.showLoading({
        title: '加载更多视频...'
      });
      
      setTimeout(() => {
        // 这里可以添加更多视频数据
        wx.hideLoading();
        wx.showToast({
          title: '没有更多了',
          icon: 'none'
        });
      }, 1000);
    }
  }
});