fix

src/components/videoCy/index.vue

@@ -35,7 +35,8 @@ export default {
       photoIndex: 0, //当前拍照对应索引
       showRecordStatus: false, //是否显示从头播放提示
       showRecordSetTimeOut: null, //从头播放提示计时器函数
-      openPhotoStatus: 0 //暂存学习状态
+      openPhotoStatus: 0, //暂存学习状态
+      commitTime: null //暂存时间-节流
     };
   },
   computed: {
@@ -67,6 +68,7 @@ export default {
       if (this.player) {
         this.player.destroy(); //初始化播放器
       }
+      this.initData(); //初始化参数
       await this.getRecordLast(); //获取播放记录
       await this.getRecordHistoryPhoto(); //获取拍照历史记录
       await this.loadPlayer(); //加载播放内容
@@ -82,6 +84,11 @@ export default {
   },
   methods: {
     getBeforeWork() {},
+    //初始化参数
+    initData() {
+      this.commitTime = null;
+      this.openPhotoStatus = 0;
+    },
     //获取播放记录
     getRecordLast() {
       return new Promise(resolve => {
@@ -394,6 +401,13 @@ export default {
     },
     //监听器
     timeEvent() {
+      // 定时提交学习记录
+      this.submitStudyRecords();
+      //拍照监听执行
+      this.watchPhoto();
+    },
+    //拍照监听执行
+    watchPhoto() {
       if (this.photoList.length == 0 || this.activeSection.learning == 1)
         return;
       let videoTime = this.player.j2s_getCurrentTime();
@@ -414,6 +428,14 @@ export default {
         }
       }
     },
+    // 定时提交学习记录
+    submitStudyRecords() {
+      let time = new Date().getTime();
+      if (time >= this.commitTime) {
+        this.postStudyRecord(0);
+        this.commitTime = time + 15000;
+      }
+    },
     //视频初次播放时触发
     onPlayStatus() {
       //计算拍照逻辑

src/pages/course-detail/components/CourseTree.vue

@@ -2,13 +2,13 @@
   <div id="courseTree">
     <el-empty description="暂无课程" v-if="courseList.length === 0"></el-empty>
     <ul v-else class="courseTree">
-      <li
-        v-for="(item1, index1) in courseDataList"
-        :key="index1"
-        class="level1"
-      >
-        <div class="menu_box" @click="openMenu(item1)">
-          <div class="left">
+      <li v-for="(item1, index1) in courseDataList" :key="index1">
+        <div
+          class="menu_box"
+          @click="openMenu(item1)"
+          :class="isActive(item1) ? 'active' : ''"
+        >
+          <div class="left level1">
             <el-tag
               size="mini"
               effect="dark"
@@ -24,6 +24,12 @@
           </div>
           <div class="right">
             <template v-if="item1.type == 3">
+              <img
+                v-if="isActive(item1)"
+                src="@/assets/learing.gif"
+                alt=""
+                class="activeImg_style"
+              />
               <div class="during">
                 {{ $tools.secondToDate(item1.durationTime) }}
               </div>
@@ -40,13 +46,13 @@
         <ul
           v-if="item1.children && item1.children.length > 0 && item1.showStatus"
         >
-          <li
-            v-for="(item2, index2) in item1.children"
-            :key="index2"
-            class="level2"
-          >
-            <div class="menu_box" @click="openMenu(item2)">
-              <div class="left">
+          <li v-for="(item2, index2) in item1.children" :key="index2">
+            <div
+              class="menu_box"
+              @click="openMenu(item2)"
+              :class="isActive(item2) ? 'active' : ''"
+            >
+              <div class="left level2">
                 <el-tag
                   size="mini"
                   effect="dark"
@@ -75,13 +81,13 @@
                 item2.children && item2.children.length > 0 && item2.showStatus
               "
             >
-              <li
-                v-for="(item3, index3) in item2.children"
-                :key="index3"
-                class="level3"
-              >
-                <div class="menu_box" @click="openMenu(item3)">
-                  <div class="left">
+              <li v-for="(item3, index3) in item2.children" :key="index3">
+                <div
+                  class="menu_box"
+                  @click="openMenu(item3)"
+                  :class="isActive(item3) ? 'active' : ''"
+                >
+                  <div class="left level3">
                     <el-tag
                       size="mini"
                       effect="dark"
@@ -121,7 +127,8 @@ export default {
     return {
       courseList: [], //商品的课程列表
       courseDataList: [], //课程内容
-      allSectionList: [] //商品下所有节和试卷
+      allSectionList: [], //商品下所有节和试卷
+      activeSection: {} //当前节数据
     };
   },
   computed: {
@@ -164,6 +171,16 @@ export default {
         }
         return str;
       };
+    },
+    isActive: function() {
+      return function(item) {
+        return (
+          item.courseId == this.activeSection.courseId &&
+          item.moduleId == this.activeSection.moduleId &&
+          item.chapterId == this.activeSection.chapterId &&
+          item.sectionId == this.activeSection.sectionId
+        );
+      };
     }
   },
   created() {
@@ -175,6 +192,7 @@ export default {
       await this.getCourseData(this.courseList[0].courseId); //获取课程内容
       await this.getAllSectionList(); //获取所有节列表
       /**播放逻辑 */
+      this.playBackLogic();
     },
     //获取商品课程列表
     getGoodsCourseList() {
@@ -242,99 +260,107 @@ export default {
       if (item.children && item.children.length > 0) {
         item.showStatus = !item.showStatus;
       } else {
-        this.$request
-          .reChapterList({
-            moduleId: item.moduleId,
-            gradeId: this.goodsData.gradeId,
-            courseId: this.courseDataList[0].courseId
-            // rebuild: isRebuild ? 1 : undefined
-          })
-          .then(res => {
-            this.$set(item, "showStatus", true);
-            this.$set(
-              item,
-              "children",
-              res.data.map(i => {
-                if (i.id) {
-                  return {
-                    level: item.level + 1,
-                    type: 2,
-                    name: i.name,
-                    courseId: i.courseId,
-                    moduleId: i.moduleId,
-                    chapterId: i.chapterId,
-                    sectionId: 0,
-                    sectionType: null,
-                    durationTime: null,
-                    recordingUrl: null,
-                    showStatus: false, //展开状态
-                    children: null, //子列表
-                    examList: [] //关联试卷
-                  };
-                } else {
-                  return Object.assign(i, {
-                    type: -1,
-                    chapterId: 0,
-                    examType: 3
-                  }); //examType:1章卷，2节卷，3模块卷
-                }
-              })
-            );
-          });
+        return new Promise(resolve => {
+          this.$request
+            .reChapterList({
+              moduleId: item.moduleId,
+              gradeId: this.goodsData.gradeId,
+              courseId: this.courseDataList[0].courseId,
+              orderGoodsId: this.goodsData.orderGoodsId
+              // rebuild: isRebuild ? 1 : undefined
+            })
+            .then(res => {
+              this.$set(item, "showStatus", true);
+              this.$set(
+                item,
+                "children",
+                res.data.map(i => {
+                  if (i.id) {
+                    return {
+                      level: item.level + 1,
+                      type: 2,
+                      name: i.name,
+                      courseId: i.courseId,
+                      moduleId: i.moduleId,
+                      chapterId: i.chapterId,
+                      sectionId: 0,
+                      sectionType: null,
+                      durationTime: null,
+                      recordingUrl: null,
+                      showStatus: false, //展开状态
+                      children: null, //子列表
+                      examList: [] //关联试卷
+                    };
+                  } else {
+                    return Object.assign(i, {
+                      type: -1,
+                      chapterId: 0,
+                      examType: 3
+                    }); //examType:1章卷，2节卷，3模块卷
+                  }
+                })
+              );
+              resolve(item.children);
+            });
+        });
       }
     },
     //展开章
-    async openChapter(item) {
+    openChapter(item) {
       if (item.children && item.children.length > 0) {
         item.showStatus = !item.showStatus;
       } else {
-        const examRes = await this.$request.reSectionExamList({
-          moduleId: item.moduleId,
-          chapterId: item.chapterId,
-          courseId: item.courseId,
-          gradeId: this.goodsData.gradeId,
-          orderGoodsId: this.goodsData.orderGoodsId
-        }); //获取节关联练习试卷
-        this.$request
-          .reSectionList({
+        return new Promise(async resolve => {
+          const examRes = await this.$request.reSectionExamList({
+            moduleId: item.moduleId,
             chapterId: item.chapterId,
-            gradeId: this.goodsData.gradeId,
             courseId: item.courseId,
-            // rebuild: isRebuild ? 1 : undefined,
-            moduleId: item.moduleId
-          })
-          .then(res => {
-            this.$set(item, "showStatus", true);
-            this.$set(
-              item,
-              "children",
-              res.data.map(i => {
-                console.log(i);
-                if (i.id) {
-                  return {
-                    level: item.level + 1,
-                    type: 3,
-                    name: i.name,
-                    courseId: item.courseId,
-                    moduleId: i.moduleId,
-                    chapterId: i.chapterId,
-                    sectionId: i.sectionId,
-                    sectionType: i.sectionType,
-                    durationTime: i.durationTime,
-                    recordingUrl: i.recordingUrl,
-                    showStatus: false, //展开状态
-                    children: null, //子列表
-                    examList:
-                      examRes.data.filter(
-                        item => item.sectionId == i.sectionId
-                      ) || [] //关联试卷
-                  };
-                } else {
-                  return Object.assign(i, { type: -1, examType: 1 }); //examType:1章卷，2节卷，3模块卷
-                }
-              })
-            );
-          });
+            gradeId: this.goodsData.gradeId,
+            orderGoodsId: this.goodsData.orderGoodsId
+          }); //获取节关联练习试卷
+          this.$request
+            .reSectionList({
+              chapterId: item.chapterId,
+              gradeId: this.goodsData.gradeId,
+              courseId: item.courseId,
+              // rebuild: isRebuild ? 1 : undefined,
+              moduleId: item.moduleId,
+              orderGoodsId: this.goodsData.orderGoodsId
+            })
+            .then(res => {
+              this.$set(item, "showStatus", true);
+              this.$set(
+                item,
+                "children",
+                res.data.map(i => {
+                  console.log(i);
+                  if (i.id) {
+                    return {
+                      level: item.level + 1,
+                      type: 3,
+                      name: i.name,
+                      courseId: item.courseId,
+                      moduleId: i.moduleId,
+                      chapterId: i.chapterId,
+                      sectionId: i.sectionId,
+                      sectionType: i.sectionType,
+                      durationTime: i.durationTime,
+                      recordingUrl: i.recordingUrl,
+                      showStatus: false, //展开状态
+                      children: null, //子列表
+                      examList:
+                        examRes.data.filter(
+                          item => item.sectionId == i.sectionId
+                        ) || [] //关联试卷
+                    };
+                  } else {
+                    return Object.assign(i, { type: -1, examType: 1 }); //examType:1章卷，2节卷，3模块卷
+                  }
+                })
+              );
+              resolve();
+            });
+        });
       }
     },
     //获取所有节列表
@@ -377,11 +403,11 @@ export default {
     //点击菜单
     async openMenu(item) {
       if (item.type == 1) {
-        this.openModule(item);
+        await this.openModule(item); //展开模块
       } else if (item.type == 2) {
-        this.openChapter(item);
+        await this.openChapter(item); //展开章
       } else {
-        // await this.waitCheckStatus(item); //检查是否可以继续执行
+        await this.waitCheckStatus(item); //检查是否可以继续执行
         if (item.type == 3) {
           if (item.sectionType == 1) {
             this.watchSection(item);
@@ -432,9 +458,9 @@ export default {
     },
     //播放视频节
     watchSection(item) {
+      if (this.isActive(item)) return;
       this.$bus.$emit("toPlay", item);
-      // if (this.isActive(item)) return;
-      // this.toPlay(item);
+      this.activeSection = item;
     },
     toPlay(item) {},
     //回放或直播
@@ -610,12 +636,72 @@ export default {
             resolve(res.data);
           });
       });
+    },
+    //播放逻辑
+    async playBackLogic() {
+      const { courseId, moduleId, chapterId, sectionId } = this.$route.query;
+      if (courseId >= 0 && moduleId >= 0 && chapterId >= 0 && sectionId >= 0) {
+        let data = this.allSectionList.find(
+          e =>
+            e.courseId == courseId &&
+            e.moduleId == moduleId &&
+            e.chapterId == chapterId &&
+            e.sectionId == sectionId
+        );
+        this.openMenu(data);
+        this.unfoldFunc(data); //展开定位列表
+      } else {
+        this.$request
+          .studyRecordQueryLiveLast({
+            gradeId: this.goodsData.gradeId,
+            orderGoodsId: this.goodsData.orderGoodsId,
+            courseId: this.courseList[0].courseId
+          })
+          .then(res => {
+            let data = res.data;
+            if (!data.sectionId) {
+              data = this.allSectionList[0];
+            }
+            if (
+              data.learning == 1 &&
+              this.businessData.goodsLearningOrder == 2
+            ) {
+              let next = this.allSectionList.find(e => e.studyStatus != 1);
+              next && (data = next);
+            }
+            this.openMenu(data);
+            this.unfoldFunc(data); //展开定位列表
+          });
+      }
+    },
+    //展开定位列表
+    async unfoldFunc(item) {
+      if (item.moduleId) {
+        var ary = this.courseDataList.find(i => i.moduleId == item.moduleId);
+        let moduleChildren = await this.openModule(ary);
+        if (item.chapterId) {
+          await this.openChapter(
+            moduleChildren.find(i => i.chapterId == item.chapterId)
+          );
+        }
+      }
+      if (!item.moduleId && item.chapterId) {
+        var ary = this.courseDataList.find(i => i.chapterId == item.chapterId);
+        await this.openChapter(ary);
+      }
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.active {
+  background-color: rgb(107, 107, 107) !important;
+}
+.activeImg_style {
+  width: 20px;
+  height: 30px;
+}
 .courseTree {
   height: 416px;
   overflow: auto;
@@ -646,10 +732,10 @@ export default {
   padding-left: 0px;
 }
 .level2 {
-  padding-left: 14px;
+  padding-left: 10px;
 }
 .level3 {
-  padding-left: 24px;
+  padding-left: 20px;
 }
 .menu_box {
   margin-top: 4px;
@@ -664,8 +750,8 @@ export default {
     background-color: rgb(81, 81, 81);
   }
   & > .left {
-    width: 40px;
     flex-shrink: 0;
+    padding-right: 10px;
   }
   & > .center {
     flex: 1;
@@ -681,7 +767,7 @@ export default {
     }
     display: flex;
     align-items: center;
-    width: 80px;
+    // width: 80px;
     flex-shrink: 0;
   }
 }