去练习 改为弹窗模式

src/views/coursewarePlay/components/practiceForm/index.ts

@@ -0,0 +1,2 @@
+import practiceForm from "./practiceForm.vue"
+export default practiceForm

src/views/coursewarePlay/components/practiceForm/practiceForm.vue

@@ -0,0 +1,54 @@
+<!--
+* @FileDescription: 去练习 弹窗
+* @Author: 黄琪勇
+* @Date:2024-09-05 19:13:16
+-->
+<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>
+   </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted } from "vue"
+defineProps<{
+   practiceUrl: string
+}>()
+const emits = defineEmits<{
+   (e: "close"): void
+}>()
+
+// 监听iframe传来的关闭弹窗事件
+window.addEventListener("message", messageClose)
+function messageClose(event: MessageEvent<any>) {
+   const { api } = event.data
+   if (api === "api_YjtClose") {
+      emits("close")
+   }
+}
+onUnmounted(() => {
+   window.removeEventListener("message", messageClose)
+})
+</script>
+<style lang="scss">
+.practiceForm.el-dialog {
+   padding: 0;
+   background-color: initial;
+   .el-dialog__header {
+      padding: 0;
+   }
+   .el-dialog__body {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      .penIframe {
+         display: block;
+         width: 100%;
+         height: 100%;
+      }
+   }
+}
+.practiceFormClass.el-overlay {
+   background-color: initial;
+}
+</style>

src/views/coursewarePlay/coursewarePlay.vue

@@ -114,6 +114,7 @@
          "
          v-model="whitePenShow"
       />
+      <practiceForm v-model="isPracticeShow" :practiceUrl="practiceUrl" @close="handlePracticeClose" />
    </div>
 </template>
 
@@ -129,6 +130,7 @@ import { ElMessageBox } from "element-plus"
 import courseCollapse from "./components/courseCollapse"
 import pen from "./components/pen"
 import playRecordTime from "./components/playRecordTime"
+import practiceForm from "./components/practiceForm"
 import useDialogConfirm from "@/hooks/useDialogConfirm"
 import { getRecentCourseSchedule_gym } from "@/api/homePage.api"
 import { getToken } from "@/libs/auth"
@@ -403,6 +405,8 @@ const activeCoursewareResourceId = computed<string | undefined>(() => {
    const materialRefs = activeCourseware.value?.materialRefs
    return materialRefs ? (["GYM", "KLX"].includes(userStoreHook.roles!) ? materialRefs[0]?.resourceIdStr : materialRefs[0]?.resourceId) : undefined
 })
+const isPracticeShow = ref(false)
+const practiceUrl = ref("")
 function handleGoPracticeBtn(activeCoursewareResourceId: string) {
    //  GYM,GYT,KLX 区分   云教练
    const urlObj = {
@@ -410,7 +414,13 @@ function handleGoPracticeBtn(activeCoursewareResourceId: string) {
       GYM: `${URL_TEACH_GYM}#/detail/${activeCoursewareResourceId}?Authorization=${getToken()}&platform=web&liveConfig=1&isYjt=1`,
       KLX: `${URL_TEACH_KLX}??Authorization=${getToken()}&id=${activeCoursewareResourceId}&limitModel=practice&isYjt=1`
    }
-   window.open(urlObj[userStoreHook.roles!], "_blank")
+   isPracticeShow.value = true
+   practiceUrl.value = urlObj[userStoreHook.roles!]
+   //window.open(urlObj[userStoreHook.roles!], "_blank")
+}
+function handlePracticeClose() {
+   isPracticeShow.value = false
+   practiceUrl.value = ""
 }
 </script>