ppt 和页面的联动

src/views/attend-class/component/pptList.module.less

@@ -0,0 +1,13 @@
+.pptList {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .container {
+    position: relative;
+    display: block;
+    border: none;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+  }
+}

src/views/attend-class/component/pptList.tsx

@@ -0,0 +1,56 @@
+import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
+import styles from './pptList.module.less';
+import { vaildPPTUrl } from '/src/utils/urlUtils';
+import { useUserStore } from '/src/store/modules/users';
+
+export default defineComponent({
+  name: 'pptList',
+  props: {
+    pptData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['initPPT', 'changeSlideIndex'],
+  setup(props, { emit, expose }) {
+    const userStore = useUserStore();
+    const iframeRef = ref<HTMLIFrameElement>();
+    const src = `${vaildPPTUrl()}/#/pptScreen?id=${
+      props.pptData.id
+    }&Authorization=${userStore.getToken}&hideFullScreen=true`;
+    // 上一页下一页
+    function handleChangeSlide(type: 'prev' | 'next') {
+      iframeRef.value?.contentWindow?.postMessage(
+        { type: 'changePageSlide', content: type },
+        '*'
+      );
+    }
+    function handleMessage(event: any) {
+      const { type, content } = event.data || {};
+      console.log(content, 'message');
+      if (type === 'initPPT') {
+        emit('initPPT', content);
+      } else if (type === 'changeSlideIndex') {
+        emit('changeSlideIndex', content);
+      }
+    }
+    onMounted(() => {
+      window.addEventListener('message', handleMessage);
+    });
+    onUnmounted(() => {
+      window.removeEventListener('message', handleMessage);
+    });
+    expose({
+      handleChangeSlide
+    });
+    return () => (
+      <div class={styles.pptList}>
+        <iframe
+          ref={iframeRef}
+          class={[styles.container]}
+          frameborder="0"
+          src={src}></iframe>
+      </div>
+    );
+  }
+});

src/views/attend-class/index.module.less

@@ -643,6 +643,9 @@
     opacity: 0.7;
     cursor: not-allowed;
   }
