学员端视频播放器逻辑调整

src/components/VideoPlayer/index.vue

@@ -314,9 +314,17 @@ export default {
     setInterval(() => {
       // 定时更新进度条
       if (this.isPlaying && !this.isMousedownProgress) {
-        this.currentProgress =
+        this.currentProgress = this.videoDom.currentTime / this.videoDom.duration;
-          this.videoDom.currentTime / this.videoDom.duration;
       }
+      // 视频播放时本地记录视频实时播放时长
+      // console.log(this.src,this.currentProgress,'定时更新进度条');
+      var time = localStorage.getItem('videoProgressData')
+      var arr = time&&JSON.parse(time) || {}
+      if(arr[this.src] < this.currentProgress || !arr[this.src]){
+        arr[this.src] = this.currentProgress
+        localStorage.setItem('videoProgressData',JSON.stringify(arr))
+      }
+
       // 定时更新进度的文字显示
       this.updateProgressText();
       // 音量提示面板的定时隐藏
@@ -349,7 +357,7 @@ export default {
       // 根据视频的readyState判断下一帧是否已加载，并控制loading的显示
       this.isShowLoading = this.videoDom.readyState < 3;
       //if()
-      //console.log(this.videoDom.readyState,'this.videoDom.readyState');
+      // console.log(this.videoDom.readyState,'视频播放');
     }, 1000);
     // 视频dom监听器，用于控制鼠标的显示
     this.videoDom.addEventListener("mousemove", () => {
@@ -429,6 +437,13 @@ export default {
      */
     forwardCurrentTime() {
       let newCurrentTime = this.videoDom.currentTime + this.timeFastBack;
+      // 禁止拖拽视频前进时，未观看视频不让前进播放
+      if(!this.isDrag){
+        var time = localStorage.getItem('videoProgressData')
+        if(time && parseFloat(time) * this.videoDom.duration<newCurrentTime){
+          return
+        }
+      }
       this.videoDom.currentTime = newCurrentTime;
       this.barrageTimelineStart = newCurrentTime;
       this.updateProgressBySetTime(newCurrentTime);
@@ -554,6 +569,10 @@ export default {
     },
     //开始播放
     startPlay:function(newTime){
+      // console.log('开始播放::',newTime)
+      // window.playVideoInterTime = setInterval(()=>{
+      //   console.log('视频播放：',newTime)
+      // },2000)
        if(newTime){
          this.videoDom.currentTime = newTime;
          this.barrageTimelineStart = newTime;
@@ -576,7 +595,6 @@ export default {
       // 进度条到终点时修改播放状态
       this.isShowPlayer = false
       this.$emit('onPlayerPlaying', this.videoDom.currentTime,this.videoDom.duration)
-      this.$emit('progress',this.currentProgress)
       if (this.currentProgress === 1) {
         this.isPlaying = false;
         this.$emit('onPlayerEnded', {})
@@ -592,7 +610,6 @@ export default {
     src: function () {
       // 当视频地址变更时，重载视频
       this.videoDom.load();
-      this.isPlaying = false
     },
   },
 };

src/components/VideoPlayer/progress-bar.vue

@@ -68,7 +68,20 @@ export default {
   },
   methods: {
     down(e) {
-      if(this.isDrag) {
+      // 是否禁止拖动
+      // if(this.isDrag) {
+      //   // 可拖动
+      //   this.$emit("getMouseDownStatus", true);
+      //   this.is_mousedown_progress = true;
+      //   // 获取完整进度条的clientX（dom左上角）
+      //   let init_clientX = this.dom_full.getBoundingClientRect().left;
+      //   // 计算调整后的当前进度条的长度
+      //   this.current_width_px = e.clientX - init_clientX;
+      //   // 设置当前的播放进度（同时作用于当前进度条的样式）
+      //   let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
+      //   this.$emit("updateProgress", current);
+      // }else{
+        // 禁止拖动
         this.$emit("getMouseDownStatus", true);
         this.is_mousedown_progress = true;
         // 获取完整进度条的clientX（dom左上角）
@@ -76,28 +89,33 @@ export default {
         // 计算调整后的当前进度条的长度
         this.current_width_px = e.clientX - init_clientX;
         // 设置当前的播放进度（同时作用于当前进度条的样式）
-        let current =
+        let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
-            (e.clientX - init_clientX) / this.dom_full.clientWidth;
+
+        var time = localStorage.getItem('videoProgressData');
+        if(!this.isDrag && time && parseFloat(time) < current) return;
+
         this.$emit("updateProgress", current);
-      }
+      // }
       
     },
     move(e) {
-      if (this.is_mousedown_progress && this.isDrag) {
+      if (this.is_mousedown_progress) {
         let init_clientX = this.dom_full.getBoundingClientRect().left;
         this.current_width_px = e.clientX - init_clientX;
-        let current =
+        let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
-          (e.clientX - init_clientX) / this.dom_full.clientWidth;
+        var time = localStorage.getItem('videoProgressData');
+        if(!this.isDrag && time && parseFloat(time) < current) return;
         this.$emit("updateProgress", current);
       }
     },
     up() {
-      if (this.is_mousedown_progress && this.isDrag) {
+      if (this.is_mousedown_progress) {
         // 标记鼠标不处于按下的状态了
         this.is_mousedown_progress = false;
         // 松开鼠标后，即调整进度条后，此时的进度（0-1）
-        let current =
+        let current = this.current_width_px / this.dom_full.clientWidth;
-          this.current_width_px / this.dom_full.clientWidth;
+        var time = localStorage.getItem('videoProgressData');
+        if(!this.isDrag && time && parseFloat(time) < current) return;
         this.$emit("updateProgress", current);
         this.$emit("getMouseDownStatus", false);
       }

src/views/course/ManageList.vue

@@ -644,6 +644,8 @@ export default {
       this.params.sysType1 = this.sysTypeList[0];
       this.params.sysType2 = this.sysTypeList[1];
       this.params.sysType3 = this.sysTypeList[2];
+      if(this.$route.query.couresIds) this.params.couresIds = this.$route.query.couresIds.split(',');
+      if(this.$route.query.isSystemAdmin) this.params.isSystemAdmin = this.$route.query.isSystemAdmin;
       apiCourse.pageList(this.params).then(rs=>{
           if(rs.status==200){
             this.pageData = rs.result.list;

src/views/study/coursenew.vue

@@ -170,13 +170,48 @@
 
               <div :style="`height: ${controlHeight}px;overflow-y: auto;`">
                 <div class="catalog" v-if="courseInfo.type == 20">
-                  <div v-for="(item, index) in catalogTree" :key="index" :name="index">
+                  <div  v-for="(item, index) in catalogTree" :key="index" :name="index">
+                    <el-menu
+                      ref="menu"
+                      :default-openeds="defaultOpeneds"
+                      :default-active="activeId"
+                      :unique-opened="true"
+                      class="el-menu-vertical-demo"
+                      @open="handleOpen"
+                      @close="handleClose">
+                      <el-submenu :index="item.section.id">
+                        <template slot="title">
+                          <div style="display: flex;justify-content: space-between;">
+                            <span style="font-weight: 700;font-size: 16px;" :title="item.section.name">{{item.section.name.slice(0, 15)+(item.section.name.length > 15 ? '...' : '')}}</span>
+                            <div style="margin-right: 23px;font-weight: 700;font-size: 16px;">({{ item.children.filter(item=>item.status == 9).length }}/{{ item.children.length }})</div>
+                          </div>
+                        </template>
+                        <el-menu-item-group v-for="(ele, i) in item.children" :key="i">
+                          <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index,item)">
+                            <el-menu-item :index="ele.id" style="padding: 0;padding-left: 10px;">
+                              <div style="display: flex;justify-content: space-between;">
+                                <div style="font-size: 16px;" :title="ele.contentName">{{i+1}}. {{ ele.contentName.slice(0, 15)+(ele.contentName.length > 15 ? '...' : '') }}</div>
+                                <div>
+                                  <span v-if="contentData.id == ele.id" style="color: #387DF7;font-size: 14px;margin-right: 4px;">学习中</span>
+                                  <img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt="">
+                                  <img v-if="contentData.id != ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/over.png" alt="">
+                                  <img v-if="contentData.id != ele.id && ele.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/not.png" alt="">
+                                  <img v-if="contentData.id != ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban.png" alt="">
+                                </div>
+                              </div>
+                          </el-menu-item>
+                          </div>
+                        </el-menu-item-group>
+                      </el-submenu>
+                    </el-menu>
+                  </div>
+                  <!-- <div v-for="(item, index) in catalogTree" :key="index" :name="index">
                     <div style="margin: 10px 0px;font-weight: 700;">{{item.section.name}}</div>
                     <div class="units-info" :class="{'units-active':contentData.id == ele.id}"  v-for="(ele, i) in item.children" :key="i" @click="showRes(ele,i,index)">
                       <img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> {{i+1}}.
                       <span>{{ ele.contentName }}</span>
                     </div>
-                  </div>
+                  </div> -->
                 </div>
                 <div v-else class="catalog">
                   <!-- contentList -->
@@ -320,6 +355,9 @@
     },
     data() {
       return {
+        activeId: '',
+        isFalse: false,
+        defaultOpeneds: [],
         sendEventProgress: 0,
         trueFalse: true,
         audiences:'',
@@ -399,6 +437,7 @@
         cumulativeDuration:0, //非音频累计时长
         maxDuration:0, //非音频最大时长
         defaultMaxTime:1800, //非音频默认最大时间
+        videoIndex: 0 // 当前视频index
       }
     },
     mounted() {
@@ -455,6 +494,16 @@
       this.stopStudyTime();
     },
     methods: {
+      handleOpen(key,path){
+        // console.log(key,path,'handleOpen')
+        if(this.isFalse){
+          this.defaultOpeneds = [key]
+        }
+        this.isFalse = false
+      },
+      handleClose(key,path){
+        // console.log(key,path,'handleClose')
+      },
       toUserHome(tea){
         this.$router.push({path:this.$xpage.getHomePath(tea.teacherId)})
       },
@@ -593,7 +642,7 @@
         window.open(url, '_blank');
       },
       //替换播放区域
-      changePlayRes(r){
+      changePlayRes(r,item){
 
         if(this.appendStudyOtherHandle!=null){
           window.clearTimeout(this.appendStudyOtherHandle);
@@ -604,6 +653,11 @@
         let $this = this;
         this.resType = r.contentType;
         this.contentData = r;
+        this.activeId = this.contentData.id
+        if(item){
+          this.isFalse = true
+          this.handleOpen(item.section.id,[item.section.id])
+        }
         this.contentData.name = this.courseInfo.name;
         this.saveStudyDuration();
 
@@ -738,7 +792,7 @@
             //console.log(h,$this.controlHeight,'$this.controlHeight');
         })
       },
-      showRes(r, i, index) { //i:子节下标，index:章下标
+      showRes(r, i, index,item) { //i:子节下标，index:章下标
         // 无权限查看不能点击
         if(!this.isCrowd){
           return
@@ -786,7 +840,7 @@
             }
           }
         }
-        this.changePlayRes(r);
+        this.changePlayRes(r,item);
       },
       loadScorePraiseAndTrample() {
         //加载是否请过分
@@ -1117,6 +1171,13 @@
               itemId: this.contentData.studyItemId,
               videoTime: intTime
             };
+            var time = localStorage.getItem('videoProgressData')
+            var arr = time&&JSON.parse(time) || {}
+            if(arr[this.blobUrl]) {
+              postData.progressVideo = arr[this.blobUrl]
+              postData.contentId = this.contentList[this.videoIndex].id
+              postData.courseId = this.contentList[this.videoIndex].courseId
+            }
             //console.log('记录播放时间')
             apiStudy.studyVideoTime(postData).then(rs => {
               if (rs.status != 200) {
@@ -1158,6 +1219,13 @@
             itemId: this.contentData.studyItemId,
             videoTime: intTime
           };
+          var time = localStorage.getItem('videoProgressData')
+          var arr = time&&JSON.parse(time) || {}
+          if(arr[this.blobUrl]) {
+            postData.progressVideo = arr[this.blobUrl]
+            postData.contentId = this.contentList[this.videoIndex].id
+            postData.courseId = this.contentList[this.videoIndex].courseId
+          }
           //console.log('记录播放时间')
           apiStudy.studyVideoTime(postData).then(rs => {
             if (rs.status != 200) {
@@ -1328,9 +1396,11 @@
             // this.showRes(this.contentList[0]);
             //console.log(this.catalogTree,'ccccc22222')
             this.showRes(this.catalogTree[0].children[0])
+            this.videoIndex = 0
           } else {
              //console.log(this.contentList[0],'ccccc3333')
             this.showRes(this.contentList[playIndex]);
+            this.videoIndex = playIndex
           }
         }
       },
@@ -1537,7 +1607,7 @@
 
       finishStudyItem() { //设置完成学习的内容,针对于音视频的内容
         if (!this.contentData.studyItemId) {
-          // 这种可能没有，不过这里也是为了万中那个1
+          //这种可能没有，不过这里也是为了万中那个1
           this.saveStudyInfo();
         } else {
           let params = {
@@ -1618,7 +1688,31 @@
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-icon-arrow-down{
+  color: #000;
+  font-weight: 900;
+  font-size: 16px;
+}
+.el-menu,
+.el-menu-item,
+.el-submenu__title {
+  background-color: transparent !important; /* 设置背景色为透明，以移除默认的背景颜色变化 */
+  color: inherit !important; /* 确保文字颜色不变，如果需要的话 */
+}
 
+/* 取消选中效果 */
+.el-menu-item.is-active,
+.el-submenu__title.is-active {
+  background-color: transparent !important; /* 移除选中时的背景色 */
+  color: inherit !important; /* 保持文字颜色与未选中时一致，如果需要的话 */
+}
+
+/* 如果有特定的 hover 样式，也可以取消 */
+.el-menu-item:hover,
+.el-submenu__title:hover {
+  background-color: transparent !important; /* 移除鼠标悬停时的背景色变化 */
+  color: inherit !important; /* 保持文字颜色不变 */
+}
   //内容块样式定义
   .course-content {
     min-height: 745px;
@@ -2209,7 +2303,7 @@
         width: 18px;
         height: 20px;
         vertical-align: middle;
-        margin-right: 20px;
+        // margin-right: 20px;
       }
     }
   }