修改问题

src/businessComponents/globalTools/globalTools.vue

@@ -5,6 +5,7 @@
 -->
 <template>
    <div class="globalTools" :class="[isPlay ? 'isPlay' : '', isHidden ? 'isHidden' : '']">
+      <div class="mask" v-if="isMask"></div>
       <div :class="['iconTools', toolOpen ? 'hideTools' : '']" ref="iconToolsDom">
          <img @click="openTool" src="@/img/layout/icon-tool.png" />
       </div>
@@ -41,6 +42,7 @@ import pen from "@/views/coursewarePlay/components/pen"
 import { toolOpen, whitePenShow, penShow, isPlay, isHidden } from "./globalTools"
 import { onMounted, onUnmounted, ref, watch } from "vue"
 import { useRoute } from "vue-router"
+const isMask = ref(true) // 是否显示遮罩层，为了处理云教练里面拖动不了的问题
 
 const route = useRoute()
 watch(
@@ -97,6 +99,7 @@ function drag(el: HTMLElement) {
       e.stopPropagation()
       e.preventDefault()
       isLock = false
+      isMask.value = true
       const parentElement = el
       const parentElementRect = parentElement.getBoundingClientRect()
       const downX = e.clientX
@@ -108,6 +111,7 @@ function drag(el: HTMLElement) {
       // const maxLeft = clientWidth - parentElementRect.width
       const maxTop = clientHeight - parentElementRect.height
       function onMousemove(e: MouseEvent) {
+         console.log("eeeeeeee", e)
          // let moveX = parentElementRect.left + (e.clientX - downX)
          let moveY = parentElementRect.top + (e.clientY - downY)
          // let moveY = e.clientY - downY
@@ -128,6 +132,7 @@ function drag(el: HTMLElement) {
       function onMouseup() {
          document.removeEventListener("mousemove", onMousemove)
          document.removeEventListener("mouseup", onMouseup)
+         isMask.value = false
       }
       document.addEventListener("mousemove", onMousemove)
       document.addEventListener("mouseup", onMouseup)
@@ -181,6 +186,16 @@ onUnmounted(() => {
          display: none;
       }
    }
+
+   .mask {
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: transparent;
+      z-index: 2998;
+   }
    .iconTools,
    .expendTools {
       position: fixed;

src/businessComponents/practiceForm/practiceForm.vue

@@ -5,19 +5,30 @@
 -->
 <template>
    <el-dialog modal-class="practiceFormClass" class="practiceForm" v-bind="$attrs" :fullscreen="true" :show-close="false">
-      <iframe v-if="practiceUrl" class="penIframe" frameborder="0" :src="practiceUrl"></iframe>
+      <iframe v-if="practiceUrl" class="penIframe" ref="practiceDom" frameborder="0" :src="practiceUrl"></iframe>
    </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { onUnmounted } from "vue"
+import { onUnmounted, ref, watch } from "vue"
+import { penShow, whitePenShow } from "../globalTools/globalTools"
 defineProps<{
    practiceUrl: string
 }>()
 const emits = defineEmits<{
    (e: "close"): void
 }>()
+const practiceDom = ref<any>()
 
+// 白板的批注打开时暂停播放
+watch(
+   () => [whitePenShow.value, penShow.value],
+   () => {
+      if (whitePenShow.value || penShow.value) {
+         practiceDom.value?.contentWindow?.postMessage({ api: "setPlayState" }, "*")
+      }
+   }
+)
 // 监听iframe传来的关闭弹窗事件
 window.addEventListener("message", messageClose)
 function messageClose(event: MessageEvent<any>) {

src/views/coursewarePlay/coursewarePlay.vue

@@ -10,6 +10,11 @@
             v-show="fileType === 'VIDEO'"
             ref="videoPlayDom"
             @ended="handleChangeCourseware(1)"
+            @loadedmetadata="
+               () => {
+                  isTempAutoPlay = false
+               }
+            "
             @playbackRate="showController"
             :autoPlay="videoIsAutoPlay"
             :disableEvents="true"
@@ -19,7 +24,7 @@
             <ElImage :hide-on-click-modal="true" fit="contain" :src="activeCourseware?.content" class="imgPlay" />
          </div>
          <div class="songPlayBox" v-if="fileType === 'SONG'">
-            <iframe class="songIframe" @mousemove="handleMousemove" :src="songPlaySrc" frameborder="0"></iframe>
+            <iframe ref="songPlayDom" class="songIframe" @mousemove="handleMousemove" :src="songPlaySrc" frameborder="0"></iframe>
          </div>
       </div>
       <div class="leftTools posTools">
@@ -57,22 +62,7 @@
             <img src="@/img/coursewarePlay/xia.png" />
             <!-- <div>下一个</div> -->
          </div>
-
-         <!-- <div class="posBtn" @click="handleCoursewareEnd">
-            <img src="@/img/coursewarePlay/jieshu.png" />
-            <div>结束</div>
-         </div> -->
       </div>
-      <!-- <div class="rightTools posTools">
-         <div class="posBtn" @click="drawerShow = true">
-            <img src="@/img/coursewarePlay/zhishidian.png" />
-            <div>知识点</div>
-         </div>
-         <div class="posBtn" @click="handleCoursewareEnd">
-            <img src="@/img/coursewarePlay/jieshu.png" />
-            <div>结束</div>
-         </div>
-      </div> -->
       <div
          v-if="activeCoursewareResourceId"
          @click="
@@ -162,11 +152,13 @@ const router = useRouter()
 const userStoreHook = userStore()
 /* 获取资源 */
 const videoPlayDom = ref<InstanceType<typeof videoPlay>>()
+const songPlayDom = ref<any>() // 曲谱对象
 const coursewareMenuList = shallowRef<any[]>([]) // 课程类型
 const coursewareList = shallowRef<any[]>([]) // 知识点
 const flattenCoursewareList = ref<any[]>([]) // 扁平化coursewareList
 const isCurrentCoursewareMenu = shallowRef(true) // 是否为当前选的课程类型
 const currentId = ref<any>(route.params.id)
+const isTempAutoPlay = ref(false)
 // 选中的知识点
 const activeCourseware = computed<undefined | Record<string, any>>(() => {
    return flattenCoursewareList.value[activeCoursewareIndex.value]
@@ -194,7 +186,8 @@ const songPlaySrc = computed<string>(() => {
 // 视频是否自动播放
 const videoIsAutoPlay = computed<boolean>(() => {
    // 如果为视频且有阶段目前则不自动播放
-   return fileType.value === "VIDEO" && activeCourseware.value?.phaseGoals ? false : true
+   console.log(fileType.value, isTempAutoPlay.value, "isTempAutoPlay")
+   return (fileType.value === "VIDEO" && activeCourseware.value?.phaseGoals) || isTempAutoPlay.value ? false : true
 })
 const activeCoursewareIndex = ref(0)
 const drawerShow = ref(false)
@@ -206,6 +199,8 @@ watch(activeCourseware, () => {
    handleVideoPause()
    if (activeCourseware.value?.phaseGoals) {
       onTitleTip("phaseGoals", activeCourseware.value?.phaseGoals)
+
+      handleSongPause()
    }
    fileType.value === "VIDEO" &&
       nextTick(() => {
@@ -268,8 +263,8 @@ function getCoursewareMenuList(id?: string) {
    }
 
    httpAjaxErrMsg(LessonCoursewareMenuDetailApi[userStoreHook.roles!], {
-      lessonCoursewareDetailId: id || route.params.id
-      // courseScheduleId: "1844948199117283329"
+      lessonCoursewareDetailId: id || route.params.id,
+      courseScheduleId: route.query.modeId as any
    } as any).then(res => {
       if (res.code === 200) {
          coursewareMenuList.value = res.data || []
@@ -326,22 +321,17 @@ function handleCourseClick(value: any) {
    drawerShow.value = false
 }
 async function handleCourseMenuClick(value: any) {
+   // 判断是否为当前课程类型
    if (currentId.value === value.id) {
       return
    }
-
    LoadingBar.loading(true)
    currentId.value = value.id
-   if (value.id === route.params.id) {
-      isCurrentCoursewareMenu.value = true
-   } else {
-      isCurrentCoursewareMenu.value = false
-   }
-   flattenCoursewareListData = []
-   activeCoursewareIndex.value = -1
+   isCurrentCoursewareMenu.value = value.id === route.params.id ? true : false
+   flattenCoursewareListData = [] // 重置数据
+   isTempAutoPlay.value = true
    await getCoursewareList(value.id)
    getCoursewareMenuList(value.id)
-
    drawerMenuShow.value = false
    activeCoursewareIndex.value = 0
    nextTick(() => {
@@ -353,6 +343,13 @@ async function handleCourseMenuClick(value: any) {
    LoadingBar.loading(false)
 }
 
+/** 曲目相关 */
+// 暂停曲目播放
+function handleSongPause() {
+   songPlayDom.value?.contentWindow?.postMessage({ api: "setPlayState" }, "*")
+   showController()
+}
+
 /* 播放器相关 */
 // 视频播放或者暂停
 function handleVideoPlay() {
@@ -506,6 +503,7 @@ watch(
    () => {
       if (whitePenShow.value || penShow.value) {
          handleVideoPause()
+         handleSongPause()
       }
    }
 )
@@ -553,10 +551,6 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
          opacity: 0;
          transform: translate(-100%, -50%);
       }
-      .rightTools {
-         opacity: 0;
-         transform: translate(100%, -50%);
-      }
       .topTools {
          opacity: 0;
          transform: translateY(-100%);
@@ -570,10 +564,6 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
          opacity: initial;
          transform: translateY(-50%);
       }
-      .rightTools {
-         opacity: initial;
-         transform: translateY(-50%);
-      }
       .goPracticeBtn {
          transform: initial;
       }
@@ -685,12 +675,7 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
          border-radius: 8px;
          left: 32px;
       }
-      &.rightTools {
-         right: 12px;
-      }
       .posBtn {
-         // background: rgba(0, 0, 0, 0.3);
-         // border-radius: 8px;
          padding: 14px 6px;
          font-weight: 500;
          font-size: 16px;

src/views/coursewarePlay/videoPlay/videoPlay.vue

@@ -177,6 +177,8 @@ function initVideo() {
       if (props.autoPlay) {
          playerVm.play()
       }
+
+      emits("loadedmetadata")
    })
    //总时长变化时候
    playerVm.on("durationchange", () => {