添加功能

src/router/router-root.ts

@@ -199,6 +199,27 @@ export default [
     }
   },
   {
+    path: '/instrumentDetailView',
+    component: () => import('@/views/information/instrument-detail/view'),
+    meta: {
+      title: '乐器百科详情'
+    }
+  },
+  {
+    path: '/famousMusicDetailView',
+    component: () => import('@/views/information/famous-music-detail/view'),
+    meta: {
+      title: '名曲鉴赏详情'
+    }
+  },
+  {
+    path: '/musicianDetailView',
+    component: () => import('@/views/information/musician-detail/view'),
+    meta: {
+      title: '音乐家详情'
+    }
+  },
+  {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/404'),
     meta: {

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

@@ -0,0 +1,121 @@
+import MHeader from '@/components/m-header';
+import MSticky from '@/components/m-sticky';
+import { defineComponent, onMounted, reactive } from 'vue';
+import { useEventListener, useWindowScroll } from '@vueuse/core';
+import styles from './index.module.less';
+import { Image, NoticeBar } from 'vant';
+import request from '@/helpers/request';
+import { useRoute } from 'vue-router';
+import AudioPlayer from '../components/audio-player';
+import banner from '../images/banner1.png';
+import musicBg from '../images/music_bg.png';
+import MEmpty from '@/components/m-empty';
+
+export default defineComponent({
+  name: 'instrument-detail',
+  setup() {
+    const route = useRoute();
+    const forms = reactive({
+      titleOpacity: 0,
+      background: 'transparent',
+      detail: {} as any,
+      musicList: [] as any,
+      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(
+          /<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;
+    };
+    onMounted(() => {
+      useEventListener(document, 'scroll', () => {
+        const { y } = useWindowScroll();
+        forms.titleOpacity = y.value > 100 ? 1 : y.value / 100;
+      });
+
+      getDetail();
+    });
+    return () => (
+      <div class={styles.detail}>
+        <div class={styles.bgSection}>
+          <img class={styles.bg} src={forms.detail.avatar || musicBg} />
+        </div>
+        <MSticky position="top">
+          <MHeader
+            border={false}
+            background={`rgba(255,255,255, ${forms.titleOpacity})`}
+            color={`rgba(51,51,51, ${forms.titleOpacity})`}
+            title={forms.detail.name || ''}></MHeader>
+        </MSticky>
+
+        <div class={styles.container}>
+          <div class={styles.musicHeader}>
+            <div class={styles.imgSection}>
+              <Image
+                class={styles.img}
+                src={forms.detail.avatar || musicBg}
+                fit="cover"
+              />
+              <div class={styles.pan}>
+                <img src={forms.detail.avatar || musicBg} />
+              </div>
+            </div>
+            <div class={styles.musicContent}>
+              <div class={[styles.musicTitle, 'van-multi-ellipsis--l2']}>
+                <NoticeBar
+                  scrollable={forms.detail.name >= 13 ? true : false}
+                  background="transparent"
+                  text={forms.detail.name || '--'}
+                />
+              </div>
+              <div class={styles.musicInto}>
+                {forms.detail.lyricists && (
+                  <span>作词：{forms.detail.lyricists}</span>
+                )}
+                {forms.detail.composers && (
+                  <span>作曲：{forms.detail.composers}</span>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* <div class={styles.title}>{forms.detail.name}</div> */}
+          {forms.detail.intros ? (
+            <div class={styles.content} v-html={forms.detail.intros}></div>
+          ) : (
+            ''
+          )}
+
+          {!forms.loading && !forms.detail.intros && (
+            <div class={styles.content}>
+              <MEmpty description="暂无内容" />
+            </div>
+          )}
+        </div>
+
+        <MSticky position="bottom">
+          {forms.musicList.length > 0 && (
+            <AudioPlayer musicList={forms.musicList} />
+          )}
+        </MSticky>
+      </div>
+    );
+  }
+});

src/views/information/instrument-detail/index.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';
@@ -44,6 +44,7 @@ export default defineComponent({
       } catch {}
       forms.loading = false;
     };
+
     onMounted(() => {
       useEventListener(document, 'scroll', () => {
         const { y } = useWindowScroll();

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

@@ -0,0 +1,117 @@
+import MHeader from '@/components/m-header';
+import MSticky from '@/components/m-sticky';
+import { defineComponent, nextTick, onMounted, reactive } from 'vue';
+import { useEventListener, useWindowScroll } from '@vueuse/core';
+import styles from './index.module.less';
+import { Image } from 'vant';
+import request from '@/helpers/request';
+import { useRoute } from 'vue-router';
+import AudioPlayer from '../components/audio-player';
+import { state } from '@/state';
+import MEmpty from '@/components/m-empty';
+
+export default defineComponent({
+  name: 'instrument-detail',
+  setup() {
+    const route = useRoute();
+    const forms = reactive({
+      titleOpacity: 0,
+      background: 'transparent',
+      color: '#fff',
+      detail: {} as any,
+      musicList: [] as any,
+      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(
+    //       /<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');
+        //  messageContent.value = ev.data.message || '';
+        //  registerDisplay.value = ev.data.registerDisplay || false;
+        // forms.detail = ev.data.message;
+        const data = ev.data.message ? JSON.parse(ev.data.message) : {};
+        forms.detail = data || {};
+        forms.musicList = data.knowledgeWikiResources?.map((item: any) => {
+          return {
+            id: item.id,
+            name: item.name,
+            url: item.url
+          };
+        });
+      }
+    };
+    onMounted(() => {
+      useEventListener(document, 'scroll', () => {
+        const { y } = useWindowScroll();
+        forms.titleOpacity = y.value > 100 ? 1 : y.value / 100;
+      });
+
+      // getDetail();
+
+      nextTick(() => {
+        // 是否加载完成
+        window.parent &&
+          window.parent.postMessage(
+            {
+              api: 'onLoad',
+              status: true
+            },
+            '*'
+          );
+      });
+
+      window.addEventListener('message', getMessage);
+    });
+    return () => (
+      <div class={styles.detail}>
+        <MSticky position="top">
+          <MHeader
+            isBack={false}
+            border={false}
+            background={`rgba(255,255,255, ${forms.titleOpacity})`}
+            color={`rgba(51,51,51, ${forms.titleOpacity})`}
+            title={forms.detail.name || ''}></MHeader>
+        </MSticky>
+
+        <div class={styles.container}>
+          <div class={styles.instrumentLogo}>
+            <Image class={styles.logo} fit="cover" src={forms.detail.avatar} />
+          </div>
+
+          <div class={styles.title}>{forms.detail.name}</div>
+          <div class={styles.content} v-html={forms.detail.intros}></div>
+          {!forms.loading && !forms.detail.intros && (
+            <MEmpty description="暂无内容" />
+          )}
+        </div>
+
+        <MSticky position="bottom" style={{ background: '#fff' }}>
+          {forms.musicList.length > 0 && (
+            <AudioPlayer musicList={forms.musicList} />
+          )}
+        </MSticky>
+      </div>
+    );
+  }
+});

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

@@ -0,0 +1,89 @@
+import MHeader from '@/components/m-header';
+import MSticky from '@/components/m-sticky';
+import { defineComponent, onMounted, reactive } from 'vue';
+import { useEventListener, useWindowScroll } from '@vueuse/core';
+import styles from './index.module.less';
+import { Image } from 'vant';
+import request from '@/helpers/request';
+import { useRoute } from 'vue-router';
+import AudioPlayer from '../components/audio-player';
+import banner from '../images/banner1.png';
+import MEmpty from '@/components/m-empty';
+
+export default defineComponent({
+  name: 'instrument-detail',
+  setup() {
+    const route = useRoute();
+    const forms = reactive({
+      titleOpacity: 0,
+      background: 'transparent',
+      color: '#fff',
+      detail: {} as any,
+      musicList: [] as any,
+      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(
+          /<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;
+    };
+    onMounted(() => {
+      useEventListener(document, 'scroll', () => {
+        const { y } = useWindowScroll();
+        forms.titleOpacity = y.value > 100 ? 1 : y.value / 100;
+      });
+
+      getDetail();
+    });
+    return () => (
+      <div class={styles.detail}>
+        <div class={styles.bgSection}>
+          <img class={styles.bg} src={forms.detail.avatar || banner} />
+        </div>
+        <MSticky position="top">
+          <MHeader
+            border={false}
+            background={`rgba(255,255,255, ${forms.titleOpacity})`}
+            color={`rgba(51,51,51, ${forms.titleOpacity})`}
+            title={forms.detail.name || ''}></MHeader>
+        </MSticky>
+
+        <div class={styles.container}>
+          <div class={styles.instrumentLogo}>
+            <Image class={styles.logo} fit="cover" src={forms.detail.avatar} />
+          </div>
+
+          <div class={styles.title}>{forms.detail.name}</div>
+          <div class={styles.content} v-html={forms.detail.intros}></div>
+
+          {!forms.loading && !forms.detail.intros && (
+            <MEmpty description="暂无内容" />
+          )}
+        </div>
+
+        <MSticky position="bottom">
+          {forms.musicList.length > 0 && (
+            <AudioPlayer musicList={forms.musicList} />
+          )}
+        </MSticky>
+      </div>
+    );
+  }
+});