Sfoglia il codice sorgente

移播放到组件里

谢杰标 2 anni fa
parent
commit
fb723b7d27
2 ha cambiato i file con 88 aggiunte e 91 eliminazioni
  1. 87 0
      src/components/courseTree/CourseTree.vue
  2. 1 91
      src/pages/course-detail/index.vue

+ 87 - 0
src/components/courseTree/CourseTree.vue

@@ -531,6 +531,36 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      title="温馨提示"
+      width="380px"
+      center
+      class="tip-dialog"
+      :visible.sync="dialogPalyVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <template v-if="!isLastVideo">
+        <p>当前视频已学完,继续学习下一个视频?</p>
+        <div class="btn1">
+          <el-button type="info" plain round @click="dialogPalyVisible = false"
+            >取 消</el-button
+          >
+          <el-button type="primary" @click="comfirm" round>确定</el-button>
+        </div>
+      </template>
+      <template v-else>
+        <p>
+          当前是最后一个视频并已学习完,请检查所有章节的视频是否已学习完成。
+        </p>
+        <div class="btn2">
+          <el-button type="primary" round @click="dialogPalyVisible = false"
+            >确定</el-button
+          >
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -564,6 +594,7 @@ export default {
       query: this.$route.query,
       sectionExam: [],
       sectionExamList: [],
+      dialogPalyVisible: false,
     };
   },
   created() {
@@ -724,6 +755,10 @@ export default {
         sectionId == sectionId1
       );
     },
+    comfirm() {
+      this.dialogPalyVisible = false;
+      this.playNextVideo();
+    },
     // 自动播放下一个视频
     async playNextVideo(sectionItem = this.sectionItem) {
       let { menuId, parent, courseId, projectId } = sectionItem;
@@ -1090,6 +1125,17 @@ export default {
     playCourse() {
       return this.treeList.find((e) => e.courseId == this.playCourseId);
     },
+    isLastVideo() {
+      try {
+        let { sectionId, chapterId } = this.sectionItem;
+        let lastVideo = this.allVideoList.slice(-1)[0];
+        return (
+          sectionId == lastVideo.sectionId && chapterId == lastVideo.chapterId
+        );
+      } catch (error) {
+        return false;
+      }
+    },
   },
 };
 </script>
@@ -1285,5 +1331,46 @@ export default {
       }
     }
   }
+  .tip-dialog {
+    /deep/ {
+      .el-dialog__body {
+        padding: 6px 40px 44px;
+      }
+
+      .el-dialog__header {
+        padding-top: 36px;
+      }
+
+      .el-dialog__title {
+        font-weight: bold;
+        color: #222222;
+      }
+    }
+
+    p {
+      color: #666666;
+      font-size: 16px;
+      text-align: center;
+    }
+
+    .btn1 {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 50px;
+
+      .el-button {
+        width: 140px;
+      }
+    }
+
+    .btn2 {
+      width: 200px;
+      margin: 32px auto 0;
+
+      .el-button {
+        width: 200px;
+      }
+    }
+  }
 }
 </style>

+ 1 - 91
src/pages/course-detail/index.vue

@@ -2032,38 +2032,6 @@
         >
       </span>
     </el-dialog>
-    <el-dialog
-      title="温馨提示"
-      width="380px"
-      center
-      class="tip-dialog"
-      :visible.sync="dialogPalyVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-    >
-      <template v-if="!isLastVideo">
-        <p>当前视频已学完,继续学习下一个视频?</p>
-        <div class="btn1">
-          <el-button type="info" plain round @click="dialogPalyVisible = false"
-            >取 消</el-button
-          >
-          <el-button type="primary" @click="playNextVideo" round
-            >确定</el-button
-          >
-        </div>
-      </template>
-      <template v-else>
-        <p>
-          当前是最后一个视频并已学习完,请检查所有章节的视频是否已学习完成。
-        </p>
-        <div class="btn2">
-          <el-button type="primary" round @click="dialogPalyVisible = false"
-            >确定</el-button
-          >
-        </div>
-      </template>
-    </el-dialog>
     <div id="printTable"></div>
     <!-- <ToolBar></ToolBar> -->
     <Footer></Footer>
@@ -2414,7 +2382,6 @@ export default {
       sectionExamList: [], //节试卷集合
       sectionExam: [], //节试卷集合
       compareFaceData: 0, // 拍照匹配相似度
-      dialogPalyVisible: false,
       allCourseList: [],
     };
   },
@@ -2436,17 +2403,6 @@ export default {
         return ary;
       };
     },
-    isLastVideo() {
-      try {
-        let { sectionId, chapterId } = this.sectionItem;
-        let lastVideo = this.allVideoList.slice(-1)[0];
-        return (
-          sectionId == lastVideo.sectionId && chapterId == lastVideo.chapterId
-        );
-      } catch (error) {
-        return false;
-      }
-    },
   },
   async mounted() {
     this.courseId = +this.$route.query.courseId || "";
@@ -4699,7 +4655,7 @@ export default {
             type: "success",
             message: "播放完毕",
           });
-          this.dialogPalyVisible = true;
+          this.$refs["courseTree"][0].dialogPalyVisible = true;
           if (this.isFullScreen()) {
             this.exitFullscreen();
           }
@@ -4707,10 +4663,6 @@ export default {
         });
       });
     },
-    async playNextVideo() {
-      this.dialogPalyVisible = false;
-      this.$refs["courseTree"][0].playNextVideo();
-    },
     timeEventLiving() {
       var polyvPlayerContext = this.playerzb;
       if (polyvPlayerContext) {
@@ -6830,48 +6782,6 @@ export default {
     }
   }
 
-  .tip-dialog {
-    /deep/ {
-      .el-dialog__body {
-        padding: 6px 40px 44px;
-      }
-
-      .el-dialog__header {
-        padding-top: 36px;
-      }
-
-      .el-dialog__title {
-        font-weight: bold;
-        color: #222222;
-      }
-    }
-
-    p {
-      color: #666666;
-      font-size: 16px;
-      text-align: center;
-    }
-
-    .btn1 {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 50px;
-
-      .el-button {
-        width: 140px;
-      }
-    }
-
-    .btn2 {
-      width: 200px;
-      margin: 32px auto 0;
-
-      .el-button {
-        width: 200px;
-      }
-    }
-  }
-
   .take-photo {
     /deep/ .el-dialog__header {
       display: none;