You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
457 lines
13 KiB
457 lines
13 KiB
// 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);
|
|
}
|
|
}
|
|
});
|