classroom-instruments/src/views/prepare-lessons/model/add-other-source/index.tsx

import { defineComponent, reactive, ref } from 'vue';
import { NImage, NModal } from 'naive-ui';
import styles from './index.module.less';
import icon1 from '../../images/addSource/icon1.png';
import icon2 from '../../images/addSource/icon2.png';
import icon3 from '../../images/addSource/icon3.png';
import icon4 from '../../images/addSource/icon4.png';
import icon5 from '../../images/addSource/icon5.png';
import icon6 from '../../images/addSource/icon6.png';
import icon7 from '../../images/addSource/icon7.png';
import { useRouter } from 'vue-router';
import SourceRhythm from '../source-rhythm';
import SourceInstrument from '../source-instrument';
import SourceKnowledge from '../source-knowledge';
import SourceMusician from '../source-musician';
import SourceMusic from '../source-music';

export default defineComponent({
  name: 'add-other-source',
  emits: ['close', 'comfirm'],
  setup(props, { emit }) {
    const router = useRouter();
    const sourceList = ref([
      // {
      //   image: icon1,
      //   name: '听音练习',
      //   index: 0
      // },
      {
        image: icon2,
        name: '节奏练习',
        index: 1
      },
      {
        image: icon3,
        name: '乐器百科',
        index: 2
      },
      {
        image: icon6,
        name: '名曲鉴赏',
        index: 3
      },
      {
        image: icon5,
        name: '音乐家',
        index: 4
      },
      {
        image: icon4,
        name: '乐理知识',
        index: 5
      },
      {
        image: icon7,
        name: '制作曲谱',
        index: 6
      }
    ]);
    const state = reactive({
      listenStatus: false, // 听音练习
      rhythmStatus: false, //节奏
      theoryStatus: false, //
      musicStatus: false, //
      instrumentStatus: false, //
      musicianStatus: false //
    });
    // LISTEN:听音,RHYTHM:节奏,THEORY:乐理知识,MUSIC_WIKI:曲目 INSTRUMENT:乐器 MUSICIAN:音乐家）

    const onDetail = (item: any) => {
      switch (item.index) {
        case 1:
          state.rhythmStatus = true;
          break;
        case 2:
          state.instrumentStatus = true;
          break;
        case 3:
          state.musicStatus = true;
          break;
        case 4:
          state.musicianStatus = true;
          break;
        case 5:
          state.theoryStatus = true;
          break;
        case 6:
          // 直接跳转到制谱页面 (临时存储数据)
          sessionStorage.setItem('notation-open-create', '1');
          router.push('/notation');
          break;
        default:
          break;
      }
    };
    return () => (
      <>
        <div class={styles.addOtherSource}>
          {sourceList.value.map(source => (
            <div class={styles.sourceItem} onClick={() => onDetail(source)}>
              <NImage
                class={styles.coverImg}
                src={source.image}
                previewDisabled
              />
              <p class={styles.name}>{source.name}</p>
            </div>
          ))}
        </div>
        {/*
          百科: https://oss.dayaedu.com/ktqy/17101370093153448b2cd.png
          jianshang https://oss.dayaedu.com/ktqy/1710137009315eedcdeed.png
          jiezou https://oss.dayaedu.com/ktqy/171013700931689a322a6.png
          yinyuejia https://oss.dayaedu.com/ktqy/1710137009316fbd65d39.png
          yueli https://oss.dayaedu.com/ktqy/17101370093160d479afe.png
        */}
        {/* 节奏练习 */}
        <NModal
          v-model:show={state.rhythmStatus}
          preset="card"
          class={['modalTitle background', styles.addOtherSourceModal]}
          title={'节奏练习'}>
          <SourceRhythm
            onClose={() => (state.rhythmStatus = false)}
            onConfirm={(item: any) => {
              state.rhythmStatus = false;
              emit('comfirm', {
                materialId: null,
                coverImg: item.coverImg,
                dataJson: item.dataJson,
                title: '节奏练习',
                isCollect: false,
                isSelected: false,
                content: null,
                type: 'RHYTHM'
              });
              emit('close');
            }}
          />
        </NModal>

        {/* 乐器百科 */}
        <NModal
          v-model:show={state.instrumentStatus}
          preset="card"
          class={['modalTitle', styles.instrumentModal]}
          title={'乐器百科'}>
          <SourceInstrument
            onClose={() => (state.instrumentStatus = false)}
            onConfirm={(val: any) => {
              state.instrumentStatus = false;
              const value = val || [];
              const temp: any[] = [];
              value.forEach((item: any) => {
                temp.push({
                  materialId: item.materialId,
                  coverImg: item.coverImg,
                  dataJson: null,
                  title: item.title,
                  isCollect: false,
                  isSelected: false,
                  content: item.content,
                  type: 'INSTRUMENT'
                });
              });
              emit('comfirm', temp);
              emit('close');
            }}
          />
        </NModal>

        {/* 乐理知识 */}
        <NModal
          v-model:show={state.theoryStatus}
          preset="card"
          class={['modalTitle', styles.theoryModal]}
          title={'乐理知识'}>
          <SourceKnowledge
            onClose={() => (state.theoryStatus = false)}
            onConfirm={(val: any) => {
              state.theoryStatus = false;
              const value = val || [];
              const temp: any[] = [];
              value.forEach((item: any) => {
                temp.push({
                  materialId: item.materialId,
                  coverImg: item.coverImg,
                  dataJson: null,
                  title: item.title,
                  isCollect: false,
                  isSelected: false,
                  content: item.content,
                  type: 'THEORY'
                });
              });
              emit('comfirm', temp);
              emit('close');
            }}
          />
        </NModal>

        {/* 音乐家 */}
        <NModal
          v-model:show={state.musicianStatus}
          preset="card"
          class={['modalTitle', styles.instrumentModal]}
          title={'音乐家'}>
          <SourceMusician
            onClose={() => (state.musicianStatus = false)}
            onConfirm={(val: any) => {
              state.musicianStatus = false;
              const value = val || [];
              const temp: any[] = [];
              value.forEach((item: any) => {
                temp.push({
                  materialId: item.materialId,
                  coverImg: item.coverImg,
                  dataJson: null,
                  title: item.title,
                  isCollect: false,
                  isSelected: false,
                  content: item.content,
                  type: 'MUSICIAN'
                });
              });
              emit('comfirm', temp);
              emit('close');
            }}
          />
        </NModal>

        {/* 名曲鉴赏 */}
        <NModal
          v-model:show={state.musicStatus}
          preset="card"
          class={['modalTitle', styles.musicModal]}
          title={'名曲鉴赏'}>
          <SourceMusic
            onClose={() => (state.musicStatus = false)}
            onConfirm={(val: any) => {
              state.musicStatus = false;
              const value = val || [];
              const temp: any[] = [];
              value.forEach((item: any) => {
                temp.push({
                  materialId: item.materialId,
                  coverImg: item.coverImg,
                  dataJson: null,
                  title: item.title,
                  isCollect: false,
                  isSelected: false,
                  content: item.content,
                  type: 'MUSIC_WIKI'
                });
              });
              emit('comfirm', temp);
              emit('close');
            }}
          />
        </NModal>
      </>
    );
  }
});