上课预览

src/components/layout/index.tsx

@@ -14,14 +14,19 @@ import toneImage from './images/toneImage.png';
 import setTimeImage from './images/setTimeImage.png';
 import dragingBoxIcon from './images/dragingBoxIcon.png';
 import TimerMeter from '../timerMeter';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { vaildUrl } from '/src/utils/urlUtils';
 import ChioseModal from '/src/views/home/modals/chioseModal';
-import {px2vw,px2vwH} from '@/utils/index'
+import { px2vw, px2vwH } from '@/utils/index';
 import PlaceholderTone from './modals/placeholderTone';
+import { state } from '/src/state';
+import PreviewWindow from '/src/views/preview-window';
 export default defineComponent({
   name: 'layoutView',
   setup() {
+    const router = useRouter();
+    const previewModal = ref(false);
+    const previewItem = ref({});
     const directionType = ref('left');
     const showClass = ref(false);
     const showModalBeat = ref(false);
@@ -362,11 +367,7 @@ export default defineComponent({
               height={'650px'}></iframe>
           </div>
         </NModal>
-        <NModal
-          v-model:show={showModalTone.value}
-          class={['background']}
-
-         >
+        <NModal v-model:show={showModalTone.value} class={['background']}>
           {/* <div
             onClick={() => {
               showModalTone.value = false;
@@ -376,11 +377,12 @@ export default defineComponent({
               previewDisabled
               class={styles.beatImage}></NImage>
           </div> */}
-                    <div>
-            <PlaceholderTone onClose={()=>{
-              showModalTone.value = false
-            }}></PlaceholderTone>
-            </div>
+          <div>
+            <PlaceholderTone
+              onClose={() => {
+                showModalTone.value = false;
+              }}></PlaceholderTone>
+          </div>
         </NModal>
         <NModal
           v-model:show={showModalTime.value}
@@ -398,8 +400,32 @@ export default defineComponent({
           class={['modalTitle background', styles.showClass]}
           preset="card"
           title={'开始上课'}>
-          <ChioseModal onClose={() => (showClass.value = false)} />
+          <ChioseModal
+            onClose={() => (showClass.value = false)}
+            onPreview={(item: any) => {
+              if (state.application) {
+                previewModal.value = true;
+                previewItem.value = {
+                  ...item
+                };
+              } else {
+                const { href } = router.resolve({
+                  path: '/attend-class',
+                  query: {
+                    ...item
+                  }
+                });
+                window.open(href, +new Date() + '');
+              }
+            }}
+          />
         </NModal>
+        {/* 弹窗查看 */}
+        <PreviewWindow
+          v-model:show={previewModal.value}
+          type="attend"
+          params={previewItem.value}
+        />
       </div>
     );
   }

src/state.ts

@@ -6,6 +6,7 @@ export const state = reactive({
     status: 'init' as status,
     data: {} as any
   },
+  application: window.matchMedia('(display-mode: standalone)').matches, // 是否在应用里面
   navBarHeight: 0, // 状态栏高度
   ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/'
 });

src/views/attend-class/index.tsx

@@ -48,6 +48,7 @@ import beatIcon from '/src/components/layout/images/beatIcon.png';
 import toneIcon from '/src/components/layout/images/toneIcon.png';
 import { px2vw } from '/src/utils';
 import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
+import { state } from '/src/state';
 export type ToolType = 'init' | 'pen' | 'whiteboard';
 export type ToolItem = {
   type: ToolType;
@@ -57,7 +58,26 @@ export type ToolItem = {
 
 export default defineComponent({
   name: 'CoursewarePlay',
-  setup() {
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    subjectId: {
+      type: [String, Number],
+      default: ''
+    },
+    detailId: {
+      type: String,
+      default: ''
+    },
+    classGroupId: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['close'],
+  setup(props, { emit }) {
     const message = useMessage();
     const route = useRoute();
     /** 设置播放容器 16:9 */
@@ -288,10 +308,11 @@ export default defineComponent({
 
     onMounted(() => {
       const query = route.query;
-      data.type = query.type as any;
-      data.subjectId = query.subjectId;
-      data.detailId = query.detailId;
-      data.classGroupId = query.classGroupId;
+      // 先取参数，
+      data.type = props.type || (query.type as any);
+      data.subjectId = props.subjectId || query.subjectId;
+      data.detailId = props.detailId || query.detailId;
+      data.classGroupId = props.classGroupId || query.classGroupId;
       initMoveable();
       window.addEventListener('message', iframeHandle);
       getDetail();
@@ -850,7 +871,12 @@ export default defineComponent({
           ]}
           onClick={async () => {
             if (data.type === 'preview') {
-              window.close();
+              if (state.application) {
+                emit('close');
+              } else {
+                window.close();
+              }
+
               // onFullScreen();
             } else {
               const res = await lessonPreTrainingPage({
@@ -969,7 +995,11 @@ export default defineComponent({
               round
               onClick={() => {
                 data.modelAttendStatus = false;
-                window.close();
+                if (state.application) {
+                  emit('close');
+                } else {
+                  window.close();
+                }
               }}>
               暂不布置
             </NButton>
@@ -999,7 +1029,11 @@ export default defineComponent({
             onConfirm={() => {
               // 布置完作业之后直接关闭
               setTimeout(() => {
-                window.close();
+                if (state.application) {
+                  emit('close');
+                } else {
+                  window.close();
+                }
               }, 1000);
             }}
           />
@@ -1084,18 +1118,13 @@ export default defineComponent({
           </div>
         </NModal>
 
-
-
-        <NModal
-          class={['background']}
-          v-model:show={showModalTone.value}
-          >
-            <div>
-            <PlaceholderTone onClose={()=>{
-              showModalTone.value = false
-            }}></PlaceholderTone>
-            </div>
-
+        <NModal class={['background']} v-model:show={showModalTone.value}>
+          <div>
+            <PlaceholderTone
+              onClose={() => {
+                showModalTone.value = false;
+              }}></PlaceholderTone>
+          </div>
         </NModal>
         <NModal
           v-model:show={showModalTime.value}

src/views/attend-class/model/train-type/index.tsx

@@ -17,6 +17,7 @@ import pDelete from './images/p-delete.svg';
 import eDelete from './images/e-delete.svg';
 import iconDelete from './images/icon-delete.png';
 import { useUserStore } from '/src/store/modules/users';
+import CardPreview from '/src/components/card-preview';
 type ItemType = {
   id: string | number;
   trainingType: 'PRACTICE' | 'EVALUATION';
@@ -62,12 +63,15 @@ export default defineComponent({
     const userStore = useUserStore();
 
     const removeVisiable = ref(false);
+    const previewShow = ref(false);
     const onDetail = () => {
-      const origin = /(localhost|192)/.test(location.host)
-        ? 'https://dev.kt.colexiu.com'
-        : location.origin;
-      const src = `${origin}/instrument?platform=pc&modelType=practise&id=${props.item.musicId}&Authorization=${userStore.getToken}`;
-      window.open(src, '_blank');
+      // const origin = /(localhost|192)/.test(location.host)
+      //   ? 'https://dev.kt.colexiu.com'
+      //   : location.origin;
+      // const src = `${origin}/instrument?platform=pc&modelType=practise&id=${props.item.musicId}&Authorization=${userStore.getToken}`;
+      // window.open(src, '_blank');
+      // console.log(props.item, 'item');
+      previewShow.value = true;
     };
 
     return () => (
@@ -263,6 +267,15 @@ export default defineComponent({
             </NSpace>
           </div>
         </NModal>
+
+        <CardPreview
+          v-model:show={previewShow.value}
+          item={{
+            type: 'MUSIC',
+            content: props.item.musicId,
+            title: props.item.musicName
+          }}
+        />
       </div>
     );
   }

src/views/classList/index.tsx

@@ -27,6 +27,8 @@ import { useRouter } from 'vue-router';
 import { rowDark } from 'naive-ui/es/legacy-grid/styles';
 import TheEmpty from '/src/components/TheEmpty';
 import TheTooltip from '/src/components/TheTooltip';
+import PreviewWindow from '../preview-window';
+import { state as globalState } from '/src/state';
 export default defineComponent({
   name: 'class-classList',
   setup(props, { emit }) {
@@ -51,7 +53,9 @@ export default defineComponent({
       showaddClass: false,
       goCourseVisiable: false,
       removeVisiable: false,
-      removeRow: {} as any
+      removeRow: {} as any,
+      previewModal: false,
+      previewParams: {} as any
     });
     const formRef = ref();
     const dialog = useDialog();
@@ -355,9 +359,32 @@ export default defineComponent({
           title={'选择课件'}>
           <TrainDetail
             activeRow={state.activeRow}
-            onClose={() => (state.goCourseVisiable = false)}></TrainDetail>
+            onClose={() => (state.goCourseVisiable = false)}
+            onPreview={(item: any) => {
+              if (globalState.application) {
+                state.previewModal = true;
+                state.previewParams = {
+                  ...item
+                };
+              } else {
+                const { href } = router.resolve({
+                  path: '/attend-class',
+                  query: {
+                    ...item
+                  }
+                });
+                window.open(href, +new Date() + '');
+              }
+            }}></TrainDetail>
         </NModal>
 
+        {/* 上课弹窗 */}
+        <PreviewWindow
+          v-model:show={state.previewModal}
+          type="attend"
+          params={state.previewParams}
+        />
+
         <NModal
           v-model:show={state.removeVisiable}
           preset="card"

src/views/classList/modals/Gotoclass.tsx

@@ -20,7 +20,7 @@ import { getCourseChapter } from '../api';
 import { useCatchStore } from '/src/store/modules/catchData';
 export default defineComponent({
   name: 'train-update',
-  emits: ['close'],
+  emits: ['close', 'preview'],
   props: {
     activeRow: {
       type: Object,
@@ -60,17 +60,14 @@ export default defineComponent({
             lessonCoursewareKnowledgeDetailId: forms.chapter,
             classGroupId: props.activeRow.id
           });
-          const { href } = router.resolve({
-            path: '/attend-class',
-            query: {
-              type: 'class',
-              classGroupId: props.activeRow.id,
-              subjectId: forms.subjectId,
-              detailId: forms.chapter
-            }
-          });
+
           emit('close');
-          window.open(href, +new Date() + '', 'fullscreen=yes');
+          emit('preview', {
+            type: 'class',
+            classGroupId: props.activeRow.id,
+            subjectId: forms.subjectId,
+            detailId: forms.chapter
+          });
         } else {
           message.error('当前章节暂无课件，请重新选择');
         }

src/views/home/index.tsx

@@ -57,7 +57,9 @@ import TimerMeter from '/src/components/timerMeter';
 import { vaildUrl } from '/src/utils/urlUtils';
 import toneImage from '@/components/layout/images/toneImage.png';
 import { px2vw } from '/src/utils';
-import PlaceholderTone from '@/components/layout/modals/placeholderTone'
+import PlaceholderTone from '@/components/layout/modals/placeholderTone';
+import { state } from '/src/state';
+import PreviewWindow from '../preview-window';
 export const formatDateToDay = () => {
   const hours = dayjs().hour();
   if (hours < 12) {
@@ -103,7 +105,9 @@ export default defineComponent({
         name: ''
       } as any,
       popSelectOptions: [] as any,
-      showGuide: false
+      showGuide: false,
+      showPreview: false,
+      itemPreview: {} as any
     });
     const teachList = ref({} as any);
 
@@ -330,16 +334,26 @@ export default defineComponent({
               classGroupId: forms.applyClassItem?.classGroupId
             });
 
-            const { href } = router.resolve({
-              path: '/attend-class',
-              query: {
+            if (state.application) {
+              forms.showPreview = true;
+              forms.itemPreview = {
                 type: 'class',
                 classGroupId: forms.applyClassItem?.classGroupId,
                 subjectId: forms.subjectId,
                 detailId: forms.unit
-              }
-            });
-            window.open(href, +new Date() + '');
+              };
+            } else {
+              const { href } = router.resolve({
+                path: '/attend-class',
+                query: {
+                  type: 'class',
+                  classGroupId: forms.applyClassItem?.classGroupId,
+                  subjectId: forms.subjectId,
+                  detailId: forms.unit
+                }
+              });
+              window.open(href, +new Date() + '');
+            }
           } else {
             message.error('当前章节暂无课件，请重新选择');
           }
@@ -760,18 +774,22 @@ export default defineComponent({
           </div>
         </NModal>
 
-        <NModal
-          class={['background']}
-          v-model:show={showModalTone.value}
-          >
-            <div>
-            <PlaceholderTone onClose={()=>{
-              showModalTone.value = false
-            }}></PlaceholderTone>
-            </div>
-
+        <NModal class={['background']} v-model:show={showModalTone.value}>
+          <div>
+            <PlaceholderTone
+              onClose={() => {
+                showModalTone.value = false;
+              }}></PlaceholderTone>
+          </div>
         </NModal>
 
+        {/* 弹窗查看 */}
+        <PreviewWindow
+          v-model:show={forms.showPreview}
+          type="attend"
+          params={forms.itemPreview}
+        />
+
         {forms.showGuide ? <HomeGuide></HomeGuide> : null}
       </div>
     );

src/views/home/modals/chioseModal.tsx

@@ -21,7 +21,7 @@ import { useCatchStore } from '/src/store/modules/catchData';
 import { gradeToCN } from '/src/utils/contants';
 export default defineComponent({
   name: 'train-update',
-  emits: ['close'],
+  emits: ['close', 'preview'],
   setup(props, { emit }) {
     const forms = reactive({
       currentClass: null,
@@ -57,17 +57,13 @@ export default defineComponent({
             lessonCoursewareKnowledgeDetailId: forms.chapter,
             classGroupId: forms.currentClass
           });
-          const { href } = router.resolve({
-            path: '/attend-class',
-            query: {
-              type: 'class',
-              classGroupId: forms.currentClass,
-              subjectId: forms.subjectId,
-              detailId: forms.chapter
-            }
-          });
           emit('close');
-          window.open(href, +new Date() + '', 'fullscreen=yes');
+          emit('preview', {
+            type: 'class',
+            classGroupId: forms.currentClass,
+            subjectId: forms.subjectId,
+            detailId: forms.chapter
+          });
         } else {
           message.error('当前章节暂无课件，请重新选择');
         }

src/views/prepare-lessons/components/lesson-main/courseware/index.tsx

@@ -26,6 +26,7 @@ import { useRoute, useRouter } from 'vue-router';
 import deepClone from '/src/helpers/deep-clone';
 import CardPreview from '/src/components/card-preview';
 import PreviewWindow from '/src/views/preview-window';
+import { state } from '/src/state';
 
 export default defineComponent({
   name: 'courseware-modal',
@@ -47,7 +48,8 @@ export default defineComponent({
       removeVisiable1: false,
       show: false,
       item: {} as any,
-      previewModal: false
+      previewModal: false,
+      previewParams: {} as any
     });
 
     // 获取列表
@@ -183,16 +185,25 @@ export default defineComponent({
         message.error('课件不能为空');
         return;
       }
-      // const { href } = router.resolve({
-      //   path: '/attend-class',
-      //   query: {
-      //     type: 'preview',
-      //     subjectId: prepareStore.getSubjectId,
-      //     detailId: prepareStore.getSelectKey
-      //   }
-      // });
-      // window.open(href, +new Date() + '');
-      forms.previewModal = true;
+      // 判断是否在应用里面
+      if (state.application) {
+        forms.previewModal = true;
+        forms.previewParams = {
+          type: 'preview',
+          subjectId: prepareStore.getSubjectId,
+          detailId: prepareStore.getSelectKey
+        };
+      } else {
+        const { href } = router.resolve({
+          path: '/attend-class',
+          query: {
+            type: 'preview',
+            subjectId: prepareStore.getSubjectId,
+            detailId: prepareStore.getSelectKey
+          }
+        });
+        window.open(href, +new Date() + '');
+      }
     };
 
     // 单个删除
@@ -403,7 +414,25 @@ export default defineComponent({
           class={['modalTitle background', styles.attendClassModal]}
           title={'选择班级'}
           blockScroll={false}>
-          <AttendClass onClose={() => (forms.showAttendClass = false)} />
+          <AttendClass
+            onClose={() => (forms.showAttendClass = false)}
+            onPreview={(item: any) => {
+              if (state.application) {
+                forms.previewModal = true;
+                forms.previewParams = {
+                  ...item
+                };
+              } else {
+                const { href } = router.resolve({
+                  path: '/attend-class',
+                  query: {
+                    ...item
+                  }
+                });
+                window.open(href, +new Date() + '');
+              }
+            }}
+          />
         </NModal>
 
         {/* 弹窗查看 */}
@@ -462,7 +491,11 @@ export default defineComponent({
           </div>
         </NModal>
 
-        <PreviewWindow v-model:show={forms.previewModal} />
+        <PreviewWindow
+          v-model:show={forms.previewModal}
+          type="attend"
+          params={forms.previewParams}
+        />
       </div>
     );
   }

src/views/prepare-lessons/model/attend-class/index.tsx

@@ -15,7 +15,7 @@ for (let i = 1; i <= 40; i++) {
 
 export default defineComponent({
   name: 'attend-class',
-  emits: ['close'],
+  emits: ['close', 'preview'],
   setup(props, { emit }) {
     const prepareStore = usePrepareStore();
     const router = useRouter();
@@ -35,16 +35,12 @@ export default defineComponent({
         });
         emit('close');
 
-        const { href } = router.resolve({
-          path: '/attend-class',
-          query: {
-            type: 'class',
-            classGroupId: item.id,
-            subjectId: prepareStore.getSubjectId,
-            detailId: prepareStore.getSelectKey
-          }
+        emit('preview', {
+          type: 'class',
+          classGroupId: item.id,
+          subjectId: prepareStore.getSubjectId,
+          detailId: prepareStore.getSelectKey
         });
-        window.open(href, +new Date() + '');
       } catch {
         //
       }

src/views/preview-window/index.tsx

@@ -1,6 +1,7 @@
-import { PropType, defineComponent, ref, toRefs, watch } from 'vue';
+import { PropType, defineComponent, onMounted, ref, toRefs, watch } from 'vue';
 import styles from './index.module.less';
 import { NModal } from 'naive-ui';
+import AttendClass from '../attend-class';
 
 export default defineComponent({
   name: 'preview-window',
@@ -9,21 +10,60 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    type: {
+      type: String,
+      default: ''
+    },
     params: {
       type: Object as PropType<any>,
       default: () => ({})
     }
   },
-  setup(props) {
-    // const show = ref(false);
-    const { show, params } = toRefs(props);
+  emit: ['update:show'],
+  setup(props, { emit }) {
+    const { show, type, params } = toRefs(props);
+    watch(
+      () => props.show,
+      () => {
+        show.value = props.show;
+      }
+    );
+
+    watch(
+      () => props.type,
+      () => {
+        type.value = props.type;
+      }
+    );
+
+    watch(
+      () => props.params,
+      () => {
+        params.value = props.params;
+      }
+    );
 
     return () => (
       <NModal
         v-model:show={show.value}
+        onUpdate:show={() => {
+          emit('update:show', show.value);
+        }}
         class={styles.previewWindow}
         showIcon={false}
-        displayDirective="show"></NModal>
+        displayDirective="show">
+        {type.value === 'attend' ? (
+          <AttendClass
+            type={params.value.type || ''}
+            subjectId={params.value.subjectId || ''}
+            detailId={params.value.detailId || ''}
+            classGroupId={params.value.classGroupId || ''}
+            onClose={() => emit('update:show', false)}
+          />
+        ) : (
+          ''
+        )}
+      </NModal>
     );
   }
 });