feat: 动效初始化
parent
1c26b8d4ad
commit
426e7f789b
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@
|
||||
import AnimateDevice from "./src/AnimateDevice.vue";
|
||||
|
||||
export { AnimateDevice };
|
||||
@ -0,0 +1,38 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-16 13:49:37
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-01-16 13:53:47
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\components\Animate\src\animateDevice.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue"; //引入相关api
|
||||
import lottie from "lottie-web"; //引入动效库
|
||||
import json01 from "@/assets/animate/device/01.json"; //引入下载的动效json
|
||||
|
||||
defineOptions({
|
||||
name: "AnimateDevice"
|
||||
});
|
||||
|
||||
const animation1 = ref(null); //获取dom
|
||||
function initAnimate() {
|
||||
console.log(lottie, "lottie");
|
||||
lottie.loadAnimation({
|
||||
container: animation1.value, //选择渲染dom
|
||||
renderer: "svg", //渲染格式
|
||||
loop: true, //循环播放
|
||||
autoplay: true, //是否i自动播放,
|
||||
animationData: json01 //渲染动效json
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
initAnimate();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="width: 100px">
|
||||
<div ref="animation1" />
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,472 @@
|
||||
<template>
|
||||
<div class="courseCat_wrap courseLession_wrap" v-if="pageMode == 'courseCat'">
|
||||
<van-sticky>
|
||||
<div class="bg-white title_box">
|
||||
<p class=" fs18 fw5 text_color title_centent flex-rb flex-ac">
|
||||
{{ detailInfo.name }}
|
||||
</p>
|
||||
<p class="fs12 text-gray progress_box">
|
||||
已学习<span class="theme_color">{{ totalLesson.learnedCount }}</span
|
||||
>节/共{{ totalLesson.totalCount }}节
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<HTab
|
||||
ref="HTabComp"
|
||||
class="bg-white"
|
||||
:options="csTabOptions"
|
||||
:tabList="tabOptions"
|
||||
@change="menuChange"
|
||||
>
|
||||
</HTab>
|
||||
</van-sticky>
|
||||
|
||||
<div class="catalogTree fs14" ref="CSCatTreeRefs">
|
||||
<ul class="bg-white root_cat_box pdx15">
|
||||
<li v-for="(v, index) in state.courseTreeData" :key="v.id">
|
||||
<div
|
||||
class="chapter_box flex-ac flex-rb"
|
||||
v-if="v.type == 0"
|
||||
@click="handleExpend(v)"
|
||||
>
|
||||
<span class="chapter_label fw5 single-line">
|
||||
{{ v.name }}
|
||||
</span>
|
||||
<div class="collapseIcon_box flex-cc">
|
||||
<div class="arrow" :class="v.expended ? '' : 'activeUp'"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="courseware_box" v-if="v.type == 2">
|
||||
<!-- 课 -->
|
||||
<CSLessonsBox
|
||||
:lessonDownProgress="lessonDownProgress"
|
||||
:info="v"
|
||||
:courseDetail="detailInfo"
|
||||
:lessonStudyProgress="lessonStudyProgress"
|
||||
/>
|
||||
</div>
|
||||
<div class="section_box flex-ac flex-rb" v-if="v.type == 1">
|
||||
<span>{{ v.name }}</span>
|
||||
</div>
|
||||
<transition name="mybox">
|
||||
<div class="box" v-show="v.expended">
|
||||
<ul v-if="isArray(v.childrenList) && v.childrenList.length">
|
||||
<li v-for="(item, index) in [...v.childrenList]" :key="item.id">
|
||||
<CSLessonsBox
|
||||
:info="item"
|
||||
:courseDetail="detailInfo"
|
||||
:lessonDownProgress="lessonDownProgress"
|
||||
:lessonStudyProgress="lessonStudyProgress"
|
||||
/>
|
||||
<hr
|
||||
class="mdy20"
|
||||
v-if="index !== [...v.childrenList].length - 1"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<CSLessonPracticeBox
|
||||
:info="v.coursePaperVOS"
|
||||
:courseInfo="v"
|
||||
:courseDetail="detailInfo"
|
||||
v-if="
|
||||
v.type == 0 &&
|
||||
isArray(v.coursePaperVOS) &&
|
||||
v.coursePaperVOS.length &&
|
||||
v.coursePaperVOS != ['']
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</li>
|
||||
<li v-for="v in practiceList" :key="v.id" class="bg-white exam_box">
|
||||
<p
|
||||
class="fs14 pdy12"
|
||||
v-if="v.type == 0 && detailInfo.joinStatus >= 1"
|
||||
>
|
||||
课后练习
|
||||
</p>
|
||||
<div
|
||||
class="flex pdy12"
|
||||
v-if="v.type == 0 && detailInfo.joinStatus >= 1"
|
||||
>
|
||||
<span class="flex-cc exam_tag fs10">
|
||||
<span class="exam_tag_icon"></span>
|
||||
<span class="fss10">练习</span>
|
||||
</span>
|
||||
<div class="exam_title">
|
||||
<p class="paperName_label fw5 single-line">
|
||||
{{ v.paperName }}
|
||||
</p>
|
||||
<div class="flex-rb exam_status fs12 theme_color">
|
||||
<span class=" single-line" v-if="v.status == 0">
|
||||
未开始
|
||||
</span>
|
||||
<span class=" single-line paper_name" v-if="v.status == 1">
|
||||
<span v-if="v.pass">已通过</span>
|
||||
<span v-else>未通过</span>
|
||||
</span>
|
||||
<span
|
||||
:class="[`${fetchDetailCatBtn(v).statusType}_tags`]"
|
||||
@click="doTabCoursePractice(v, {...detailInfo})"
|
||||
>
|
||||
{{ fetchDetailCatBtn(v).practiceLabel }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<HEmpty v-if="!state.courseTreeData.length && !isLoading" />
|
||||
<div ref="CSDetailCommentRefs">
|
||||
<CSDetailComment
|
||||
ref="detailCommentRefs"
|
||||
:info="detailInfo"
|
||||
:courseConf="courseConf"
|
||||
@tenantComment="doTenantComment"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- {{ pageMode }} -->
|
||||
<div v-if="pageMode == 'courseDot'">
|
||||
<CSLessonPoint
|
||||
ref="CSLessonPointRefs"
|
||||
:stepData="pointData"
|
||||
@closeDot="openCat"
|
||||
@dotTab="doDotTab"
|
||||
/>
|
||||
</div>
|
||||
<!-- 评论 -->
|
||||
<CComment
|
||||
ref="commentRefs"
|
||||
:ocInfo="courseConf"
|
||||
:isNeedClose="true"
|
||||
@successComment="successComment"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
nextTick,
|
||||
computed,
|
||||
ref,
|
||||
onMounted,
|
||||
onActivated,
|
||||
getCurrentInstance,
|
||||
} from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
//
|
||||
// 组件区
|
||||
import {
|
||||
CSLessonsBox,
|
||||
CSLessonPracticeBox,
|
||||
CSDetailComment,
|
||||
CSLessonPoint,
|
||||
} from "../components";
|
||||
import { HTab, HEmpty } from "@/components/HVant/index";
|
||||
import { CComment } from "@/components/common";
|
||||
// hooks
|
||||
import { clientChangeVideo, clientChangeVideoDot } from "@/hooks/web/useClientFc"
|
||||
import { useWebFunc } from "@/hooks/web/useWebFunc";
|
||||
import { useCourseCat } from "../hooks/useCourseCat";
|
||||
import { useCourseDetail } from "../hooks/useCourseDetail";
|
||||
import { useConf, useReqApi, useCourseMain } from "../hooks/useMain";
|
||||
import {
|
||||
fetchNextCoursewareNode,
|
||||
fetchCurrentCourseNode,
|
||||
} from "../hooks/format";
|
||||
// 其它
|
||||
import { isArray } from "@/utils/is/isString";
|
||||
//数据
|
||||
import { testFlag } from "../hooks/test";
|
||||
import { testData } from "@/testData/courseDot";
|
||||
const { appContext } = getCurrentInstance();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const {
|
||||
getCourseCatalogApi,
|
||||
getCourseInfoApi,
|
||||
updateLastLearnCatalogIdCourseApi,
|
||||
getCourseProgressApi,
|
||||
} = useReqApi;
|
||||
const { courseVideoDetailTabConf } = useConf;
|
||||
|
||||
const {
|
||||
doTabExam,
|
||||
clientCourseCatPracticeAlertView,
|
||||
doLoadCoursePractice,
|
||||
practiceList,
|
||||
doTabCoursePractice
|
||||
} = useCourseCat();
|
||||
const { setWebFunc } = useWebFunc();
|
||||
const { fetchDetailCatBtn } = useCourseDetail();
|
||||
|
||||
// 初始值
|
||||
const lessonDownProgress = ref({}); // 课件下载进度
|
||||
const courseRecordInfo = ref({
|
||||
totalProgress: 0,
|
||||
}); // 课程端数据汇总
|
||||
const lessonStudyProgress = ref({}); // 课件学习进度
|
||||
const totalLesson = ref({
|
||||
learnedCount: 0,
|
||||
totalCount: 0,
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
currMenuIndex: 0,
|
||||
activeLesson: [],
|
||||
courseListOptions: {
|
||||
// isCustom: true
|
||||
},
|
||||
courseTreeData: [], //courseCatData
|
||||
});
|
||||
const detailInfo = ref({});
|
||||
const pageMode = ref("courseCat");
|
||||
const isLoading = ref(false);
|
||||
const courseConf = reactive({
|
||||
operationType: 0,
|
||||
});
|
||||
const csTabOptions = reactive({
|
||||
defaultValue: 0,
|
||||
});
|
||||
const tabOptions = computed(() => {
|
||||
return courseVideoDetailTabConf.filter((item) => {
|
||||
if (item.id === "1") {
|
||||
item.name = `评论(${detailInfo.value.commentCount || 0})`;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
});
|
||||
|
||||
const pointData = ref([]); // 知识点
|
||||
const currentCatData = ref({}); // 当前学习目录项
|
||||
// 实例
|
||||
const CSCatTreeRefs = ref("");
|
||||
const CSDetailCommentRefs = ref("");
|
||||
const commentRefs = ref("");
|
||||
const detailCommentRefs = ref("");
|
||||
const CSLessonPointRefs = ref("");
|
||||
|
||||
/**step1 目录、评论模块切换 */
|
||||
function menuChange(record) {
|
||||
state.currMenuIndex = record;
|
||||
nextTick(() => {
|
||||
switch (record) {
|
||||
case "0":
|
||||
window.scrollTo(
|
||||
0,
|
||||
0
|
||||
);
|
||||
break;
|
||||
case "1":
|
||||
// CSDetailCommentRefs.value.scrollIntoView({
|
||||
// behavior: "smooth",
|
||||
// });
|
||||
window.scrollTo(
|
||||
0,
|
||||
CSDetailCommentRefs.value.offsetTop - CSCatTreeRefs.value.offsetTop
|
||||
);
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**step2 目录详情数据 评论数据 推荐课程数据*/
|
||||
// 目录数据
|
||||
async function loadCatData(nextCat, nextCatId) {
|
||||
isLoading.value = true;
|
||||
const res = await getCourseCatalogApi({ id: route.query.id }).finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
// console.log(res, "loadCatData");
|
||||
if (isArray(res)) {
|
||||
state.courseTreeData = res.filter((item) => {
|
||||
item.expended = true;
|
||||
return item;
|
||||
});
|
||||
if (nextCatId) {
|
||||
// 下一课已经解锁 广播下一节点id
|
||||
let params = {
|
||||
...nextCat,
|
||||
courseTrainId: route.query.id,
|
||||
};
|
||||
appContext.config.globalProperties.Bus.emit(
|
||||
"changeCurrentCatId",
|
||||
nextCatId
|
||||
);
|
||||
clientChangeVideo(params, (_) => {});
|
||||
}
|
||||
} else {
|
||||
state.courseTreeData = [];
|
||||
}
|
||||
}
|
||||
|
||||
/**step3 目录交互完善 展开收起 对接端 */
|
||||
//收起/展开
|
||||
function handleExpend(record) {
|
||||
record.expended = !record.expended;
|
||||
}
|
||||
|
||||
/**step4 other */
|
||||
// 关闭知识点-打开目录
|
||||
function openKnowledge() {
|
||||
if (testFlag.isOpenDot) {
|
||||
pointData.value = testData;
|
||||
openDot();
|
||||
} else {
|
||||
setWebFunc("webOpenKnowledge", (res) => {
|
||||
pointData.value = JSON.parse(res);
|
||||
console.info("pointData", pointData.value);
|
||||
openDot();
|
||||
});
|
||||
}
|
||||
}
|
||||
// 从端获取下载进度
|
||||
function fetchDownloadProgress() {
|
||||
setWebFunc("changeDownloadProgress", (res) => {
|
||||
lessonDownProgress.value = res;
|
||||
});
|
||||
}
|
||||
// 从端获取学习进度
|
||||
function fetchStudyProgress() {
|
||||
setWebFunc("changeStudyProgress", (res) => {
|
||||
// console.log(res, "changeStudyProgress");
|
||||
lessonStudyProgress.value = res.studyCourseware;
|
||||
courseRecordInfo.value = res;
|
||||
// // 播报课程总进度
|
||||
lessonStudyProgress.value.learningProgress>=1 && loadCourseProgress()
|
||||
});
|
||||
}
|
||||
// 从接口获取学习进度 获取总进度
|
||||
async function loadCourseProgress() {
|
||||
const res = await getCourseProgressApi({ id: route.query.id });
|
||||
// console.log(res, "loadCourseProgress_res");
|
||||
totalLesson.value = res;
|
||||
}
|
||||
|
||||
// 完成本节播放，后续处理 （练习提醒、下一节自动切换） completeStatus 练习完成状态
|
||||
function webFnPlayNextVideo() {
|
||||
setWebFunc("playNextVideo", (res) => {
|
||||
const currentCat = fetchCurrentCourseNode(
|
||||
state.courseTreeData,
|
||||
res.catalogId
|
||||
);
|
||||
// 播报课程总进度
|
||||
loadCourseProgress();
|
||||
console.log("currentCat_coursePaperVOS", currentCat);
|
||||
// 确认是练习提醒还是进入下一节
|
||||
if (
|
||||
currentCat.coursePaperVOS &&
|
||||
(![1, 2].includes(currentCat.coursePaperVOS?.status) ||
|
||||
![1].includes(currentCat?.completeStatus))
|
||||
) {
|
||||
// 课节练习提醒 练习提醒 课程状态处理 completeStatus 0 未完成 2 音视频完成 1 全部完成含练习
|
||||
currentCatData.value = {
|
||||
...currentCat,
|
||||
coursePracticeType: "coursewarePractice",
|
||||
};
|
||||
clientCourseCatPracticeAlertView({}, () => {
|
||||
const { coursePaperVOS } = currentCatData.value;
|
||||
doTabExam(coursePaperVOS[0]);
|
||||
});
|
||||
} else {
|
||||
// 直接跳下一节课
|
||||
fetchNextCourse(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 判断当前课是否有练习
|
||||
function fetchNextCourse(res) {
|
||||
// 弹下一课提醒
|
||||
const nextCat = fetchNextCoursewareNode(state.courseTreeData, res.catalogId);
|
||||
const nextCatId = nextCat.id;
|
||||
//有下一课， 自动播放下一课，没有不处理
|
||||
if (nextCatId != res.catalogId) {
|
||||
updateChangeLessonApi(nextCatId);
|
||||
loadCatData(nextCat, nextCatId);
|
||||
} else {
|
||||
// 广播下一节点id
|
||||
// appContext.config.globalProperties.Bus.emit("changeCurrentCatId", nextCatId);
|
||||
}
|
||||
}
|
||||
|
||||
// 汇报上次学到的课
|
||||
function updateChangeLessonApi(nextCatId) {
|
||||
updateLastLearnCatalogIdCourseApi({
|
||||
courseCatalogId: nextCatId,
|
||||
resourceId: route.query.id,
|
||||
});
|
||||
}
|
||||
|
||||
// 打开目录
|
||||
function openCat() {
|
||||
pageMode.value = "courseCat";
|
||||
}
|
||||
// 打开知识点
|
||||
function openDot() {
|
||||
pageMode.value = "courseDot";
|
||||
}
|
||||
// 切换知识点
|
||||
function doDotTab(params) {
|
||||
clientChangeVideoDot(params, (res) => {
|
||||
if (res == 1) {
|
||||
CSLessonPointRefs.value.initChangePoint();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadDetail() {
|
||||
nextTick(() => {
|
||||
detailCommentRefs.value.initData();
|
||||
});
|
||||
if (isLoading.value) {
|
||||
return;
|
||||
}
|
||||
doLoadData();
|
||||
loadCatData();
|
||||
doLoadCoursePractice();
|
||||
loadCourseProgress();
|
||||
}
|
||||
|
||||
// 详情数据
|
||||
async function doLoadData() {
|
||||
const res = await getCourseInfoApi({
|
||||
id: Number(route.query.id),
|
||||
});
|
||||
detailInfo.value = res;
|
||||
}
|
||||
|
||||
function loadWebFunc() {
|
||||
openKnowledge();
|
||||
fetchDownloadProgress();
|
||||
fetchStudyProgress();
|
||||
webFnPlayNextVideo();
|
||||
}
|
||||
|
||||
// 打开评论
|
||||
function doTenantComment() {
|
||||
commentRefs.value.initPopup();
|
||||
}
|
||||
|
||||
// 评论成功
|
||||
function successComment() {
|
||||
loadDetail();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadWebFunc();
|
||||
loadDetail();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
loadDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import url("../style/courseCat.less");
|
||||
@import url("../style/courseDetail.less");
|
||||
</style>
|
||||
@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="course_lessonsBox fs14 text_1">
|
||||
<!-- 节 -->
|
||||
<div class="section_box flex-ac flex-rb" v-if="catLatestInfo.type == 1">
|
||||
<span>{{ catLatestInfo.name }}</span>
|
||||
</div>
|
||||
<!-- 课 -->
|
||||
<!-- filter_gray -->
|
||||
<div class="lesson_box flex-rb" :class="{'filter_gray': fetchIsNoneEffect(catLatestInfo)}" v-if="catLatestInfo.type == 2" @click="handelTab">
|
||||
<div class="flex-re">
|
||||
<span class="lesson_tag courseCat_tag theme_color flex-cc fs10">
|
||||
<span class="icon_cat" :class="activeClass(catLatestInfo).iconClass"></span>
|
||||
<span class="fss10">{{ activeClass(catLatestInfo).label }}</span>
|
||||
</span>
|
||||
<!-- 课件内容 -->
|
||||
<div class="lesson_content_box">
|
||||
<div class="flex cat_title_box">
|
||||
<p class="lesson_infoName text_2 flex-wr">{{ catLatestInfo.name }}</p>
|
||||
<span class="fss11" v-if="currentCatId == catLatestInfo.id">正在学</span>
|
||||
<span class="fss11" v-if="!currentCatId && catLatestInfo.lastLearn"
|
||||
>上次学到</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="course_status_box text_3">
|
||||
<csLessonStatus
|
||||
:isLock="currentIsLock"
|
||||
:courseInfo="catLatestInfo"
|
||||
:courseDetail="courseDetail"
|
||||
:lessonStudyProgress="lessonStudyProgress"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div @click.stop="doDownLoadEvent()">
|
||||
<!-- 课件下载 -->
|
||||
<div
|
||||
class="flex-cc lesson_down"
|
||||
v-if="currentIsLock == 0 && [3, 4].includes(catLatestInfo.courseType)"
|
||||
|
||||
>
|
||||
<!-- 下载进度为0 -->
|
||||
<span v-if="courseDetail.joinStatus < 1"></span>
|
||||
<!-- @click.stop="doDownLoad" -->
|
||||
<span
|
||||
class="lesson_down_icon"
|
||||
v-else-if="downloadProgress == 0"
|
||||
></span>
|
||||
<!-- 正在下载 | 暂停 -->
|
||||
<div
|
||||
class="tc"
|
||||
v-else-if="downloadProgress < 100 && downloadProgress > 0"
|
||||
>
|
||||
<!-- @click.stop="changeDownLoadMode" -->
|
||||
<div>
|
||||
<span
|
||||
class="lesson_down_loading_icon"
|
||||
:class="isDownload ? 'downloadPause' : 'downLoading'"
|
||||
></span>
|
||||
<p class="w-8 fss11 theme_color">下载 {{ downloadProgress }} %</p>
|
||||
</div>
|
||||
<!-- <div v-if="!isDownload" @click.stop="doDownLoad">
|
||||
<span class="lesson_down_loading_icon"></span>
|
||||
<p class="fss11 theme_color">已暂停</p>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- 下载完成 -->
|
||||
<span v-else class="theme_color">已下载</span>
|
||||
</div>
|
||||
<div class="flex-cc noeffect_box" v-if="fetchIsNoneEffect(info)">
|
||||
<div class="icon_noEffect"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="v in catLatestInfo.childrenList">
|
||||
<courseLessonsBox
|
||||
:info="v"
|
||||
:courseDetail="courseDetail"
|
||||
color="#21CC64"
|
||||
:lessonDownProgress="lessonDownProgress"
|
||||
:lessonStudyProgress="lessonStudyProgress"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<csLessonPracticeBox
|
||||
:info="catLatestInfo.coursePaperVOS"
|
||||
:courseInfo="info"
|
||||
v-if="
|
||||
catLatestInfo.type == 1 &&
|
||||
isArray(catLatestInfo.coursePaperVOS) &&
|
||||
catLatestInfo.coursePaperVOS.length &&
|
||||
catLatestInfo.coursePaperVOS != ['']
|
||||
"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
nextTick,
|
||||
getCurrentInstance,
|
||||
onMounted,
|
||||
watch,
|
||||
computed,
|
||||
} from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
// 组件
|
||||
import csLessonStatus from "./csLessonStatus.vue";
|
||||
import csLessonPracticeBox from "./csLessonPracticeBox.vue";
|
||||
// hooks
|
||||
import { clientChangeVideo, clientDownloadVideo, clientMediaDownloadProgress,
|
||||
clientCancelDownloadMedia } from "@/hooks/web/useClientFc"
|
||||
import { formatIsUnLock } from "@/hooks/format/comm";
|
||||
import { useCourseMain, useReqApi } from "../hooks/useMain";
|
||||
import { useCourseDetail } from "../hooks/useCourseDetail";
|
||||
import { debounceFun } from "@/hooks/core/useLodash.js";
|
||||
import {globalDebounceTime} from "@/config/settingConfig/core.js"
|
||||
|
||||
//方法
|
||||
import { isArray } from "@/utils/is/isString";
|
||||
const { appContext } = getCurrentInstance();
|
||||
const {
|
||||
activeClass
|
||||
} = useCourseMain();
|
||||
|
||||
const props = defineProps({
|
||||
info: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
id: "",
|
||||
name: "",
|
||||
childrenList: [],
|
||||
isLastLearnCatalog: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
courseDetail: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
|
||||
lessonDownProgress: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
|
||||
lessonStudyProgress: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
defineComponent({ name: "courseLessonsBox" });
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const currentCatId = ref(""); // 课件目录id (正在学)
|
||||
const currentDownloadCatId = ref(""); // 课件目录id (下载)
|
||||
const { fetchCourseTipByRecord , fetchIsNoneEffect} = useCourseDetail();
|
||||
const { updateLastLearnCatalogIdCourseApi } = useReqApi;
|
||||
|
||||
const isDownload = ref(true); //控制下载课件的暂停
|
||||
const currCatFullData = ref({}); //当前目录课节更新所有数据
|
||||
|
||||
const catLatestInfo = computed(() => { //实时的课程目录课件数据
|
||||
return {...props.info ,...currCatFullData.value}
|
||||
})
|
||||
// 下载进度
|
||||
const downloadProgress = ref(0);
|
||||
// const currentIsLock = ref(1);
|
||||
const currentIsLock = computed(()=>{
|
||||
return props.info?.isLock
|
||||
})
|
||||
|
||||
|
||||
// 跳转播放视频
|
||||
const handelTab =
|
||||
debounceFun(function() {
|
||||
console.log('debounceFun_handelTab')
|
||||
if(fetchIsNoneEffect(props.info)){ // 课节已失效
|
||||
return
|
||||
}
|
||||
if(props.info.id == currentCatId.value){ // 相同目录事件不处理
|
||||
return
|
||||
}
|
||||
updateChangeLessonApi();
|
||||
}, globalDebounceTime);
|
||||
|
||||
|
||||
|
||||
|
||||
// 汇报上次学到的课 拿到当前实时的返回进度
|
||||
async function updateChangeLessonApi() {
|
||||
const resData = await updateLastLearnCatalogIdCourseApi({
|
||||
courseCatalogId: props.info.id,
|
||||
resourceId: route.query.id,
|
||||
});
|
||||
let params = {
|
||||
...props.info,
|
||||
courseTrainId: route.query.id,
|
||||
};
|
||||
if(resData){
|
||||
params = {...params, ...resData.data}
|
||||
}
|
||||
|
||||
if (formatIsUnLock({ ...params })) {
|
||||
currCatFullData.value = params // 本课节接口数据更新
|
||||
appContext.config.globalProperties.Bus.emit(
|
||||
"changeCurrentCatId",
|
||||
props.info.id
|
||||
);
|
||||
//判断是否有锁
|
||||
clientChangeVideo(params, (res) => {});
|
||||
} else {
|
||||
// 报名、锁状态提示
|
||||
fetchCourseTipByRecord(props.courseDetail, "课件");
|
||||
}
|
||||
console.log(params, "updateChangeLessonApi");
|
||||
}
|
||||
|
||||
// 下载相关
|
||||
function doDownLoadEvent() {
|
||||
if(currentIsLock.value == 0 && [3, 4].includes(catLatestInfo.value?.courseType)){
|
||||
if(props.courseDetail.joinStatus < 1){
|
||||
return
|
||||
}
|
||||
if(downloadProgress.value == 0){
|
||||
doDownLoad()
|
||||
return
|
||||
}
|
||||
if(downloadProgress.value < 100 && downloadProgress.value > 0){
|
||||
changeDownLoadMode()
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 下载课件
|
||||
const doDownLoad = debounceFun(function() {
|
||||
if(fetchIsNoneEffect(props.info)){
|
||||
return
|
||||
}
|
||||
let params = {
|
||||
...props.info,
|
||||
courseTrainId: route.query.id,
|
||||
};
|
||||
currentDownloadCatId.value = props.info.id;
|
||||
console.log(params, "clientDownloadVideo");
|
||||
clientDownloadVideo(params, (res) => {});
|
||||
}, globalDebounceTime);
|
||||
|
||||
//停止下载正在下载的课件
|
||||
const changeDownLoadMode = debounceFun(function() {
|
||||
let params = {
|
||||
...props.info,
|
||||
courseTrainId: route.query.id,
|
||||
};
|
||||
currentDownloadCatId.value = props.info.id;
|
||||
console.log(params, "clientCancelDownloadMedia");
|
||||
if (isDownload.value) {
|
||||
doDownLoad();
|
||||
} else {
|
||||
clientCancelDownloadMedia(params, (res) => {});
|
||||
}
|
||||
changeIsDownload();
|
||||
}, globalDebounceTime);
|
||||
|
||||
// 切换暂停 | 继续 下载模式
|
||||
function changeIsDownload() {
|
||||
isDownload.value = !isDownload.value;
|
||||
}
|
||||
|
||||
function initChangeDownloadProgress() {
|
||||
console.log(
|
||||
props.info.id,
|
||||
props.lessonDownProgress,
|
||||
"initChangeDownloadProgress"
|
||||
);
|
||||
const { progress } = props.lessonDownProgress;
|
||||
fetchDownloadProgressVal(progress);
|
||||
}
|
||||
|
||||
function fetchDownloadProgressVal(progress) {
|
||||
let currProgress = Math.floor(100 * progress);
|
||||
if (currProgress <= 0) {
|
||||
currProgress = 0;
|
||||
}
|
||||
if (currProgress >= 100) {
|
||||
currProgress = 100;
|
||||
isDownload.value = false;
|
||||
}
|
||||
downloadProgress.value = currProgress;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
// if (props.info) {
|
||||
// currentIsLock.value = props.info?.isLock;
|
||||
// }
|
||||
if (props.info.isLastLearnCatalog) {
|
||||
currentCatId.value = props.info.id;
|
||||
}
|
||||
// console.log(props.info.lessonId, "isLastLearnCatalog");
|
||||
appContext.config.globalProperties.Bus.on("changeCurrentCatId", (data) => {
|
||||
console.log("接收到的内容是：" + data);
|
||||
currentCatId.value = data;
|
||||
// if(){
|
||||
// currentIsLock.value = 0; //解锁
|
||||
// }
|
||||
});
|
||||
if (props.info.type == 2) {
|
||||
// 只有课才调用获取初始加载进度
|
||||
clientMediaDownloadProgress(
|
||||
{ ...props.info, courseTrainId: route.query.id },
|
||||
(res) => {
|
||||
// initChangeDownloadProgress(res)
|
||||
isDownload.value = res?.progress > 0 && res?.progress < 1;
|
||||
fetchDownloadProgressVal(res?.progress);
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
watch(
|
||||
() => props.lessonDownProgress,
|
||||
() => {
|
||||
if (props.lessonDownProgress.catalogId == props.info.id) {
|
||||
initChangeDownloadProgress();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import url("../style/courseCat.less");
|
||||
</style>
|
||||
Loading…
Reference in New Issue