更新上课功能

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

@@ -357,4 +357,67 @@
   pointer-events: none;
   transform: translateY(100%);
   transition: all .5s;
+}
+
+
+.attendClassModal {
+  width: 442px;
+  border-radius: 16px;
+  overflow: hidden;
+
+  :global {
+    .n-card-header {
+      position: relative;
+      padding: 20px 18px;
+      text-align: center;
+      // background: #F5F6FA;
+      font-size: 22px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 30px;
+    }
+
+    .n-card-header__close {
+      position: absolute;
+      right: 18px;
+    }
+
+    .n-card__content {
+      padding: 0;
+    }
+
+    .n-base-select-menu .n-base-select-option {
+      font-size: 18px !important;
+    }
+  }
+
+  .modelAttendContent {
+    font-size: 18px;
+    color: #777777;
+    line-height: 30px;
+    text-align: center;
+  }
+
+  .modelAttendBtnGroup {
+    padding: 40px 0;
+    justify-content: center !important;
+
+    :global {
+      .n-button {
+        height: 48px !important;
+        min-width: 156px;
+
+      }
+    }
+  }
+}
+
+.trainClassModal {
+  width: 1028px;
+
+  :global {
+    .n-card-header {
+      background: #F5F6FA;
+    }
+  }
 }

src/views/attend-class/index.tsx

@@ -27,11 +27,19 @@ import { Vue3Lottie } from 'vue3-lottie';
 import playLoadData from './datas/data.json';
 import { usePageVisibility } from '@vant/use';
 import VideoPlay from './component/video-play';
-import { useMessage, NDrawer, NDrawerContent } from 'naive-ui';
+import {
+  useMessage,
+  NDrawer,
+  NDrawerContent,
+  NModal,
+  NSpace,
+  NButton
+} from 'naive-ui';
 import CardType from '@/components/card-type';
 import { ToolItem, ToolType } from './component/tool';
 import Pen from './component/tools/pen';
 import AudioPay from './component/audio-pay';
+import TrainSettings from './model/train-settings';
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -85,7 +93,9 @@ export default defineComponent({
       showHead: true,
       isCourse: false,
       isRecordPlay: false,
-      videoRefs: {} as any[]
+      videoRefs: {} as any[],
+      modelAttendStatus: false, // 布置作业提示弹窗
+      modelTrainStatus: false // 训练设置
     });
     const activeData = reactive({
       isAutoPlay: true, // 是否自动播放
@@ -118,15 +128,15 @@ export default defineComponent({
     // };
     const getDetail = async () => {
       data.knowledgePointList = [
-        {
-          id: '5',
-          name: '歌曲表演 大鹿',
-          title: '歌曲表演 大鹿',
-          type: 'AUDIO',
-          content:
-            'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1686819360752.mp3',
-          url: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/23cc71b5d7874dcf8752cd257483e687_mergeImage.png'
-        },
+        // {
+        //   id: '5',
+        //   name: '歌曲表演 大鹿',
+        //   title: '歌曲表演 大鹿',
+        //   type: 'AUDIO',
+        //   content:
+        //     'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1686819360752.mp3',
+        //   url: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/23cc71b5d7874dcf8752cd257483e687_mergeImage.png'
+        // },
         {
           id: '1',
           name: '歌曲表演 大鹿',
@@ -610,7 +620,9 @@ export default defineComponent({
           <div class={styles.menu}>{popupData.itemName}</div>
         </div> */}
         {/* 布置作业按钮 */}
-        <div class={styles.assignHomework}>
+        <div
+          class={styles.assignHomework}
+          onClick={() => (data.modelAttendStatus = true)}>
           <img src={iconAssignHomework} />
         </div>
 
@@ -664,6 +676,7 @@ export default defineComponent({
           </div>
         </div>
 
+        {/* 显示列表 */}
         <NDrawer
           v-model:show={popupData.open}
           class={styles.drawerContainer}
@@ -684,9 +697,50 @@ export default defineComponent({
           </NDrawerContent>
         </NDrawer>
 
+        {/* 批注 */}
         {studyData.penShow && (
           <Pen show={studyData.type === 'pen'} close={() => closeStudyTool()} />
         )}
+
+        {/* 布置作业 */}
+        <NModal
+          v-model:show={data.modelAttendStatus}
+          preset="card"
+          class={styles.attendClassModal}
+          title={'课后训练'}>
+          <div class={styles.modelAttendContent}>
+            本节课已设置课后训练，是否布置？
+          </div>
+          <NSpace class={styles.modelAttendBtnGroup}>
+            <NButton
+              type="default"
+              round
+              onClick={() => {
+                // window.close();
+                data.modelAttendStatus = false;
+              }}>
+              暂无布置
+            </NButton>
+            <NButton
+              type="primary"
+              round
+              onClick={() => {
+                data.modelTrainStatus = true;
+                data.modelAttendStatus = false;
+              }}>
+              布置
+            </NButton>
+          </NSpace>
+        </NModal>
+
+        {/* 训练设置 */}
+        <NModal
+          v-model:show={data.modelTrainStatus}
+          preset="card"
+          class={[styles.attendClassModal, styles.trainClassModal]}
+          title={'训练设置'}>
+          <TrainSettings onClose={() => (data.modelTrainStatus = false)} />
+        </NModal>
       </div>
     );
   }

src/views/attend-class/model/train-settings/index.module.less

@@ -0,0 +1,61 @@
+.trainSettings {
+  .trainBtnGroup {
+    padding: 40px 0;
+    justify-content: center !important;
+
+    :global {
+      .n-button {
+        height: 48px !important;
+      }
+    }
+  }
+
+  .searchGroup {
+    display: flex;
+    padding: 26px 40px 0;
+
+    .datetime {
+      margin-left: 40px;
+      display: inline-flex;
+      align-items: center;
+
+      label {
+        font-size: 15px;
+        color: #666666;
+        line-height: 21px;
+      }
+    }
+
+    :global {
+      .n-button {
+        border-radius: 8px;
+        height: 42px;
+        font-size: 17px;
+        font-weight: 600 !important;
+        padding: 0 27px;
+      }
+
+      .n-button--default-type {
+        background: #E8F4FF;
+        color: #0378EC;
+
+        &:not(.n-button--disabled):hover {
+          background: #E8F4FF;
+        }
+
+        .n-button__border {
+          border: 1px solid #198CFE;
+        }
+      }
+
+      .n-input {
+        border-radius: 8px !important;
+      }
+    }
+  }
+
+  .trainList {
+    margin-top: 28px;
+    max-height: 50vh;
+  }
+}

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

@@ -0,0 +1,39 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { NButton, NDatePicker, NEmpty, NScrollbar, NSpace } from 'naive-ui';
+
+export default defineComponent({
+  name: 'train-settings',
+  emits: ['close'],
+  setup(props, { emit }) {
+    return () => (
+      <div class={styles.trainSettings}>
+        <div class={styles.searchGroup}>
+          <NButton>添加训练</NButton>
+
+          <div class={styles.datetime}>
+            <label>截止时间：</label>
+            <NDatePicker
+              style={{ width: '200px' }}
+              value-format="yyyy-MM-dd"
+              type="date"
+              clearable
+              placeholder="请选择截止日期"
+            />
+          </div>
+        </div>
+        <NScrollbar class={styles.trainList}>
+          <NEmpty description="暂无训练" />
+        </NScrollbar>
+        <NSpace class={styles.trainBtnGroup}>
+          <NButton type="default" round onClick={() => emit('close')}>
+            取消布置
+          </NButton>
+          <NButton type="primary" round>
+            立即布置
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});