课件播放

src/views/coursewarePlay/index.module.less

@@ -1,15 +1,15 @@
 .coursewarePlay {
   position: relative;
-  min-height: 100vh;
+  height: 100vh;
   background-color: rgba(89, 98, 126, 0.2);
 }
 .backBtn {
   position: absolute;
   left: 40px;
-  top: 10Px;
+  top: 10px;
   color: #fff;
-  width: 40Px;
-  height: 26Px;
+  width: 40px;
+  height: 26px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -17,42 +17,80 @@
 }
 .menu {
   position: absolute;
-  top: 10Px;
-  left: 140Px;
-  right: 84Px;
+  top: 10px;
+  left: 140px;
+  right: 84px;
   z-index: 10;
+  .menuLine {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    z-index: -1;
+    background: #ff8057;
+    transition: width 0.3s;
+  }
   :global {
     .van-tabs__content,
     .van-tabs__line {
       display: none;
     }
     .van-tabs__wrap {
-      height: 26Px;
+      height: 26px;
     }
     .van-tabs__nav {
       padding: 0;
       background: rgba(255, 128, 87, 0.5);
       .van-tab {
         color: #fff;
-        font-size: 14Px;
+        font-size: 14px;
+      }
+      .van-tab:not(:first-child) {
+        // border-left: 1px solid #fff;
       }
-      .van-tab--active.van-tab {
-        background: #ff8057;
+      .van-tab.van-tab--active {
+        background: var(--van-primary);
       }
     }
   }
 }
-.videoItem{
-    width: 100vw;
-    height: 100vh;
-    --plyr-color-main: var(--van-primary);
-    video{
-        width: 100%;
-        height: 100%;
+.tabsContent {
+  :global {
+    .van-tabs__wrap {
+      display: none !important;
     }
-    :global{
-        .plyr{
-            height: 100%;
-        }
+    .van-tabs__content {
+      width: 100vw;
+      height: 100vh;
+      .van-swipe {
+        width: 100vw;
+        height: 100vh;
+      }
     }
+  }
+}
+.videoItem {
+  width: 100vw;
+  height: 100vh;
+  --plyr-color-main: var(--van-primary);
+  video {
+    width: 100%;
+    height: 100%;
+  }
+  :global {
+    .plyr {
+      height: 100%;
+    }
+  }
+}
+.imgItem {
+  width: 100vw;
+  height: 100vh;
+}
+.songItem {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/views/coursewarePlay/index.tsx

@@ -1,5 +1,5 @@
 import { Icon, Swipe, SwipeItem, Tab, Tabs } from 'vant'
-import { defineComponent, onMounted, reactive } from 'vue'
+import { defineComponent, onMounted, reactive, nextTick } from 'vue'
 import iconBack from './image/back.svg'
 import styles from './index.module.less'
 import Plyr from 'plyr'
@@ -13,31 +13,38 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const data = reactive({
-      detail: null
+      detail: null,
+      active: '',
+      knowledgePointList: [] as any
     })
     const getDetail = async () => {
       try {
-        const res: any = await request.get(state.platformApi + `/lessonCoursewareDetail/detail/${route.query.id}`)
+        const res: any = await request.get(
+          state.platformApi + `/lessonCoursewareDetail/detail/${route.query.id}`
+        )
         if (Array.isArray(res?.data)) {
           data.detail = res.data
         }
+        if (Array.isArray(res?.data?.knowledgePointList)) {
+          data.knowledgePointList = res.data.knowledgePointList
+        }
+        console.log('数据加载完成')
       } catch (error) {}
+      nextTick(() => {
+        console.log('开始加载视频')
+        videoInit()
+      })
     }
-    onMounted(() => {
-      getDetail()
-      const nodeList = document.querySelectorAll('.player')
-      console.log('🚀 ~ nodeList', nodeList)
-      //   const player = Plyr.setup('.player', {
-      //     debug: false,
-      //     ratio: '16:9'
-      //   })
-      const player = new Plyr('#player1', {
-        autoplay: true
+    const videoInit = () => {
+      console.log(document.querySelectorAll('.player'))
+      const player = Plyr.setup('.player', {
+        debug: false,
+        ratio: '16:9'
       })
-      setTimeout(() => {
-        // player.togglePlay()
-      }, 1000)
       console.log('🚀 ~ player', player)
+    }
+    onMounted(() => {
+      getDetail()
     })
     const goback = () => {
       history.go(-1)
@@ -49,57 +56,47 @@ export default defineComponent({
           返回
         </div>
         <div class={styles.menu}>
-          <Tabs>
-            <Tab title="前言"></Tab>
-            <Tab title="嘴形+长振"></Tab>
-            <Tab title="吐音"></Tab>
-            <Tab title="号角发音"></Tab>
-            <Tab title="发音练习"></Tab>
-            <Tab title="结束语"></Tab>
+          <Tabs v-model:active={data.active} ellipsis={false}>
+            {{
+              default: () => {
+                return data.knowledgePointList.map((n: any) => {
+                  return <Tab title={n.name} name={n.id}></Tab>
+                })
+              }
+              // 'nav-right': () => <div style={{width: '40%'}} class={styles.menuLine}></div>
+            }}
           </Tabs>
         </div>
-        <Swipe vertical>
-          <SwipeItem>
-            <div class={styles.videoItem}>
-              <video class="player" id="player1" autoplay>
-                <source
-                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
-                  type="video/mp4"
-                />
-              </video>
-            </div>
-          </SwipeItem>
-          <SwipeItem>
-            <div class={styles.videoItem}>
-              <video class="player" controls>
-                <source
-                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
-                  type="video/mp4"
-                />
-              </video>
-            </div>
-          </SwipeItem>
-          <SwipeItem>
-            <div class={styles.videoItem}>
-              <video class="player" controls>
-                <source
-                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
-                  type="video/mp4"
-                />
-              </video>
-            </div>
-          </SwipeItem>
-          <SwipeItem>
-            <div class={styles.videoItem}>
-              <video class="player" controls>
-                <source
-                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
-                  type="video/mp4"
-                />
-              </video>
-            </div>
-          </SwipeItem>
-        </Swipe>
+        <Tabs class={styles.tabsContent} animated lazyRender={false} v-model:active={data.active}>
+          {data.knowledgePointList.map((item: any) => {
+            return (
+              <Tab name={item.id}>
+                <Swipe vertical lazyRender={false}>
+                  {Array.isArray(item?.materialList) &&
+                    item.materialList.map((m: any) => {
+                      return (
+                        <SwipeItem>
+                          {m.type === 'VIDEO' ? (
+                            <div class={styles.videoItem}>
+                              <video class="player" controls>
+                                <source src={m.content} type="video/mp4" />
+                              </video>
+                            </div>
+                          ) : m.type === 'IMG' ? (
+                            <div class={styles.imgItem}>
+                              <img src={m.content} />
+                            </div>
+                          ) : (
+                            <div class={styles.songItem}>曲谱</div>
+                          )}
+                        </SwipeItem>
+                      )
+                    })}
+                </Swipe>
+              </Tab>
+            )
+          })}
+        </Tabs>
       </div>
     )
   }