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

视图修改、接口修改

Browse Source
This commit is contained in:
wangys
2025-10-28 19:04:35 +08:00
parent 98c73632bd
commit c5c134fbb3
96 changed files with 7122 additions and 4194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
schoolNewsWeb/src/views/public/course/components/CourseAdd.vue
View File

@@ -8,7 +8,7 @@
<el-form
ref="formRef"
:model="currentCourseVO"
:model="currentCourseItemVO"
:rules="rules"
label-width="120px"
>
@@ -18,17 +18,17 @@
<span class="card-header">基本信息</span>
</template>
<el-form-item label="课程名称" prop="course.name">
<el-form-item label="课程名称" prop="name">
<el-input
id="course-name"
v-model="currentCourseVO.course.name"
v-model="currentCourseItemVO.name"
placeholder="请输入课程名称"
:disabled="!editMode"
/>
</el-form-item>
<!-- 课程封面 - 移除 label 关联 -->
<el-form-item prop="course.coverImage">
<el-form-item prop="coverImage">
<template #label>
<span>课程封面</span>
</template>
@@ -36,7 +36,7 @@
v-if="editMode"
:as-dialog="false"
list-type="cover"
v-model:cover-url="currentCourseVO.course.coverImage"
v-model:cover-url="currentCourseItemVO.coverImage"
accept="image/*"
:max-size="2"
module="course"
@@ -45,24 +45,24 @@
@remove="handleCoverRemove"
/>
<div v-else class="cover-preview">
<img v-if="currentCourseVO.course.coverImage" :src="FILE_DOWNLOAD_URL + currentCourseVO.course.coverImage" alt="课程封面" />
<img v-if="currentCourseItemVO.coverImage" :src="FILE_DOWNLOAD_URL + currentCourseItemVO.coverImage" alt="课程封面" />
<span v-else class="no-cover">暂无封面</span>
</div>
</el-form-item>
<el-form-item label="授课老师" prop="course.teacher">
<el-form-item label="授课老师" prop="teacher">
<el-input
id="course-teacher"
v-model="currentCourseVO.course.teacher"
v-model="currentCourseItemVO.teacher"
placeholder="请输入授课老师"
:disabled="!editMode"
/>
</el-form-item>
<el-form-item label="课程时长" prop="course.duration">
<el-form-item label="课程时长" prop="duration">
<el-input-number
id="course-duration"
v-model="currentCourseVO.course.duration"
v-model="currentCourseItemVO.duration"
:min="0"
placeholder="分钟"
:disabled="!editMode"
@@ -70,10 +70,10 @@
<span class="ml-2">分钟</span>
</el-form-item>
<el-form-item label="课程描述" prop="course.description">
<el-form-item label="课程描述" prop="description">
<el-input
id="course-description"
v-model="currentCourseVO.course.description"
v-model="currentCourseItemVO.description"
type="textarea"
:rows="3"
placeholder="请输入课程描述"
@@ -81,19 +81,19 @@
/>
</el-form-item>
<el-form-item label="排序号" prop="course.orderNum">
<el-form-item label="排序号" prop="orderNum">
<el-input-number
id="course-orderNum"
v-model="currentCourseVO.course.orderNum"
v-model="currentCourseItemVO.orderNum"
:min="0"
:disabled="!editMode"
/>
</el-form-item>
<el-form-item label="状态" prop="course.status">
<el-form-item label="状态" prop="status">
<el-radio-group
id="course-status"
v-model="currentCourseVO.course.status"
v-model="currentCourseItemVO.status"
disabled
>
<el-radio :label="0">未上线</el-radio>
@@ -115,19 +115,19 @@
</div>
</template>
<div v-if="currentCourseVO.courseChapters.length === 0" class="empty-tip">
<div v-if="!currentCourseItemVO.chapters || currentCourseItemVO.chapters.length === 0" class="empty-tip">
暂无章节，请点击"添加章节"按钮添加
</div>
<el-collapse v-model="activeChapters">
<el-collapse-item
v-for="(chapterVO, chapterIndex) in currentCourseVO.courseChapters"
v-for="(chapterVO, chapterIndex) in currentCourseItemVO.chapters"
:key="chapterIndex"
:name="chapterIndex"
>
<template #title>
<div class="chapter-title">
<span>章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name || '未命名章节' }}</span>
<span>章节 {{ chapterIndex + 1 }}: {{ chapterVO.name || '未命名章节' }}</span>
<div v-if="editMode" class="chapter-actions" @click.stop>
<el-button
type="danger"
@@ -144,12 +144,12 @@
<!-- 章节信息 -->
<el-form-item
:label="`章节${chapterIndex + 1}名称`"
:prop="`courseChapters.${chapterIndex}.chapter.name`"
:prop="`chapters.${chapterIndex}.name`"
:rules="[{ required: true, message: '请输入章节名称', trigger: 'blur' }]"
>
<el-input
:id="`chapter-${chapterIndex}-name`"
v-model="chapterVO.chapter.name"
v-model="chapterVO.name"
placeholder="请输入章节名称"
:disabled="!editMode"
/>
@@ -157,11 +157,11 @@
<el-form-item
:label="`章节${chapterIndex + 1}排序`"
:prop="`courseChapters.${chapterIndex}.chapter.orderNum`"
:prop="`chapters.${chapterIndex}.orderNum`"
>
<el-input-number
:id="`chapter-${chapterIndex}-orderNum`"
v-model="chapterVO.chapter.orderNum"
v-model="chapterVO.orderNum"
:min="0"
:disabled="!editMode"
/>
@@ -177,13 +177,13 @@
</el-button>
</div>
<div v-if="chapterVO.nodes.length === 0" class="empty-tip">
<div v-if="!chapterVO.chapters || chapterVO.chapters.length === 0" class="empty-tip">
暂无学习节点
</div>
<div v-else class="nodes-list">
<el-card
v-for="(node, nodeIndex) in chapterVO.nodes"
v-for="(node, nodeIndex) in chapterVO.chapters"
:key="nodeIndex"
class="node-card"
shadow="hover"
@@ -205,7 +205,7 @@
<el-form-item
label="节点名称"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.name`"
:prop="`chapters.${chapterIndex}.chapters.${nodeIndex}.name`"
>
<el-input
:id="`node-${chapterIndex}-${nodeIndex}-name`"
@@ -217,7 +217,7 @@
<el-form-item
label="节点类型"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.nodeType`"
:prop="`chapters.${chapterIndex}.chapters.${nodeIndex}.nodeType`"
>
<el-radio-group
:id="`node-${chapterIndex}-${nodeIndex}-nodeType`"
@@ -234,7 +234,7 @@
<el-form-item
v-if="node.nodeType === 0"
label="选择文章"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.resourceID`"
:prop="`chapters.${chapterIndex}.chapters.${nodeIndex}.resourceID`"
>
<el-select
:id="`node-${chapterIndex}-${nodeIndex}-resourceID`"
@@ -259,7 +259,7 @@
<!-- 富文本编辑 - 移除 label 关联 -->
<el-form-item
v-if="node.nodeType === 1"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.content`"
:prop="`chapters.${chapterIndex}.chapters.${nodeIndex}.content`"
>
<template #label>
<span>内容编辑</span>
@@ -270,7 +270,7 @@
<!-- 文件上传 - 移除 label 关联 -->
<el-form-item
v-if="node.nodeType === 2"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.videoUrl`"
:prop="`chapters.${chapterIndex}.chapters.${nodeIndex}.videoUrl`"
>
<template #label>
<span>上传文件</span>
@@ -295,7 +295,7 @@
<el-form-item
label="节点时长"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.duration`"
:prop="`chapters.${chapterIndex}.chapters.${nodeIndex}.duration`"
>
<el-input-number
:id="`node-${chapterIndex}-${nodeIndex}-duration`"
@@ -308,7 +308,7 @@
<!-- 是否必修 - 使用 template #label -->
<el-form-item
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.isRequired`"
:prop="`chapters.${chapterIndex}.chapters.${nodeIndex}.isRequired`"
>
<template #label>
<span>是否必修</span>
@@ -324,7 +324,7 @@
<el-form-item
label="排序号"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.orderNum`"
:prop="`chapters.${chapterIndex}.chapters.${nodeIndex}.orderNum`"
>
<el-input-number
:id="`node-${chapterIndex}-${nodeIndex}-orderNum`"
@@ -359,7 +359,7 @@ import { FileUpload } from '@/components/file';
import { RichTextComponent } from '@/components/text';
import { courseApi } from '@/apis/study';
import { resourceApi } from '@/apis/resource';
import type { CourseNode, CourseVO, ChapterVO } from '@/types/study';
import type { CourseItemVO } from '@/types/study';
import type { Resource } from '@/types/resource';
import type { SysFile } from '@/types';
import { FILE_DOWNLOAD_URL } from '@/config';
@@ -367,13 +367,6 @@ defineOptions({
name: 'CourseAdd'
});
// 节点扩展类型（用于前端交互）
interface NodeWithExtras extends CourseNode {
loading?: boolean;
articleOptions?: Resource[];
searchMethod?: (query: string) => void;
}
interface Props {
courseID?: string;
}
@@ -390,26 +383,23 @@ const activeChapters = ref<number[]>([]);
const editMode = ref(true);
// 原始数据（用于比对）
const originalCourseVO = ref<CourseVO>();
const originalCourseItemVO = ref<CourseItemVO>();
// 当前编辑的数据
const currentCourseVO = ref<CourseVO>({
course: {
name: '',
coverImage: '',
description: '',
teacher: '',
duration: 0,
status: 0,
orderNum: 0
},
courseChapters: [],
courseTags: []
const currentCourseItemVO = ref<CourseItemVO>({
name: '',
coverImage: '',
description: '',
teacher: '',
duration: 0,
status: 0,
orderNum: 0,
chapters: []
});
// 表单验证规则
const rules = {
'course.name': [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
'course.teacher': [{ required: true, message: '请输入授课老师', trigger: 'blur' }]
'name': [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
'teacher': [{ required: true, message: '请输入授课老师', trigger: 'blur' }]
};
onMounted(() => {
@@ -426,30 +416,26 @@ async function loadCourse() {
// 确保数据结构完整，处理 null 值
const courseData = res.data;
// 确保 courseChapters 是数组
if (!courseData.courseChapters) {
courseData.courseChapters = [];
// 确保 chapters 是数组（章节列表）
if (!courseData.chapters) {
courseData.chapters = [];
}
// 确保 courseTags 是数组
if (!courseData.courseTags) {
courseData.courseTags = [];
}
// 确保每个章节的 nodes 是数组
courseData.courseChapters.forEach((chapterVO: ChapterVO) => {
if (!chapterVO.nodes) {
chapterVO.nodes = [];
// 确保每个章节的 chapters 是数组（节点列表）
courseData.chapters.forEach((chapterVO: CourseItemVO) => {
if (!chapterVO.chapters) {
chapterVO.chapters = [];
}
});
if (courseData.course.status === 1) {
if (courseData.status === 1) {
editMode.value = false;
}
// 保存原始数据
originalCourseVO.value = JSON.parse(JSON.stringify(courseData));
originalCourseItemVO.value = JSON.parse(JSON.stringify(courseData));
// 设置当前编辑数据
currentCourseVO.value = JSON.parse(JSON.stringify(courseData));
console.log(currentCourseVO.value);
currentCourseItemVO.value = JSON.parse(JSON.stringify(courseData));
console.log(currentCourseItemVO.value);
}
} catch (error) {
console.error('加载课程失败:', error);
@@ -459,21 +445,19 @@ async function loadCourse() {
// 添加章节
function addChapter() {
const newChapterVO: ChapterVO = {
chapter: {
chapterID: currentCourseVO.value.course.courseID,
name: '',
orderNum: currentCourseVO.value.courseChapters.length
},
nodes: []
const newChapterVO: CourseItemVO = {
chapterID: currentCourseItemVO.value.courseID,
name: '',
orderNum: currentCourseItemVO.value.chapters!.length,
chapters: []
};
currentCourseVO.value.courseChapters.push(newChapterVO);
activeChapters.value.push(currentCourseVO.value.courseChapters.length - 1);
currentCourseItemVO.value.chapters!.push(newChapterVO);
activeChapters.value.push(currentCourseItemVO.value.chapters!.length - 1);
}
// 删除章节
function removeChapter(index: number) {
currentCourseVO.value.courseChapters.splice(index, 1);
currentCourseItemVO.value.chapters!.splice(index, 1);
// 更新激活的章节索引
activeChapters.value = activeChapters.value
.filter(i => i !== index)
@@ -482,10 +466,10 @@ function removeChapter(index: number) {
// 添加节点
function addNode(chapterIndex: number) {
const nodeIndex = currentCourseVO.value.courseChapters[chapterIndex].nodes.length;
const newNode: NodeWithExtras = {
const nodeIndex = currentCourseItemVO.value.chapters![chapterIndex].chapters!.length;
const newNode: CourseItemVO & { loading?: boolean; articleOptions?: Resource[]; searchMethod?: (query: string) => void } = {
nodeID: '',
chapterID: currentCourseVO.value.courseChapters[chapterIndex].chapter.chapterID,
chapterID: currentCourseItemVO.value.chapters![chapterIndex].chapterID,
name: '',
nodeType: 0,
content: '',
@@ -496,35 +480,37 @@ function addNode(chapterIndex: number) {
articleOptions: [],
searchMethod: (query: string) => searchArticles(query, chapterIndex, nodeIndex)
};
currentCourseVO.value.courseChapters[chapterIndex].nodes.push(newNode);
currentCourseItemVO.value.chapters![chapterIndex].chapters!.push(newNode);
}
// 删除节点
function removeNode(chapterIndex: number, nodeIndex: number) {
currentCourseVO.value.courseChapters[chapterIndex].nodes.splice(nodeIndex, 1);
currentCourseItemVO.value.chapters![chapterIndex].chapters!.splice(nodeIndex, 1);
}
type NodeWithExtras = CourseItemVO & { loading?: boolean; articleOptions?: Resource[]; searchMethod?: (query: string) => void };
// 辅助函数：获取节点的 searchMethod
function getNodeSearchMethod(chapterIndex: number, nodeIndex: number) {
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
const node = currentCourseItemVO.value.chapters![chapterIndex].chapters![nodeIndex] as NodeWithExtras;
return node.searchMethod;
}
// 辅助函数：获取节点的 loading 状态
function getNodeLoading(chapterIndex: number, nodeIndex: number) {
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
const node = currentCourseItemVO.value.chapters![chapterIndex].chapters![nodeIndex] as NodeWithExtras;
return node.loading || false;
}
// 辅助函数：获取节点的 articleOptions
function getNodeArticleOptions(chapterIndex: number, nodeIndex: number) {
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
const node = currentCourseItemVO.value.chapters![chapterIndex].chapters![nodeIndex] as NodeWithExtras;
return node.articleOptions || [];
}
// 搜索文章
async function searchArticles(query: string, chapterIndex: number, nodeIndex: number) {
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
const node = currentCourseItemVO.value.chapters![chapterIndex].chapters![nodeIndex] as NodeWithExtras;
if (!query) {
node.articleOptions = [];
return;
@@ -556,13 +542,13 @@ function handleCoverUploadSuccess(files: SysFile[]) {
// 处理封面删除
function handleCoverRemove() {
currentCourseVO.value.course.coverImage = '';
currentCourseItemVO.value.coverImage = '';
}
// 处理节点文件上传成功
function handleNodeFileUploadSuccess(files: SysFile[], chapterIndex: number, nodeIndex: number) {
if (files && files.length > 0) {
currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex].videoUrl = files[0].filePath || '';
currentCourseItemVO.value.chapters![chapterIndex].chapters![nodeIndex].videoUrl = files[0].filePath || '';
}
}
@@ -576,16 +562,16 @@ async function handleSubmit() {
// 先创建/更新课程
let courseID = props.courseID;
if (courseID) {
const res = await courseApi.updateCourse(currentCourseVO.value);
const res = await courseApi.updateCourse(currentCourseItemVO.value);
if (!res.success) {
throw new Error('更新课程失败');
}
} else {
const res = await courseApi.createCourse(currentCourseVO.value);
if (!res.success || !res.data?.course.courseID) {
const res = await courseApi.createCourse(currentCourseItemVO.value);
if (!res.success || !res.data?.courseID) {
throw new Error('创建课程失败');
}
courseID = res.data.course.courseID;
courseID = res.data.courseID;
}
ElMessage.success(props.courseID ? '课程更新成功' : '课程创建成功');
emit('success');

770
schoolNewsWeb/src/views/public/course/components/CourseDetail.vue
View File

@@ -11,151 +11,142 @@
</div>
<!-- 课程详情 -->
<div v-else-if="courseVO" class="course-content">
<!-- 课程封面和基本信息 -->
<div class="course-header">
<div class="cover-section">
<img
:src="courseVO.course.coverImage? FILE_DOWNLOAD_URL + courseVO.course.coverImage : defaultCover"
:alt="courseVO.course.name"
class="cover-image"
/>
</div>
<div class="info-section">
<h1 class="course-title">{{ courseVO.course.name }}</h1>
<div class="course-meta">
<div class="meta-item">
<el-icon><User /></el-icon>
<span>授课老师：{{ courseVO.course.teacher }}</span>
</div>
<div class="meta-item">
<el-icon><Clock /></el-icon>
<span>课程时长：{{ formatDuration(courseVO.course.duration) }}</span>
</div>
<div class="meta-item">
<el-icon><View /></el-icon>
<span>{{ courseVO.course.viewCount || 0 }} 人浏览</span>
</div>
<div class="meta-item">
<el-icon><Reading /></el-icon>
<span>{{ courseVO.course.learnCount || 0 }} 人学习</span>
</div>
</div>
<div class="course-description">
<p>{{ courseVO.course.description }}</p>
</div>
<!-- 操作按钮 -->
<div class="action-buttons">
<el-button
type="primary"
size="large"
@click="handleStartLearning"
:loading="enrolling"
>
<el-icon><VideoPlay /></el-icon>
{{ isEnrolled ? '继续学习' : '开始学习' }}
</el-button>
<el-button
size="large"
:icon="isCollected ? StarFilled : Star"
@click="handleCollect"
:type="isCollected ? 'success' : 'default'"
>
{{ isCollected ? '已收藏' : '收藏课程' }}
</el-button>
</div>
<!-- 学习进度 -->
<div v-if="learningProgress" class="learning-progress">
<div class="progress-header">
<span>学习进度</span>
<span class="progress-text">{{ learningProgress.progress }}%</span>
</div>
<el-progress
:percentage="learningProgress.progress"
:stroke-width="10"
:color="progressColor"
<div v-else-if="courseItemVO" class="course-content">
<!-- 课程信息看板 -->
<div class="course-info-panel">
<div class="panel-container">
<!-- 左侧：课程封面 -->
<div class="course-cover">
<img
:src="courseItemVO.coverImage ? FILE_DOWNLOAD_URL + courseItemVO.coverImage : defaultCover"
:alt="courseItemVO.name"
@error="handleImageError"
/>
</div>
<!-- 右侧：课程信息 -->
<div class="course-info">
<div class="info-content">
<!-- 课程标题 -->
<h1 class="course-title">{{ courseItemVO.name }}</h1>
<!-- 课程简介 -->
<p class="course-desc">{{ courseItemVO.description || '暂无简介' }}</p>
<!-- 课程元信息 -->
<div class="course-meta">
<div class="meta-item">
<el-avatar :size="24" :src="getTeacherAvatar()" />
<span>{{ courseItemVO.teacher || '课程讲师' }}</span>
</div>
<div class="meta-divider"></div>
<div class="meta-item">
<img src="@/assets/imgs/clock.svg" alt="time" />
<span>{{ formatDuration(courseItemVO.duration) }}</span>
</div>
<div class="meta-divider"></div>
<div class="meta-item">
<img src="@/assets/imgs/book-read.svg" alt="learning" />
<span>{{ courseItemVO.learnCount || 0 }}人学习</span>
</div>
</div>
</div>
<!-- 进度条区域 -->
<div v-if="learningProgress" class="progress-section">
<span class="progress-label">课程进度</span>
<div class="progress-bar-wrapper">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: learningProgress.progress + '%' }"></div>
</div>
<span class="progress-percent">{{ learningProgress.progress }}%</span>
</div>
</div>
<!-- 操作按钮 -->
<div class="action-buttons">
<el-button
type="primary"
size="large"
@click="handleStartLearning"
:loading="enrolling"
>
{{ isEnrolled ? '继续学习' : '开始学习' }}
</el-button>
<el-button
size="large"
:plain="!isCollected"
@click="handleCollect"
>
<el-icon><Star /></el-icon>
收藏课程
</el-button>
</div>
</div>
</div>
</div>
<!-- 课程章节 -->
<el-card class="chapter-card" shadow="never">
<template #header>
<div class="card-header">
<span>课程章节</span>
<span class="chapter-count">共 {{ courseVO.courseChapters.length }} 章</span>
</div>
</template>
<div class="chapter-section">
<!-- 标题 -->
<div class="section-title">
<div class="title-bar"></div>
<span class="title-text">课程目录</span>
</div>
<div v-if="courseVO.courseChapters.length === 0" class="empty-tip">
<!-- 章节列表 -->
<div v-if="!courseItemVO.chapters || courseItemVO.chapters.length === 0" class="empty-tip">
暂无章节内容
</div>
<el-collapse v-else v-model="activeChapters">
<el-collapse-item
v-for="(chapterVO, chapterIndex) in courseVO.courseChapters"
<div v-else class="chapter-list">
<div
v-for="(chapterItem, chapterIndex) in courseItemVO.chapters"
:key="chapterIndex"
:name="chapterIndex"
class="chapter-item"
>
<template #title>
<div class="chapter-title-bar">
<!-- 章节标题 -->
<div class="chapter-header" @click="toggleChapter(chapterIndex)">
<div class="chapter-title">
<img src="@/assets/imgs/arrow-down.svg" alt="arrow" class="chevron-icon" :class="{ 'expanded': activeChapters.includes(chapterIndex) }"/>
<span class="chapter-name">
<el-icon><DocumentCopy /></el-icon>
章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name }}
</span>
<span class="chapter-meta">
{{ chapterVO.nodes.length }} 个节点
第{{ chapterIndex + 1 }}章 {{ chapterItem.name }}（{{ getChapterNodes(chapterIndex).length }}小节）
</span>
</div>
</template>
</div>
<!-- 节点列表 -->
<div v-if="chapterVO.nodes.length === 0" class="empty-tip">
暂无学习节点
</div>
<div v-else class="node-list">
<div v-show="activeChapters.includes(chapterIndex)" class="node-list">
<div v-if="getChapterNodes(chapterIndex).length === 0" class="empty-tip">
暂无学习节点
</div>
<div
v-for="(node, nodeIndex) in chapterVO.nodes"
v-else
v-for="(node, nodeIndex) in getChapterNodes(chapterIndex)"
:key="nodeIndex"
class="node-item"
:class="{ 'completed': isNodeCompleted(chapterIndex, nodeIndex) }"
@click="handleNodeClick(chapterIndex, nodeIndex)"
>
<div class="node-info">
<el-icon class="node-icon">
<Document v-if="node.nodeType === 0" />
<Edit v-else-if="node.nodeType === 1" />
<Upload v-else />
</el-icon>
<span class="node-name">{{ node.name }}</span>
<el-tag
v-if="node.isRequired === 1"
type="danger"
size="small"
effect="plain"
>
必修
</el-tag>
<div class="node-left">
<span class="node-number">第{{ nodeIndex + 1 }}节</span>
<div class="node-info">
<img v-if="node.nodeType === 2" src="@/assets/imgs/video.svg" alt="video" class="node-icon" />
<img v-else src="@/assets/imgs/article.svg" alt="article" class="node-icon" />
<span class="node-name">{{ node.name }}</span>
</div>
</div>
<div class="node-meta">
<span v-if="node.duration" class="node-duration">
<el-icon><Clock /></el-icon>
{{ node.duration }} 分钟
<div class="node-right">
<span class="node-status">
{{ getNodeStatusText(node, chapterIndex, nodeIndex) }}
</span>
<el-icon class="arrow-icon"><ArrowRight /></el-icon>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-card>
</div>
</div>
</div>
<!-- 收藏按钮（底部浮动） -->
<div class="floating-collect">
@@ -182,24 +173,14 @@ import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import {
ArrowLeft,
User,
Clock,
View,
Reading,
VideoPlay,
Star,
StarFilled,
DocumentCopy,
Document,
Edit,
Upload,
ArrowRight
StarFilled
} from '@element-plus/icons-vue';
import { courseApi } from '@/apis/study';
import { learningRecordApi } from '@/apis/study';
import { userCollectionApi } from '@/apis/usercenter';
import { useStore } from 'vuex';
import type { CourseVO, LearningRecord } from '@/types';
import type { CourseItemVO, LearningRecord } from '@/types';
import { CollectionType } from '@/types';
import { FILE_DOWNLOAD_URL } from '@/config';
@@ -231,20 +212,20 @@ const userInfo = computed(() => store.getters['auth/user']);
const loading = ref(false);
const enrolling = ref(false);
const courseVO = ref<CourseVO | null>(null);
const courseItemVO = ref<CourseItemVO | null>(null);
const isCollected = ref(false);
const isEnrolled = ref(false);
const learningProgress = ref<LearningRecord | null>(null);
const activeChapters = ref<number[]>([0]); // 默认展开第一章
const defaultCover = new URL('@/assets/imgs/article-default.png', import.meta.url).href;
// 进度条颜色
const progressColor = computed(() => {
const progress = learningProgress.value?.progress || 0;
if (progress >= 80) return '#67c23a';
if (progress >= 50) return '#409eff';
return '#e6a23c';
});
// 辅助函数：获取章节的节点列表
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] || [];
}
watch(() => props.courseId, (newId) => {
if (newId) {
@@ -263,20 +244,15 @@ async function loadCourseDetail() {
const res = await courseApi.getCourseById(props.courseId);
if (res.success && res.data) {
courseVO.value = res.data;
courseItemVO.value = res.data;
// 确保数据结构完整
if (!courseVO.value.courseChapters) {
courseVO.value.courseChapters = [];
if (!courseItemVO.value.chapters) {
courseItemVO.value.chapters = [];
}
if (!courseVO.value.courseTags) {
courseVO.value.courseTags = [];
if (!courseItemVO.value.chapterNodes) {
courseItemVO.value.chapterNodes = {};
}
courseVO.value.courseChapters.forEach((chapter) => {
if (!chapter.nodes) {
chapter.nodes = [];
}
});
} else {
ElMessage.error('加载课程失败');
}
@@ -371,7 +347,7 @@ async function handleStartLearning() {
return;
}
if (!courseVO.value || courseVO.value.courseChapters.length === 0) {
if (!courseItemVO.value || !courseItemVO.value.chapters || courseItemVO.value.chapters.length === 0) {
ElMessage.warning('课程暂无内容');
return;
}
@@ -418,17 +394,66 @@ function handleBack() {
emit('back');
}
// 格式化时长
// 切换章节展开/收起
function toggleChapter(chapterIndex: number) {
const index = activeChapters.value.indexOf(chapterIndex);
if (index > -1) {
activeChapters.value.splice(index, 1);
} else {
activeChapters.value.push(chapterIndex);
}
}
// 判断节点是否完成
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
// TODO: 实际应该从学习记录中判断
return false;
}
// 获取节点状态文本
function getNodeStatusText(node: any, chapterIndex: number, nodeIndex: number): string {
const isCompleted = isNodeCompleted(chapterIndex, nodeIndex);
if (isCompleted) {
if (node.nodeType === 0) {
// 文章类型，显示字数
return '已学完';
} else if (node.nodeType === 2 && node.duration) {
// 视频类型，显示时长
return `${node.duration}分钟｜已学完`;
}
return '已学完';
} else {
if (node.nodeType === 0) {
// 文章类型
return '200字';
} else if (node.nodeType === 2 && node.duration) {
// 视频类型，显示时长和学习进度
return `${node.duration}分钟`;
}
return '未学习';
}
}
// 获取讲师头像
function getTeacherAvatar(): string {
return 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
}
// 图片加载失败处理
function handleImageError(event: Event) {
const target = event.target as HTMLImageElement;
target.src = defaultCover;
}
function formatDuration(minutes?: number): string {
if (!minutes) return '0分钟';
if (!minutes) return '0小时0分';
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
if (hours > 0) {
return `${hours}小时${mins}分钟`;
}
return `${mins}分钟`;
return `${hours}小时${mins}分`;
}
</script>
@@ -463,90 +488,208 @@ function formatDuration(minutes?: number): string {
padding: 24px;
}
.course-header {
background: #fff;
border-radius: 8px;
padding: 24px;
// 课程信息看板
.course-info-panel {
margin-bottom: 24px;
display: flex;
gap: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
@media (max-width: 768px) {
flex-direction: column;
}
}
.cover-section {
flex-shrink: 0;
.cover-image {
width: 320px;
height: 240px;
object-fit: cover;
border-radius: 8px;
@media (max-width: 768px) {
width: 100%;
height: auto;
}
.panel-container {
display: flex;
gap: 40px;
padding: 40px 60px;
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
}
.info-section {
.course-cover {
width: 478px;
height: 237px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.course-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.course-title {
font-size: 28px;
font-weight: 600;
color: #303133;
margin: 0;
line-height: 1.4;
}
.course-meta {
display: flex;
flex-wrap: wrap;
gap: 24px;
gap: 20px;
.meta-item {
.info-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.course-title {
font-family: 'PingFang SC';
font-weight: 600;
font-size: 20px;
line-height: 1.4;
color: #141F38;
margin: 0;
}
.course-desc {
font-family: 'PingFang SC';
font-weight: 400;
font-size: 14px;
line-height: 1.57;
color: rgba(0, 0, 0, 0.3);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-meta {
display: flex;
align-items: center;
gap: 8px;
color: #606266;
font-size: 14px;
gap: 7px;
.el-icon {
color: #909399;
.meta-item {
display: flex;
align-items: center;
gap: 7px;
img {
width: 18px;
height: 18px;
}
span {
font-family: 'PingFang SC';
font-weight: 400;
font-size: 14px;
line-height: 1.57;
color: #4E5969;
}
}
.meta-divider {
width: 1px;
height: 14px;
background: #F1F5F9;
}
}
}
.course-description {
color: #606266;
font-size: 14px;
line-height: 1.8;
.progress-section {
display: flex;
align-items: center;
gap: 14px;
p {
margin: 0;
.progress-label {
font-family: 'PingFang SC';
font-weight: 500;
font-size: 14px;
line-height: 1.71;
color: #86909C;
}
.progress-bar-wrapper {
flex: 1;
display: flex;
align-items: center;
gap: 9px;
}
.progress-bar {
flex: 1;
height: 6px;
background: #EAEAEA;
border-radius: 27px;
overflow: hidden;
.progress-fill {
height: 100%;
background: #10A5A1;
border-radius: 27px;
transition: width 0.3s ease;
}
}
.progress-percent {
font-family: 'PingFang SC';
font-weight: 500;
font-size: 14px;
line-height: 1.71;
color: #86909C;
text-align: right;
}
}
.action-buttons {
display: flex;
gap: 16px;
margin-top: 8px;
align-items: center;
gap: 27px;
:deep(.el-button) {
height: 42px;
border-radius: 8px;
font-family: 'PingFang SC';
font-weight: 500;
font-size: 16px;
padding: 8px 24px;
&.el-button--primary {
width: 180px;
background: #C62828;
border-color: #C62828;
&:hover {
background: #d32f2f;
border-color: #d32f2f;
}
}
&.el-button--default {
width: 125px;
border-color: #86909C;
color: #86909C;
img {
width: 20px;
height: 20px;
margin-right: 4px;
}
.el-icon {
margin-right: 4px;
}
&.is-plain {
background: #FFFFFF;
&:hover {
background: #f5f7fa;
}
}
&:not(.is-plain) {
background: #C62828;
border-color: #C62828;
color: #FFFFFF;
&:hover {
background: #d32f2f;
border-color: #d32f2f;
}
}
}
}
}
.learning-progress {
padding: 16px;
background: #f5f7fa;
border-radius: 8px;
.progress-header {
display: flex;
justify-content: space-between;
@@ -560,105 +703,170 @@ function formatDuration(minutes?: number): string {
}
}
.chapter-card {
:deep(.el-card__header) {
background: #fafafa;
// 课程章节区域
.chapter-section {
background: #FFFFFF;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.section-title {
display: flex;
align-items: center;
gap: 4px;
height: 25px;
margin-bottom: 24px;
.title-bar {
width: 3px;
height: 14px;
background: #C62828;
border-radius: 2px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
.title-text {
font-family: 'PingFang SC';
font-weight: 600;
font-size: 16px;
line-height: 1.5;
color: #1E293B;
}
}
.chapter-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.chapter-item {
.chapter-header {
background: #F6F7F8;
border-radius: 6px;
padding: 18px 16px;
cursor: pointer;
transition: background 0.3s;
.chapter-count {
font-size: 14px;
color: #909399;
font-weight: normal;
&:hover {
background: #eef0f2;
}
}
.chapter-title {
display: flex;
align-items: center;
gap: 4px;
.chevron-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
transition: transform 0.3s;
transform: rotate(-90deg);
&.expanded {
transform: rotate(0deg);
}
}
.chapter-name {
font-family: 'PingFang SC';
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: #000000;
}
}
}
.chapter-title-bar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-right: 20px;
.chapter-name {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 500;
}
.chapter-meta {
font-size: 14px;
color: #909399;
}
}
.node-list {
padding: 8px 0;
display: flex;
flex-direction: column;
}
.node-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
margin: 8px 0;
background: #fafafa;
border-radius: 6px;
padding: 20px 30px;
border-bottom: 1px solid #F1F5F9;
cursor: pointer;
transition: all 0.3s;
transition: background 0.3s;
&:hover {
background: #f0f2f5;
transform: translateX(4px);
background: #fafbfc;
}
.node-info {
.node-left {
display: flex;
align-items: center;
gap: 12px;
gap: 16px;
flex: 1;
.node-icon {
color: #409eff;
font-size: 18px;
}
.node-name {
.node-number {
font-family: 'PingFang SC';
font-weight: 400;
font-size: 14px;
color: #303133;
line-height: 1.57;
color: #C62828;
flex-shrink: 0;
}
}
.node-meta {
display: flex;
align-items: center;
gap: 12px;
.node-duration {
.node-info {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: #909399;
}
.arrow-icon {
color: #c0c4cc;
transition: transform 0.3s;
gap: 6px;
.node-icon {
flex-shrink: 0;
stroke: currentColor;
}
.node-name {
font-family: 'PingFang SC';
font-weight: 400;
font-size: 14px;
line-height: 1.57;
color: #C62828;
}
}
}
&:hover .arrow-icon {
transform: translateX(4px);
.node-right {
.node-status {
font-family: 'PingFang SC';
font-weight: 400;
font-size: 14px;
line-height: 1.57;
color: #C62828;
text-align: right;
}
}
// 已完成的节点样式
&.completed {
.node-left {
.node-number {
color: #4E5969;
}
.node-info {
.node-icon {
stroke: currentColor;
}
.node-name {
color: #4E5969;
}
}
}
.node-right {
.node-status {
color: #4E5969;
}
}
}
}

393
schoolNewsWeb/src/views/public/course/components/CourseLearning.vue
View File

@@ -6,9 +6,9 @@
<el-button @click="handleBack" :icon="ArrowLeft" text>
{{ backButtonText }}
</el-button>
<span class="course-name">{{ courseVO?.course.name }}</span>
<span class="course-name">{{ courseItemVO?.name }}</span>
</div>
<div class="header-right">
<span class="progress-info">
学习进度：{{ currentProgress }}%
@@ -26,38 +26,25 @@
<div class="chapter-sidebar" :class="{ collapsed: sidebarCollapsed }">
<div class="sidebar-header">
<span class="sidebar-title">课程目录</span>
<el-button
text
:icon="Fold"
@click="toggleSidebar"
/>
<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="(chapterVO, chapterIndex) in courseVO?.courseChapters || []"
:key="chapterIndex"
:name="chapterIndex"
>
<el-collapse-item v-for="(chapterItem, chapterIndex) in courseItemVO?.chapters || []" :key="chapterIndex"
:name="chapterIndex">
<template #title>
<div class="chapter-item-title">
<span>{{ chapterIndex + 1 }}. {{ chapterVO.chapter.name }}</span>
<span class="chapter-count">{{ chapterVO.nodes.length }}</span>
<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 chapterVO.nodes"
:key="nodeIndex"
class="node-item-bar"
:class="{
active: currentChapterIndex === chapterIndex && currentNodeIndex === nodeIndex,
completed: isNodeCompleted(chapterIndex, nodeIndex)
}"
@click="selectNode(chapterIndex, nodeIndex)"
>
<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 />
@@ -70,12 +57,7 @@
<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 v-if="node.isRequired === 1" type="danger" size="small" effect="plain">
必修
</el-tag>
<span v-if="node.duration" class="node-duration">
@@ -90,12 +72,8 @@
</div>
<!-- 右侧：学习内容区 -->
<div
ref="contentAreaRef"
class="content-area"
:class="{ expanded: sidebarCollapsed }"
@scroll="handleContentScroll"
>
<div ref="contentAreaRef" class="content-area" :class="{ expanded: sidebarCollapsed }"
@scroll="handleContentScroll">
<!-- 加载中 -->
<div v-if="loading" class="loading-container">
<el-skeleton :rows="8" animated />
@@ -110,7 +88,9 @@
必修
</el-tag>
<span v-if="currentNode.duration" class="duration">
<el-icon><Clock /></el-icon>
<el-icon>
<Clock />
</el-icon>
{{ currentNode.duration }} 分钟
</span>
</div>
@@ -118,11 +98,7 @@
<!-- 文章资源 -->
<div v-if="currentNode.nodeType === 0 && articleData" class="article-content">
<ArticleShowView
:as-dialog="false"
:article-data="articleData"
:category-list="[]"
/>
<ArticleShowView :as-dialog="false" :article-data="articleData" :category-list="[]" />
</div>
<!-- 富文本内容 -->
@@ -132,32 +108,26 @@
<!-- 文件内容 -->
<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 :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 :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>
<el-icon class="file-icon">
<Document />
</el-icon>
<p>文件资源</p>
<el-button type="primary" @click="downloadFile(currentNode.videoUrl)">
<el-icon><Download /></el-icon>
<el-icon>
<Download />
</el-icon>
下载文件
</el-button>
</div>
@@ -165,30 +135,23 @@
<!-- 学习操作 -->
<div class="learning-actions">
<el-button
@click="markAsComplete"
:type="isCurrentNodeCompleted ? 'success' : 'primary'"
:disabled="isCurrentNodeCompleted"
>
<el-icon><CircleCheck /></el-icon>
<el-button @click="markAsComplete" :type="isCurrentNodeCompleted ? 'success' : 'primary'"
:disabled="isCurrentNodeCompleted">
<el-icon>
<CircleCheck />
</el-icon>
{{ isCurrentNodeCompleted ? '已完成' : '标记为完成' }}
</el-button>
<div class="navigation-buttons">
<el-button
@click="gotoPrevious"
:disabled="!hasPrevious"
:icon="ArrowLeft"
>
<el-button @click="gotoPrevious" :disabled="!hasPrevious" :icon="ArrowLeft">
上一节
</el-button>
<el-button
@click="gotoNext"
:disabled="!hasNext"
type="primary"
>
<el-button @click="gotoNext" :disabled="!hasNext" type="primary">
下一节
<el-icon><ArrowRight /></el-icon>
<el-icon>
<ArrowRight />
</el-icon>
</el-button>
</div>
</div>
@@ -201,6 +164,7 @@
</div>
</div>
</div>
</template>
<script setup lang="ts">
@@ -225,7 +189,7 @@ import { learningRecordApi, learningHistoryApi } from '@/apis/study';
import { resourceApi } from '@/apis/resource';
import { useStore } from 'vuex';
import { FILE_DOWNLOAD_URL } from '@/config';
import type { CourseVO, LearningRecord, TbLearningHistory } from '@/types';
import type { CourseItemVO, LearningRecord, TbLearningHistory } from '@/types';
interface Props {
courseId: string;
@@ -237,7 +201,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), {
chapterIndex: 0,
nodeIndex: 0,
backButtonText: '返回课程详情'
backButtonText: '返回'
});
const emit = defineEmits<{
@@ -249,7 +213,7 @@ const userInfo = computed(() => store.getters['auth/user']);
const route = useRoute();
const loading = ref(false);
const courseVO = ref<CourseVO | null>(null);
const courseItemVO = ref<CourseItemVO | null>(null);
const currentChapterIndex = ref(0);
const currentNodeIndex = ref(0);
const sidebarCollapsed = ref(false);
@@ -274,32 +238,37 @@ 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(() => {
if (!courseVO.value || !courseVO.value.courseChapters) return null;
const chapter = courseVO.value.courseChapters[currentChapterIndex.value];
if (!chapter || !chapter.nodes) return null;
return chapter.nodes[currentNodeIndex.value] || null;
const nodes = getChapterNodes(currentChapterIndex.value);
return nodes[currentNodeIndex.value] || null;
});
// 当前进度
const currentProgress = computed(() => {
if (!courseVO.value || !courseVO.value.courseChapters) return 0;
if (!courseItemVO.value || !courseItemVO.value.chapters) return 0;
let totalNodes = 0;
let completedCount = 0;
courseVO.value.courseChapters.forEach((chapter, chapterIdx) => {
chapter.nodes.forEach((node, nodeIdx) => {
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);
});
@@ -314,23 +283,21 @@ const hasPrevious = computed(() => {
// 是否有下一节
const hasNext = computed(() => {
if (!courseVO.value || !courseVO.value.courseChapters) return false;
const chapters = courseVO.value.courseChapters;
const currentChapter = chapters[currentChapterIndex.value];
if (!currentChapter) return false;
if (!courseItemVO.value || !courseItemVO.value.chapters) return false;
const chapters = courseItemVO.value.chapters;
const currentChapterNodes = getChapterNodes(currentChapterIndex.value);
// 不是当前章节的最后一个节点
if (currentNodeIndex.value < currentChapter.nodes.length - 1) {
if (currentNodeIndex.value < currentChapterNodes.length - 1) {
return true;
}
// 不是最后一章
if (currentChapterIndex.value < chapters.length - 1) {
return true;
}
return false;
});
@@ -357,10 +324,10 @@ watch(currentNode, async () => {
await saveHistoryRecord();
stopHistoryTimer();
}
if (currentNode.value) {
loadNodeContent();
// 为新节点创建学习历史记录
await createHistoryRecord();
}
@@ -373,7 +340,7 @@ onMounted(() => {
onBeforeUnmount(() => {
stopLearningTimer();
saveLearningProgress();
// 保存学习历史记录
if (learningHistory.value) {
saveHistoryRecord();
@@ -385,20 +352,18 @@ onBeforeUnmount(() => {
async function loadCourse() {
loading.value = true;
try {
const res = await courseApi.getCourseById(props.courseId);
const res = await courseApi.getCourseProgress(props.courseId);
if (res.success && res.data) {
courseVO.value = res.data;
courseItemVO.value = res.data;
// 确保数据结构完整
if (!courseVO.value.courseChapters) {
courseVO.value.courseChapters = [];
if (!courseItemVO.value.chapters) {
courseItemVO.value.chapters = [];
}
courseVO.value.courseChapters.forEach((chapter) => {
if (!chapter.nodes) {
chapter.nodes = [];
}
});
if (!courseItemVO.value.chapterNodes) {
courseItemVO.value.chapterNodes = {};
}
// 加载学习记录
await loadLearningRecord();
}
@@ -413,17 +378,17 @@ async function loadCourse() {
// 加载学习记录
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];
// 从本地存储加载已完成的节点列表
const savedProgress = localStorage.getItem(`course_${props.courseId}_nodes`);
if (savedProgress) {
@@ -441,17 +406,22 @@ async function loadLearningRecord() {
// 创建学习记录
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 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,
chapterID: currentChapter?.chapterID,
nodeID: currentNodeData?.nodeID,
taskID: route.query.taskId as string
});
if (res.success && res.data) {
learningRecord.value = res.data;
console.log('学习记录创建成功');
@@ -464,7 +434,7 @@ async function createLearningRecord() {
// 加载节点内容
async function loadNodeContent() {
if (!currentNode.value) return;
// 如果是文章资源，加载文章内容
if (currentNode.value.nodeType === 0 && currentNode.value.resourceID) {
try {
@@ -481,7 +451,7 @@ async function loadNodeContent() {
} else {
articleData.value = null;
}
// 展开当前章节
if (!activeChapters.value.includes(currentChapterIndex.value)) {
activeChapters.value.push(currentChapterIndex.value);
@@ -494,20 +464,20 @@ 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();
@@ -515,25 +485,25 @@ async function selectNode(chapterIndex: number, nodeIndex: number) {
// 上一节
function gotoPrevious() {
if (!hasPrevious.value || !courseVO.value) return;
if (!hasPrevious.value || !courseItemVO.value) return;
if (currentNodeIndex.value > 0) {
currentNodeIndex.value--;
} else {
// 跳到上一章的最后一节
currentChapterIndex.value--;
const prevChapter = courseVO.value.courseChapters[currentChapterIndex.value];
currentNodeIndex.value = prevChapter.nodes.length - 1;
const prevChapterNodes = getChapterNodes(currentChapterIndex.value);
currentNodeIndex.value = prevChapterNodes.length - 1;
}
}
// 下一节
function gotoNext() {
if (!hasNext.value || !courseVO.value) return;
const currentChapter = courseVO.value.courseChapters[currentChapterIndex.value];
if (currentNodeIndex.value < currentChapter.nodes.length - 1) {
if (!hasNext.value || !courseItemVO.value) return;
const currentChapterNodes = getChapterNodes(currentChapterIndex.value);
if (currentNodeIndex.value < currentChapterNodes.length - 1) {
currentNodeIndex.value++;
} else {
// 跳到下一章的第一节
@@ -545,12 +515,12 @@ function gotoNext() {
// 标记为完成
async function markAsComplete() {
if (!currentNode.value) return;
const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
await markNodeComplete(nodeKey);
ElMessage.success('已标记为完成');
// 自动跳转到下一节
if (hasNext.value) {
setTimeout(() => {
@@ -568,7 +538,7 @@ function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
// 开始学习计时
function startLearningTimer() {
learningStartTime.value = Date.now();
// 每10秒保存一次学习进度（如果未完成）
learningTimer.value = window.setInterval(() => {
// 如果课程已完成，停止定时器
@@ -591,16 +561,16 @@ function stopLearningTimer() {
// 保存学习进度
async function saveLearningProgress() {
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 {
const updatedRecord = {
id: learningRecord.value.id,
@@ -611,14 +581,14 @@ async function saveLearningProgress() {
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;
} catch (error) {
@@ -629,24 +599,24 @@ 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();
@@ -656,7 +626,7 @@ async function markNodeComplete(nodeKey: string) {
// 标记课程完成
async function markCourseComplete() {
if (!userInfo.value?.id || !learningRecord.value) return;
try {
await learningRecordApi.markComplete({
id: learningRecord.value.id,
@@ -667,7 +637,7 @@ async function markCourseComplete() {
progress: 100,
isComplete: true
});
ElMessage.success('恭喜你完成了整个课程！');
} catch (error) {
console.error('标记课程完成失败:', error);
@@ -686,7 +656,7 @@ function handleContentScroll(event: Event) {
const scrollTop = target.scrollTop;
const scrollHeight = target.scrollHeight;
const clientHeight = target.clientHeight;
// 判断是否滚动到底部（留10px容差）
if (scrollHeight - scrollTop - clientHeight < 10) {
if (!hasScrolledToBottom.value) {
@@ -703,7 +673,7 @@ function handleVideoProgress(event: Event) {
// 可以在这里记录视频播放进度
const video = event.target as HTMLVideoElement;
const progress = (video.currentTime / video.duration) * 100;
// 如果播放超过80%，自动标记为完成
if (progress > 80 && !isCurrentNodeCompleted.value) {
// markAsComplete();
@@ -727,30 +697,30 @@ function initRichTextVideoListeners() {
'.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;
@@ -766,9 +736,9 @@ function initRichTextVideoListeners() {
function handleRichTextVideoEnded(videoIndex: number) {
// 标记该视频已完成
completedRichTextVideos.value.add(videoIndex);
const completedCount = completedRichTextVideos.value.size;
// 检查是否所有视频都已完成
if (completedCount >= totalRichTextVideos.value) {
if (!isCurrentNodeCompleted.value) {
@@ -782,7 +752,7 @@ function handleRichTextVideoEnded(videoIndex: number) {
function handleAudioProgress(event: Event) {
const audio = event.target as HTMLAudioElement;
const progress = (audio.currentTime / audio.duration) * 100;
if (progress > 80 && !isCurrentNodeCompleted.value) {
// markAsComplete();
}
@@ -831,13 +801,13 @@ function toggleSidebar() {
// 创建学习历史记录
async function createHistoryRecord() {
if (!userInfo.value?.id || !courseVO.value || !currentNode.value) return;
if (!userInfo.value?.id || !courseItemVO.value || !currentNode.value) return;
try {
const chapterVO = courseVO.value.courseChapters[currentChapterIndex.value];
const chapter = chapterVO?.chapter;
const chapterItem = courseItemVO.value.chapters![currentChapterIndex.value];
const chapter = chapterItem;
const node = currentNode.value;
const res = await learningHistoryApi.recordCourseLearn(
userInfo.value.id,
props.courseId,
@@ -845,11 +815,11 @@ async function createHistoryRecord() {
node.nodeID,
0 // 初始时长为0
);
if (res.success && res.data) {
learningHistory.value = res.data;
console.log('✅ 课程学习历史记录创建成功:', learningHistory.value);
// 开始计时
startHistoryTimer();
}
@@ -861,7 +831,7 @@ async function createHistoryRecord() {
// 开始学习历史计时
function startHistoryTimer() {
historyStartTime.value = Date.now();
// 每30秒保存一次学习历史
historyTimer.value = window.setInterval(() => {
saveHistoryRecord();
@@ -879,28 +849,28 @@ function stopHistoryTimer() {
// 保存学习历史记录
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) {
@@ -911,13 +881,13 @@ async function saveHistoryRecord() {
function handleBack() {
stopLearningTimer();
saveLearningProgress();
// 保存学习历史记录
if (learningHistory.value) {
saveHistoryRecord();
}
stopHistoryTimer();
emit('back');
}
</script>
@@ -941,19 +911,19 @@ function handleBack() {
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;
@@ -974,7 +944,7 @@ function handleBack() {
left: 16px;
top: 16px;
z-index: 10;
:deep(.el-button) {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
@@ -986,26 +956,26 @@ function handleBack() {
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;
}
@@ -1019,7 +989,7 @@ function handleBack() {
padding-right: 20px;
font-size: 14px;
font-weight: 500;
.chapter-count {
font-size: 12px;
color: #909399;
@@ -1042,48 +1012,48 @@ function handleBack() {
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;
@@ -1095,7 +1065,7 @@ function handleBack() {
flex: 1;
overflow-y: auto;
background: #fff;
&.expanded {
margin-left: 0;
}
@@ -1115,19 +1085,19 @@ function handleBack() {
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;
@@ -1150,7 +1120,7 @@ function handleBack() {
max-width: 100%;
height: auto;
}
:deep(video) {
max-width: 100%;
height: auto;
@@ -1159,7 +1129,7 @@ function handleBack() {
.file-content {
margin-bottom: 24px;
.video-wrapper,
.audio-wrapper {
display: flex;
@@ -1167,17 +1137,17 @@ function handleBack() {
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;
@@ -1186,13 +1156,13 @@ function handleBack() {
padding: 60px;
background: #f5f7fa;
border-radius: 8px;
.file-icon {
font-size: 64px;
color: #909399;
margin-bottom: 16px;
}
p {
margin-bottom: 16px;
color: #606266;
@@ -1206,7 +1176,7 @@ function handleBack() {
align-items: center;
padding-top: 24px;
border-top: 1px solid #e4e7ed;
.navigation-buttons {
display: flex;
gap: 12px;
@@ -1221,4 +1191,3 @@ function handleBack() {
min-height: 400px;
}
</style>

2
schoolNewsWeb/src/views/public/course/components/CourseList.vue
View File

@@ -150,7 +150,7 @@ onMounted(() => {
async function loadCourses() {
loading.value = true;
try {
const res = await courseApi.getCoursePage({page: currentPage.value, size: pageSize.value}, searchForm);
const res = await courseApi.getCoursePage({pageNumber: currentPage.value, pageSize: pageSize.value}, searchForm);
if (res.success && res.pageDomain) {
courseList.value = res.pageDomain.dataList || [];
total.value = res.pageDomain.pageParam.totalElements || 0;