Tang 2 years ago
parent
commit
89265775b1

+ 64 - 3
src/components/videoCy/index.vue

@@ -36,7 +36,9 @@ export default {
       showRecordStatus: false, //是否显示从头播放提示
       showRecordSetTimeOut: null, //从头播放提示计时器函数
       openPhotoStatus: 0, //暂存学习状态
-      commitTime: null //暂存时间-节流
+      commitTime: null, //暂存时间-节流
+      videoPauseSetTimeout: null, //定时器停留太久触发
+      failToRegister: false //报名推送不通过
     };
   },
   computed: {
@@ -76,11 +78,13 @@ export default {
         this.player.HTML5.video.addEventListener("timeupdate", this.timeEvent); //监听器
         this.player.on("s2j_onPlayStart", this.onPlayStatus); //视频初次播放时触发
         this.player.on("s2j_onVideoPause", this.onVideoPause); //视频暂停时触发
+        this.player.on("s2j_onVideoPlay", this.onVideoPlay); //视频初次播放或由暂停恢复播放时触发
         this.player.on("s2j_onPlayOver", this.onPlayOver); //当前视频播放完毕时触发
         this.player.on("s2j_onPlayerError", this.onPlayerError); //播放出现错误时触发
         this.player.on("serverError", this.serverError); //发生业务逻辑错误时触发,比如授权验证失败、域名黑白名单验证不通过等错误。参数返回事件名称和错误代码。
       }); //播放器初始化完毕时触发。播放器提供的方法需要在此事件发生后才可以调用。
     });
