课程状态、在线课权限

src/views/study/coursenew.vue

@@ -99,10 +99,10 @@
               </div>
             </div>
             <div v-if="resType == 60">
-              <homework v-if="resType == 60 && studyId != ''" :studyId="studyId" :content="contentData"></homework>
+              <homework @submit="homeWorkSubmit" v-if="resType == 60 && studyId != ''" :studyId="studyId" :content="contentData"></homework>
             </div>
             <div v-if="resType == 61">
-              <exam v-if="resType == 61 && studyId != '' " :studyId="studyId" :content="contentData"></exam>
+              <exam @startTest="startTest" v-if="resType == 61 && studyId != '' " :studyId="studyId" :content="contentData"></exam>
             </div>
             <div v-if="resType == 62" style="padding:5px">
               <assess v-if="resType == 62 && studyId != '' && contentData.id" :studyId="studyId" :content="contentData">
@@ -170,20 +170,69 @@
 
               <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;">
+                            <div style="width: 240px;font-weight: 700;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.section.name">{{item.section.name}}</div>
+                            <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="width: 200px;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="ele.contentName">{{i+1}}. {{ ele.contentName }}</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/nowNot.png" alt="">
+                                  <img v-if="contentData.id == ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban1.png" alt="">
+                                  <img v-if="contentData.id != ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/notNew.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/newBan.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 -->
-                  <div class="units-info" v-for="(list, index) in contentList" :key="index" :name="index"  @click="showRes(list,-1,index)" :class="{'units-active':contentData.id == list.id}">
+                  <div class="units-info" style="display: flex;justify-content: space-between" v-for="(list, index) in contentList" :key="index" :name="index"  @click="showRes(list,-1,index)" :class="{'units-active':contentData.id == list.id}">
                     <!-- <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i"> -->
-                    <img v-if="contentData.id == list.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> {{index+1}}.
-                    {{ list.contentName }}
+                    <!-- <img v-if="contentData.id == list.id" :src="`${webBaseUrl}/images/playicon.png`" alt="">  -->
+                     <div style="max-width: 193px;;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
+                       {{index+1}}.{{ list.contentName }}
+                     </div>
+                    <div style="margin-left: 5px">
+                      <span v-if="contentData.id == list.id" style="color: #387DF7;font-size: 14px;margin-right: 4px;">学习中</span>
+                      <img v-if="contentData.id == list.id && list.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/over.png" alt="">
+                      <img v-if="contentData.id == list.id && list.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/nowNot.png" alt="">
+                      <img v-if="contentData.id == list.id && (list.status != 9&&list.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban1.png" alt="">
+                      <img v-if="contentData.id != list.id && list.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/notNew.png" alt="">
+                      <img v-if="contentData.id != list.id && list.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/not.png" alt="">
+                      <img v-if="contentData.id != list.id && (list.status != 9&&list.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/newBan.png" alt="">
+                    </div>
                     <!-- </div> -->
                   </div>
                 </div>
