// 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); } } });