1318 lines
35 KiB
Vue
1318 lines
35 KiB
Vue
<template>
|
||
<div class="course-learning">
|
||
<!-- 学习页头部 -->
|
||
<div class="learning-header">
|
||
<div class="header-left">
|
||
<el-button @click="handleBack" :icon="ArrowLeft" text>
|
||
{{ backButtonText }}
|
||
</el-button>
|
||
<span class="course-name">{{ courseItemVO?.name }}</span>
|
||
</div>
|
||
|
||
<div class="header-right">
|
||
<span class="progress-info">
|
||
学习进度：{{ currentProgress }}%
|
||
</span>
|
||
</div>
|
||
</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="Fold" @click="toggleSidebar" />
|
||
</div>
|
||
|
||
<div v-if="!sidebarCollapsed" class="chapter-list">
|
||
<el-collapse v-model="activeChapters">
|
||
<el-collapse-item v-for="(chapterItem, chapterIndex) in courseItemVO?.chapters || []" :key="chapterIndex"
|
||
:name="chapterIndex">
|
||
<template #title>
|
||
<div class="chapter-item-title">
|
||
<span>{{ chapterIndex + 1 }}. {{ chapterItem.name }}</span>
|
||
<span class="chapter-count">{{ getChapterNodes(chapterIndex).length }}</span>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="node-items">
|
||
<div v-for="(node, nodeIndex) in getChapterNodes(chapterIndex)" :key="nodeIndex" class="node-item-bar" :class="{
|
||
active: currentChapterIndex === chapterIndex && currentNodeIndex === nodeIndex,
|
||
completed: isNodeCompleted(chapterIndex, nodeIndex)
|
||
}" @click="selectNode(chapterIndex, nodeIndex)">
|
||
<div class="node-item-content">
|
||
<el-icon v-if="isNodeCompleted(chapterIndex, nodeIndex)" class="check-icon">
|
||
<CircleCheck />
|
||
</el-icon>
|
||
<el-icon v-else class="node-type-icon">
|
||
<Document v-if="node.nodeType === 0" />
|
||
<Edit v-else-if="node.nodeType === 1" />
|
||
<Upload v-else />
|
||
</el-icon>
|
||
<span class="node-item-name">{{ node.name }}</span>
|
||
</div>
|
||
<div class="node-item-meta">
|
||
<el-tag v-if="node.isRequired === 1" type="danger" size="small" effect="plain">
|
||
必修
|
||
</el-tag>
|
||
<span v-if="node.duration" class="node-duration">
|
||
{{ node.duration }}分钟
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：学习内容区 -->
|
||
<div ref="contentAreaRef" class="content-area" :class="{ expanded: sidebarCollapsed }"
|
||
@scroll="handleContentScroll">
|
||
<!-- 加载中 -->
|
||
<div v-if="loading" class="loading-container">
|
||
<el-skeleton :rows="8" animated />
|
||
</div>
|
||
|
||
<!-- 节点内容 -->
|
||
<div v-else-if="currentNode" class="node-content">
|
||
<div class="node-header">
|
||
<h2 class="node-title">{{ currentNode.name }}</h2>
|
||
<div class="node-meta">
|
||
<el-tag v-if="currentNode.isRequired === 1" type="danger" size="small">
|
||
必修
|
||
</el-tag>
|
||
<span v-if="currentNode.duration" class="duration">
|
||
<el-icon>
|
||
<Clock />
|
||
</el-icon>
|
||
{{ currentNode.duration }} 分钟
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文章资源 -->
|
||
<div v-if="currentNode.nodeType === 0 && articleData" class="article-content">
|
||
<ArticleShow
|
||
:as-dialog="false"
|
||
:article-data="articleData"
|
||
:show-back-button="false"
|
||
@videos-completed="handleArticleVideosCompleted"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 富文本内容 -->
|
||
<div v-else-if="currentNode.nodeType === 1" class="rich-text-content" v-html="currentNode.content">
|
||
</div>
|
||
|
||
<!-- 文件内容 -->
|
||
<div v-else-if="currentNode.nodeType === 2" class="file-content">
|
||
<div v-if="isVideoFile(currentNode.videoUrl)" class="video-wrapper">
|
||
<video :src="getFileUrl(currentNode.videoUrl)" controls class="video-player"
|
||
@timeupdate="handleVideoProgress" @ended="handleVideoEnded">
|
||
您的浏览器不支持视频播放
|
||
</video>
|
||
</div>
|
||
<div v-else-if="isAudioFile(currentNode.videoUrl)" class="audio-wrapper">
|
||
<audio :src="getFileUrl(currentNode.videoUrl)" controls class="audio-player"
|
||
@timeupdate="handleAudioProgress" @ended="handleAudioEnded">
|
||
您的浏览器不支持音频播放
|
||
</audio>
|
||
</div>
|
||
<div v-else class="file-download">
|
||
<el-icon class="file-icon">
|
||
<Document />
|
||
</el-icon>
|
||
<p>文件资源</p>
|
||
<el-button type="primary" @click="downloadFile(currentNode.videoUrl)">
|
||
<el-icon>
|
||
<Download />
|
||
</el-icon>
|
||
下载文件
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 学习操作 -->
|
||
<div class="learning-actions">
|
||
<!-- 完成状态标签（仅显示，不可手动标记） -->
|
||
<el-tag v-if="isCurrentNodeCompleted" type="success" size="large">
|
||
<el-icon style="margin-right: 4px;">
|
||
<CircleCheck />
|
||
</el-icon>
|
||
已完成
|
||
</el-tag>
|
||
<el-tag v-else type="info" size="large">
|
||
<el-icon style="margin-right: 4px;">
|
||
<InfoFilled />
|
||
</el-icon>
|
||
学习中（滚动到底部或视频播放完成后自动标记）
|
||
</el-tag>
|
||
|
||
<div class="navigation-buttons">
|
||
<el-button @click="gotoPrevious" :disabled="!hasPrevious" :icon="ArrowLeft">
|
||
上一节
|
||
</el-button>
|
||
<el-button @click="gotoNext" :disabled="!hasNext" type="primary">
|
||
下一节
|
||
<el-icon>
|
||
<ArrowRight />
|
||
</el-icon>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 暂无内容 -->
|
||
<div v-else class="empty-content">
|
||
<el-empty description="暂无学习内容" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||
import { useRoute } from 'vue-router';
|
||
import { ElMessage } from 'element-plus';
|
||
import {
|
||
ArrowLeft,
|
||
ArrowRight,
|
||
Expand,
|
||
Fold,
|
||
CircleCheck,
|
||
Document,
|
||
Edit,
|
||
Upload,
|
||
Clock,
|
||
Download,
|
||
InfoFilled
|
||
} from '@element-plus/icons-vue';
|
||
import { ArticleShow } from '@/views/public/article';
|
||
import { courseApi } from '@/apis/study';
|
||
import { learningRecordApi, learningHistoryApi } from '@/apis/study';
|
||
import { resourceApi } from '@/apis/resource';
|
||
import { useStore } from 'vuex';
|
||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||
import type { CourseItemVO, LearningRecord, TbLearningHistory } from '@/types';
|
||
|
||
interface Props {
|
||
courseId: string;
|
||
chapterIndex?: number;
|
||
nodeIndex?: number;
|
||
backButtonText?: string;
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
chapterIndex: 0,
|
||
nodeIndex: 0,
|
||
backButtonText: '返回'
|
||
});
|
||
|
||
const emit = defineEmits<{
|
||
'back': [];
|
||
}>();
|
||
|
||
const store = useStore();
|
||
const userInfo = computed(() => store.getters['auth/user']);
|
||
const route = useRoute();
|
||
|
||
const loading = ref(false);
|
||
const courseItemVO = ref<CourseItemVO | null>(null);
|
||
const currentChapterIndex = ref(0);
|
||
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 learningHistory = ref<TbLearningHistory | null>(null);
|
||
const historyStartTime = ref<number>(0);
|
||
const historyTimer = ref<number | null>(null);
|
||
|
||
// 辅助函数：获取章节的节点列表
|
||
function getChapterNodes(chapterIndex: number): CourseItemVO[] {
|
||
if (!courseItemVO.value) return [];
|
||
const chapter = courseItemVO.value.chapters?.[chapterIndex];
|
||
if (!chapter?.chapterID) return [];
|
||
return courseItemVO.value.chapterNodes?.[chapter.chapterID] || [];
|
||
}
|
||
|
||
// 当前节点
|
||
const currentNode = computed(() => {
|
||
const nodes = getChapterNodes(currentChapterIndex.value);
|
||
return nodes[currentNodeIndex.value] || null;
|
||
});
|
||
|
||
// 当前进度
|
||
const currentProgress = computed(() => {
|
||
if (!courseItemVO.value || !courseItemVO.value.chapters) return 0;
|
||
|
||
let totalNodes = 0;
|
||
let completedCount = 0;
|
||
|
||
courseItemVO.value.chapters.forEach((chapter, chapterIdx) => {
|
||
const nodes = getChapterNodes(chapterIdx);
|
||
nodes.forEach((node, nodeIdx) => {
|
||
totalNodes++;
|
||
if (isNodeCompleted(chapterIdx, nodeIdx)) {
|
||
completedCount++;
|
||
}
|
||
});
|
||
});
|
||
|
||
if (totalNodes === 0) return 0;
|
||
return Math.round((completedCount / totalNodes) * 100);
|
||
});
|
||
|
||
// 是否有上一节
|
||
const hasPrevious = computed(() => {
|
||
if (currentChapterIndex.value === 0 && currentNodeIndex.value === 0) {
|
||
return false;
|
||
}
|
||
return true;
|
||
});
|
||
|
||
// 是否有下一节
|
||
const hasNext = computed(() => {
|
||
if (!courseItemVO.value || !courseItemVO.value.chapters) return false;
|
||
|
||
const chapters = courseItemVO.value.chapters;
|
||
const currentChapterNodes = getChapterNodes(currentChapterIndex.value);
|
||
|
||
// 不是当前章节的最后一个节点
|
||
if (currentNodeIndex.value < currentChapterNodes.length - 1) {
|
||
return true;
|
||
}
|
||
|
||
// 不是最后一章
|
||
if (currentChapterIndex.value < chapters.length - 1) {
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
});
|
||
|
||
// 当前节点是否完成
|
||
const isCurrentNodeCompleted = computed(() => {
|
||
return isNodeCompleted(currentChapterIndex.value, currentNodeIndex.value);
|
||
});
|
||
|
||
watch(() => props.courseId, (newId) => {
|
||
if (newId) {
|
||
loadCourse();
|
||
}
|
||
}, { immediate: true });
|
||
|
||
watch(() => [props.chapterIndex, props.nodeIndex], () => {
|
||
currentChapterIndex.value = props.chapterIndex || 0;
|
||
currentNodeIndex.value = props.nodeIndex || 0;
|
||
loadNodeContent();
|
||
}, { immediate: true });
|
||
|
||
watch(currentNode, async () => {
|
||
// 保存上一个节点的学习历史记录
|
||
if (learningHistory.value) {
|
||
await saveHistoryRecord();
|
||
stopHistoryTimer();
|
||
}
|
||
|
||
if (currentNode.value) {
|
||
loadNodeContent();
|
||
|
||
// 为新节点创建学习历史记录
|
||
await createHistoryRecord();
|
||
}
|
||
});
|
||
|
||
onMounted(() => {
|
||
// 不在这里启动定时器，等待学习记录加载完成后再启动
|
||
// startLearningTimer(); 移到loadLearningRecord和createLearningRecord成功后
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
stopLearningTimer();
|
||
saveLearningProgress();
|
||
|
||
// 保存学习历史记录
|
||
if (learningHistory.value) {
|
||
saveHistoryRecord();
|
||
}
|
||
stopHistoryTimer();
|
||
});
|
||
|
||
// 加载课程
|
||
async function loadCourse() {
|
||
loading.value = true;
|
||
try {
|
||
const res = await courseApi.getCourseProgress(props.courseId);
|
||
if (res.success && res.data) {
|
||
courseItemVO.value = res.data;
|
||
|
||
// 确保数据结构完整
|
||
if (!courseItemVO.value.chapters) {
|
||
courseItemVO.value.chapters = [];
|
||
}
|
||
if (!courseItemVO.value.chapterNodes) {
|
||
courseItemVO.value.chapterNodes = {};
|
||
}
|
||
|
||
// 加载学习记录
|
||
await loadLearningRecord();
|
||
}
|
||
} catch (error) {
|
||
console.error('加载课程失败:', error);
|
||
ElMessage.error('加载课程失败');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
// 加载学习记录
|
||
async function loadLearningRecord() {
|
||
if (!userInfo.value?.id) return;
|
||
|
||
try {
|
||
const res = await learningRecordApi.getCourseLearningRecord({
|
||
userID: userInfo.value.id,
|
||
resourceType: 2, // 课程
|
||
courseID: props.courseId
|
||
});
|
||
|
||
if (res.success && res.dataList && res.dataList.length > 0) {
|
||
learningRecord.value = res.dataList[0];
|
||
console.log('✅ 学习记录加载成功:', learningRecord.value);
|
||
|
||
// 从本地存储加载已完成的节点列表
|
||
const savedProgress = localStorage.getItem(`course_${props.courseId}_nodes`);
|
||
if (savedProgress) {
|
||
completedNodes.value = new Set(JSON.parse(savedProgress));
|
||
}
|
||
|
||
// 学习记录加载成功后，启动学习计时器
|
||
if (!learningRecord.value.isComplete) {
|
||
startLearningTimer();
|
||
console.log('⏱️ 学习计时器已启动');
|
||
}
|
||
} else {
|
||
// 没有学习记录，创建新的
|
||
await createLearningRecord();
|
||
}
|
||
} catch (error) {
|
||
console.error('加载学习记录失败:', error);
|
||
}
|
||
}
|
||
|
||
// 简单的字符串哈希函数
|
||
function hashString(str: string): string {
|
||
let hash = 0;
|
||
for (let i = 0; i < str.length; i++) {
|
||
const char = str.charCodeAt(i);
|
||
hash = ((hash << 5) - hash) + char;
|
||
hash = hash & hash; // Convert to 32bit integer
|
||
}
|
||
// 转换为16进制字符串，并确保长度一致
|
||
return Math.abs(hash).toString(16).padStart(8, '0') + str.substring(0, 8).replace(/[^a-zA-Z0-9]/g, '');
|
||
}
|
||
|
||
// 生成课程学习记录的taskId（当没有真实taskId时）
|
||
function generateCourseTaskId(
|
||
courseId: string,
|
||
chapterId?: string,
|
||
nodeId?: string,
|
||
userId?: string
|
||
): string {
|
||
// 使用简短格式，确保不超过50字符：SC_{组合hash}
|
||
// SC = Self-study Course
|
||
const combinedString = `${courseId}_${chapterId || ''}_${nodeId || ''}_${userId || ''}`;
|
||
const combinedHash = hashString(combinedString).substring(0, 20);
|
||
const courseHash = hashString(courseId).substring(0, 10);
|
||
return `SC_${courseHash}_${combinedHash}`; // 长度：3 + 10 + 1 + 20 = 34字符
|
||
}
|
||
|
||
// 创建学习记录
|
||
async function createLearningRecord() {
|
||
if (!userInfo.value?.id) return;
|
||
|
||
try {
|
||
const currentChapter = courseItemVO.value?.chapters?.[currentChapterIndex.value];
|
||
const currentNodeData = currentChapter?.chapterID ?
|
||
courseItemVO.value?.chapterNodes?.[currentChapter.chapterID]?.[currentNodeIndex.value] :
|
||
null;
|
||
|
||
const taskId = route.query.taskId as string;
|
||
// 如果没有taskId，生成一个自学任务ID
|
||
const effectiveTaskId = taskId || generateCourseTaskId(
|
||
props.courseId,
|
||
currentChapter?.chapterID,
|
||
currentNodeData?.nodeID,
|
||
userInfo.value.id
|
||
);
|
||
|
||
const res = await learningRecordApi.createRecord({
|
||
userID: userInfo.value.id,
|
||
resourceType: 2, // 课程
|
||
courseID: props.courseId,
|
||
chapterID: currentChapter?.chapterID,
|
||
nodeID: currentNodeData?.nodeID,
|
||
taskID: effectiveTaskId
|
||
});
|
||
|
||
if (res.success && res.data) {
|
||
learningRecord.value = res.data;
|
||
console.log('✅ 学习记录创建成功，taskID:', effectiveTaskId);
|
||
|
||
// 学习记录创建成功后，启动学习计时器
|
||
startLearningTimer();
|
||
console.log('⏱️ 学习计时器已启动');
|
||
}
|
||
} catch (error) {
|
||
console.error('创建学习记录失败:', error);
|
||
}
|
||
}
|
||
|
||
// 加载节点内容
|
||
async function loadNodeContent() {
|
||
if (!currentNode.value) return;
|
||
|
||
// 如果是文章资源，加载文章内容
|
||
if (currentNode.value.nodeType === 0 && currentNode.value.resourceID) {
|
||
try {
|
||
const res = await resourceApi.getResourceById(currentNode.value.resourceID);
|
||
if (res.success && res.data) {
|
||
articleData.value = {
|
||
...res.data.resource,
|
||
tags: res.data.tags || []
|
||
};
|
||
}
|
||
} catch (error) {
|
||
console.error('加载文章失败:', error);
|
||
}
|
||
} else {
|
||
articleData.value = null;
|
||
}
|
||
|
||
// 展开当前章节
|
||
if (!activeChapters.value.includes(currentChapterIndex.value)) {
|
||
activeChapters.value.push(currentChapterIndex.value);
|
||
}
|
||
|
||
// 等待DOM更新后，检查是否需要自动标记完成（针对内容太短没有滚动条的情况）
|
||
await nextTick();
|
||
setTimeout(() => {
|
||
checkAutoComplete();
|
||
}, 500); // 延迟500ms，等待ArticleShow初始化完成
|
||
}
|
||
|
||
// 选择节点
|
||
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();
|
||
}
|
||
|
||
// 上一节
|
||
function gotoPrevious() {
|
||
if (!hasPrevious.value || !courseItemVO.value) return;
|
||
|
||
if (currentNodeIndex.value > 0) {
|
||
currentNodeIndex.value--;
|
||
} else {
|
||
// 跳到上一章的最后一节
|
||
currentChapterIndex.value--;
|
||
const prevChapterNodes = getChapterNodes(currentChapterIndex.value);
|
||
currentNodeIndex.value = prevChapterNodes.length - 1;
|
||
}
|
||
}
|
||
|
||
// 下一节
|
||
function gotoNext() {
|
||
if (!hasNext.value || !courseItemVO.value) return;
|
||
|
||
const currentChapterNodes = getChapterNodes(currentChapterIndex.value);
|
||
|
||
if (currentNodeIndex.value < currentChapterNodes.length - 1) {
|
||
currentNodeIndex.value++;
|
||
} else {
|
||
// 跳到下一章的第一节
|
||
currentChapterIndex.value++;
|
||
currentNodeIndex.value = 0;
|
||
}
|
||
}
|
||
|
||
// 判断节点是否完成
|
||
function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
|
||
const nodeKey = `${chapterIndex}-${nodeIndex}`;
|
||
return completedNodes.value.has(nodeKey);
|
||
}
|
||
|
||
// 开始学习计时
|
||
function startLearningTimer() {
|
||
learningStartTime.value = Date.now();
|
||
|
||
// 每10秒保存一次学习进度（如果未完成）
|
||
learningTimer.value = window.setInterval(() => {
|
||
// 如果课程已完成，停止定时器
|
||
if (learningRecord.value?.isComplete) {
|
||
stopLearningTimer();
|
||
return;
|
||
}
|
||
saveLearningProgress();
|
||
}, 10000); // 10秒
|
||
}
|
||
|
||
// 停止学习计时
|
||
function stopLearningTimer() {
|
||
if (learningTimer.value) {
|
||
clearInterval(learningTimer.value);
|
||
learningTimer.value = null;
|
||
}
|
||
}
|
||
|
||
// 保存学习进度
|
||
async function saveLearningProgress() {
|
||
if (!userInfo.value?.id) {
|
||
console.warn('⚠️ 无法保存学习进度：用户信息不存在');
|
||
return;
|
||
}
|
||
|
||
if (!learningRecord.value) {
|
||
console.warn('⚠️ 无法保存学习进度：学习记录不存在');
|
||
return;
|
||
}
|
||
|
||
// 如果课程已完成，不再保存进度
|
||
if (learningRecord.value.isComplete) {
|
||
console.log('课程已完成，跳过进度保存');
|
||
return;
|
||
}
|
||
|
||
const currentTime = Date.now();
|
||
const duration = Math.floor((currentTime - learningStartTime.value) / 1000); // 秒
|
||
|
||
try {
|
||
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
|
||
};
|
||
|
||
await learningRecordApi.updateRecord(updatedRecord);
|
||
|
||
// 更新本地记录
|
||
learningRecord.value.duration = updatedRecord.duration;
|
||
learningRecord.value.progress = updatedRecord.progress;
|
||
learningRecord.value.isComplete = updatedRecord.isComplete;
|
||
|
||
// 重置开始时间
|
||
learningStartTime.value = currentTime;
|
||
|
||
console.log(`💾 学习进度已保存 - 时长: ${updatedRecord.duration}秒, 进度: ${updatedRecord.progress}%`);
|
||
} catch (error) {
|
||
console.error('❌ 保存学习进度失败:', error);
|
||
}
|
||
}
|
||
|
||
// 标记节点完成
|
||
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 {
|
||
// 使用learningRecord中保存的taskID（可能是真实任务ID或生成的自学ID）
|
||
const taskId = learningRecord.value.taskID || (route.query.taskId as string);
|
||
|
||
await learningRecordApi.markComplete({
|
||
id: learningRecord.value.id,
|
||
userID: userInfo.value.id,
|
||
resourceType: 2,
|
||
resourceID: props.courseId,
|
||
taskID: taskId,
|
||
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;
|
||
}
|
||
|
||
// 检查是否需要自动标记完成（针对内容太短没有滚动条的情况）
|
||
async function checkAutoComplete() {
|
||
// 如果当前节点已完成，跳过
|
||
if (isCurrentNodeCompleted.value) {
|
||
return;
|
||
}
|
||
|
||
if (!currentNode.value) return;
|
||
|
||
// 对富文本类型（nodeType === 1）立即检查
|
||
if (currentNode.value.nodeType === 1) {
|
||
if (!hasScrollbar()) {
|
||
console.log('📄 富文本内容较短无需滚动，自动标记为完成');
|
||
const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
|
||
await markNodeComplete(nodeKey);
|
||
}
|
||
}
|
||
|
||
// 对文章类型（nodeType === 0），延迟检查（等待ArticleShow初始化视频监听器）
|
||
// 如果文章有视频，会在视频播放完成时emit事件，不会走到这里
|
||
// 如果文章没有视频且没有滚动条，需要自动标记完成
|
||
if (currentNode.value.nodeType === 0) {
|
||
// 保存当前节点信息，避免延迟后节点已改变
|
||
const chapterIdx = currentChapterIndex.value;
|
||
const nodeIdx = currentNodeIndex.value;
|
||
const nodeKey = `${chapterIdx}-${nodeIdx}`;
|
||
|
||
// 延迟1秒再检查，给ArticleShow足够时间初始化
|
||
setTimeout(async () => {
|
||
// 再次检查是否已完成（可能已通过视频完成事件标记）
|
||
// 且确认当前还在同一个节点
|
||
if (!completedNodes.value.has(nodeKey) &&
|
||
currentChapterIndex.value === chapterIdx &&
|
||
currentNodeIndex.value === nodeIdx &&
|
||
!hasScrollbar()) {
|
||
console.log('📄 文章内容较短无需滚动且无视频，自动标记为完成');
|
||
await markNodeComplete(nodeKey);
|
||
}
|
||
}, 1000);
|
||
}
|
||
}
|
||
|
||
// 处理内容区域滚动
|
||
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) {
|
||
// 可以在这里记录视频播放进度
|
||
const video = event.target as HTMLVideoElement;
|
||
const progress = (video.currentTime / video.duration) * 100;
|
||
|
||
// 如果播放超过80%，自动标记为完成
|
||
if (progress > 80 && !isCurrentNodeCompleted.value) {
|
||
// markAsComplete();
|
||
}
|
||
}
|
||
|
||
// 处理视频结束
|
||
async function handleVideoEnded() {
|
||
if (!isCurrentNodeCompleted.value) {
|
||
ElMessage.success('视频播放完成，已自动标记为完成');
|
||
|
||
// 自动标记当前节点为完成
|
||
const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
|
||
await markNodeComplete(nodeKey);
|
||
}
|
||
}
|
||
|
||
// 初始化富文本中的视频监听器
|
||
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 完全渲染
|
||
}
|
||
|
||
// 处理富文本视频播放结束
|
||
async 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})，已自动标记为完成`);
|
||
|
||
// 自动标记当前节点为完成
|
||
const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
|
||
await markNodeComplete(nodeKey);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 处理文章视频播放完成（从ArticleShow组件emit的事件）
|
||
async function handleArticleVideosCompleted() {
|
||
if (!isCurrentNodeCompleted.value) {
|
||
console.log('📹 文章中的所有视频播放完成，自动标记节点为完成');
|
||
const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
|
||
await markNodeComplete(nodeKey);
|
||
}
|
||
}
|
||
|
||
// 处理音频进度
|
||
function handleAudioProgress(event: Event) {
|
||
const audio = event.target as HTMLAudioElement;
|
||
const progress = (audio.currentTime / audio.duration) * 100;
|
||
|
||
if (progress > 80 && !isCurrentNodeCompleted.value) {
|
||
// markAsComplete();
|
||
}
|
||
}
|
||
|
||
// 处理音频结束
|
||
async function handleAudioEnded() {
|
||
if (!isCurrentNodeCompleted.value) {
|
||
ElMessage.success('音频播放完成，已自动标记为完成');
|
||
|
||
// 自动标记当前节点为完成
|
||
const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
|
||
await markNodeComplete(nodeKey);
|
||
}
|
||
}
|
||
|
||
// 判断是否为视频文件
|
||
function isVideoFile(url?: string): boolean {
|
||
if (!url) return false;
|
||
const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi'];
|
||
return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
|
||
}
|
||
|
||
// 判断是否为音频文件
|
||
function isAudioFile(url?: string): boolean {
|
||
if (!url) return false;
|
||
const audioExtensions = ['.mp3', '.wav', '.ogg', '.m4a'];
|
||
return audioExtensions.some(ext => url.toLowerCase().endsWith(ext));
|
||
}
|
||
|
||
// 获取文件URL
|
||
function getFileUrl(fileId?: string): string {
|
||
if (!fileId) return '';
|
||
return FILE_DOWNLOAD_URL + fileId;
|
||
}
|
||
|
||
// 下载文件
|
||
function downloadFile(fileId?: string) {
|
||
if (!fileId) return;
|
||
window.open(getFileUrl(fileId), '_blank');
|
||
}
|
||
|
||
// 切换侧边栏
|
||
function toggleSidebar() {
|
||
sidebarCollapsed.value = !sidebarCollapsed.value;
|
||
}
|
||
|
||
// 返回
|
||
// ==================== 学习历史记录功能 ====================
|
||
|
||
// 创建学习历史记录
|
||
async function createHistoryRecord() {
|
||
if (!userInfo.value?.id || !courseItemVO.value || !currentNode.value) return;
|
||
|
||
try {
|
||
const chapterItem = courseItemVO.value.chapters![currentChapterIndex.value];
|
||
const chapter = chapterItem;
|
||
const node = currentNode.value;
|
||
|
||
const res = await learningHistoryApi.recordCourseLearn(
|
||
userInfo.value.id,
|
||
props.courseId,
|
||
chapter?.chapterID,
|
||
node.nodeID,
|
||
0 // 初始时长为0
|
||
);
|
||
|
||
if (res.success && res.data) {
|
||
learningHistory.value = res.data;
|
||
console.log('✅ 课程学习历史记录创建成功:', learningHistory.value);
|
||
|
||
// 开始计时
|
||
startHistoryTimer();
|
||
}
|
||
} catch (error) {
|
||
console.error('❌ 创建课程学习历史记录失败:', error);
|
||
}
|
||
}
|
||
|
||
// 开始学习历史计时
|
||
function startHistoryTimer() {
|
||
historyStartTime.value = Date.now();
|
||
|
||
// 每30秒保存一次学习历史
|
||
historyTimer.value = window.setInterval(() => {
|
||
saveHistoryRecord();
|
||
}, 30000); // 30秒
|
||
}
|
||
|
||
// 停止学习历史计时
|
||
function stopHistoryTimer() {
|
||
if (historyTimer.value) {
|
||
clearInterval(historyTimer.value);
|
||
historyTimer.value = null;
|
||
}
|
||
}
|
||
|
||
// 保存学习历史记录
|
||
async function saveHistoryRecord() {
|
||
if (!userInfo.value?.id || !learningHistory.value) return;
|
||
|
||
const currentTime = Date.now();
|
||
const duration = Math.floor((currentTime - historyStartTime.value) / 1000); // 秒
|
||
|
||
// 如果时长太短（小于1秒），不保存
|
||
if (duration < 1) return;
|
||
|
||
try {
|
||
const updatedHistory: TbLearningHistory = {
|
||
...learningHistory.value,
|
||
duration: (learningHistory.value.duration || 0) + duration,
|
||
endTime: new Date().toISOString()
|
||
};
|
||
|
||
// 调用API更新学习历史
|
||
const res = await learningHistoryApi.recordLearningHistory(updatedHistory);
|
||
|
||
if (res.success && res.data) {
|
||
learningHistory.value = res.data;
|
||
console.log(`💾 课程学习历史已保存 - 累计时长: ${learningHistory.value.duration}秒 - 节点: ${currentNode.value?.name}`);
|
||
}
|
||
|
||
// 重置开始时间
|
||
historyStartTime.value = currentTime;
|
||
} catch (error) {
|
||
console.error('❌ 保存课程学习历史失败:', error);
|
||
}
|
||
}
|
||
|
||
function handleBack() {
|
||
stopLearningTimer();
|
||
saveLearningProgress();
|
||
|
||
// 保存学习历史记录
|
||
if (learningHistory.value) {
|
||
saveHistoryRecord();
|
||
}
|
||
stopHistoryTimer();
|
||
|
||
emit('back');
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.course-learning {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
.learning-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 24px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
|
||
.course-name {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
.progress-info {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
}
|
||
}
|
||
|
||
.learning-container {
|
||
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 {
|
||
width: 320px;
|
||
background: #fff;
|
||
border-right: 1px solid #e4e7ed;
|
||
overflow-y: auto;
|
||
transition: width 0.3s;
|
||
|
||
&.collapsed {
|
||
width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
|
||
.sidebar-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.chapter-list {
|
||
padding: 8px;
|
||
}
|
||
}
|
||
|
||
.chapter-item-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding-right: 20px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
|
||
.chapter-count {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
background: #f5f7fa;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
|
||
.node-items {
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.node-item-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 12px;
|
||
margin: 4px 0;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
&.active {
|
||
background: #ecf5ff;
|
||
color: #409eff;
|
||
}
|
||
|
||
&.completed {
|
||
.check-icon {
|
||
color: #67c23a;
|
||
}
|
||
}
|
||
|
||
.node-item-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex: 1;
|
||
|
||
.node-type-icon {
|
||
font-size: 16px;
|
||
color: #909399;
|
||
}
|
||
|
||
.check-icon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.node-item-name {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
}
|
||
}
|
||
|
||
.node-item-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.node-duration {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-area {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
background: #fff;
|
||
|
||
&.expanded {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.loading-container {
|
||
padding: 24px;
|
||
}
|
||
|
||
.node-content {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 24px;
|
||
}
|
||
|
||
.node-header {
|
||
margin-bottom: 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
|
||
.node-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin: 0 0 12px 0;
|
||
}
|
||
|
||
.node-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
|
||
.duration {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-content,
|
||
.rich-text-content {
|
||
margin-bottom: 24px;
|
||
line-height: 1.8;
|
||
color: #303133;
|
||
}
|
||
|
||
.rich-text-content {
|
||
:deep(img) {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
:deep(video) {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
.file-content {
|
||
margin-bottom: 24px;
|
||
|
||
.video-wrapper,
|
||
.audio-wrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
background: #000;
|
||
border-radius: 8px;
|
||
|
||
.video-player {
|
||
max-width: 100%;
|
||
max-height: 500px;
|
||
}
|
||
|
||
.audio-player {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.file-download {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 60px;
|
||
background: #f5f7fa;
|
||
border-radius: 8px;
|
||
|
||
.file-icon {
|
||
font-size: 64px;
|
||
color: #909399;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 16px;
|
||
color: #606266;
|
||
}
|
||
}
|
||
}
|
||
|
||
.learning-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 24px;
|
||
border-top: 1px solid #e4e7ed;
|
||
|
||
.navigation-buttons {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
.empty-content {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
min-height: 400px;
|
||
}
|
||
</style>
|