web-课程列表
This commit is contained in:
654
schoolNewsWeb/src/views/course/components/CourseAdd.vue
Normal file
654
schoolNewsWeb/src/views/course/components/CourseAdd.vue
Normal file
@@ -0,0 +1,654 @@
|
||||
<template>
|
||||
<div class="course-add">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<el-button @click="handleCancel" :icon="ArrowLeft">返回</el-button>
|
||||
<h2 class="page-title">{{ props.courseID ? '编辑课程' : '新增课程' }}</h2>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="currentCourseVO"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<span class="card-header">基本信息</span>
|
||||
</template>
|
||||
|
||||
<el-form-item label="课程名称" prop="course.name">
|
||||
<el-input v-model="currentCourseVO.course.name" placeholder="请输入课程名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程封面" prop="course.coverImage">
|
||||
<FileUpload
|
||||
:as-dialog="false"
|
||||
list-type="cover"
|
||||
v-model:cover-url="currentCourseVO.course.coverImage"
|
||||
accept="image/*"
|
||||
:max-size="2"
|
||||
module="course"
|
||||
tip="建议尺寸 800x600"
|
||||
@success="handleCoverUploadSuccess"
|
||||
@remove="handleCoverRemove"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="授课老师" prop="course.teacher">
|
||||
<el-input v-model="currentCourseVO.course.teacher" placeholder="请输入授课老师" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程时长" prop="course.duration">
|
||||
<el-input-number
|
||||
v-model="currentCourseVO.course.duration"
|
||||
:min="0"
|
||||
placeholder="分钟"
|
||||
/>
|
||||
<span class="ml-2">分钟</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程描述" prop="course.description">
|
||||
<el-input
|
||||
v-model="currentCourseVO.course.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入课程描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序号" prop="course.orderNum">
|
||||
<el-input-number v-model="currentCourseVO.course.orderNum" :min="0" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="course.status">
|
||||
<el-radio-group v-model="currentCourseVO.course.status">
|
||||
<el-radio :label="0">未上线</el-radio>
|
||||
<el-radio :label="1">已上线</el-radio>
|
||||
<el-radio :label="2">已下架</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
|
||||
<!-- 章节管理 -->
|
||||
<el-card class="chapter-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header-flex">
|
||||
<span class="card-header">章节管理</span>
|
||||
<el-button type="primary" size="small" @click="addChapter">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加章节
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="currentCourseVO.courseChapters.length === 0" class="empty-tip">
|
||||
暂无章节，请点击"添加章节"按钮添加
|
||||
</div>
|
||||
|
||||
<el-collapse v-model="activeChapters">
|
||||
<el-collapse-item
|
||||
v-for="(chapterVO, chapterIndex) in currentCourseVO.courseChapters"
|
||||
:key="chapterIndex"
|
||||
:name="chapterIndex"
|
||||
>
|
||||
<template #title>
|
||||
<div class="chapter-title">
|
||||
<span>章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name || '未命名章节' }}</span>
|
||||
<div class="chapter-actions" @click.stop>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
@click="removeChapter(chapterIndex)"
|
||||
>
|
||||
删除章节
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 章节信息 -->
|
||||
<el-form-item
|
||||
:label="`章节${chapterIndex + 1}名称`"
|
||||
:prop="`courseChapters.${chapterIndex}.chapter.name`"
|
||||
:rules="[{ required: true, message: '请输入章节名称', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input v-model="chapterVO.chapter.name" placeholder="请输入章节名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
:label="`章节${chapterIndex + 1}排序`"
|
||||
:prop="`courseChapters.${chapterIndex}.chapter.orderNum`"
|
||||
>
|
||||
<el-input-number v-model="chapterVO.chapter.orderNum" :min="0" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 学习节点 -->
|
||||
<div class="nodes-section">
|
||||
<div class="nodes-header">
|
||||
<span class="nodes-title">学习节点</span>
|
||||
<el-button type="primary" size="small" @click="addNode(chapterIndex)">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加节点
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="chapterVO.nodes.length === 0" class="empty-tip">
|
||||
暂无学习节点
|
||||
</div>
|
||||
|
||||
<div v-else class="nodes-list">
|
||||
<el-card
|
||||
v-for="(node, nodeIndex) in chapterVO.nodes"
|
||||
:key="nodeIndex"
|
||||
class="node-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<template #header>
|
||||
<div class="node-header">
|
||||
<span>节点 {{ nodeIndex + 1 }}: {{ node.name || '未命名节点' }}</span>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
@click="removeNode(chapterIndex, nodeIndex)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form-item
|
||||
label="节点名称"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.name`"
|
||||
>
|
||||
<el-input v-model="node.name" placeholder="请输入节点名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="节点类型"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.nodeType`"
|
||||
>
|
||||
<el-radio-group v-model="node.nodeType">
|
||||
<el-radio :label="0">文章资源</el-radio>
|
||||
<el-radio :label="1">富文本</el-radio>
|
||||
<el-radio :label="2">上传文件</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文章资源选择 -->
|
||||
<el-form-item
|
||||
v-if="node.nodeType === 0"
|
||||
label="选择文章"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.resourceID`"
|
||||
>
|
||||
<el-select
|
||||
v-model="node.resourceID"
|
||||
filterable
|
||||
remote
|
||||
placeholder="搜索并选择文章"
|
||||
:remote-method="getNodeSearchMethod(chapterIndex, nodeIndex)"
|
||||
:loading="getNodeLoading(chapterIndex, nodeIndex)"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="article in getNodeArticleOptions(chapterIndex, nodeIndex)"
|
||||
:key="article.resourceID"
|
||||
:label="article.title"
|
||||
:value="article.resourceID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 富文本编辑 -->
|
||||
<el-form-item
|
||||
v-if="node.nodeType === 1"
|
||||
label="内容编辑"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.content`"
|
||||
>
|
||||
<RichTextComponent v-model="node.content" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文件上传 -->
|
||||
<el-form-item
|
||||
v-if="node.nodeType === 2"
|
||||
label="上传文件"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.videoUrl`"
|
||||
>
|
||||
<FileUpload
|
||||
:as-dialog="false"
|
||||
:multiple="false"
|
||||
module="course-node"
|
||||
:max-size="100"
|
||||
tip="支持上传视频、音频、文档等文件，单个文件不超过100MB"
|
||||
@success="(files) => handleNodeFileUploadSuccess(files, chapterIndex, nodeIndex)"
|
||||
/>
|
||||
<div v-if="node.videoUrl" class="file-info-display">
|
||||
<span>已上传文件</span>
|
||||
<el-button type="text" @click="node.videoUrl = ''">删除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="节点时长"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.duration`"
|
||||
>
|
||||
<el-input-number v-model="node.duration" :min="0" />
|
||||
<span class="ml-2">分钟</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="是否必修"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.isRequired`"
|
||||
>
|
||||
<el-switch
|
||||
v-model="node.isRequired"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="排序号"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.orderNum`"
|
||||
>
|
||||
<el-input-number v-model="node.orderNum" :min="0" />
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-form-item class="action-buttons">
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">
|
||||
{{ courseID ? '更新课程' : '创建课程' }}
|
||||
</el-button>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Plus, ArrowLeft } from '@element-plus/icons-vue';
|
||||
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 { Resource } from '@/types/resource';
|
||||
import type { SysFile } from '@/types';
|
||||
|
||||
defineOptions({
|
||||
name: 'CourseAdd'
|
||||
});
|
||||
|
||||
// 节点扩展类型（用于前端交互）
|
||||
interface NodeWithExtras extends CourseNode {
|
||||
loading?: boolean;
|
||||
articleOptions?: Resource[];
|
||||
searchMethod?: (query: string) => void;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
courseID?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
success: [];
|
||||
cancel: [];
|
||||
}>();
|
||||
|
||||
const formRef = ref();
|
||||
const submitting = ref(false);
|
||||
const activeChapters = ref<number[]>([]);
|
||||
|
||||
// 原始数据（用于比对）
|
||||
const originalCourseVO = ref<CourseVO>();
|
||||
// 当前编辑的数据
|
||||
const currentCourseVO = ref<CourseVO>({
|
||||
course: {
|
||||
name: '',
|
||||
coverImage: '',
|
||||
description: '',
|
||||
teacher: '',
|
||||
duration: 0,
|
||||
status: 0,
|
||||
orderNum: 0
|
||||
},
|
||||
courseChapters: [],
|
||||
courseTags: []
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
'course.name': [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
|
||||
'course.teacher': [{ required: true, message: '请输入授课老师', trigger: 'blur' }]
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.courseID) {
|
||||
loadCourse();
|
||||
}
|
||||
});
|
||||
|
||||
// 加载课程数据
|
||||
async function loadCourse() {
|
||||
try {
|
||||
const res = await courseApi.getCourseById(props.courseID!);
|
||||
if (res.success && res.data) {
|
||||
// 确保数据结构完整，处理 null 值
|
||||
const courseData = res.data;
|
||||
|
||||
// 确保 courseChapters 是数组
|
||||
if (!courseData.courseChapters) {
|
||||
courseData.courseChapters = [];
|
||||
}
|
||||
|
||||
// 确保 courseTags 是数组
|
||||
if (!courseData.courseTags) {
|
||||
courseData.courseTags = [];
|
||||
}
|
||||
|
||||
// 确保每个章节的 nodes 是数组
|
||||
courseData.courseChapters.forEach((chapterVO: ChapterVO) => {
|
||||
if (!chapterVO.nodes) {
|
||||
chapterVO.nodes = [];
|
||||
}
|
||||
});
|
||||
|
||||
// 保存原始数据
|
||||
originalCourseVO.value = JSON.parse(JSON.stringify(courseData));
|
||||
// 设置当前编辑数据
|
||||
currentCourseVO.value = JSON.parse(JSON.stringify(courseData));
|
||||
console.log(currentCourseVO.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载课程失败:', error);
|
||||
ElMessage.error('加载课程失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 添加章节
|
||||
function addChapter() {
|
||||
const newChapterVO: ChapterVO = {
|
||||
chapter: {
|
||||
chapterID: '',
|
||||
name: '',
|
||||
orderNum: currentCourseVO.value.courseChapters.length
|
||||
},
|
||||
nodes: []
|
||||
};
|
||||
currentCourseVO.value.courseChapters.push(newChapterVO);
|
||||
activeChapters.value.push(currentCourseVO.value.courseChapters.length - 1);
|
||||
}
|
||||
|
||||
// 删除章节
|
||||
function removeChapter(index: number) {
|
||||
currentCourseVO.value.courseChapters.splice(index, 1);
|
||||
// 更新激活的章节索引
|
||||
activeChapters.value = activeChapters.value
|
||||
.filter(i => i !== index)
|
||||
.map(i => i > index ? i - 1 : i);
|
||||
}
|
||||
|
||||
// 添加节点
|
||||
function addNode(chapterIndex: number) {
|
||||
const nodeIndex = currentCourseVO.value.courseChapters[chapterIndex].nodes.length;
|
||||
const newNode: NodeWithExtras = {
|
||||
nodeID: '',
|
||||
name: '',
|
||||
nodeType: 0,
|
||||
content: '',
|
||||
duration: 0,
|
||||
isRequired: 1,
|
||||
orderNum: nodeIndex,
|
||||
loading: false,
|
||||
articleOptions: [],
|
||||
searchMethod: (query: string) => searchArticles(query, chapterIndex, nodeIndex)
|
||||
};
|
||||
currentCourseVO.value.courseChapters[chapterIndex].nodes.push(newNode);
|
||||
}
|
||||
|
||||
// 删除节点
|
||||
function removeNode(chapterIndex: number, nodeIndex: number) {
|
||||
currentCourseVO.value.courseChapters[chapterIndex].nodes.splice(nodeIndex, 1);
|
||||
}
|
||||
|
||||
// 辅助函数：获取节点的 searchMethod
|
||||
function getNodeSearchMethod(chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
return node.searchMethod;
|
||||
}
|
||||
|
||||
// 辅助函数：获取节点的 loading 状态
|
||||
function getNodeLoading(chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
return node.loading || false;
|
||||
}
|
||||
|
||||
// 辅助函数：获取节点的 articleOptions
|
||||
function getNodeArticleOptions(chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[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;
|
||||
if (!query) {
|
||||
node.articleOptions = [];
|
||||
return;
|
||||
}
|
||||
|
||||
node.loading = true;
|
||||
try {
|
||||
const res = await resourceApi.getResourceList({
|
||||
keyword: query
|
||||
});
|
||||
if (res.success && res.dataList) {
|
||||
node.articleOptions = res.dataList;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('搜索文章失败:', error);
|
||||
} finally {
|
||||
node.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理封面上传成功
|
||||
function handleCoverUploadSuccess(files: SysFile[]) {
|
||||
if (files && files.length > 0) {
|
||||
// coverUrl已经通过v-model:cover-url自动更新了
|
||||
// 这里可以做一些额外的处理，比如记录fileID
|
||||
console.log('封面上传成功:', files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理封面删除
|
||||
function handleCoverRemove() {
|
||||
currentCourseVO.value.course.coverImage = '';
|
||||
}
|
||||
|
||||
// 处理节点文件上传成功
|
||||
function handleNodeFileUploadSuccess(files: SysFile[], chapterIndex: number, nodeIndex: number) {
|
||||
if (files && files.length > 0) {
|
||||
currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex].videoUrl = files[0].filePath || '';
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
|
||||
submitting.value = true;
|
||||
|
||||
// 先创建/更新课程
|
||||
let courseID = props.courseID;
|
||||
if (courseID) {
|
||||
const res = await courseApi.updateCourse({
|
||||
...currentCourseVO.value.course,
|
||||
courseID
|
||||
});
|
||||
if (!res.success) {
|
||||
throw new Error('更新课程失败');
|
||||
}
|
||||
} else {
|
||||
const res = await courseApi.createCourse(currentCourseVO.value);
|
||||
if (!res.success || !res.data?.course.courseID) {
|
||||
throw new Error('创建课程失败');
|
||||
}
|
||||
courseID = res.data.course.courseID;
|
||||
}
|
||||
ElMessage.success(props.courseID ? '课程更新成功' : '课程创建成功');
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
ElMessage.error('保存失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 取消
|
||||
function handleCancel() {
|
||||
emit('cancel');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-add {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card,
|
||||
.chapter-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.card-header-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.chapter-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nodes-section {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nodes-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.nodes-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.nodes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.node-card {
|
||||
:deep(.el-card__header) {
|
||||
padding: 12px 15px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-info-display {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
674
schoolNewsWeb/src/views/course/components/CourseDetail.vue
Normal file
674
schoolNewsWeb/src/views/course/components/CourseDetail.vue
Normal file
@@ -0,0 +1,674 @@
|
||||
<template>
|
||||
<div class="course-detail">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<el-button @click="handleBack" :icon="ArrowLeft">返回</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div v-if="loading" class="loading">
|
||||
<el-skeleton :rows="10" animated />
|
||||
</div>
|
||||
|
||||
<!-- 课程详情 -->
|
||||
<div v-else-if="courseVO" class="course-content">
|
||||
<!-- 课程封面和基本信息 -->
|
||||
<div class="course-header">
|
||||
<div class="cover-section">
|
||||
<img
|
||||
:src="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"
|
||||
>
|
||||
{{ 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>
|
||||
</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 v-if="courseVO.courseChapters.length === 0" class="empty-tip">
|
||||
暂无章节内容
|
||||
</div>
|
||||
|
||||
<el-collapse v-else v-model="activeChapters">
|
||||
<el-collapse-item
|
||||
v-for="(chapterVO, chapterIndex) in courseVO.courseChapters"
|
||||
:key="chapterIndex"
|
||||
:name="chapterIndex"
|
||||
>
|
||||
<template #title>
|
||||
<div class="chapter-title-bar">
|
||||
<span class="chapter-name">
|
||||
<el-icon><DocumentCopy /></el-icon>
|
||||
章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name }}
|
||||
</span>
|
||||
<span class="chapter-meta">
|
||||
{{ chapterVO.nodes.length }} 个节点
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 节点列表 -->
|
||||
<div v-if="chapterVO.nodes.length === 0" class="empty-tip">
|
||||
暂无学习节点
|
||||
</div>
|
||||
|
||||
<div v-else class="node-list">
|
||||
<div
|
||||
v-for="(node, nodeIndex) in chapterVO.nodes"
|
||||
:key="nodeIndex"
|
||||
class="node-item"
|
||||
@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>
|
||||
<div class="node-meta">
|
||||
<span v-if="node.duration" class="node-duration">
|
||||
<el-icon><Clock /></el-icon>
|
||||
{{ node.duration }} 分钟
|
||||
</span>
|
||||
<el-icon class="arrow-icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
|
||||
<!-- 收藏按钮（底部浮动） -->
|
||||
<div class="floating-collect">
|
||||
<el-button
|
||||
circle
|
||||
size="large"
|
||||
:icon="isCollected ? StarFilled : Star"
|
||||
@click="handleCollect"
|
||||
:type="isCollected ? 'warning' : 'default'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载失败 -->
|
||||
<div v-else class="error-tip">
|
||||
<el-empty description="加载课程失败" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {
|
||||
ArrowLeft,
|
||||
User,
|
||||
Clock,
|
||||
View,
|
||||
Reading,
|
||||
VideoPlay,
|
||||
Star,
|
||||
StarFilled,
|
||||
DocumentCopy,
|
||||
Document,
|
||||
Edit,
|
||||
Upload,
|
||||
ArrowRight
|
||||
} 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 { CollectionType } from '@/types';
|
||||
|
||||
interface Props {
|
||||
courseId: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'back': [];
|
||||
'start-learning': [courseId: string, chapterIndex: number, nodeIndex: number];
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const authStore = computed(() => store.state.auth);
|
||||
|
||||
const loading = ref(false);
|
||||
const enrolling = ref(false);
|
||||
const courseVO = ref<CourseVO | 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';
|
||||
});
|
||||
|
||||
watch(() => props.courseId, (newId) => {
|
||||
if (newId) {
|
||||
loadCourseDetail();
|
||||
checkCollectionStatus();
|
||||
loadLearningProgress();
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// 加载课程详情
|
||||
async function loadCourseDetail() {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 增加浏览次数
|
||||
courseApi.incrementViewCount(props.courseId);
|
||||
|
||||
const res = await courseApi.getCourseById(props.courseId);
|
||||
if (res.success && res.data) {
|
||||
courseVO.value = res.data;
|
||||
|
||||
// 确保数据结构完整
|
||||
if (!courseVO.value.courseChapters) {
|
||||
courseVO.value.courseChapters = [];
|
||||
}
|
||||
if (!courseVO.value.courseTags) {
|
||||
courseVO.value.courseTags = [];
|
||||
}
|
||||
courseVO.value.courseChapters.forEach((chapter) => {
|
||||
if (!chapter.nodes) {
|
||||
chapter.nodes = [];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
ElMessage.error('加载课程失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载课程失败:', error);
|
||||
ElMessage.error('加载课程失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查收藏状态
|
||||
async function checkCollectionStatus() {
|
||||
if (!authStore.value.userInfo?.userID) return;
|
||||
|
||||
try {
|
||||
const res = await userCollectionApi.isCollected(
|
||||
authStore.value.userInfo.userID,
|
||||
CollectionType.COURSE,
|
||||
props.courseId
|
||||
);
|
||||
if (res.success) {
|
||||
isCollected.value = res.data || false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查收藏状态失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载学习进度
|
||||
async function loadLearningProgress() {
|
||||
if (!authStore.value.userInfo?.userID) return;
|
||||
|
||||
try {
|
||||
const res = await learningRecordApi.getRecordList({
|
||||
userID: authStore.value.userInfo.userID,
|
||||
resourceType: 2, // 课程类型
|
||||
resourceID: props.courseId
|
||||
});
|
||||
|
||||
if (res.success && res.dataList && res.dataList.length > 0) {
|
||||
learningProgress.value = res.dataList[0];
|
||||
isEnrolled.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载学习进度失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理收藏
|
||||
async function handleCollect() {
|
||||
if (!authStore.value.userInfo?.userID) {
|
||||
ElMessage.warning('请先登录');
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (isCollected.value) {
|
||||
// 取消收藏
|
||||
const res = await userCollectionApi.removeCollection(
|
||||
authStore.value.userInfo.userID,
|
||||
CollectionType.COURSE,
|
||||
props.courseId
|
||||
);
|
||||
if (res.success) {
|
||||
isCollected.value = false;
|
||||
ElMessage.success('已取消收藏');
|
||||
}
|
||||
} else {
|
||||
// 添加收藏
|
||||
const res = await userCollectionApi.addCollection({
|
||||
userID: authStore.value.userInfo.userID,
|
||||
collectionType: CollectionType.COURSE,
|
||||
collectionID: props.courseId
|
||||
});
|
||||
if (res.success) {
|
||||
isCollected.value = true;
|
||||
ElMessage.success('收藏成功');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('收藏操作失败:', error);
|
||||
ElMessage.error('操作失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 开始学习
|
||||
async function handleStartLearning() {
|
||||
if (!authStore.value.userInfo?.userID) {
|
||||
ElMessage.warning('请先登录');
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!courseVO.value || courseVO.value.courseChapters.length === 0) {
|
||||
ElMessage.warning('课程暂无内容');
|
||||
return;
|
||||
}
|
||||
|
||||
enrolling.value = true;
|
||||
try {
|
||||
// 如果未报名，创建学习记录
|
||||
if (!isEnrolled.value) {
|
||||
await courseApi.incrementLearnCount(props.courseId);
|
||||
await learningRecordApi.createRecord({
|
||||
userID: authStore.value.userInfo.userID,
|
||||
resourceType: 2, // 课程
|
||||
resourceID: props.courseId,
|
||||
progress: 0,
|
||||
duration: 0,
|
||||
isComplete: false
|
||||
});
|
||||
isEnrolled.value = true;
|
||||
}
|
||||
|
||||
// 跳转到学习页面，默认从第一章第一节开始
|
||||
emit('start-learning', props.courseId, 0, 0);
|
||||
} catch (error) {
|
||||
console.error('开始学习失败:', error);
|
||||
ElMessage.error('开始学习失败');
|
||||
} finally {
|
||||
enrolling.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 点击节点
|
||||
function handleNodeClick(chapterIndex: number, nodeIndex: number) {
|
||||
if (!authStore.value.userInfo?.userID) {
|
||||
ElMessage.warning('请先登录');
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
emit('start-learning', props.courseId, chapterIndex, nodeIndex);
|
||||
}
|
||||
|
||||
// 返回
|
||||
function handleBack() {
|
||||
emit('back');
|
||||
}
|
||||
|
||||
// 格式化时长
|
||||
function formatDuration(minutes?: number): string {
|
||||
if (!minutes) return '0分钟';
|
||||
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}小时${mins}分钟`;
|
||||
}
|
||||
return `${mins}分钟`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-detail {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.course-header {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
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;
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
|
||||
.el-icon {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-description {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.learning-progress {
|
||||
padding: 16px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
.progress-text {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chapter-card {
|
||||
:deep(.el-card__header) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
.chapter-count {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.node-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
margin: 8px 0;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #f0f2f5;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.node-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
|
||||
.node-icon {
|
||||
color: #409eff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.node-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.node-duration {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
color: #c0c4cc;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .arrow-icon {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error-tip {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.floating-collect {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 40px;
|
||||
z-index: 100;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
bottom: 60px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
897
schoolNewsWeb/src/views/course/components/CourseLearning.vue
Normal file
897
schoolNewsWeb/src/views/course/components/CourseLearning.vue
Normal file
@@ -0,0 +1,897 @@
|
||||
<template>
|
||||
<div class="course-learning">
|
||||
<!-- 学习页头部 -->
|
||||
<div class="learning-header">
|
||||
<div class="header-left">
|
||||
<el-button @click="handleBack" :icon="ArrowLeft" text>
|
||||
返回课程详情
|
||||
</el-button>
|
||||
<span class="course-name">{{ courseVO?.course.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<span class="progress-info">
|
||||
学习进度：{{ currentProgress }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="learning-container">
|
||||
<!-- 左侧：章节目录 -->
|
||||
<div class="chapter-sidebar" :class="{ collapsed: sidebarCollapsed }">
|
||||
<div class="sidebar-header">
|
||||
<span class="sidebar-title">课程目录</span>
|
||||
<el-button
|
||||
text
|
||||
:icon="sidebarCollapsed ? Expand : 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"
|
||||
>
|
||||
<template #title>
|
||||
<div class="chapter-item-title">
|
||||
<span>{{ chapterIndex + 1 }}. {{ chapterVO.chapter.name }}</span>
|
||||
<span class="chapter-count">{{ chapterVO.nodes.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 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 class="content-area" :class="{ expanded: sidebarCollapsed }">
|
||||
<!-- 加载中 -->
|
||||
<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">
|
||||
<ArticleShowView
|
||||
:as-dialog="false"
|
||||
:article-data="articleData"
|
||||
:category-list="[]"
|
||||
/>
|
||||
</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-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>
|
||||
<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 } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Expand,
|
||||
Fold,
|
||||
CircleCheck,
|
||||
Document,
|
||||
Edit,
|
||||
Upload,
|
||||
Clock,
|
||||
Download
|
||||
} from '@element-plus/icons-vue';
|
||||
import { ArticleShowView } from '@/views/article';
|
||||
import { courseApi } from '@/apis/study';
|
||||
import { learningRecordApi } from '@/apis/study';
|
||||
import { resourceApi } from '@/apis/resource';
|
||||
import { useStore } from 'vuex';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
import type { CourseVO, LearningRecord } from '@/types';
|
||||
|
||||
interface Props {
|
||||
courseId: string;
|
||||
chapterIndex?: number;
|
||||
nodeIndex?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
chapterIndex: 0,
|
||||
nodeIndex: 0
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
'back': [];
|
||||
}>();
|
||||
|
||||
const store = useStore();
|
||||
const authStore = computed(() => store.state.auth);
|
||||
|
||||
const loading = ref(false);
|
||||
const courseVO = ref<CourseVO | 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 learningRecord = ref<LearningRecord | null>(null);
|
||||
const completedNodes = ref<Set<string>>(new Set());
|
||||
const learningStartTime = ref<number>(0);
|
||||
const learningTimer = ref<number | null>(null);
|
||||
|
||||
// 当前节点
|
||||
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 currentProgress = computed(() => {
|
||||
if (!courseVO.value || !courseVO.value.courseChapters) return 0;
|
||||
|
||||
let totalNodes = 0;
|
||||
let completedCount = 0;
|
||||
|
||||
courseVO.value.courseChapters.forEach((chapter, chapterIdx) => {
|
||||
chapter.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 (!courseVO.value || !courseVO.value.courseChapters) return false;
|
||||
|
||||
const chapters = courseVO.value.courseChapters;
|
||||
const currentChapter = chapters[currentChapterIndex.value];
|
||||
|
||||
if (!currentChapter) return false;
|
||||
|
||||
// 不是当前章节的最后一个节点
|
||||
if (currentNodeIndex.value < currentChapter.nodes.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, () => {
|
||||
if (currentNode.value) {
|
||||
loadNodeContent();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
startLearningTimer();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopLearningTimer();
|
||||
saveLearningProgress();
|
||||
});
|
||||
|
||||
// 加载课程
|
||||
async function loadCourse() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await courseApi.getCourseById(props.courseId);
|
||||
if (res.success && res.data) {
|
||||
courseVO.value = res.data;
|
||||
|
||||
// 确保数据结构完整
|
||||
if (!courseVO.value.courseChapters) {
|
||||
courseVO.value.courseChapters = [];
|
||||
}
|
||||
courseVO.value.courseChapters.forEach((chapter) => {
|
||||
if (!chapter.nodes) {
|
||||
chapter.nodes = [];
|
||||
}
|
||||
});
|
||||
|
||||
// 加载学习记录
|
||||
await loadLearningRecord();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载课程失败:', error);
|
||||
ElMessage.error('加载课程失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载学习记录
|
||||
async function loadLearningRecord() {
|
||||
if (!authStore.value.userInfo?.userID) return;
|
||||
|
||||
try {
|
||||
const res = await learningRecordApi.getRecordList({
|
||||
userID: authStore.value.userInfo.userID,
|
||||
resourceType: 2, // 课程
|
||||
resourceID: 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));
|
||||
}
|
||||
}
|
||||
} 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);
|
||||
}
|
||||
}
|
||||
|
||||
// 选择节点
|
||||
function selectNode(chapterIndex: number, nodeIndex: number) {
|
||||
currentChapterIndex.value = chapterIndex;
|
||||
currentNodeIndex.value = nodeIndex;
|
||||
}
|
||||
|
||||
// 上一节
|
||||
function gotoPrevious() {
|
||||
if (!hasPrevious.value || !courseVO.value) return;
|
||||
|
||||
if (currentNodeIndex.value > 0) {
|
||||
currentNodeIndex.value--;
|
||||
} else {
|
||||
// 跳到上一章的最后一节
|
||||
currentChapterIndex.value--;
|
||||
const prevChapter = courseVO.value.courseChapters[currentChapterIndex.value];
|
||||
currentNodeIndex.value = prevChapter.nodes.length - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 下一节
|
||||
function gotoNext() {
|
||||
if (!hasNext.value || !courseVO.value) return;
|
||||
|
||||
const currentChapter = courseVO.value.courseChapters[currentChapterIndex.value];
|
||||
|
||||
if (currentNodeIndex.value < currentChapter.nodes.length - 1) {
|
||||
currentNodeIndex.value++;
|
||||
} else {
|
||||
// 跳到下一章的第一节
|
||||
currentChapterIndex.value++;
|
||||
currentNodeIndex.value = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 标记为完成
|
||||
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))
|
||||
);
|
||||
|
||||
ElMessage.success('已标记为完成');
|
||||
|
||||
// 自动跳转到下一节
|
||||
if (hasNext.value) {
|
||||
setTimeout(() => {
|
||||
gotoNext();
|
||||
}, 500);
|
||||
} else {
|
||||
// 课程全部完成
|
||||
ElMessage.success('恭喜你完成了整个课程！');
|
||||
}
|
||||
|
||||
// 更新学习进度
|
||||
saveLearningProgress();
|
||||
}
|
||||
|
||||
// 判断节点是否完成
|
||||
function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
|
||||
const nodeKey = `${chapterIndex}-${nodeIndex}`;
|
||||
return completedNodes.value.has(nodeKey);
|
||||
}
|
||||
|
||||
// 开始学习计时
|
||||
function startLearningTimer() {
|
||||
learningStartTime.value = Date.now();
|
||||
|
||||
// 每分钟保存一次学习进度
|
||||
learningTimer.value = window.setInterval(() => {
|
||||
saveLearningProgress();
|
||||
}, 60000); // 60秒
|
||||
}
|
||||
|
||||
// 停止学习计时
|
||||
function stopLearningTimer() {
|
||||
if (learningTimer.value) {
|
||||
clearInterval(learningTimer.value);
|
||||
learningTimer.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存学习进度
|
||||
async function saveLearningProgress() {
|
||||
if (!authStore.value.userInfo?.userID || !learningRecord.value) return;
|
||||
|
||||
const currentTime = Date.now();
|
||||
const duration = Math.floor((currentTime - learningStartTime.value) / 1000); // 秒
|
||||
|
||||
try {
|
||||
await learningRecordApi.updateRecord({
|
||||
...learningRecord.value,
|
||||
duration: (learningRecord.value.duration || 0) + duration,
|
||||
progress: currentProgress.value,
|
||||
isComplete: currentProgress.value === 100,
|
||||
lastLearnTime: new Date().toISOString()
|
||||
});
|
||||
|
||||
// 重置开始时间
|
||||
learningStartTime.value = currentTime;
|
||||
} catch (error) {
|
||||
console.error('保存学习进度失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理视频进度
|
||||
function handleVideoProgress(event: Event) {
|
||||
// 可以在这里记录视频播放进度
|
||||
const video = event.target as HTMLVideoElement;
|
||||
const progress = (video.currentTime / video.duration) * 100;
|
||||
|
||||
// 如果播放超过80%，自动标记为完成
|
||||
if (progress > 80 && !isCurrentNodeCompleted.value) {
|
||||
// markAsComplete();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理视频结束
|
||||
function handleVideoEnded() {
|
||||
if (!isCurrentNodeCompleted.value) {
|
||||
markAsComplete();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理音频进度
|
||||
function handleAudioProgress(event: Event) {
|
||||
const audio = event.target as HTMLAudioElement;
|
||||
const progress = (audio.currentTime / audio.duration) * 100;
|
||||
|
||||
if (progress > 80 && !isCurrentNodeCompleted.value) {
|
||||
// markAsComplete();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理音频结束
|
||||
function handleAudioEnded() {
|
||||
if (!isCurrentNodeCompleted.value) {
|
||||
markAsComplete();
|
||||
}
|
||||
}
|
||||
|
||||
// 判断是否为视频文件
|
||||
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;
|
||||
}
|
||||
|
||||
// 返回
|
||||
function handleBack() {
|
||||
stopLearningTimer();
|
||||
saveLearningProgress();
|
||||
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;
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
263
schoolNewsWeb/src/views/course/components/CourseList.vue
Normal file
263
schoolNewsWeb/src/views/course/components/CourseList.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="course-list">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form :model="searchForm" inline class="search-form">
|
||||
<el-form-item label="课程名称">
|
||||
<el-input
|
||||
v-model="searchForm.name"
|
||||
placeholder="请输入课程名称"
|
||||
clearable
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" clearable placeholder="请选择状态">
|
||||
<el-option label="未上线" :value="0" />
|
||||
<el-option label="已上线" :value="1" />
|
||||
<el-option label="已下架" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">
|
||||
<el-icon><Search /></el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增课程
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 课程表格 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="courseList"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column prop="name" label="课程名称" min-width="200" />
|
||||
<el-table-column label="封面" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
v-if="row.coverImage"
|
||||
:src="FILE_DOWNLOAD_URL + row.coverImage"
|
||||
style="width: 60px; height: 60px"
|
||||
fit="cover"
|
||||
/>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="teacher" label="授课老师" width="120" />
|
||||
<el-table-column prop="duration" label="时长(分钟)" width="120" />
|
||||
<el-table-column prop="learnCount" label="学习人数" width="100" />
|
||||
<el-table-column prop="viewCount" label="浏览次数" width="100" />
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.status === 0" type="info">未上线</el-tag>
|
||||
<el-tag v-else-if="row.status === 1" type="success">已上线</el-tag>
|
||||
<el-tag v-else-if="row.status === 2" type="danger">已下架</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" width="80" />
|
||||
<el-table-column label="操作" width="250" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" link @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 0"
|
||||
type="success"
|
||||
size="small"
|
||||
link
|
||||
@click="handleUpdateStatus(row, 1)"
|
||||
>
|
||||
上线
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 1"
|
||||
type="warning"
|
||||
size="small"
|
||||
link
|
||||
@click="handleUpdateStatus(row, 2)"
|
||||
>
|
||||
下架
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" link @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
class="pagination"
|
||||
@size-change="handlePageChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Search, Plus } from '@element-plus/icons-vue';
|
||||
import { courseApi } from '@/apis/study';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
import type { Course, PageParam } from '@/types';
|
||||
|
||||
defineOptions({
|
||||
name: 'CourseList'
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
add: [];
|
||||
edit: [course: Course];
|
||||
}>();
|
||||
|
||||
const loading = ref(false);
|
||||
const courseList = ref<Course[]>([]);
|
||||
const total = ref(0);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
const searchForm = reactive({
|
||||
name: '',
|
||||
status: undefined as number | undefined
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadCourses();
|
||||
});
|
||||
|
||||
// 加载课程列表
|
||||
async function loadCourses() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await courseApi.getCoursePage({page: currentPage.value, size: pageSize.value}, searchForm);
|
||||
if (res.success && res.pageDomain) {
|
||||
courseList.value = res.pageDomain.dataList || [];
|
||||
total.value = res.pageDomain.pageParam.totalElements || 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载课程列表失败:', error);
|
||||
ElMessage.error('加载课程列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function handleSearch() {
|
||||
currentPage.value = 1;
|
||||
loadCourses();
|
||||
}
|
||||
|
||||
// 重置
|
||||
function handleReset() {
|
||||
searchForm.name = '';
|
||||
searchForm.status = undefined;
|
||||
currentPage.value = 1;
|
||||
loadCourses();
|
||||
}
|
||||
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
emit('add');
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function handleEdit(course: Course) {
|
||||
emit('edit', course);
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
async function handleUpdateStatus(course: Course, status: number) {
|
||||
const statusText = status === 1 ? '上线' : '下架';
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${statusText}该课程吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const res = await courseApi.updateCourseStatus(course.courseID!, status);
|
||||
if (res.success) {
|
||||
ElMessage.success(`${statusText}成功`);
|
||||
loadCourses();
|
||||
} else {
|
||||
ElMessage.error(`${statusText}失败`);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('更新状态失败:', error);
|
||||
ElMessage.error(`${statusText}失败`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
async function handleDelete(course: Course) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除该课程吗？此操作不可恢复！', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const res = await courseApi.deleteCourse(course.courseID!);
|
||||
if (res.success) {
|
||||
ElMessage.success('删除成功');
|
||||
loadCourses();
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除失败:', error);
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变化
|
||||
function handlePageChange() {
|
||||
loadCourses();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
loadCourses
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-list {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
4
schoolNewsWeb/src/views/course/components/index.ts
Normal file
4
schoolNewsWeb/src/views/course/components/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { default as CourseDetail } from './CourseDetail.vue';
|
||||
export { default as CourseLearning } from './CourseLearning.vue';
|
||||
export { default as CourseAdd } from './CourseAdd.vue';
|
||||
export { default as CourseList } from './CourseList.vue';
|
||||
1
schoolNewsWeb/src/views/course/index.ts
Normal file
1
schoolNewsWeb/src/views/course/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './components';
|
||||
Reference in New Issue
Block a user