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

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 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;
    // };

    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.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}>
        <div class={styles.bgSection}>
          <img class={styles.bg} src={forms.detail.avatar || banner} />
        </div>
        <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}>
            <div class={"only-child-select"} v-html={forms.detail.intros}></div>
          </div>

          {!forms.loading && !forms.detail.intros && (
            <MEmpty description="暂无内容" />
          )}
        </div>

        <MSticky position="bottom">
          {forms.musicList.length > 0 && (
            <AudioPlayer musicList={forms.musicList} />
          )}
        </MSticky>
      </div>
    );
  }
});