ppt页面预览

src/router/routes-common.ts

@@ -27,6 +27,14 @@ export default [
         }
       },
       {
+        name: 'pptResources',
+        path: '/pptResources',
+        component: () => import('@/views/pptResources'),
+        meta: {
+          title: 'ppt资源'
+        }
+      },
+      {
         path: '/order-detail',
         name: 'order-detail',
         component: () => import('@/views/student-register/order-detail'),

src/views/pptResources/index.module.less

@@ -0,0 +1,4 @@
+.pptResources {
+  width: 100%;
+  height: 100vh;
+}

src/views/pptResources/index.tsx

@@ -0,0 +1,41 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { useRoute } from 'vue-router';
+import Theory from '/src/views/courseware-play/component/theory';
+import InstrumentInfo from '/src/views/courseware-play/component/instrument-info';
+
+export default defineComponent({
+  name: 'pptResources',
+  setup() {
+    const route = useRoute();
+    // 获取传递过来的参数
+    const queryParams = {
+      pptContentType: route.query.pptContentType as string, // ppt传过来的 资源类型
+      pptType: route.query.pptType as string, // ppt 传过来的显示类型   modal，preview
+      pptId: route.query.pptId as string // ppt传过来的id
+    };
+    console.log(queryParams, '传过来的参数');
+    const pptTypeObj = {
+      INSTRUMENT: 'instrument',
+      MUSICIAN: 'musician',
+      MUSIC_WIKI: 'wiki',
+      THEORY: 'theory'
+    };
+    return () => (
+      <div class={styles.pptResources}>
+        {['INSTRUMENT', 'MUSICIAN', 'MUSIC_WIKI'].includes(
+          queryParams.pptContentType
+        ) ? (
+          <InstrumentInfo
+            type={pptTypeObj[queryParams.pptContentType]}
+            id={queryParams.pptId}
+          />
+        ) : queryParams.pptContentType === 'THEORY' ? (
+          <Theory id={queryParams.pptId} />
+        ) : (
+          ''
+        )}
+      </div>
+    );
+  }
+});