@@ -320,6 +369,11 @@
     },
     data() {
       return {
+        isContentTypeTwo: null,
+        isContentType: null,
+        activeId: '',
+        isFalse: false,
+        defaultOpeneds: [],
         sendEventProgress: 0,
         trueFalse: true,
         audiences:'',
@@ -455,6 +509,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 +657,7 @@
         window.open(url, '_blank');
       },
       //替换播放区域
-      changePlayRes(r){
+      changePlayRes(r,item){
 
         if(this.appendStudyOtherHandle!=null){
           window.clearTimeout(this.appendStudyOtherHandle);
@@ -604,6 +668,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();
 
@@ -681,7 +750,13 @@
           //console.log('评估处理');
         }
         if (this.contentData.status < 2) {
-          this.contentData.status = 2; //进行中
+          // this.contentData.status = 2; //进行中
+          if(r.contentType != 61&&r.contentType != 20 && r.contentType != 10){
+            setTimeout(() => {              
+              this.isContentTypeTwo = r.contentType
+              $this.isShowTime()
+              }, 2000);
+            }
         }
         //以下是学习记录,50是scorm项目
         if (this.contentData.contentType > 20 && this.contentData.contentType !== 50) { //非视频类的
@@ -710,6 +785,7 @@
             $this.appendStudyOtherTime();
           }, 15000); //非音视频课程学习,十五秒后记录
           //this.appendStudyTime();
+          this.isContentType = this.contentData.contentType
           if (this.contentData.contentType != 50) {
             this.handleTimeout = setTimeout(function(){
               $this.saveStudyInfo();
@@ -738,7 +814,13 @@
             //console.log(h,$this.controlHeight,'$this.controlHeight');
         })
       },
-      showRes(r, i, index) { //i:子节下标，index:章下标
+      isShowTime(){
+        if(this.isContentTypeTwo != this.contentData.contentType){
+          return
+        }
+        this.contentData.status = 2;
+      },
+      showRes(r, i, index,item) { //i:子节下标，index:章下标
         // 无权限查看不能点击
         if(!this.isCrowd){
           return
@@ -786,7 +868,7 @@
             }
           }
         }
-        this.changePlayRes(r);
+        this.changePlayRes(r,item);
       },
       loadScorePraiseAndTrample() {
         //加载是否请过分
@@ -1027,6 +1109,11 @@
 
       onPlayerPlay() {
         //console.log("开始播放");
+        // if(this.contentData.contentType == 10){
+        //   if(this.contentData.status<2){
+        //     this.contentData.status = 2;
+        //   }
+        // }
         this.playerBoxShow = false;
         let $this = this;
         //这里有些不准备，如果文件未能加载，这个事件就是错误的
@@ -1129,6 +1216,7 @@
       audioPlaying(item, currentTime) {
         //console.log("当前播放"+item);
         let intTime = parseInt(currentTime);
+        this.handleAudioTimeUpdate(intTime)
         //判断是否完成
         let completeType = this.curriculumData.completeSetup;
         let completeSecond = this.curriculumData.second;
@@ -1168,6 +1256,9 @@
       },
       audioPlay() {
         //console.log("开始播放");
+        // if(this.contentData.contentType == 20 && this.contentData.status < 2){
+        //   this.contentData.status = 2;
+        // }
         let $this = this;
         this.isAppendTime=true;
         this.appendStudyTime();//启动追加学习时长
@@ -1363,6 +1454,12 @@
         });
       },
       saveStudyInfo() {
+        if(this.isContentType){
+          if(this.isContentType != this.contentData.contentType){
+            //定时器产生的，不记录
+            return
+          }
+        }
         //记录课件学习信息
         if (this.contentData.contentType >= 60) {
           //只有在课件页面停留超过5秒才会记录
@@ -1391,6 +1488,18 @@
           }
         });
       },
+      homeWorkSubmit(){
+        if(this.contentData.contentType == 60){
+          this.contentData.status = 9;
+        }
+      },
+      startTest(val){
+        if(this.contentData.contentType == 61){
+          if(this.contentData.status < 2){
+            this.contentData.status = 2;
+          }
+        }
+      },
       progress(val) { 
         const progressValue = parseFloat(val) * 100;
         this.sendEventProgress = Number(progressValue.toFixed(2));
@@ -1537,7 +1646,7 @@
 
       finishStudyItem() { //设置完成学习的内容,针对于音视频的内容
         if (!this.contentData.studyItemId) {
-          // 这种可能没有，不过这里也是为了万中那个1
+          //这种可能没有，不过这里也是为了万中那个1
           this.saveStudyInfo();
         } else {
           let params = {
@@ -1608,7 +1717,11 @@
             contentTotal: this.totalContent
           };
           if(currentTime > 2 && this.trueFalse){
-            apiStudy.studyContent(params)
+            apiStudy.studyContent(params).then(()=>{
+              if(this.contentData.status<2){
+                this.contentData.status = 2;
+              }
+            })
             this.trueFalse = false
           }
         // }
@@ -1618,7 +1731,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 +2346,7 @@
         width: 18px;
         height: 20px;
         vertical-align: middle;
-        margin-right: 20px;
+        // margin-right: 20px;
       }
     }
   }