352 lines
13 KiB
JavaScript
352 lines
13 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
||
// 学科名称映射
|
||
const subjectMap = {
|
||
'live': '生活',
|
||
'language': '语文',
|
||
'math': '数学'
|
||
};
|
||
|
||
// 年级名称映射
|
||
const gradeNames = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'];
|
||
|
||
// 学期名称
|
||
const semesterNames = ['上册', '下册'];
|
||
|
||
// 当前视图状态
|
||
let currentView = {
|
||
mode: 'semester', // 'semester' | 'courses'
|
||
subject: null,
|
||
grade: null,
|
||
semester: null
|
||
};
|
||
|
||
// 根据学科、年级、学期动态生成图片路径的函数
|
||
function getCourseImagePath(subject, gradeIndex, semesterIndex) {
|
||
const subjectPrefix = {
|
||
'math': 'math',
|
||
'language': 'chinese', // 如果有语文图片的话
|
||
'live': 'life' // 如果有生活图片的话
|
||
};
|
||
|
||
const gradeNumber = gradeIndex + 1; // 转换为1-6
|
||
const semesterText = semesterIndex === 0 ? '上' : '下';
|
||
|
||
const prefix = subjectPrefix[subject] || subject;
|
||
return `../asset/course_img/${prefix}${gradeNumber}${semesterText}.png`;
|
||
}
|
||
|
||
// 当前选中的筛选条件
|
||
let currentFilters = {
|
||
subject: 'math', // 默认选中数学
|
||
grade: 1 // 默认选中二年级 (索引1)
|
||
};
|
||
|
||
// 生成学科标签
|
||
function generateSubjectTags() {
|
||
const container = document.getElementById('subject-tags');
|
||
const courseList = GLOBAL_CONFIG.courseList;
|
||
|
||
Object.keys(courseList).forEach((subject, index) => {
|
||
const tag = document.createElement('div');
|
||
tag.className = 'filter-tag';
|
||
tag.textContent = subjectMap[subject] || subject;
|
||
tag.dataset.subject = subject;
|
||
|
||
if (subject === currentFilters.subject) {
|
||
tag.classList.add('active');
|
||
}
|
||
|
||
tag.addEventListener('click', function () {
|
||
container.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
currentFilters.subject = subject;
|
||
|
||
// 重置视图状态
|
||
currentView.mode = 'semester';
|
||
updateCourseDisplay();
|
||
});
|
||
|
||
container.appendChild(tag);
|
||
});
|
||
}
|
||
|
||
// 生成类别标签
|
||
function getCate() {
|
||
const container = document.getElementById('Category');
|
||
|
||
if (!container) {
|
||
console.warn('Category container not found');
|
||
return;
|
||
}
|
||
|
||
const cates = ['培智学校'];
|
||
container.innerHTML = '';
|
||
|
||
cates.forEach((category, index) => {
|
||
const tag = document.createElement('div');
|
||
tag.className = 'filter-tag';
|
||
tag.textContent = category;
|
||
tag.dataset.category = category;
|
||
|
||
if (index === 0) {
|
||
tag.classList.add('active');
|
||
if (typeof currentFilters !== 'undefined') {
|
||
currentFilters.category = category;
|
||
}
|
||
}
|
||
|
||
tag.addEventListener('click', function () {
|
||
container.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
|
||
if (typeof currentFilters !== 'undefined') {
|
||
currentFilters.category = category;
|
||
}
|
||
|
||
// 重置视图状态
|
||
currentView.mode = 'semester';
|
||
updateCourseDisplay();
|
||
});
|
||
|
||
container.appendChild(tag);
|
||
});
|
||
}
|
||
|
||
// 生成年级标签
|
||
function generateGradeTags() {
|
||
const container = document.getElementById('grade-tags');
|
||
|
||
gradeNames.forEach((gradeName, index) => {
|
||
const tag = document.createElement('div');
|
||
tag.className = 'filter-tag';
|
||
tag.textContent = gradeName;
|
||
tag.dataset.grade = index;
|
||
|
||
if (index === currentFilters.grade) {
|
||
tag.classList.add('active');
|
||
}
|
||
|
||
tag.addEventListener('click', function () {
|
||
container.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
currentFilters.grade = index;
|
||
|
||
// 重置视图状态
|
||
currentView.mode = 'semester';
|
||
updateCourseDisplay();
|
||
});
|
||
|
||
container.appendChild(tag);
|
||
});
|
||
}
|
||
|
||
// 创建返回按钮
|
||
function createBackButton() {
|
||
const backBtn = document.createElement('div');
|
||
backBtn.className = 'back-button';
|
||
backBtn.innerHTML = `
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="m12 19-7-7 7-7"/>
|
||
<path d="m19 12H5"/>
|
||
</svg>
|
||
返回学期选择
|
||
`;
|
||
|
||
backBtn.addEventListener('click', function () {
|
||
currentView.mode = 'semester';
|
||
updateCourseDisplay();
|
||
});
|
||
|
||
return backBtn;
|
||
}
|
||
|
||
// 显示学期卡片
|
||
function displaySemesterCards() {
|
||
const container = document.getElementById('materials-container');
|
||
const courseList = GLOBAL_CONFIG.courseList;
|
||
|
||
// 清空现有内容
|
||
container.innerHTML = '';
|
||
container.className = 'materials-grid'; // 重置为学期卡片样式
|
||
|
||
// 为上册和下册分别创建卡片
|
||
semesterNames.forEach((semesterName, semesterIndex) => {
|
||
const courses = courseList[currentFilters.subject]?.[currentFilters.grade]?.[semesterIndex] || [];
|
||
const bookImage = getCourseImagePath(currentFilters.subject, currentFilters.grade, semesterIndex);
|
||
|
||
const card = document.createElement('div');
|
||
card.className = 'material-card';
|
||
|
||
if (courses.length === 0) {
|
||
card.innerHTML = `
|
||
<div class="material-cover">
|
||
<div class="material-image" style="background-image: url('${bookImage}');"></div>
|
||
<div class="material-info">
|
||
<h3>${subjectMap[currentFilters.subject]} ${gradeNames[currentFilters.grade]} ${semesterName}</h3>
|
||
<div class="material-meta">
|
||
<span style="color: #666; font-size: 14px;">暂无课程内容</span>
|
||
</div>
|
||
<div class="course-stats">
|
||
此册正在筹备中...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else {
|
||
card.innerHTML = `
|
||
<div class="material-cover">
|
||
<div class="material-image" style="background-image: url('${bookImage}');"></div>
|
||
<div class="material-info">
|
||
<h3>${subjectMap[currentFilters.subject]} ${gradeNames[currentFilters.grade]} ${semesterName}</h3>
|
||
<div class="material-meta">
|
||
<span style="color: #666; font-size: 14px;">共${courses.length}个课程</span>
|
||
</div>
|
||
<div class="course-stats">
|
||
点击进入章节学习
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 添加点击事件
|
||
card.addEventListener('click', function () {
|
||
currentView.mode = 'courses';
|
||
currentView.subject = currentFilters.subject;
|
||
currentView.grade = currentFilters.grade;
|
||
currentView.semester = semesterIndex;
|
||
updateCourseDisplay();
|
||
});
|
||
}
|
||
|
||
container.appendChild(card);
|
||
});
|
||
}
|
||
|
||
// 显示课程列表
|
||
function displayCourseList() {
|
||
const container = document.getElementById('materials-container');
|
||
const courseList = GLOBAL_CONFIG.courseList;
|
||
const classObject = GLOBAL_CONFIG.classObject;
|
||
|
||
// 清空现有内容
|
||
container.innerHTML = '';
|
||
container.className = 'course-grid'; // 使用课程卡片样式
|
||
|
||
// 添加返回按钮
|
||
const backBtn = createBackButton();
|
||
container.appendChild(backBtn);
|
||
|
||
// 获取当前学期的课程
|
||
const courses = courseList[currentView.subject]?.[currentView.grade]?.[currentView.semester] || [];
|
||
|
||
if (courses.length === 0) {
|
||
const emptyCourse = document.createElement('div');
|
||
emptyCourse.className = 'empty-course';
|
||
emptyCourse.innerHTML = `
|
||
<div class="empty-content">
|
||
<h3>暂无课程</h3>
|
||
<p>该学期的课程正在筹备中...</p>
|
||
</div>
|
||
`;
|
||
container.appendChild(emptyCourse);
|
||
return;
|
||
}
|
||
|
||
// 创建课程卡片
|
||
courses.forEach((course, index) => {
|
||
const courseData = classObject[currentView.subject]?.[course.id];
|
||
|
||
const courseCard = document.createElement('div');
|
||
courseCard.className = 'course-card';
|
||
|
||
// 生成课程图片路径 - 根据实际的命名规则
|
||
function getCourseSpecificImagePath(subject, grade, semester, courseIndex) {
|
||
const subjectPrefix = {
|
||
'math': 'math',
|
||
'language': 'chinese',
|
||
'live': 'life'
|
||
};
|
||
|
||
const gradeNumber = grade + 1;
|
||
const semesterText = semester === 0 ? '上' : '下';
|
||
const prefix = subjectPrefix[subject] || subject;
|
||
|
||
// 课程编号从1开始，所以是 courseIndex + 1
|
||
return `../asset/course_img/${prefix}${gradeNumber}${semesterText}${courseIndex + 1}.png`;
|
||
}
|
||
|
||
const courseImage = getCourseSpecificImagePath(currentView.subject, currentView.grade, currentView.semester, index);
|
||
|
||
courseCard.innerHTML = `
|
||
<div class="course-cover">
|
||
<div class="course-image" style="background-image: url('${courseImage}');"></div>
|
||
<div class="course-info">
|
||
<h4>${course.name}</h4>
|
||
<p class="course-description">${course.des}</p>
|
||
<div class="course-action">
|
||
${courseData ? '开始学习' : '课程筹备中'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 如果有课程数据，添加点击事件
|
||
if (courseData) {
|
||
courseCard.addEventListener('click', function () {
|
||
// 这里可以跳转到具体的课程页面
|
||
console.log('进入课程:', course.id);
|
||
// window.location.href = `course.html?id=${course.id}`;
|
||
window.open(`./courseHome.html?id=${course.id}`);
|
||
});
|
||
courseCard.style.cursor = 'pointer';
|
||
} else {
|
||
courseCard.classList.add('disabled');
|
||
}
|
||
|
||
container.appendChild(courseCard);
|
||
});
|
||
}
|
||
|
||
// 更新课程显示
|
||
function updateCourseDisplay() {
|
||
if (currentView.mode === 'semester') {
|
||
displaySemesterCards();
|
||
} else if (currentView.mode === 'courses') {
|
||
displayCourseList();
|
||
}
|
||
}
|
||
|
||
// 侧边栏菜单交互
|
||
document.querySelectorAll('.sidebar-menu a').forEach(link => {
|
||
link.addEventListener('click', function () {
|
||
document.querySelectorAll('.sidebar-menu li').forEach(li => li.classList.remove('active'));
|
||
this.parentElement.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// 初始化页面
|
||
generateSubjectTags();
|
||
generateGradeTags();
|
||
updateCourseDisplay();
|
||
getCate();
|
||
|
||
// 1、导航条切换
|
||
const navItems = document.querySelectorAll('.container-header-nav > div');
|
||
|
||
navItems.forEach(function (item) {
|
||
item.addEventListener('click', function () {
|
||
// 移除所有 div 元素的 active 类
|
||
navItems.forEach(function (navItem) {
|
||
navItem.classList.remove('active');
|
||
});
|
||
|
||
// 为当前点击的 div 元素添加 active 类
|
||
this.classList.add('active');
|
||
|
||
// 打开对应的数据 URL 页面
|
||
const url = this.getAttribute('data-url');
|
||
window.open(`./${url}.html`);
|
||
});
|
||
});
|
||
});
|