Переглянути джерело

增加去练习,云课堂增加小酷ai 类型文件课件

黄琪勇 9 місяців тому
батько
коміт
fc6b2a5435

BIN
src/img/coursewarePlay/goPracticeBtn.png


+ 56 - 4
src/views/coursewarePlay/coursewarePlay.vue

@@ -4,7 +4,7 @@
 * @Date:2024-04-03 17:31:41
 -->
 <template>
-   <div class="coursewarePlay" :class="{ hideController: !isShowController }">
+   <div class="coursewarePlay" :class="[!isShowController && 'hideController', fileType === 'SONG' && 'fileType_song']">
       <div class="coursewarePlayCon" @mousemove="handleMousemove" @click="handleClick" @touchstart="handleClick">
          <videoPlay
             v-show="fileType === 'VIDEO'"
@@ -65,6 +65,16 @@
             <div>结束</div>
          </div>
       </div>
+      <div
+         v-if="activeCoursewareResourceId"
+         @click="
+            () => {
+               handleVideoPause()
+               handleGoPracticeBtn(activeCoursewareResourceId!)
+            }
+         "
+         class="goPracticeBtn"
+      ></div>
       <div class="topTools">
          <div class="leftMenu">
             <img @click="handleGoBack" class="backImg" src="@/img/coursewarePlay/back.png" />
@@ -140,14 +150,14 @@ const activeCourseware = computed<undefined | Record<string, any>>(() => {
 })
 // 文件类型
 const fileType = computed<"VIDEO" | "IMG" | "SONG">(() => {
-   return activeCourseware.value?.type || activeCourseware.value?.typeCode
+   return activeCourseware.value?.typeCode || activeCourseware.value?.type
 })
 const songPlaySrc = computed<string>(() => {
    if (fileType.value !== "SONG") {
       return ""
    }
    return userStoreHook.roles === "GYM"
-      ? `${URL_TEACH_GYM}?Authorization=${getToken()}&platform=web&isOpenMetronome=0#/detail/${activeCourseware.value?.content}?part-index=0`
+      ? `${URL_TEACH_GYM}?Authorization=${getToken()}&platform=web&liveConfig=1#/detail/${activeCourseware.value?.content}?isHideBack=true`
       : `${URL_TEACH_GYT}?id=${activeCourseware.value?.content}&modelType=practice&modeType=json&Authorization=${getToken()}`
 })
 const activeCoursewareIndex = ref(0)
@@ -306,7 +316,6 @@ function handleMousemove() {
    showController()
 }
 function handleClick() {
-   console.log(2333)
    fileType.value === "VIDEO" && isShowController.value && handleVideoPlay()
    showController()
 }
@@ -370,6 +379,19 @@ function handleCoursewareEnd() {
       handleGoBack()
    }
 }
+
+// 去练习
+const activeCoursewareResourceId = computed<string | undefined>(() => {
+   const materialRefs = activeCourseware.value?.materialRefs
+   return materialRefs ? (userStoreHook.roles === "GYM" ? materialRefs[0]?.resourceIdStr : materialRefs[0]?.resourceId) : undefined
+})
+function handleGoPracticeBtn(activeCoursewareResourceId: string) {
+   const url =
+      userStoreHook.roles === "GYM"
+         ? `${URL_TEACH_GYM}?Authorization=${getToken()}&platform=web&liveConfig=1#/detail/${activeCoursewareResourceId}?isHideBack=true`
+         : `${URL_TEACH_GYT}?id=${activeCoursewareResourceId}&modelType=practice&modeType=json&Authorization=${getToken()}`
+   window.open(url, "_blank")
+}
 </script>
 
 <style lang="scss" scoped>
@@ -391,6 +413,22 @@ function handleCoursewareEnd() {
          opacity: 0;
          transform: translateY(-100%);
       }
+      .goPracticeBtn {
+         transform: translatex(135px);
+      }
+   }
+   &.fileType_song.hideController {
+      .leftTools {
+         opacity: initial;
+         transform: translateY(-50%);
+      }
+      .rightTools {
+         opacity: initial;
+         transform: translateY(-50%);
+      }
+      .goPracticeBtn {
+         transform: initial;
+      }
    }
    .coursewarePlayCon {
       width: 100%;
@@ -481,6 +519,20 @@ function handleCoursewareEnd() {
          }
       }
    }
+   .goPracticeBtn {
+      position: absolute;
+      right: 30px;
+      bottom: 124px;
+      width: 178px;
+      height: 64px;
+      background: url("@/img/coursewarePlay/goPracticeBtn.png") no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+      transition: all 0.5s;
+      &:hover {
+         opacity: $opacity-hover;
+      }
+   }
    &:deep(.elDrawer.el-drawer) {
       width: 346px !important;
       .el-drawer__header {