classroom-app/src/views/courseware-play/component/instrument-info/index.tsx

import { defineComponent, ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import request from '@/helpers/request';
import MEmpty from '@/components/m-empty';
import styles from './index.module.less';
import musicBg from '../../image/music_bg.png';
import titleIcon1 from '../../image/title_icon1.png';
import playIcon from '../../image/music_play_icon.png';
import emptyIcon from '../../image/ins-empty-icon.png';

export default defineComponent({
  name: 'InstrumentInfo',
  props: {
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
  },
  emits: ['close', 'select'],
  setup(props, { emit }) {
    const route = useRoute();
    const forms = reactive({
      detailId: route.query.detailId,
      loading: false,
      dataInfo: {} as any,
      musicList: [] as any,
      title: ' ',
    });
    const getDetail = async () => {
      forms.loading = true;
      try {
        const { data } = await request.get(
          '/edu-app/knowledgeWiki/detail/' + props.id
        );
        data.intros = data.intros.replace(
          /<video/gi,
          '<video style="width: 100% !important;" controlslist="nodownload" poster="https://oss.dayaedu.com/ktqy/1701759849244.png"'
        );
        forms.dataInfo = data || {};
        forms.musicList = data.knowledgeWikiResources.map((item: any) => {
          return {
            id: item.id,
            name: item.name,
            url: item.url
          };
        });
        console.log(1111,forms.musicList)
      } catch {}
      forms.loading = false;
    };
    onMounted(async () => {
      await getDetail();
    });
    return () => (
      <div class={styles.knowledgeBg}>
        <div class={styles.left}>
          {
            props.type === 'wiki' && 
            <div class={styles.insTop}>
              <div class={styles.imgSection}>
                <img class={styles.img} src={forms.dataInfo.avatar || musicBg} />
                <div class={styles.pan}>
                  <img src={forms.dataInfo.avatar || musicBg} />
                </div>
              </div> 
              <div class={styles.songName}>{forms.dataInfo.name || '--'}</div>   
              <div class={styles.songWords}>
                {forms.dataInfo.lyricists && (
                  <span>作词：{forms.dataInfo.lyricists}</span>
                )}
                {forms.dataInfo.composers && (
                  <span>作曲：{forms.dataInfo.composers}</span>
                )}
              </div>                     
            </div>
          }
          { 
            props.type === 'instrument' && 
            <div class={styles.insTop}>
              <img src={forms.dataInfo.avatar} />
              <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
              <div class={styles.insTro}>{forms.dataInfo.knowledgeWikiCategoryName || ''}</div>
            </div>
          }
          { 
            props.type === 'musician' && 
            <div class={styles.insTop}>
              <img class={styles.musician} src={forms.dataInfo.avatar} />
              <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
              <div class={styles.insTro}>{forms.dataInfo.knowledgeWikiCategoryName || ''}</div>
            </div>
          }          
          <div class={styles.insList}>
            {
              forms.musicList.length ? 
                <>
                  {forms.musicList.map((item: any, index: number) => {
                    return (
                      <div class={styles.li}>
                        <img class={styles.liBg} src={musicBg} />
                        <div class={styles.liName}>{item.name || '--'}</div>
                        <img class={styles.liPlay} src={playIcon} />
                      </div>
                    );
                  })}
              </> : 
              <div class={styles.emptyBox}>
                <img src={emptyIcon} />
                <span>暂无曲目～</span>
              </div>
            }
          </div>
        </div>       
        <div class={styles.right}>
          <div class={styles.title}><img class={styles.liBg} src={titleIcon1} />乐器简介</div>
          <div class={styles.desc} v-html={forms.dataInfo.intros}></div>
          {!forms.loading && !forms.dataInfo.intros && (
            <MEmpty description="暂无内容" />
          )}
        </div>
      </div>
    );
  }
});