+  .hideBtn {
+    display: none;
+  }
 }
 
 :global {

src/views/attend-class/index.tsx

@@ -13,6 +13,7 @@ import {
 import styles from './index.module.less';
 import 'plyr/dist/plyr.css';
 import MusicScore from './component/musicScore';
+import PptList from './component/pptList';
 // import iconChange from './image/icon-change.png';
 // import iconMenu from './image/icon-menu.png';
 // import iconUp from './image/icon-up.png';
@@ -214,8 +215,15 @@ export default defineComponent({
       selectResourceStatus: false,
       videoState: 'init' as 'init' | 'play',
       videoItemRef: null as any,
-      animationState: 'start' as 'start' | 'end'
+      animationState: 'start' as 'start' | 'end',
+      coursewareType: 'CLASSIC' as 'CLASSIC' | 'PPT' // 课件类型
     });
+    const pptData = reactive({
+      pptEl: null as any,
+      slidesLen: 1,
+      activeLen: 0
+    });
+
     const activeData = reactive({
       isAutoPlay: false, // 是否自动播放
       nowTime: 0,
@@ -236,7 +244,7 @@ export default defineComponent({
         const res = await api_teacherChapterLessonCoursewareDetail(
           data.courseId
         );
-
+        data.coursewareType = res.data.coursewareType || 'CLASSIC';
         data.teacherChapterName = res.data.name || '';
         // 布置的作业编号
         data.lessonPreTrainingId = res.data.lessonPreTrainingId;
@@ -876,6 +884,19 @@ export default defineComponent({
 
     // 上一个知识点, 下一个知识点
     const handlePreAndNext = async (type: string) => {
+      // 这里新加了ppt 逻辑所以需要
+      if (data.coursewareType === 'PPT') {
+        if (type === 'up' && pptData.activeLen > 0) {
+          pptData.pptEl?.handleChangeSlide('prev');
+          return;
+        } else if (
+          type === 'down' &&
+          pptData.activeLen < pptData.slidesLen - 1
+        ) {
+          pptData.pptEl?.handleChangeSlide('next');
+          return;
+        }
+      }
       if (type === 'up') {
         // 判断上面是否还有章节
         if (popupData.activeIndex > 0) {
@@ -1140,6 +1161,11 @@ export default defineComponent({
 
     // 是否允许上一页
     const isUpArrow = computed(() => {
+      if (data.coursewareType === 'PPT') {
+        if (pptData.activeLen > 0) {
+          return true;
+        }
+      }
       /**
        * 1，判断当前课程中是否处在第一个资源；
        * 2，判断当前课程是否在当前章节的第一个；
@@ -1209,6 +1235,11 @@ export default defineComponent({
 
     // 是否允许下一页
     const isDownArrow = computed(() => {
+      if (data.coursewareType === 'PPT') {
+        if (pptData.activeLen < pptData.slidesLen - 1) {
+          return true;
+        }
+      }
       if (popupData.activeIndex < data.itemList.length - 1) {
         return true;
       }
@@ -1360,23 +1391,26 @@ export default defineComponent({
       //   id: 6
       // }
     ];
-    const mirrorAddressCatch = (type: 'get' | 'set'  = 'get', value?: string): any => {
+    const mirrorAddressCatch = (
+      type: 'get' | 'set' = 'get',
+      value?: string
+    ): any => {
       const localStorageName = 'mirrorAddressCatch';
-      
-      if(type === "get") {
-        const catchName = localStorage.getItem(localStorageName)
-        return catchName || null
-      } else if(type === "set") {
-        localStorage.setItem(localStorageName, value || '')
+
+      if (type === 'get') {
+        const catchName = localStorage.getItem(localStorageName);
+        return catchName || null;
+      } else if (type === 'set') {
+        localStorage.setItem(localStorageName, value || '');
       }
-    }
+    };
     // 默认收起菜单
     const columnShow = ref(true);
     // 菜单位置
     const columnPos = ref<'left' | 'right'>('left');
 
-    if(mirrorAddressCatch()) {
-      columnPos.value = mirrorAddressCatch()
+    if (mirrorAddressCatch()) {
+      columnPos.value = mirrorAddressCatch();
     }
 
     watch(columnPos, () => {
@@ -1920,7 +1954,7 @@ export default defineComponent({
                           activeStatus={popupData.activeIndex === mIndex}
                           ref={(el: any) => (m.iframeRef = el)}
                         />
-                      ) : (
+                      ) : m.type === 'MUSIC' ? (
                         <MusicScore
                           activeModel={activeData.model}
                           instrumentId={data.instrumentId}
@@ -1932,6 +1966,18 @@ export default defineComponent({
                             m.iframeRef = el;
                           }}
                         />
+                      ) : (
+                        <PptList
+                          ref={el => {
+                            pptData.pptEl = el;
+                          }}
+                          onInitPPT={({ slidesLen }) => {
+                            pptData.slidesLen = slidesLen;
+                          }}
+                          onChangeSlideIndex={({ slideIndex }) => {
+                            pptData.activeLen = slideIndex;
+                          }}
+                          pptData={m}></PptList>
                       )}
                     </div>
                   ) : null;
@@ -1961,6 +2007,9 @@ export default defineComponent({
                   (item.id === 11 && !isUpArrow.value) ||
                   (item.id === 12 && !isDownArrow.value)
                     ? styles.itemDisabled
+                    : '',
+                  item.id === 14 && data.coursewareType === 'PPT'
+                    ? styles.hideBtn
                     : ''
                 ]}
                 onClick={() => operateRightBtn(item.id)}>
@@ -2011,7 +2060,7 @@ export default defineComponent({
                 onClick={() => {
                   columnPos.value = 'right';
                   columnShow.value = true;
-                  mirrorAddressCatch('set', 'right')
+                  mirrorAddressCatch('set', 'right');
                 }}
               />
             ),
@@ -2036,6 +2085,9 @@ export default defineComponent({
                   (item.id === 11 && !isUpArrow.value) ||
                   (item.id === 12 && !isDownArrow.value)
                     ? styles.itemDisabled
+                    : '',
+                  item.id === 14 && data.coursewareType === 'PPT'
+                    ? styles.hideBtn
                     : ''
                 ]}
                 onClick={() => operateRightBtn(item.id)}>
@@ -2079,7 +2131,7 @@ export default defineComponent({
                 onClick={() => {
                   columnPos.value = 'left';
                   columnShow.value = true;
-                  mirrorAddressCatch('set', 'left')
+                  mirrorAddressCatch('set', 'left');
                 }}
               />
             ),