添加预览页面

src/views/information/components/audio-player/index.tsx

@@ -33,6 +33,7 @@ export default defineComponent({
     const pageVisibility = usePageVisibility();
     const state = reactive({
       songPopup: false,
+      musicListenList: props.musicList || ([] as any),
       playState: 'pause',
       audioObj: {} as any,
       listActive: 0,
@@ -77,7 +78,7 @@ export default defineComponent({
 
     /** 播放曲目 */
     const handlePlay = (item: any) => {
-      const index = props.musicList.findIndex(
+      const index = state.musicListenList.findIndex(
         (_item: any) => _item.id === item.id
       );
       if (index > -1) {
@@ -87,7 +88,7 @@ export default defineComponent({
           state.playState = 'play';
         }
         state.listActive = index;
-        state.audioObj = props.musicList[index];
+        state.audioObj = state.musicListenList[index];
       }
     };
 
@@ -98,14 +99,14 @@ export default defineComponent({
       } else if (type === 'pause') {
         state.playState = 'pause';
       } else if (type === 'pre') {
-        if (props.musicList[state.listActive - 1]) {
+        if (state.musicListenList[state.listActive - 1]) {
           audioData.currentTime = 0;
-          handlePlay(props.musicList[state.listActive - 1]);
+          handlePlay(state.musicListenList[state.listActive - 1]);
         }
       } else if (type === 'next') {
-        if (props.musicList[state.listActive + 1]) {
+        if (state.musicListenList[state.listActive + 1]) {
           audioData.currentTime = 0;
-          handlePlay(props.musicList[state.listActive + 1]);
+          handlePlay(state.musicListenList[state.listActive + 1]);
         }
       }
     };
@@ -130,6 +131,17 @@ export default defineComponent({
       }
     );
 
+    watch(
+      () => props.musicList,
+      () => {
+        state.musicListenList = props.musicList;
+        const musicList = props.musicList;
+        if (musicList.length > 0) {
+          state.audioObj = musicList[0];
+        }
+      }
+    );
+
     onMounted(() => {
       nextTick(() => {
         const musicList = props.musicList;
@@ -232,7 +244,7 @@ export default defineComponent({
             <div class={styles.songTitle}>代表作</div>
 
             <div class={styles.songCellGroup}>
-              {props.musicList.map((item: any, index: number) => (
+              {state.musicListenList.map((item: any, index: number) => (
                 <Cell
                   border={false}
                   class={[
@@ -242,7 +254,7 @@ export default defineComponent({
                   center
                   onClick={() => {
                     if (index === state.listActive) return;
-                    state.audioObj = props.musicList[index];
+                    state.audioObj = state.musicListenList[index];
                     state.listActive = index;
                     state.playState = 'play';
                   }}>

src/views/information/famous-music-detail/view.tsx

@@ -1,6 +1,6 @@
 import MHeader from '@/components/m-header';
 import MSticky from '@/components/m-sticky';
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, nextTick, onMounted, reactive } from 'vue';
 import { useEventListener, useWindowScroll } from '@vueuse/core';
 import styles from './index.module.less';
 import { Image, NoticeBar } from 'vant';
@@ -23,26 +23,44 @@ export default defineComponent({
       loading: false
     });
 
-    const getDetail = async () => {
-      forms.loading = true;
-      try {
-        const { data } = await request.get(
-          '/edu-app/knowledgeWiki/detail/' + route.query.id
-        );
-        data.intros = data.intros.replace(
+    // const getDetail = async () => {
+    //   forms.loading = true;
+    //   try {
+    //     const { data } = await request.get(
+    //       '/edu-app/knowledgeWiki/detail/' + route.query.id
+    //     );
+    //     data.intros = data.intros.replace(
+    //       /<video/gi,
+    //       '<video style="width: 100% !important;" controlslist="nodownload" poster="https://oss.dayaedu.com/ktqy/1701759849244.png"'
+    //     );
+    //     forms.detail = data || {};
+    //     forms.musicList = data.knowledgeWikiResources.map((item: any) => {
+    //       return {
+    //         id: item.id,
+    //         name: item.name,
+    //         url: item.url
+    //       };
+    //     });
+    //   } catch {}
+    //   forms.loading = false;
+    // };
+    const getMessage = (ev: any) => {
+      if (ev.data.api === 'parent-notes') {
+        // console.log(ev.data, 'data');
+        const data = ev.data.message ? JSON.parse(ev.data.message) : {};
+        forms.detail = data || {};
+        forms.detail.intros = forms.detail.intros?.replace(
           /<video/gi,
           '<video style="width: 100% !important;" controlslist="nodownload" poster="https://oss.dayaedu.com/ktqy/1701759849244.png"'
         );
-        forms.detail = data || {};
-        forms.musicList = data.knowledgeWikiResources.map((item: any) => {
+        forms.musicList = data.knowledgeWikiResources?.map((item: any) => {
           return {
             id: item.id,
             name: item.name,
             url: item.url
           };
         });
-      } catch {}
-      forms.loading = false;
+      }
     };
     onMounted(() => {
       useEventListener(document, 'scroll', () => {
@@ -50,7 +68,21 @@ export default defineComponent({
         forms.titleOpacity = y.value > 100 ? 1 : y.value / 100;
       });
 
-      getDetail();
+      // getDetail();
+
+      nextTick(() => {
+        // 是否加载完成
+        window.parent &&
+          window.parent.postMessage(
+            {
+              api: 'onLoad',
+              status: true
+            },
+            '*'
+          );
+      });
+
+      window.addEventListener('message', getMessage);
     });
     return () => (
       <div class={styles.detail}>
@@ -59,6 +91,7 @@ export default defineComponent({
         </div>
         <MSticky position="top">
           <MHeader
+            isBack={false}
             border={false}
             background={`rgba(255,255,255, ${forms.titleOpacity})`}
             color={`rgba(51,51,51, ${forms.titleOpacity})`}

src/views/information/instrument-detail/view.tsx

@@ -46,12 +46,13 @@ export default defineComponent({
     // };
     const getMessage = (ev: any) => {
       if (ev.data.api === 'parent-notes') {
-        console.log(ev.data, 'data');
-        //  messageContent.value = ev.data.message || '';
-        //  registerDisplay.value = ev.data.registerDisplay || false;
-        // forms.detail = ev.data.message;
+        // console.log(ev.data, 'data');
         const data = ev.data.message ? JSON.parse(ev.data.message) : {};
         forms.detail = data || {};
+        forms.detail.intros = forms.detail.intros?.replace(
+          /<video/gi,
+          '<video style="width: 100% !important;" controlslist="nodownload" poster="https://oss.dayaedu.com/ktqy/1701759849244.png"'
+        );
         forms.musicList = data.knowledgeWikiResources?.map((item: any) => {
           return {
             id: item.id,
@@ -106,11 +107,11 @@ export default defineComponent({
           )}
         </div>
 
-        <MSticky position="bottom" style={{ background: '#fff' }}>
-          {forms.musicList.length > 0 && (
+        {forms.musicList.length > 0 && (
+          <MSticky position="bottom" style={{ background: '#fff' }}>
             <AudioPlayer musicList={forms.musicList} />
-          )}
-        </MSticky>
+          </MSticky>
+        )}
       </div>
     );
   }

src/views/information/musician-detail/view.tsx

@@ -1,6 +1,6 @@
 import MHeader from '@/components/m-header';
 import MSticky from '@/components/m-sticky';
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, nextTick, onMounted, reactive } from 'vue';
 import { useEventListener, useWindowScroll } from '@vueuse/core';
 import styles from './index.module.less';
 import { Image } from 'vant';
@@ -23,26 +23,45 @@ export default defineComponent({
       loading: false
     });
 
-    const getDetail = async () => {
-      forms.loading = true;
-      try {
-        const { data } = await request.get(
-          '/edu-app/knowledgeWiki/detail/' + route.query.id
-        );
-        data.intros = data.intros.replace(
+    // const getDetail = async () => {
+    //   forms.loading = true;
+    //   try {
+    //     const { data } = await request.get(
+    //       '/edu-app/knowledgeWiki/detail/' + route.query.id
+    //     );
+    //     data.intros = data.intros.replace(
+    //       /<video/gi,
+    //       '<video style="width: 100% !important;" controlslist="nodownload" poster="https://oss.dayaedu.com/ktqy/1701759849244.png"'
+    //     );
+    //     forms.detail = data || {};
+    //     forms.musicList = data.knowledgeWikiResources.map((item: any) => {
+    //       return {
+    //         id: item.id,
+    //         name: item.name,
+    //         url: item.url
+    //       };
+    //     });
+    //   } catch {}
+    //   forms.loading = false;
+    // };
+
+    const getMessage = (ev: any) => {
+      if (ev.data.api === 'parent-notes') {
+        // console.log(ev.data, 'data');
+        const data = ev.data.message ? JSON.parse(ev.data.message) : {};
+        forms.detail = data || {};
+        forms.detail.intros = forms.detail.intros?.replace(
           /<video/gi,
           '<video style="width: 100% !important;" controlslist="nodownload" poster="https://oss.dayaedu.com/ktqy/1701759849244.png"'
         );
-        forms.detail = data || {};
-        forms.musicList = data.knowledgeWikiResources.map((item: any) => {
+        forms.musicList = data.knowledgeWikiResources?.map((item: any) => {
           return {
             id: item.id,
             name: item.name,
             url: item.url
           };
         });
-      } catch {}
-      forms.loading = false;
+      }
     };
     onMounted(() => {
       useEventListener(document, 'scroll', () => {
@@ -50,7 +69,20 @@ export default defineComponent({
         forms.titleOpacity = y.value > 100 ? 1 : y.value / 100;
       });
 
-      getDetail();
+      // getDetail();
+      nextTick(() => {
+        // 是否加载完成
+        window.parent &&
+          window.parent.postMessage(
+            {
+              api: 'onLoad',
+              status: true
+            },
+            '*'
+          );
+      });
+
+      window.addEventListener('message', getMessage);
     });
     return () => (
       <div class={styles.detail}>
@@ -59,6 +91,7 @@ export default defineComponent({
         </div>
         <MSticky position="top">
           <MHeader
+            isBack={false}
             border={false}
             background={`rgba(255,255,255, ${forms.titleOpacity})`}
             color={`rgba(51,51,51, ${forms.titleOpacity})`}