classroom-app/src/views/information/famous-music-detail/index.tsx

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 musicBg from '../images/music_bg.png';

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

    const getDetail = async () => {
      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"'
        );
        forms.detail = data || {};
        forms.musicList = data.knowledgeWikiResources.map((item: any) => {
          return {
            id: item.id,
            name: item.name,
            url: item.url
          };
        });
      } catch {}
    };
    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} />
              <div class={styles.pan}>
                <img src={forms.detail.avatar || musicBg} />
              </div>
            </div>
            <div class={styles.musicContent}>
              <div class={styles.musicTitle}>{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> */}
          <div class={styles.content} v-html={forms.detail.intros}></div>
        </div>

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