+    document.addEventListener("visibilitychange", this.pauseVideo);
   },
   methods: {
     getBeforeWork() {},
@@ -88,13 +92,14 @@ export default {
     initData() {
       this.commitTime = null;
       this.openPhotoStatus = 0;
+      clearTimeout(this.videoPauseSetTimeout); //删除暂停计算拍照定时器
     },
     //获取播放记录
     getRecordLast() {
       return new Promise(resolve => {
         clearTimeout(this.showRecordSetTimeOut);
         let data = {
-          // orderGoodsId: this.goodsData.orderGoodsId,
+          orderGoodsId: this.goodsData.orderGoodsId,
           gradeId: this.goodsData.gradeId,
           goodsId: this.goodsData.goodsId,
           courseId: this.activeSection.courseId,
@@ -123,6 +128,7 @@ export default {
           goodsId: this.goodsData.goodsId,
           courseId: this.activeSection.sectionId,
           gradeId: this.goodsData.gradeId,
+          orderGoodsId: this.goodsData.orderGoodsId,
           chapterId: this.activeSection.chapterId,
           moduleId: this.activeSection.moduleId
         };
@@ -249,6 +255,7 @@ export default {
         let data = {
           goodsId: this.goodsData.goodsId,
           gradeId: this.goodsData.gradeId,
+          orderGoodsId: this.goodsData.orderGoodsId,
           courseId: this.activeSection.courseId,
           moduleId: this.activeSection.moduleId,
           chapterId: this.activeSection.chapterId,
@@ -370,7 +377,41 @@ export default {
     },
     //视频暂停时触发
     onVideoPause() {
-      console.log("视频暂停时触发");
+      if (
+        this.activeSection.learning != 1 &&
+        this.goodsData.erJianErZao &&
+        !this.failToRegister
+      ) {
+        this.videoPauseSetTimeout = setTimeout(() => {
+          if (this.isFullScreen()) {
+            this.exitFullscreen();
+          }
+          this.$confirm(
+            "检测播放暂停或拍照停留时间过长,刷新当前页面",
+            "提示",
+            {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              showCancelButton: false,
+              closeOnClickModal: false,
+              closeOnPressEscape: false,
+              showClose: false,
+              type: "warning"
+            }
+          )
+            .then(() => {
+              this.$router.go(0);
+            })
+            .catch(() => {});
+        }, 300000);
+      }
+    },
+    //视频恢复播放时触发
+    onVideoPlay() {
+      if (this.activeSection.learning != 1 && this.goodsData.erJianErZao) {
+        clearTimeout(this.videoPauseSetTimeout);
+      }
+      console.log("视频恢复播放时触发");
     },
     //当前视频播放完毕时触发
     onPlayOver() {
@@ -379,6 +420,7 @@ export default {
         message: "播放完毕"
       });
       this.isFullScreen();
+      clearTimeout(this.videoPauseSetTimeout); //删除暂停计算拍照定时器
       this.postStudyRecord(1);
       console.log("当前视频播放完毕时触发");
     },
@@ -518,6 +560,7 @@ export default {
           .catch(err => {
             if (err.code === 600) {
               polyvPlayerContext.j2s_pauseVideo();
+              this.failToRegister = true; //报名推送不通过
               this.$confirm(`开通信息推送不成功,无法学习!`, "提示", {
                 confirmButtonText: "确定",
                 closeOnClickModal: false,
@@ -576,11 +619,29 @@ export default {
             }, 1500);
           });
       });
+    },
+    //页面显示隐藏逻辑
+    pauseVideo() {
+      if (this.$refs.takePicture.takePhotoModal || this.failToRegister) {
+        return;
+      }
+      let _p = this.player;
+      if (document.visibilityState === "hidden") {
+        _p && _p.j2s_pauseVideo();
+      } else if (
+        _p &&
+        parseInt(_p.j2s_getCurrentTime()) < _p.j2s_getDuration()
+      ) {
+        this.player.j2s_resumeVideo();
+      }
     }
   },
   beforeDestroy() {
     this.player.HTML5.video.removeEventListener("timeupdate", this.timeEvent); //监听器
     this.$bus.$off("toPlay");
+    clearTimeout(this.videoPauseSetTimeout); //删除暂停计算拍照定时器
+
+    document.removeEventListener("visibilitychange", this.pauseVideo);
   }
 };
 </script>

+ 106 - 63
src/pages/course-detail/components/CourseTree.vue

@@ -203,7 +203,7 @@
                       </template>
                     </template>
                     <el-tag v-else size="mini" effect="dark">{{
-                      getStudyStatus(item3)
+                      getStudyStatus(item3)["name"]
                     }}</el-tag>
                   </div>
                 </div>
@@ -312,7 +312,9 @@ export default {
           }
         }
         if (item.sectionType == 2) {
+          console.log("aaasdasdasd", item, this.nowTime);
           if (item.liveStartTime > this.nowTime) {
+            console.log("asdasdasd");
             return {
               name: "待开播",
               style: "warning"
@@ -406,18 +408,11 @@ export default {
         }
 
         if (STATUSARRAY.every(i => i.studyStatus == 1)) {
-          if (STATUSARRAY.findIndex(i => i.rebuild == 1) !== -1) {
-            return {
-              name: "待重修",
-              style: "danger"
-            };
-          } else {
-            return {
-              name: "已学完",
-              style: "success"
-            };
-          }
-        } else if (STATUSARRAY.every(i => i.studyStatus == -1)) {
+          return {
+            name: "已学完",
+            style: "success"
+          };
+        } else {
           return {
             name: "待学习",
             style: ""
@@ -450,6 +445,7 @@ export default {
       return new Promise((resolve, reject) => {
         this.$request
           .courseCourseList({
+            orderGoodsId: this.goodsData.orderGoodsId,
             goodsId: this.goodsData.goodsId,
             gradeId: this.goodsData.gradeId
           })
@@ -495,6 +491,9 @@ export default {
                 sectionType: i.type == 3 ? i.sectionType : null,
                 durationTime: i.type == 3 ? i.durationTime : null,
                 recordingUrl: i.type == 3 ? i.recordingUrl : null,
+                liveUrl: i.type == 3 ? i.liveUrl : null,
+                liveStartTime: i.sectionType == 2 ? i.liveStartTime : null,
+                liveEndTime: i.sectionType == 2 ? i.liveEndTime : null,
                 showStatus: false, //展开状态
                 children: null, //子列表
                 learning: i.type == 3 ? i.learning : null,
@@ -509,9 +508,9 @@ export default {
       });
     },
     //展开模块
-    openModule(item) {
+    openModule(item, status = false) {
       if (item.children && item.children.length > 0) {
-        item.showStatus = !item.showStatus;
+        item.showStatus = status ? true : !item.showStatus;
       } else {
         return new Promise(resolve => {
           this.$request
@@ -559,10 +558,15 @@ export default {
       }
     },
     //展开章
-    openChapter(item) {
+    /**
+     * status = true ? '强制展开'
+     * renewal = true ? '重新获取数据'
+     */
+    openChapter(item, status = false, renewal = false) {
       if (item.children && item.children.length > 0) {
-        item.showStatus = !item.showStatus;
-      } else {
+        item.showStatus = item.showStatus = status ? true : !item.showStatus;
+      }
+      if (!(item.children && item.children.length > 0) || renewal) {
         return new Promise(async resolve => {
           const examRes = await this.$request.reSectionExamList({
             moduleId: item.moduleId,
@@ -598,6 +602,10 @@ export default {
                       sectionType: i.sectionType,
                       durationTime: i.durationTime,
                       recordingUrl: i.recordingUrl,
+                      liveUrl: i.liveUrl,
+                      liveStartTime:
+                        i.sectionType == 2 ? i.liveStartTime : null,
+                      liveEndTime: i.sectionType == 2 ? i.liveEndTime : null,
                       learning: i.learning,
                       rebuild: i.rebuild,
                       showStatus: false, //展开状态
@@ -750,9 +758,23 @@ export default {
           return;
         }
       }
-      this.toPlaySection(item);
+      var query = {
+        goodsName: this.goodsData.name,
+        goodsId: this.goodsData.goodsId,
+        gradeId: this.goodsData.gradeId,
+        orderGoodsId: this.goodsData.orderGoodsId,
+        courseId: this.courseId,
+        sectionId: item.sectionId,
+        chapterId: item.chapterId,
+        moduleId: item.moduleId,
+        sectionType: item.sectionType,
+        vid: item.recordingUrl // 回放vid
+      };
+      this.$router.push({
+        path: "/living-room/" + item.liveUrl,
+        query
+      });
     },
-    toPlaySection(item) {},
     //跳转试卷
     async doExam(section, type) {
       // 试卷学习次数
@@ -863,6 +885,7 @@ export default {
         this.$request
           .goodsTodayStudySectionNum({
             goodsId: this.goodsData.goodsId,
+            orderGoodsId: this.goodsData.orderGoodsId,
             gradeId: this.goodsData.gradeId
           })
           .then(res => {
@@ -876,6 +899,7 @@ export default {
           type: option.type == -1 ? 2 : 1,
           goodsId: this.goodsData.goodsId,
           gradeId: this.goodsData.gradeId,
+          orderGoodsId: this.goodsData.orderGoodsId,
           moduleId: option.moduleId || 0,
           chapterId: option.chapterId || 0
         };
@@ -894,6 +918,7 @@ export default {
         this.$request
           .bankRecordDoNum({
             goodsId: this.goodsData.goodsId,
+            orderGoodsId: this.goodsData.orderGoodsId,
             gradeId: this.goodsData.gradeId,
             courseId: this.courseList[0].courseId,
             moduleId: 0,
@@ -945,68 +970,86 @@ export default {
       }
     },
     //展开定位列表
-    async unfoldFunc(item) {
+    async unfoldFunc(item, status = false, Renewal = false) {
       if (item.moduleId) {
-        var ary = this.courseDataList.find(i => i.moduleId == item.moduleId);
-        let moduleChildren = await this.openModule(ary);
+        let moduleChildren = await this.openModule(
+          this.courseDataList.find(i => i.moduleId == item.moduleId),
+          status
+        );
         if (item.chapterId) {
           await this.openChapter(
-            moduleChildren.find(i => i.chapterId == item.chapterId)
+            moduleChildren.find(i => i.chapterId == item.chapterId),
+            status,
+            Renewal
           );
         }
       }
       if (!item.moduleId && item.chapterId) {
-        var ary = this.courseDataList.find(i => i.chapterId == item.chapterId);
-        await this.openChapter(ary);
+        await this.openChapter(
+          this.courseDataList.find(i => i.chapterId == item.chapterId),
+          status,
+          Renewal
+        );
       }
     },
     //已学完,重新定位
     BackVideoFunc() {
+      this.unfoldFunc(this.activeSection, true, true);
       if (this.businessData.goodsLearningOrder == 2) {
-        let ary = this.allSectionList.find(i => i.studyStatus != 1);
-        if (ary) {
-          if (ary.type != 3) {
-            this.$confirm(
-              "本章视频已学习完成,继续进行下一个考试?",
-              "温馨提示",
-              {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning"
-              }
-            )
-              .then(() => {
-                // this.openMenu(ary);
-                // this.unfoldFunc(ary);
-              })
-              .catch(() => {});
-          } else {
-            this.$confirm("当前视频已学完,继续学习下一个视频?", "温馨提示", {
+        var ary = this.allSectionList.find(i => i.studyStatus != 1);
+      } else {
+        var ary = null;
+        let index = this.allSectionList.findIndex(
+          i =>
+            i.courseId == this.activeSection.courseId &&
+            i.moduleId == this.activeSection.moduleId &&
+            i.chapterId == this.activeSection.chapterId &&
+            i.sectionId == this.activeSection.sectionId
+        );
+        ary = this.allSectionList[index + 1];
+      }
+      if (ary) {
+        if (ary.type != 3) {
+          this.$confirm(
+            "本章视频已学习完成,继续进行下一个考试?",
+            "温馨提示",
+            {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
+            }
+          )
+            .then(() => {
+              this.openMenu(ary);
+              this.unfoldFunc(ary, true);
             })
-              .then(() => {
-                // this.openMenu(ary);
-                // this.unfoldFunc(ary);
-              })
-              .catch(() => {});
-          }
+            .catch(() => {});
         } else {
-          this.$alert(
-            "恭喜您课程学习全部完成,教务会在1-3个工作日内完成学习初审,请耐心等待。",
-            "温馨提示",
-            {
-              confirmButtonText: "确定",
-              showClose: false,
-              callback: action => {
-                if (action == "confirm") {
-                  this.jumpPage();
-                }
+          this.$confirm("当前视频已学完,继续学习下一个视频?", "温馨提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+            .then(() => {
+              this.openMenu(ary);
+              this.unfoldFunc(ary, true);
+            })
+            .catch(() => {});
+        }
+      } else {
+        this.$alert(
+          "恭喜您课程学习全部完成,教务会在1-3个工作日内完成学习初审,请耐心等待。",
+          "温馨提示",
+          {
+            confirmButtonText: "确定",
+            showClose: false,
+            callback: action => {
+              if (action == "confirm") {
+                this.jumpPage();
               }
             }
-          );
-        }
+          }
+        );
       }
     },
     //回到个人中心

+ 5 - 14
src/pages/course-detail/components/HandOut.vue

@@ -297,19 +297,10 @@ export default {
         return;
       }
       var str = item.urlName.slice(item.urlName.indexOf(".") + 1);
-      if (str === "docx" || str === "xlsx") {
-        window.open(
-          ` https://view.officeapps.live.com/op/view.aspx?src=${this.$tools.splitImgHost(
-            item.url
-          )}`,
-          "_blank"
-        );
-        return;
-      }
-      if (str === "pdf") {
-        window.open(this.$tools.splitImgHost(item.url), "_blank");
-        return;
-      }
+      window.open(
+        ` https://preview.xyyxt.net?src=${this.$tools.splitImgHost(item.url)}`,
+        "_blank"
+      );
     },
     //点击预览加载
     loadSeePdf(item) {
@@ -367,7 +358,7 @@ export default {
     text-overflow: ellipsis;
   }
   & > .node_label2 {
-    width: 408px;
+    // width: 408px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

+ 86 - 3
src/pages/course-detail/components/coreContent.vue

@@ -2,9 +2,41 @@
   <div id="coreContent">
     <div class="left_box">
       <video-cy
+        :class="video_iframe == 'video' ? 'smallView' : ''"
+        v-show="video_iframe == 'video' && !viewStatus ? false : true"
         ref="video_cy"
         @videoScript="videoScript"
       ></video-cy>
+      <div
+        class="office_style"
+        :class="video_iframe == 'iframe' ? 'smallView' : ''"
+        v-show="video_iframe == 'iframe' && !viewStatus ? false : true"
+        v-if="SwitchOfficeData.url"
+      >
+        <iframe
+          width="100%"
+          height="100%"
+          :src="
+            'https://preview.xyyxt.net?src=' +
+              $tools.splitImgHost(SwitchOfficeData.url)
+          "
+        ></iframe>
+      </div>
+      <div v-if="SwitchOfficeData.url && viewStatus" class="floatView">
+        <el-button size="small" type="primary" @click="switchView"
+          >切换</el-button
+        >
+        <el-button size="small" type="warning" @click="viewStatus = !viewStatus"
+          >隐藏</el-button
+        >
+      </div>
+      <el-button
+        v-if="!viewStatus"
+        size="small"
+        class="showOK"
+        @click="viewStatus = !viewStatus"
+        >显示</el-button
+      >
     </div>
     <div class="right_box">
       <el-tabs stretch v-model="courseTabIndex">
@@ -19,7 +51,8 @@
           </div>
           <!-- 章节目录 -->
           <template v-if="tab.name == '1'">
-            <course-tree ref="courseTree" :activeSection.sync="activeSection"> </course-tree>
+            <course-tree ref="courseTree" :activeSection.sync="activeSection">
+            </course-tree>
           </template>
           <!-- 重修目录 -->
           <template v-if="tab.name == '2'">
@@ -70,6 +103,8 @@ export default {
   },
   data() {
     return {
+      video_iframe: "iframe", //当前缩小视图层
+      viewStatus: true, //开关隐藏
       courseTabIndex: "",
       menuTab: [
         {
@@ -91,6 +126,7 @@ export default {
       ],
       gradeDetail: {}, //班级详情
       player: null, //视频播放器实例
+      SwitchOfficeData: {}, //当前选中讲义数据
       activeSection: {} //当前选中节数据
     };
   },
@@ -108,6 +144,12 @@ export default {
     }
   },
   methods: {
+    //切换视图
+    switchView() {
+      this.video_iframe == "iframe"
+        ? (this.video_iframe = "video")
+        : (this.video_iframe = "iframe");
+    },
     //处理前置任务
     getBeforeWork() {
       this.$refs.dataReview.init({
@@ -295,11 +337,15 @@ export default {
       });
     },
     //讲义模块返回
-    backSwitchOfficeData() {},
+    backSwitchOfficeData(item) {
+      this.SwitchOfficeData = Object.assign({}, item);
+    },
     //视频播放实例
     videoScript(player) {
       this.player = player;
-    },
+      this.video_iframe = "iframe"; //当前缩小视图层
+      this.viewStatus = true; //开关隐藏
+    }
   }
 };
 </script>
@@ -313,6 +359,41 @@ export default {
   & > .left_box {
     width: 810px;
     flex-shrink: 0;
+    position: relative;
+    & > .office_style {
+      width: 810px;
+      height: 455px;
+    }
+    & > .smallView {
+      position: absolute;
+      z-index: 123;
+      right: 4px;
+      bottom: 60px;
+      transform: scale(0.2);
+      transform-origin: 100% 100%;
+    }
+    & > .floatView {
+      position: absolute;
+      z-index: 124;
+      right: 4px;
+      bottom: 60px;
+      width: 162px;
+      height: 91px;
+      background-color: rgba(225, 225, 225, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+    & > .showOK {
+      position: absolute;
+      z-index: 124;
+      right: 10px;
+      bottom: 87px;
+      opacity: 0.3;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
   }
   & > .right_box {
     width: 1px;
@@ -323,6 +404,7 @@ export default {
       display: flex;
       flex-direction: column;
       /deep/ .el-tabs__header {
+        background-color: #3f4449 !important;
         margin: 0px !important;
         .label {
           color: #fff;
@@ -332,6 +414,7 @@ export default {
         flex: 1;
         height: 1px;
         overflow: auto;
+        background-color: #3f4449 !important;
       }
     }
   }

+ 0 - 4
src/pages/course-detail/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="course-detail">
     <Header></Header>
-    <el-button @click="test">测试</el-button>
     <section class="section_box">
       <!-- 面包屑START -->
       <div class="breadcrumb">
@@ -60,9 +59,6 @@ export default {
     this.getInit();
   },
   methods: {
-    test() {
-      this.$bus.$emit("BackVideoFunc", {});
-    },
     async getInit() {
       await this.getGoodsData(); //获取商品详情
       await this.courseBusiness(); //获取培训项目详情

+ 5 - 13
src/pages/handout-detail/components/HandOut.vue

@@ -215,19 +215,11 @@ export default {
         return;
       }
       var str = item.urlName.slice(item.urlName.indexOf(".") + 1);
-      if (str === "docx" || str === "xlsx") {
-        window.open(
-          ` https://view.officeapps.live.com/op/view.aspx?src=${this.$tools.splitImgHost(
-            item.url
-          )}`,
-          "_blank"
-        );
-        return;
-      }
-      if (str === "pdf") {
-        window.open(this.$tools.splitImgHost(item.url), "_blank");
-        return;
-      }
+      window.open(
+        ` https://preview.xyyxt.net?src=${this.$tools.splitImgHost(item.url)}`,
+        "_blank"
+      );
+      return;
     },
     //点击预览加载
     loadSeePdf(item) {