wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web-学习

Browse Source
This commit is contained in:
wangys
2025-10-24 18:28:35 +08:00
parent 8968409b2d
commit bc84bd82cc
16 changed files with 1090 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
schoolNewsWeb/src/views/course/components/CourseLearning.vue
View File

@@ -4,7 +4,7 @@
<div class="learning-header">
<div class="header-left">
<el-button @click="handleBack" :icon="ArrowLeft" text>
返回课程详情
{{ backButtonText }}
</el-button>
<span class="course-name">{{ courseVO?.course.name }}</span>
</div>
@@ -17,13 +17,18 @@
</div>
<div class="learning-container">
<!-- 浮动展开按钮（侧边栏收起时显示） -->
<div v-if="sidebarCollapsed" class="float-expand-btn" @click="toggleSidebar">
<el-button circle :icon="Expand" />
</div>
<!-- 左侧：章节目录 -->
<div class="chapter-sidebar" :class="{ collapsed: sidebarCollapsed }">
<div class="sidebar-header">
<span class="sidebar-title">课程目录</span>
<el-button
text
:icon="sidebarCollapsed ? Expand : Fold"
:icon="Fold"
@click="toggleSidebar"
/>
</div>
@@ -85,7 +90,12 @@
</div>
<!-- 右侧：学习内容区 -->
<div class="content-area" :class="{ expanded: sidebarCollapsed }">
<div
ref="contentAreaRef"
class="content-area"
:class="{ expanded: sidebarCollapsed }"
@scroll="handleContentScroll"
>
<!-- 加载中 -->
<div v-if="loading" class="loading-container">
<el-skeleton :rows="8" animated />
@@ -194,7 +204,8 @@
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import {
ArrowLeft,
@@ -220,11 +231,13 @@ interface Props {
courseId: string;
chapterIndex?: number;
nodeIndex?: number;
backButtonText?: string;
}
const props = withDefaults(defineProps<Props>(), {
chapterIndex: 0,
nodeIndex: 0
nodeIndex: 0,
backButtonText: '返回课程详情'
});
const emit = defineEmits<{
@@ -232,7 +245,8 @@ const emit = defineEmits<{
}>();
const store = useStore();
const authStore = computed(() => store.state.auth);
const userInfo = computed(() => store.getters['auth/user']);
const route = useRoute();
const loading = ref(false);
const courseVO = ref<CourseVO | null>(null);
@@ -241,12 +255,19 @@ const currentNodeIndex = ref(0);
const sidebarCollapsed = ref(false);
const activeChapters = ref<number[]>([0]);
const articleData = ref<any>(null);
const contentAreaRef = ref<HTMLElement | null>(null);
// 学习记录
const learningRecord = ref<LearningRecord | null>(null);
const completedNodes = ref<Set<string>>(new Set());
const learningStartTime = ref<number>(0);
const learningTimer = ref<number | null>(null);
const hasScrolledToBottom = ref(false);
const previousNodeKey = ref<string | null>(null);
// 富文本视频跟踪
const totalRichTextVideos = ref(0);
const completedRichTextVideos = ref<Set<number>>(new Set());
// 当前节点
const currentNode = computed(() => {
@@ -371,30 +392,55 @@ async function loadCourse() {
// 加载学习记录
async function loadLearningRecord() {
if (!authStore.value.userInfo?.userID) return;
if (!userInfo.value?.id) return;
try {
const res = await learningRecordApi.getRecordList({
userID: authStore.value.userInfo.userID,
const res = await learningRecordApi.getCourseLearningRecord({
userID: userInfo.value.id,
resourceType: 2, // 课程
resourceID: props.courseId
courseID: props.courseId
});
if (res.success && res.dataList && res.dataList.length > 0) {
learningRecord.value = res.dataList[0];
// TODO: 从后端获取已完成的节点列表
// 这里暂时用本地存储模拟
// 从本地存储加载已完成的节点列表
const savedProgress = localStorage.getItem(`course_${props.courseId}_nodes`);
if (savedProgress) {
completedNodes.value = new Set(JSON.parse(savedProgress));
}
} else {
// 没有学习记录，创建新的
await createLearningRecord();
}
} catch (error) {
console.error('加载学习记录失败:', error);
}
}
// 创建学习记录
async function createLearningRecord() {
if (!userInfo.value?.id) return;
try {
const res = await learningRecordApi.createRecord({
userID: userInfo.value.id,
resourceType: 2, // 课程
courseID: props.courseId,
chapterID: courseVO.value?.courseChapters[currentChapterIndex.value].chapter.chapterID,
nodeID: courseVO.value?.courseChapters[currentChapterIndex.value].nodes[currentNodeIndex.value].nodeID,
taskID: route.query.taskId as string
});
if (res.success && res.data) {
learningRecord.value = res.data;
console.log('学习记录创建成功');
}
} catch (error) {
console.error('创建学习记录失败:', error);
}
}
// 加载节点内容
async function loadNodeContent() {
if (!currentNode.value) return;
@@ -423,9 +469,28 @@ async function loadNodeContent() {
}
// 选择节点
function selectNode(chapterIndex: number, nodeIndex: number) {
async function selectNode(chapterIndex: number, nodeIndex: number) {
// 检查前一个节点是否需要标记完成
if (previousNodeKey.value && (hasScrolledToBottom.value || !hasScrollbar())) {
await markNodeComplete(previousNodeKey.value);
}
// 切换到新节点
currentChapterIndex.value = chapterIndex;
currentNodeIndex.value = nodeIndex;
// 重置滚动状态
hasScrolledToBottom.value = false;
previousNodeKey.value = `${chapterIndex}-${nodeIndex}`;
// 滚动到顶部
if (contentAreaRef.value) {
contentAreaRef.value.scrollTop = 0;
}
// 等待 DOM 更新后初始化视频监听
await nextTick();
initRichTextVideoListeners();
}
// 上一节
@@ -458,17 +523,11 @@ function gotoNext() {
}
// 标记为完成
function markAsComplete() {
async function markAsComplete() {
if (!currentNode.value) return;
const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
completedNodes.value.add(nodeKey);
// 保存到本地存储
localStorage.setItem(
`course_${props.courseId}_nodes`,
JSON.stringify(Array.from(completedNodes.value))
);
await markNodeComplete(nodeKey);
ElMessage.success('已标记为完成');
@@ -477,13 +536,7 @@ function markAsComplete() {
setTimeout(() => {
gotoNext();
}, 500);
} else {
// 课程全部完成
ElMessage.success('恭喜你完成了整个课程！');
}
// 更新学习进度
saveLearningProgress();
}
// 判断节点是否完成
@@ -496,10 +549,15 @@ function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
function startLearningTimer() {
learningStartTime.value = Date.now();
// 每分钟保存一次学习进度
// 每10秒保存一次学习进度（如果未完成）
learningTimer.value = window.setInterval(() => {
// 如果课程已完成，停止定时器
if (learningRecord.value?.isComplete) {
stopLearningTimer();
return;
}
saveLearningProgress();
}, 60000); // 60秒
}, 10000); // 10秒
}
// 停止学习计时
@@ -512,19 +570,34 @@ function stopLearningTimer() {
// 保存学习进度
async function saveLearningProgress() {
if (!authStore.value.userInfo?.userID || !learningRecord.value) return;
if (!userInfo.value?.id || !learningRecord.value) return;
// 如果课程已完成，不再保存进度
if (learningRecord.value.isComplete) {
console.log('课程已完成，跳过进度保存');
return;
}
const currentTime = Date.now();
const duration = Math.floor((currentTime - learningStartTime.value) / 1000); // 秒
try {
await learningRecordApi.updateRecord({
...learningRecord.value,
const updatedRecord = {
id: learningRecord.value.id,
userID: userInfo.value.id,
resourceType: 2,
resourceID: props.courseId,
duration: (learningRecord.value.duration || 0) + duration,
progress: currentProgress.value,
isComplete: currentProgress.value === 100,
lastLearnTime: new Date().toISOString()
});
isComplete: currentProgress.value === 100
};
await learningRecordApi.updateRecord(updatedRecord);
// 更新本地记录
learningRecord.value.duration = updatedRecord.duration;
learningRecord.value.progress = updatedRecord.progress;
learningRecord.value.isComplete = updatedRecord.isComplete;
// 重置开始时间
learningStartTime.value = currentTime;
@@ -533,6 +606,78 @@ async function saveLearningProgress() {
}
}
// 标记节点完成
async function markNodeComplete(nodeKey: string) {
if (completedNodes.value.has(nodeKey)) return;
// 如果课程已完成，不再标记节点
if (learningRecord.value?.isComplete) {
console.log('课程已完成，跳过节点标记');
return;
}
completedNodes.value.add(nodeKey);
// 保存到本地存储
localStorage.setItem(
`course_${props.courseId}_nodes`,
JSON.stringify(Array.from(completedNodes.value))
);
// 更新学习进度
await saveLearningProgress();
// 如果全部完成，标记课程为完成
if (currentProgress.value === 100) {
await markCourseComplete();
}
}
// 标记课程完成
async function markCourseComplete() {
if (!userInfo.value?.id || !learningRecord.value) return;
try {
await learningRecordApi.markComplete({
id: learningRecord.value.id,
userID: userInfo.value.id,
resourceType: 2,
resourceID: props.courseId,
taskID: route.query.taskId as string,
progress: 100,
isComplete: true
});
ElMessage.success('恭喜你完成了整个课程！');
} catch (error) {
console.error('标记课程完成失败:', error);
}
}
// 检查是否有滚动条
function hasScrollbar(): boolean {
if (!contentAreaRef.value) return false;
return contentAreaRef.value.scrollHeight > contentAreaRef.value.clientHeight;
}
// 处理内容区域滚动
function handleContentScroll(event: Event) {
const target = event.target as HTMLElement;
const scrollTop = target.scrollTop;
const scrollHeight = target.scrollHeight;
const clientHeight = target.clientHeight;
// 判断是否滚动到底部（留10px容差）
if (scrollHeight - scrollTop - clientHeight < 10) {
if (!hasScrolledToBottom.value) {
hasScrolledToBottom.value = true;
// 滚动到底部，标记当前节点完成
const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
markNodeComplete(nodeKey);
}
}
}
// 处理视频进度
function handleVideoProgress(event: Event) {
// 可以在这里记录视频播放进度
@@ -552,6 +697,67 @@ function handleVideoEnded() {
}
}
// 初始化富文本中的视频监听器
function initRichTextVideoListeners() {
// 使用 setTimeout 确保 DOM 完全渲染
setTimeout(() => {
// 尝试多种选择器查找富文本内容区域
const selectors = [
'.node-content .rich-text-content',
'.content-area .rich-text-content',
'.rich-text-content'
];
let richTextContent: Element | null = null;
for (const selector of selectors) {
richTextContent = document.querySelector(selector);
if (richTextContent) {
break;
}
}
if (!richTextContent) {
return;
}
const videos = richTextContent.querySelectorAll('video');
if (videos.length === 0) {
return;
}
// 初始化视频数量和完成状态
totalRichTextVideos.value = videos.length;
completedRichTextVideos.value.clear();
// 监听所有视频的播放结束事件
videos.forEach((video, index) => {
const videoElement = video as HTMLVideoElement;
// 移除旧的监听器，避免重复添加
videoElement.removeEventListener('ended', () => handleRichTextVideoEnded(index));
// 添加新的监听器，传递视频索引
videoElement.addEventListener('ended', () => handleRichTextVideoEnded(index));
});
}, 300); // 延迟 300ms 确保 DOM 完全渲染
}
// 处理富文本视频播放结束
function handleRichTextVideoEnded(videoIndex: number) {
// 标记该视频已完成
completedRichTextVideos.value.add(videoIndex);
const completedCount = completedRichTextVideos.value.size;
// 检查是否所有视频都已完成
if (completedCount >= totalRichTextVideos.value) {
if (!isCurrentNodeCompleted.value) {
ElMessage.success(`所有视频播放完成 (${totalRichTextVideos.value}/${totalRichTextVideos.value})`);
markAsComplete();
}
}
}
// 处理音频进度
function handleAudioProgress(event: Event) {
const audio = event.target as HTMLAudioElement;
@@ -626,6 +832,7 @@ function handleBack() {
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
.header-left {
display: flex;
@@ -651,6 +858,18 @@ function handleBack() {
display: flex;
flex: 1;
height: calc(100vh - 61px);
position: relative;
}
.float-expand-btn {
position: absolute;
left: 16px;
top: 16px;
z-index: 10;
:deep(.el-button) {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
}
.chapter-sidebar {