classroom-instruments/src/views/pptResources/index.tsx

import { defineComponent } from 'vue';
import styles from './index.module.less';
import { parseQuery } from '@/router';
import InstruemntDetail from '/src/views/prepare-lessons/model/source-instrument/detail';
import MusicDetail from '/src/views/prepare-lessons/model/source-music/detail';
import TheoryDetail from '/src/views/prepare-lessons/model/source-knowledge/detail';

export default defineComponent({
  name: 'pptResources',
  setup() {
    // 获取传递过来的参数
    const queryParams = {
      pptContentType: '', // ppt传过来的 资源类型
      pptType: '', // ppt 传过来的显示类型   modal，preview
      pptId: '' // ppt传过来的id
    };
    getQueryParams();
    function getQueryParams() {
      const search = location.href.split('??');
      if (search[1]) {
        const parse = search[1];
        const result = parseQuery(parse);
        queryParams.pptContentType = result.pptContentType;
        queryParams.pptType = result.pptType;
        queryParams.pptId = result.pptId;
        console.log(queryParams, '传过来的参数');
      }
    }
    return () => (
      <div class={styles.pptResources}>
        {queryParams.pptContentType === 'INSTRUMENT' ||
        queryParams.pptContentType === 'MUSICIAN' ? (
          <InstruemntDetail
            type={queryParams.pptType}
            contentType={queryParams.pptContentType}
            id={queryParams.pptId}
          />
        ) : queryParams.pptContentType === 'MUSIC_WIKI' ? (
          <MusicDetail
            type={queryParams.pptType}
            contentType={queryParams.pptContentType}
            id={queryParams.pptId}
          />
        ) : queryParams.pptContentType === 'THEORY' ? (
          <TheoryDetail
            class={queryParams.pptType === 'modal' ? styles.modalStyles : ''}
            type={queryParams.pptType}
            id={queryParams.pptId}
          />
        ) : (
          ''
        )}
      </div>
    );
  }
});