更新

src/assets/elementTheme.scss

@@ -27,6 +27,9 @@
 }
 
 .el-cascader__dropdown {
+   .el-cascader-menu__list {
+      padding: 12px 0;
+   }
    .el-cascader-node:not(.is-disabled):hover,
    .el-cascader-node:not(.is-disabled):focus {
       background-color: transparent;

src/views/cloudTextbooks/chooseDialog.vue

@@ -60,10 +60,11 @@ function close() {
 }
 
 function handlePaly(id: string) {
-   emits("onClose")
-   router.push({
-      path: "/coursewarePlay/" + id
-   })
+   const url = router.resolve({
+      name: "coursewarePlay",
+      params: { id }
+   }).href
+   window.open(url, "_blank")
 }
 </script>
 

src/views/cloudTextbooks/cloudTextbooks.vue

@@ -40,20 +40,21 @@
                            <img class="imgbg" src="@/img/cloudTextbooks/yy.png" />
                            <img class="imgbg1" src="@/img/cloudTextbooks/hd1.png" />
                            <img class="imgbg2" src="@/img/cloudTextbooks/hd.png" />
-                           <div class="courseNum">共{{ item.courseNum }}课</div>
+                           <div class="courseNum" @click="handleClick(item.id)">共{{ item.courseNum }}课</div>
                         </div>
                         <div class="name">{{ item.name }}</div>
                      </div>
                   </div>
-                  <el-empty
-                     v-if="!listData.length && !loading"
-                     :image-size="360"
-                     :image="require('@/img/layout/empty.png')"
-                     description="暂无搜索结果"
-                  />
                </div>
             </ElScrollbar>
          </div>
+         <el-empty
+            class="empty"
+            v-if="!listData.length && !loading"
+            :image-size="360"
+            :image="require('@/img/layout/empty.png')"
+            description="暂无搜索结果"
+         />
       </div>
    </navContainer>
 </template>
@@ -164,6 +165,7 @@ function handleClick(id: string) {
 .cloudTextbooks {
    width: 100%;
    height: 100%;
+   position: relative;
    .headCon {
       padding: 40px 26px;
       display: flex;
@@ -311,6 +313,7 @@ function handleClick(id: string) {
                      height: 212px;
                   }
                   .courseNum {
+                     cursor: pointer;
                      position: absolute;
                      left: 50%;
                      bottom: 10px;
@@ -336,6 +339,12 @@ function handleClick(id: string) {
          }
       }
    }
+   .empty {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+   }
 }
 :global(.headDropdown.el-dropdown__popper.el-popper) {
    box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);

src/views/coursewarePlay/component/point.module.scss

@@ -104,6 +104,7 @@
    }
 }
 .item {
+   cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;

src/views/coursewarePlay/component/points.tsx

@@ -1,7 +1,15 @@
 import { defineComponent, reactive, watch } from "vue"
 import styles from "./point.module.scss"
 import icons from "../image/icons.json"
-const { iconArrow, iconImage, iconImageActive, iconVideo, iconVideoActive, iconSong, iconSongActive } = icons
+const { iconArrow, iconImage, iconVideo, iconSong } = icons
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const iconVideoActive = require("../image/iconVideoActive.png")
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const iconImageActive = require("../image/iconImageActive.png")
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const iconSongActive = require("../image/iconSongActive.png")
+
 import iconZhibo from "../image/icon-load.gif"
 import { Collapse, CollapseItem, Icon, Image } from "vant"
 export default defineComponent({

src/views/coursewarePlay/component/tool.tsx

@@ -3,7 +3,7 @@ import { defineComponent } from "vue"
 import styles from "./tool.module.scss"
 import iconPen from "../image/icon-pen.png"
 
-export type ToolType = "init" | "pen"
+export type ToolType = "init" | "pen" | "white"
 
 export type ToolItem = {
    type: ToolType

src/views/coursewarePlay/component/video-item/index.module.scss

@@ -54,9 +54,11 @@
             width: 100%;
             height: 100%;
          }
+         .plyr__progress input[type="range"] {
+            color: #ff8057 !important;
+         }
       }
    }
-
    .actions {
       display: flex;
       justify-content: space-between;

src/views/coursewarePlay/component/video-item/index.tsx

@@ -6,7 +6,10 @@ import styles from "./index.module.scss"
 import icons from "../../image/icons.json"
 
 const { iconVideoBg, iconPlay, iconPause, iconSpeed } = icons
-
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const iconLoopActive = require("../../image/iconLoopActive.png")
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const iconLoop = require("../../image/iconLoop.png")
 import { Slider } from "vant"
 
 export default defineComponent({
@@ -25,10 +28,6 @@ export default defineComponent({
    },
    emits: ["play", "pause", "ended", "close"],
    setup(props, { emit, expose }) {
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const iconLoopActive = require("../../image/iconLoopActive.png")
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const iconLoop = require("../../image/iconLoop.png")
       const { item } = toRefs(props)
       const data = reactive({
          videoContianerRef: null as unknown as HTMLAudioElement,
@@ -122,7 +121,7 @@ export default defineComponent({
                 </div>
                 <div class="${styles.actions}">
                     <div class="${styles.actionWrap}">
-                        <div id="${playBtnId}" class="${styles.actionBtn}">
+                        <div id="${playBtnId}" class="${styles.actionBtn}" style="margin-right: 24px;">
                             <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
                             <img class="${styles.playIcon}" src="${iconPlay}" />
                             <img class="${styles.playIcon}" src="${iconPause}" />

src/views/coursewarePlay/index.module.scss

@@ -206,6 +206,7 @@
 }
 
 .btnsWrap {
+   user-select: none;
    background: rgba(51, 51, 51, 0.4);
    border-radius: 6px;
    overflow: hidden;

src/views/coursewarePlay/index.tsx

@@ -11,7 +11,7 @@ const state = {
    platformApi: "/api",
    platformType: "TEACHER"
 }
-import { useRoute, useRouter } from "vue-router"
+import { useRoute } from "vue-router"
 import { postMessage, promisefiyPostMessage } from "./helpers/native-message"
 import MusicScore from "./component/musicScore"
 import iconDian from "./image/icon-dian.svg"
@@ -42,7 +42,6 @@ export default defineComponent({
    setup() {
       const pageVisibility = usePageVisibility()
       const userStoreHook = userStore()
-      const router = useRouter()
       /** 页面显示和隐藏 */
       watch(
          () => pageVisibility.value,
@@ -109,6 +108,7 @@ export default defineComponent({
       onUnmounted(() => {
          handleInit(1)
          window.removeEventListener("message", iframeHandle)
+         window.removeEventListener("keyup", handleEventKeyup)
       })
 
       const route = useRoute()
@@ -342,8 +342,16 @@ export default defineComponent({
          }
          // getCourseSchedule();
          window.addEventListener("message", iframeHandle)
+         window.addEventListener("keyup", handleEventKeyup)
       })
-
+      function handleEventKeyup(event: any) {
+         const key = event.key
+         if (key === "ArrowDown") {
+            handlePreAndNext("down")
+         } else if (key === "ArrowUp") {
+            handlePreAndNext("up")
+         }
+      }
       const playRef = ref()
       // 返回
       const goback = () => {
@@ -353,7 +361,7 @@ export default defineComponent({
             console.log(error)
          }
          postMessage({ api: "goBack" })
-         router.back()
+         window.close()
       }
 
       const popupData = reactive({
@@ -576,8 +584,14 @@ export default defineComponent({
       // 上一个知识点, 下一个知识点
       const handlePreAndNext = (type: string) => {
          if (type === "up") {
+            if (!popupData.activeIndex) {
+               return
+            }
             handleSwipeChange(popupData.activeIndex - 1)
          } else {
+            if (popupData.activeIndex === data.itemList.length - 1) {
+               return
+            }
             handleSwipeChange(popupData.activeIndex + 1)
          }
       }
@@ -596,9 +610,9 @@ export default defineComponent({
          penShow: false
       })
 
-      const isWhite = ref(false)
+      const whiteShow = ref(false)
       /** 打开教学工具 */
-      const openStudyTool = (item: ToolItem, isw?: boolean) => {
+      const openStudyTool = (item: ToolItem) => {
          const activeItem = data.itemList[popupData.activeIndex]
          // 暂停视频和曲谱的播放
          if (activeItem.typeCode === "VIDEO" && data.videoItemRef?.getVideoItem()) {
@@ -610,17 +624,18 @@ export default defineComponent({
          clearModel()
          popupData.toolOpen = false
          studyData.type = item.type
-         isw && (isWhite.value = true)
          switch (item.type) {
             case "pen":
                studyData.penShow = true
                break
+            case "white":
+               whiteShow.value = true
+               break
          }
       }
 
       /** 关闭教学工具 */
       const closeStudyTool = () => {
-         isWhite.value = false
          studyData.type = "init"
          toggleModel()
       }
@@ -792,14 +807,11 @@ export default defineComponent({
                            <div
                               class={[styles.fullBtn, styles.point]}
                               onClick={() =>
-                                 openStudyTool(
-                                    {
-                                       type: "pen",
-                                       icon: iconPen,
-                                       name: "白板"
-                                    },
-                                    true
-                                 )
+                                 openStudyTool({
+                                    type: "white",
+                                    icon: iconPen,
+                                    name: "白板"
+                                 })
                               }
                            >
                               <img src={require("./image/bb.png")} />
@@ -940,14 +952,11 @@ export default defineComponent({
                      <div
                         class={styles.rightBtn}
                         onClick={() => {
-                           openStudyTool(
-                              {
-                                 type: "pen",
-                                 icon: iconPen,
-                                 name: "批注"
-                              },
-                              true
-                           )
+                           openStudyTool({
+                              type: "pen",
+                              icon: iconPen,
+                              name: "批注"
+                           })
                         }}
                      >
                         <img src={iconPen} />
@@ -1003,7 +1012,8 @@ export default defineComponent({
                {/* <OGuide /> */}
             </Popup>
 
-            {studyData.penShow && <Pen isWhite={isWhite.value} show={studyData.type === "pen"} close={() => closeStudyTool()} />}
+            {studyData.penShow && <Pen show={studyData.type === "pen"} close={() => closeStudyTool()} />}
+            {whiteShow.value && <Pen isWhite={whiteShow.value} show={studyData.type === "white"} close={() => closeStudyTool()} />}
          </div>
       )
    }