更新

src/views/attend-class/index.module.less

@@ -531,4 +531,65 @@
       }
     }
   }
-}
+}
+
+.removeVisiable {
+  width: 500px;
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 16px);
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+
+.removeVisiable {
+  width: 500px;
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 16px);
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}

src/views/attend-class/index.tsx

@@ -5,7 +5,8 @@ import {
   onUnmounted,
   ref,
   Transition,
-  computed
+  computed,
+  nextTick
 } from 'vue';
 import styles from './index.module.less';
 import 'plyr/dist/plyr.css';
@@ -48,7 +49,6 @@ 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;
@@ -58,26 +58,7 @@ export type ToolItem = {
 
 export default defineComponent({
   name: 'CoursewarePlay',
-  props: {
-    type: {
-      type: String,
-      default: ''
-    },
-    subjectId: {
-      type: [String, Number],
-      default: ''
-    },
-    detailId: {
-      type: String,
-      default: ''
-    },
-    classGroupId: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['close'],
-  setup(props, { emit }) {
+  setup() {
     const message = useMessage();
     const route = useRoute();
     /** 设置播放容器 16:9 */
@@ -120,7 +101,10 @@ export default defineComponent({
       modelAttendStatus: false, // 布置作业提示弹窗
       modalAttendMessage: '本节课未设置课后训练，是否继续？',
       modelTrainStatus: false, // 训练设置
-      homeworkStatus: true // 布置作业完成时
+      homeworkStatus: true, // 布置作业完成时
+      removeVisiable: false,
+      removeTitle: '',
+      removeContent: ''
     });
     const activeData = reactive({
       // isAutoPlay: false, // 是否自动播放
@@ -308,11 +292,10 @@ export default defineComponent({
 
     onMounted(() => {
       const query = route.query;
-      // 先取参数，
-      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;
+      data.type = query.type as any;
+      data.subjectId = query.subjectId;
+      data.detailId = query.detailId;
+      data.classGroupId = query.classGroupId;
       initMoveable();
       window.addEventListener('message', iframeHandle);
       getDetail();
@@ -353,12 +336,12 @@ export default defineComponent({
       for (let i = 0; i < data.itemList.length; i++) {
         const activeItem = data.itemList[i];
         if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-          activeItem.videoEle.currentTime(0);
-          activeItem.videoEle.pause();
+          console.log(activeItem.videoEle, 'activeItem.videoEle');
+          activeItem.videoEle?.pause();
         }
 
         if (activeItem.type === 'SONG' && activeItem.audioEle) {
-          activeItem.audioEle.stop();
+          activeItem.audioEle?.stop();
         }
         // console.log('🚀 ~ activeItem:', activeItem)
         // 停止曲谱的播放
@@ -527,9 +510,12 @@ export default defineComponent({
               clearTimeout(activeData.timer);
               message.destroyAll();
               // item.autoPlay = false;
-              // nextTick(() => {
-              //   item.videoEle?.play();
-              // });
+              nextTick(() => {
+                if (item.error) {
+                  item.videoEle?.src(item.content);
+                  //   item.videoEle?.onPlay();
+                }
+              });
             }
           }
           //   requestAnimationFrame(() => {
@@ -613,10 +599,10 @@ export default defineComponent({
       const activeItem = data.itemList[popupData.activeIndex];
       // 暂停视频和曲谱的播放
       if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-        activeItem.videoEle.pause();
+        activeItem.videoEle?.stop();
       }
       if (activeItem.type === 'SONG' && activeItem.audioEle) {
-        activeItem.audioEle.stop();
+        activeItem.audioEle?.stop();
       }
       if (activeItem.type === 'MUSIC') {
         activeItem.iframeRef?.contentWindow?.postMessage(
@@ -745,6 +731,9 @@ export default defineComponent({
                               setModelOpen();
                             }
                           }}
+                          onError={() => {
+                            m.error = true;
+                          }}
                         />
                         <Transition name="van-fade">
                           {!m.isprepare && (
@@ -866,13 +855,7 @@ export default defineComponent({
           ]}
           onClick={async () => {
             if (data.type === 'preview') {
-              handleStop();
-              if (state.application) {
-                emit('close');
-              } else {
-                window.close();
-              }
-
+              window.close();
               // onFullScreen();
             } else {
               const res = await lessonPreTrainingPage({
@@ -991,12 +974,7 @@ export default defineComponent({
               round
               onClick={() => {
                 data.modelAttendStatus = false;
-                handleStop();
-                if (state.application) {
-                  emit('close');
-                } else {
-                  window.close();
-                }
+                window.close();
               }}>
               暂不布置
             </NButton>
@@ -1026,12 +1004,7 @@ export default defineComponent({
             onConfirm={() => {
               // 布置完作业之后直接关闭
               setTimeout(() => {
-                handleStop();
-                if (state.application) {
-                  emit('close');
-                } else {
-                  window.close();
-                }
+                window.close();
               }, 1000);
             }}
           />
@@ -1134,6 +1107,54 @@ export default defineComponent({
             <TimerMeter></TimerMeter>
           </div>
         </NModal>
+
+        <NModal
+          v-model:show={data.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={data.removeTitle}>
+          <div class={styles.studentRemove}>
+            <p>{data.removeContent}</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  //
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (data.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+
+        <NModal
+          v-model:show={data.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={data.removeTitle}>
+          <div class={styles.studentRemove}>
+            <p>{data.removeContent}</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  //
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (data.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
       </div>
     );
   }