|
|
@@ -96,6 +96,7 @@
|
|
|
|
|
|
<!-- 弹框组件 -->
|
|
|
<DialogComponents
|
|
|
+ componentType="blockly"
|
|
|
:questionDialogVisible="questionDialogVisible"
|
|
|
:currentQuestion="courseConfig"
|
|
|
:gradeId="gradeId"
|
|
|
@@ -138,6 +139,7 @@ import TextToImage from "@/components/ai/image/TextToImage.vue";
|
|
|
import ImageToImage from "@/components/ai/image/ImageToImage.vue";
|
|
|
import ImageToVideo from "@/components/ai/video/ImageToVideo.vue";
|
|
|
import MapGame from "@/components/blockly/MapGame.vue";
|
|
|
+import {TopicType} from "@/api/programming/index.js";
|
|
|
|
|
|
const router = useRouter() // 获取当前路由对象
|
|
|
// 渲染页面标题
|
|
|
@@ -180,17 +182,9 @@ const courseId = ref('')
|
|
|
// 课程排序
|
|
|
const typeSort = ref('')
|
|
|
// 课程权限
|
|
|
-const courseDataScope = ref([])
|
|
|
+const blocklyDataScope = ref([])
|
|
|
// 测试账号禁用视频
|
|
|
const isDisabled = ref(false)
|
|
|
-//课程小节字典
|
|
|
-const menuDict = ref({
|
|
|
- 1: '课前回顾',
|
|
|
- 2: '课程引入',
|
|
|
- 3: '知识讲解',
|
|
|
- 4: '趣味实操',
|
|
|
- 5: '课程总结'
|
|
|
-})
|
|
|
|
|
|
|
|
|
// 视频切换事件处理函数
|
|
|
@@ -231,23 +225,7 @@ const playPreviousVideo = () => {
|
|
|
if (currentIndex > 0) {
|
|
|
const previousCourse = props.courseList[currentIndex - 1]
|
|
|
// 更新当前课程数据
|
|
|
- course.value = {
|
|
|
- id: previousCourse.id,
|
|
|
- courseName: previousCourse.bcName,
|
|
|
- courseContentType: previousCourse.bcContentType,
|
|
|
- courseVideoPath: previousCourse.bcContent,
|
|
|
- courseConfigList: previousCourse.blocklyConfigList,
|
|
|
- key: previousCourse.id.toString(),
|
|
|
- // blockly相关属性,用于MapGame组件
|
|
|
- blocklyBackground: previousCourse.blocklyBackground,
|
|
|
- blocklyTileSize: previousCourse.blocklyTileSize,
|
|
|
- blocklyStartPoint: previousCourse.blocklyStartPoint,
|
|
|
- blocklyEndPoint: previousCourse.blocklyEndPoint,
|
|
|
- blocklyWalkablePoints: previousCourse.blocklyWalkablePoints,
|
|
|
- blocklyUserDirection: previousCourse.blocklyUserDirection || 0,
|
|
|
- blocklyUserImage: previousCourse.blocklyUserImage,
|
|
|
- blocklyInfo: previousCourse.blocklyInfo
|
|
|
- };
|
|
|
+ handleParentCourseData(previousCourse)
|
|
|
courseId.value = course.value.id;
|
|
|
// 更新标题
|
|
|
boxIconTitle.value = course.value.courseName;
|
|
|
@@ -263,24 +241,9 @@ const playNextVideo = () => {
|
|
|
const currentIndex = props.courseList.findIndex(item => item.id === course.value.id)
|
|
|
if (currentIndex !== -1 && currentIndex < props.courseList.length - 1) {
|
|
|
const nextCourse = props.courseList[currentIndex + 1]
|
|
|
+
|
|
|
// 更新当前课程数据
|
|
|
- course.value = {
|
|
|
- id: nextCourse.id,
|
|
|
- courseName: nextCourse.bcName,
|
|
|
- courseContentType: nextCourse.bcContentType,
|
|
|
- courseVideoPath: nextCourse.bcContent,
|
|
|
- courseConfigList: nextCourse.blocklyConfigList,
|
|
|
- key: nextCourse.id.toString(),
|
|
|
- // blockly相关属性,用于MapGame组件
|
|
|
- blocklyBackground: nextCourse.blocklyBackground,
|
|
|
- blocklyTileSize: nextCourse.blocklyTileSize,
|
|
|
- blocklyStartPoint: nextCourse.blocklyStartPoint,
|
|
|
- blocklyEndPoint: nextCourse.blocklyEndPoint,
|
|
|
- blocklyWalkablePoints: nextCourse.blocklyWalkablePoints,
|
|
|
- blocklyUserDirection: nextCourse.blocklyUserDirection || 0,
|
|
|
- blocklyUserImage: nextCourse.blocklyUserImage,
|
|
|
- blocklyInfo: nextCourse.blocklyInfo
|
|
|
- };
|
|
|
+ handleParentCourseData(nextCourse)
|
|
|
courseId.value = course.value.id;
|
|
|
// 更新标题
|
|
|
boxIconTitle.value = course.value.courseName;
|
|
|
@@ -291,7 +254,7 @@ const playNextVideo = () => {
|
|
|
}
|
|
|
|
|
|
|
|
|
-// 播放下一个视频
|
|
|
+// 播放结束
|
|
|
const handleVideoEnded = () => {
|
|
|
// 记录当前视频ID为已观看
|
|
|
if (
|
|
|
@@ -346,12 +309,12 @@ const handleVideoEnded = () => {
|
|
|
const disableVideo = (index = course.value.key) => {
|
|
|
|
|
|
// 未配置课程权限,不禁用视频
|
|
|
- if (!courseDataScope.value || courseDataScope.value.length === 0) {
|
|
|
+ if (!blocklyDataScope.value || blocklyDataScope.value.length === 0) {
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
//配置了课程权限,且视频id不在权限列表中
|
|
|
- isDisabled.value = !courseDataScope.value.some(item => Number(item) === videoPathMap.value[index].id)
|
|
|
+ isDisabled.value = !blocklyDataScope.value.some(item => Number(item) === videoPathMap.value[index].id)
|
|
|
if (isDisabled.value) {
|
|
|
Message().notifyWarning('您的账号并未开放此课程!', true)
|
|
|
return isDisabled.value;
|
|
|
@@ -407,53 +370,37 @@ const handleSubmitAnswer = ({ selectedOption }) => {
|
|
|
questionDialogVisible.value = false
|
|
|
}
|
|
|
|
|
|
-// 课程小节数据提取
|
|
|
-const getAllCourseSections = () => {
|
|
|
- let sections = []
|
|
|
- const traverse = items => {
|
|
|
- items.forEach(item => {
|
|
|
- if (item.children) {
|
|
|
- traverse(item.children)
|
|
|
- } else {
|
|
|
- sections.push({ title: item.title, key: item.key })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- traverse(menuItems.value)
|
|
|
- return sections
|
|
|
-}
|
|
|
-
|
|
|
// 初始化课程数据范围
|
|
|
const initCourseDataScope = () => {
|
|
|
- const scope = localStorage.getItem("courseDataScope");
|
|
|
+ const scope = localStorage.getItem("blocklyDataScope");
|
|
|
if (scope) {
|
|
|
- courseDataScope.value = scope.split(",");
|
|
|
+ blocklyDataScope.value = scope.split(",");
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 处理父组件传递的课程数据
|
|
|
-const handleParentCourseData = () => {
|
|
|
- if (!props.courseData) return false;
|
|
|
- console.log('从父组件接收到的课程数据:', props.courseData);
|
|
|
+const handleParentCourseData = (courseData = props.courseData) => {
|
|
|
+ if (!courseData) return false;
|
|
|
+ console.log('从父组件接收到的课程数据:', courseData);
|
|
|
// 设置返回按钮标题
|
|
|
- boxIconTitle.value = props.courseData.bcName;
|
|
|
+ boxIconTitle.value = courseData.bcName;
|
|
|
// 重新定义course接收传递过来的数据
|
|
|
course.value = {
|
|
|
- id: props.courseData.id,
|
|
|
- courseName: props.courseData.bcName,
|
|
|
- courseContentType: props.courseData.bcContentType,
|
|
|
- courseVideoPath: props.courseData.bcContent,
|
|
|
- courseConfigList: props.courseData.blocklyConfigList,
|
|
|
- key: props.courseData.id.toString(),
|
|
|
+ id: courseData.id,
|
|
|
+ courseName: courseData.bcName,
|
|
|
+ courseContentType: courseData.bcContentType,
|
|
|
+ courseVideoPath: courseData.bcContent,
|
|
|
+ courseConfigList: courseData.blocklyConfigList,
|
|
|
+ key: courseData.id.toString(),
|
|
|
// blockly相关属性,用于MapGame组件
|
|
|
- blocklyBackground: props.courseData.blocklyBackground,
|
|
|
- blocklyTileSize: props.courseData.blocklyTileSize,
|
|
|
- blocklyStartPoint: props.courseData.blocklyStartPoint,
|
|
|
- blocklyEndPoint: props.courseData.blocklyEndPoint,
|
|
|
- blocklyWalkablePoints: props.courseData.blocklyWalkablePoints,
|
|
|
- blocklyUserDirection: props.courseData.blocklyUserDirection || 0,
|
|
|
- blocklyUserImage: props.courseData.blocklyUserImage,
|
|
|
- blocklyInfo: props.courseData.blocklyInfo
|
|
|
+ blocklyBackground: courseData.blocklyBackground,
|
|
|
+ blocklyTileSize: courseData.blocklyTileSize,
|
|
|
+ blocklyStartPoint: courseData.blocklyStartPoint,
|
|
|
+ blocklyEndPoint: courseData.blocklyEndPoint,
|
|
|
+ blocklyWalkablePoints: courseData.blocklyWalkablePoints,
|
|
|
+ blocklyUserDirection: courseData.blocklyUserDirection || 0,
|
|
|
+ blocklyUserImage: courseData.blocklyUserImage,
|
|
|
+ blocklyInfo: courseData.blocklyInfo
|
|
|
};
|
|
|
courseId.value = course.value.id;
|
|
|
// 如果有配置,禁用视频检查
|
|
|
@@ -482,60 +429,6 @@ const processCourseDataList = (data) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-// 构建菜单结构
|
|
|
-const buildMenuStructure = () => {
|
|
|
- let topName = '';
|
|
|
- courseList.value.forEach((courseTemp, index) => {
|
|
|
- let menuIndex = courseTemp.courseLabel + '-' + (index + 1);
|
|
|
- // 创建菜单项
|
|
|
- let menu = {
|
|
|
- key: menuIndex,
|
|
|
- index: menuIndex,
|
|
|
- title: courseTemp.courseName
|
|
|
- };
|
|
|
- if (topName === courseTemp.courseLabel) {
|
|
|
- // 如果与上一个课程同属一个大节,添加到子菜单
|
|
|
- let topMenu = menuItems.value[menuItems.value.length - 1];
|
|
|
- let topMenuChildren = topMenu.children;
|
|
|
- if (topMenuChildren) {
|
|
|
- topMenuChildren.push(menu);
|
|
|
- } else {
|
|
|
- // 如果当前大节还没有子菜单,创建子菜单结构
|
|
|
- topMenu = {
|
|
|
- ...topMenu,
|
|
|
- title: menuDict.value[courseTemp.courseLabel],
|
|
|
- children: [
|
|
|
- {
|
|
|
- key: topMenu.key,
|
|
|
- index: topMenu.index,
|
|
|
- title: topMenu.title,
|
|
|
- },
|
|
|
- menu
|
|
|
- ]
|
|
|
- };
|
|
|
- menuItems.value[menuItems.value.length - 1] = topMenu;
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 如果是新的大节,直接添加到菜单
|
|
|
- menuItems.value.push(menu);
|
|
|
- }
|
|
|
- topName = courseTemp.courseLabel;
|
|
|
- courseTemp['key'] = menuIndex;
|
|
|
- videoPathMap.value[menuIndex] = courseTemp;
|
|
|
-
|
|
|
- // 确定默认课程
|
|
|
- if (index === 0) {
|
|
|
- courseId.value = courseTemp.id;
|
|
|
- if (!disableVideo(menuIndex)) {
|
|
|
- course.value = courseTemp;
|
|
|
- } else {
|
|
|
- course.value.key = courseTemp.key;
|
|
|
- course.value.courseName = courseTemp.courseName;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
// 初始化已观看课程ID
|
|
|
const initWatchedCourseIds = () => {
|
|
|
const savedWatchedIds = localStorage.getItem('watchedCourseIds');
|
|
|
@@ -553,24 +446,32 @@ const initWatchedCourseIds = () => {
|
|
|
onMounted(async () => {
|
|
|
// 初始化课程数据范围
|
|
|
initCourseDataScope();
|
|
|
+
|
|
|
+ // 初始化已观看课程ID
|
|
|
+ initWatchedCourseIds();
|
|
|
+
|
|
|
// 检查是否有从父组件传递的courseData
|
|
|
if (handleParentCourseData()) {
|
|
|
return;
|
|
|
}
|
|
|
+
|
|
|
// 从路由参数获取typeId
|
|
|
const typeIdParam = router.currentRoute.value.query.typeId;
|
|
|
if (typeIdParam) {
|
|
|
typeId.value = typeIdParam;
|
|
|
try {
|
|
|
- // 取接口课程数据
|
|
|
- const res = await ClassType(typeIdParam);
|
|
|
- // 处理课程数据
|
|
|
- courseList.value = processCourseDataList(res.data);
|
|
|
- // 初始化已观看课程ID
|
|
|
- initWatchedCourseIds();
|
|
|
- // 构建菜单结构
|
|
|
- buildMenuStructure();
|
|
|
-
|
|
|
+
|
|
|
+ TopicType(typeIdParam).then(res => {
|
|
|
+ if (res && res.data && Array.isArray(res.data)) {
|
|
|
+ props.courseList = res.data
|
|
|
+ // 保存原始API返回的数据
|
|
|
+ handleParentCourseData(res.data);
|
|
|
+
|
|
|
+ // 处理课程数据
|
|
|
+ courseList.value = processCourseDataList(res.data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
} catch (error) {
|
|
|
console.error('获取课程数据失败:', error);
|
|
|
ElMessage.error('获取课程数据失败,请稍后重试');
|