添加预览

src/views/xiaoku-list/detail.tsx

@@ -1,20 +1,24 @@
-import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
 import styles from './detail.module.less';
 import CBreadcrumb from '/src/components/CBreadcrumb';
 import { useRoute } from 'vue-router';
-import { NForm, NFormItem, NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
+import { NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
 import SearchGroupResources from './search-group-resources';
 import TheSearch from '/src/components/TheSearch';
 import TheEmpty from '/src/components/TheEmpty';
-import { audioPlayType } from '/src/utils/contants';
 import { api_musicSheetPage } from '../xiaoku-ai/api';
-import { api_musicSheetTagQueryList } from './api';
 import { formatUsedNum } from '.';
+import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
+import { exitFullscreen, fscreen } from '/src/utils';
+import {state as baseState} from '/src/state';
+import { useUserStore } from '/src/store/modules/users';
+import PreviewWindow from '../preview-window';
 
 export default defineComponent({
   name: 'xiaoku-detail',
   setup() {
     const route = useRoute();
+    const userStore = useUserStore();
     const routerList = ref([
       { name: 'AI学练', path: '/xiaoku-list' },
       { name: '全部曲目', path: '' }
@@ -29,13 +33,14 @@ export default defineComponent({
       loading: true,
       finshed: false,
       reshing: false,
-      tabName: '',
+      tabName: '' as any,
       list: [] as any,
       allSearch: {
         name: '',
         musicTagIds: '',
         audioPlayTypes: null as any,
         bookVersionId: null as any,
+        musicalInstrumentId: null as any,
         subjectId: null
       },
       hotSearch: {
@@ -46,7 +51,12 @@ export default defineComponent({
       },
       recommendSearch: {
         name: '',
-      }
+      },
+      previewModal: false,
+      previewParams: {
+        type: '',
+        src: ''
+      } as any,
     });
 
     const searchValue = computed(() => {
@@ -142,10 +152,57 @@ export default defineComponent({
       obv.observe(spinRef.value);
     }
 
+    // 查看详情
+    const onDetail = (item: any) => {
+      // 默认进页面显示对应的曲谱
+      let lineType = item.scoreType || 'FIRST';
+      let src = `${vaildMusicScoreUrl()}/instrument?v=${+new Date()}&platform=pc&id=${
+        item.id
+      }&Authorization=${
+        userStore.getToken
+      }&musicRenderType=${lineType}&showGuide=true&part-index=${
+        0
+      }`;
+
+      if (state.allSearch.musicalInstrumentId && !state.tabName) {
+        src += '&instrumentId=' + state.allSearch.musicalInstrumentId;
+      }
+
+      if (window.matchMedia('(display-mode: standalone)').matches) {
+        baseState.application = window.matchMedia(
+          '(display-mode: standalone)'
+        ).matches;
+        state.previewModal = true;
+        fscreen();
+        state.previewParams = {
+          type: 'music',
+          src
+        };
+      } else {
+        window.open(src, +new Date() + '');
+      }
+    }
+
+    const iframeHandle = (ev: MessageEvent) => {
+      if (ev.data?.api === 'onAttendToggleMenu') {
+        exitFullscreen()
+        state.previewModal = !state.previewModal;
+      }
+    }
+
     onMounted(async () => {
+      if(route.query.type) {
+        state.tabName = route.query.type
+      }
+
       // getList();
       __initSpin()
+      window.addEventListener('message', iframeHandle);
     });
+
+    onUnmounted(() => {
+      window.removeEventListener('message', iframeHandle)
+    })
     return () => (
       <div class={styles.xiaokuDetail}>
         <CBreadcrumb list={routerList.value}></CBreadcrumb>
@@ -209,7 +266,7 @@ export default defineComponent({
                 state.tabName && styles.noSearchContainer
               ]}>
               {state.list.map((item: any) => (
-                <div class={styles.sectionItem}>
+                <div class={styles.sectionItem} onClick={() => onDetail(item)}>
                   <div class={styles.img}>
                     <img referrerpolicy="no-referrer" src={item.titleImg} />
                   </div>
@@ -247,6 +304,13 @@ export default defineComponent({
             )}
           </NScrollbar>
         </div>
+
+        {/* 应用内预览或上课 */}
+      <PreviewWindow
+          v-model:show={state.previewModal}
+          type="music"
+          params={state.previewParams}
+        />
       </div>
     );
   }

src/views/xiaoku-list/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import TheSearch from '/src/components/TheSearch';
 import recommendTitle from './images/reommon_title.png';
@@ -11,6 +11,11 @@ import { api_musicSheetQueryByTag } from './api';
 import { api_musicSheetPage } from '../xiaoku-ai/api';
 import TheEmpty from '/src/components/TheEmpty';
 import titleBg from './images/title-bg.png'
+import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
+import PreviewWindow from '../preview-window';
+import { useUserStore } from '/src/store/modules/users';
+import {state as baseState} from '/src/state';
+import { exitFullscreen, fscreen } from '/src/utils';
 
 export const formatUsedNum = (num: number) => {
   if (num < 10000) {
@@ -25,6 +30,7 @@ export default defineComponent({
   name: 'xiaoku-list',
   setup() {
     const router = useRouter();
+    const userStore = useUserStore();
     const state = reactive({
       HOT: [] as any,
       NEW: [] as any,
@@ -35,7 +41,12 @@ export default defineComponent({
       loading: false as any,
       finshed: false,
       page: 1,
-      rows: 20
+      rows: 20,
+      previewModal: false,
+      previewParams: {
+        type: '',
+        src: ''
+      } as any,
     });
 
     
@@ -104,9 +115,56 @@ export default defineComponent({
       });
     };
 
+    // 查看详情
+    const onDetail = (item: any) => {
+      // 默认进页面显示对应的曲谱
+      let lineType = item.scoreType || 'FIRST';
+      // if (data.showMusicImg === 'first') {
+      //   lineType = 'firstTone';
+      // } else if (data.showMusicImg === 'fixed') {
+      //   lineType = 'fixedTone';
+      // } else if (data.showMusicImg === 'staff') {
+      //   lineType = 'staff';
+      // }
+      let src = `${vaildMusicScoreUrl()}/instrument?v=${+new Date()}&platform=pc&id=${
+        item.id
+      }&Authorization=${
+        userStore.getToken
+      }&musicRenderType=${lineType}&showGuide=true&part-index=${
+        0
+      }`;
+
+      if (window.matchMedia('(display-mode: standalone)').matches) {
+        baseState.application = window.matchMedia(
+          '(display-mode: standalone)'
+        ).matches;
+        state.previewModal = true;
+        fscreen();
+        state.previewParams = {
+          type: 'music',
+          src
+        };
+      } else {
+        window.open(src, +new Date() + '');
+      }
+    }
+
+    const iframeHandle = (ev: MessageEvent) => {
+      if (ev.data?.api === 'onAttendToggleMenu') {
+        exitFullscreen()
+        state.previewModal = !state.previewModal;
+      }
+    }
+
     onMounted(() => {
       getDetail();
+
+      window.addEventListener('message', iframeHandle);
     });
+
+    onUnmounted(() => {
+      window.removeEventListener('message', iframeHandle)
+    })
     return () => (
       <div class={styles.list}>
         <h2 class={styles.topTitle}>
@@ -186,7 +244,7 @@ export default defineComponent({
               <div class={styles.sectionTitle}>
                 <img src={recommendTitle} class={styles.imgTitle} />
 
-                <div class={styles.moreBtn}>更多</div>
+                <div class={styles.moreBtn} onClick={() => onMore("RECOMMEND")}>更多</div>
               </div>
 
               <NScrollbar>
@@ -194,7 +252,7 @@ export default defineComponent({
                   <div
                     class={styles.item}
                     onClick={() => {
-                      onMore('RECOMMEND');
+                      onDetail(item)
                     }}>
                     <div
                       class={[
@@ -233,7 +291,7 @@ export default defineComponent({
             <div class={[styles.section, styles.hotSection]}>
               <div class={styles.sectionTitle}>
                 <img src={hotTitle} class={styles.imgTitle} />
-                <div class={styles.moreBtn}>更多</div>
+                <div class={styles.moreBtn} onClick={() => onMore("HOT")}>更多</div>
               </div>
 
               <NScrollbar>
@@ -241,7 +299,7 @@ export default defineComponent({
                   <div
                     class={styles.item}
                     onClick={() => {
-                      onMore('HOT');
+                      onDetail(item);
                     }}>
                     <div
                       class={[
@@ -281,7 +339,7 @@ export default defineComponent({
               <div class={styles.sectionTitle}>
                 <img src={newTitle} class={styles.imgTitle} />
 
-                <div class={styles.moreBtn}>更多</div>
+                <div class={styles.moreBtn} onClick={() => onMore("NEW")}>更多</div>
               </div>
 
               <NScrollbar>
@@ -289,7 +347,7 @@ export default defineComponent({
                   <div
                     class={styles.item}
                     onClick={() => {
-                      onMore('NEW');
+                      onDetail(item)
                     }}>
                     <div
                       class={[
@@ -327,6 +385,13 @@ export default defineComponent({
             </div>
           </div>
         )}
+
+      {/* 应用内预览*/}
+      <PreviewWindow
+          v-model:show={state.previewModal}
+          type="music"
+          params={state.previewParams}
+        />
       </div>
     );
   }