feat: 课件修改

src/components/select-courseware-pop/index.tsx

@@ -9,6 +9,10 @@ export default defineComponent({
     list: {
       type: Array,
       default: () => []
+    },
+    kjId: {
+      type: String,
+      default: '',
     }
   },
   emits: ['close', 'select'],
@@ -18,10 +22,15 @@ export default defineComponent({
     });
     const selectItem = (item: any, index: any) => {
       data.actIdx = index
-      setTimeout(() => {
+      if (props.kjId) {
         emit('select', item)
         data.actIdx = null
-      }, 300);
+      } else {
+        setTimeout(() => {
+          emit('select', item)
+          data.actIdx = null
+        }, 300);
+      }
     }
     return () => (
       <div class={styles.popBox} 
@@ -36,7 +45,7 @@ export default defineComponent({
           <ul class={styles.list}>
             {props.list.map((item: any, index: number) => {
               return (
-                <li class={data.actIdx === index ? styles.active : ''} onClick={() => selectItem(item, index)}>{item.name}</li>
+                <li class={(data.actIdx === index || props.kjId === item.id) ? styles.active : ''} onClick={() => selectItem(item, index)}>{item.name}</li>
               );
             })}
           </ul>

src/views/courseware-list/component/book/index.tsx

@@ -353,19 +353,19 @@ export default defineComponent({
             c_orientation: 0 // 0 横屏 1 竖屏
           }
         });
-        // router.push({
-        //   path: '/courseware-play',
-        //   query: {
-        //     id: item.id,
-        //     subjectId: props.subjectId,
-        //     lessonCoursewareId: item.lessonCoursewareId,
-        //     courseId: props.bookData.id,
-        //     lessonCoursewareDetailId: item.lessonCoursewareDetailId,
-        //     name: item.zjName,
-        //     tab: props.tab,
-        //     coursewareDetailKnowledgeId: item.coursewareDetailKnowledgeId
-        //   }
-        // });
+        router.push({
+          path: '/courseware-play',
+          query: {
+            id: item.id,
+            subjectId: props.subjectId,
+            lessonCoursewareId: item.lessonCoursewareId,
+            courseId: props.bookData.id,
+            lessonCoursewareDetailId: item.lessonCoursewareDetailId,
+            name: item.zjName,
+            tab: props.tab,
+            coursewareDetailKnowledgeId: item.coursewareDetailKnowledgeId
+          }
+        });
         debounceSkip.value = false;
       }
     };

src/views/courseware-play/component/chapter.module.less

@@ -83,7 +83,7 @@
   }
 
   .activeItem {
-    background: #ECF8FF;
+    background: #F5F6FA;
     border-radius: 9px;
 
     :global {

src/views/courseware-play/component/point.module.less

@@ -12,15 +12,15 @@
 
 .pointHead {
   display: flex;
-  padding: 16px 10px 12px 13px;
+  padding: 16px 10px 12px 12px;
   flex-shrink: 0;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
 
   img {
-    width: 16px;
-    height: 16px;
-    margin-right: 7px;
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
     margin-top: 4px;
   }
 }
@@ -29,23 +29,12 @@
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 7px;
+  padding: 0 12px;
 
   &::-webkit-scrollbar {
     width: 0;
     display: none;
   }
-  .collapseKnow:first-child {
-    &::before {
-      content: "";
-      position: absolute;
-      left: 5px;
-      top: 10px;
-      width: calc(100% - 10px);
-      height: 1px;
-      background: #D5E2EA;
-    }
-  }
   .collapseKnow:nth-of-type(n+2) {
     padding-top: 2px !important;
   }
@@ -55,11 +44,11 @@
   border-radius: 6px;
   border: 1px solid #C2DBE2;
   background: linear-gradient(360deg, #F2F4F5 0%, #E7F9FF 100%);
-  margin-bottom: 15px;
+  margin: 0 15px 15px;
   overflow: hidden;
 
   .cover {
-    height: 108px;
+    height: 102px;
     background: #fff;
     overflow: hidden;
 
@@ -77,7 +66,12 @@
     font-weight: 400;
     color: #131415;
     line-height: 16px;
-
+    background: #E7F9FF;
+    .typeImg {
+      width: 13px;
+      height: 13px;
+      margin-right: 4px;
+    }
     .tag {
       padding: 4px 10px;
       border-radius: 4px;
@@ -115,6 +109,38 @@
   }
 }
 
+.kjColumn {
+  margin: 0 12px;
+  padding: 10px 12px;
+  border-top: 1px solid #F2F2F2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .kjLeft {
+    display: flex;
+    align-items: center;
+    overflow-x: hidden;
+    img {
+      width: 13px;
+      height: 17px;
+    }
+    span {
+      flex: 1;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 14px;
+      color: #333333;
+      font-weight: 500;
+      margin: 4px;
+    }
+  }
+  .kjRight {
+    width: 24px;
+    height: 24px;
+  }
+}
+
 .collapse {
 
   .collapseItem {
@@ -122,7 +148,7 @@
   }
 
   .collapseKnow {
-    padding: 20px 12px 0 18px;
+    padding: 12px 12px 0 12px;
     position: relative;
     :global {
       .van-cell {
@@ -189,7 +215,7 @@
     }
   }
   .activeItem2 {
-    background: #ECF8FF;
+    background: #F5F6FA;
     border-radius: 9px;
 
     :global {

src/views/courseware-play/component/points.tsx

@@ -11,6 +11,15 @@ import iconSongActive from '../image/icon-song-active.svg';
 import chapterDown from '../image/chapter-down-arrow.svg';
 import chapterDefault from '../image/chapter-default-arrow.svg';
 import chapterDefault2 from '../image/chapter-default-arrow2.svg';
+import moreIcon from '../image/zy_toggle_icon.png';
+import titleIcon from '../image/zy_title_icon.png';
+import songIcon from '../image/song_icon.png';
+import audioIcon from '../image/zy_audio_icon.png';
+import vedioIcon from '../image/zy_vedio_icon.png';
+import pptIcon from '../image/zy_ppt_icon.png';
+import imgIcon from '../image/zy_img_icon.png';
+import otherIcon from '../image/zy_more_icon.png';
+
 
 import { Icon, Collapse, CollapseItem } from 'vant';
 import { useRoute } from 'vue-router';
@@ -29,6 +38,10 @@ export default defineComponent({
       type: String,
       default: ''
     },
+    currentCourse: { // 当前的课件
+      type: Object,
+      default: {}
+    },
     popShow: {
       type: Boolean,
       default: false
@@ -46,7 +59,7 @@ export default defineComponent({
       default: ''
     }
   },
-  emits: ['handleSelect'],
+  emits: ['handleSelect', 'courseSelect'],
   setup(props, { emit }) {
     const route = useRoute();
     // 类型（VIDEO,IMG,SONG，PPT,MUSIC，LISTEN:听音,RHYTHM：节奏,THEORY：乐理知识,MUSIC_WIKI:名曲鉴赏 INSTRUMENT:乐器 MUSICIAN:音乐家）,可用值:VIDEO,MUSIC,IMG,SONG,PPT,LISTEN,RHYTHM,THEORY,MUSIC_WIKI,INSTRUMENT,MUSICIAN
@@ -63,7 +76,19 @@ export default defineComponent({
       INSTRUMENT: '乐器',
       MUSICIAN: '音乐家',
     };
-
+    const imgTypes: { [_: string]: string } = {
+      SONG: audioIcon,
+      VIDEO: vedioIcon,
+      IMG: imgIcon,
+      MUSIC: songIcon,
+      PPT: pptIcon,
+      LISTEN: otherIcon,
+      RHYTHM: otherIcon,
+      THEORY: otherIcon,
+      MUSIC_WIKI: otherIcon,
+      INSTRUMENT: otherIcon,
+      MUSICIAN: otherIcon,
+    };
     // 获取对应图片
     const getImage = (item: any) => {
       if (item.type === 'VIDEO') {
@@ -78,9 +103,10 @@ export default defineComponent({
     };
     
     const pointData = reactive({
-      allList: props.allList,
+      allList: props.allList, // 章节下的所有课件
       kjId: props.kjId, // 当前选中的课件id
       zsdId: props.zsdId, // 当前选中的知识点id
+      currentCourse: props.currentCourse as any, // 当前课件
     });
     watch(
       () => props.allList,
@@ -92,7 +118,8 @@ export default defineComponent({
     watch(
       () => props.popShow,
       () => {
-        // console.log('刷新123')
+        console.log('刷新123',props.allList,props.currentCourse)
+        pointData.currentCourse = props.currentCourse
         pointData.kjId = props.kjId
         pointData.zsdId = props.zsdId
       }
@@ -103,8 +130,91 @@ export default defineComponent({
           <img src={iconMulv} />
           {props.itemName}
         </div>
+        <div class={styles.kjColumn}>
+          <div class={styles.kjLeft}>
+            <img src={titleIcon} />
+            <span>{pointData.currentCourse?.name}</span>
+          </div>
+          {
+            pointData.allList?.length > 1 && 
+            <img class={styles.kjRight} src={moreIcon}
+              onClick={() => {
+                console.log(pointData.allList)
+                emit('courseSelect')
+              }}
+            />
+          }
+        </div>        
         <div class={styles.content}>
-          {props.allList.length && 
+          <Collapse
+            class={styles.collapse}
+            modelValue={pointData.zsdId}
+            onUpdate:modelValue={(val: any) => {
+              pointData.zsdId = val;
+            }}
+            border={false}
+            accordion>
+            {pointData.currentCourse?.knowledgeList?.map((know: any) => (
+              <CollapseItem
+                center
+                class={[
+                  styles.collapseItem,
+                  styles.collapseKnow,
+                  pointData.zsdId === know.id ? styles.activeItem2 : ''
+                ]}
+                border={false}
+                isLink={false}
+                title={know.name}
+                titleClass={'van-ellipsis'}
+                titleStyle={{ width: '80%' }}
+                name={know.id}>
+                {{
+                  default: () => (
+                    <>
+                      {know.materialInfo.map((material: any, index: number) => {
+                        return (
+                          <div
+                            class={[
+                              styles.matItem,
+                              props.itemActive == material.id ? styles.itemActive : ''
+                            ]}
+                            onClick={() => {
+                              console.log(pointData.allList)
+                              emit('handleSelect', {
+                                itemActive: material.id,
+                                zsdId: know.id,
+                                kjId: pointData.currentCourse?.id
+                              });
+                            }}>
+                            <div class={styles.cover}>
+                              <img src={material.url} />
+                            </div>
+                            <div class={styles.title}>
+                              {/* <div class={styles.tag}>{types[material.type]}</div> */}
+                              <img class={styles.typeImg} src={imgTypes[material.type]} />
+                              <div class={styles.tName}>{material.name}</div>
+                            </div>
+                          </div>
+                        );
+                      })}                                    
+                    </>
+                  ),
+                  icon: () => (
+                    <img
+                      class={styles.arrow}
+                      src={
+                        pointData.zsdId === know.id
+                          ? chapterDown
+                          : chapterDefault
+                      }
+                    />
+                  )
+                }}
+              </CollapseItem>
+            ))}
+          </Collapse>
+          
+          {/* {props.allList.length && 
             <Collapse
             class={styles.collapse}
             modelValue={pointData.kjId}
@@ -209,7 +319,7 @@ export default defineComponent({
               </CollapseItem>
             ))}
             </Collapse>          
-          }
+          } */}
 
 
           {/* {props.data.map((item, index: number) => {

src/views/courseware-play/index.tsx

@@ -154,6 +154,7 @@ export default defineComponent({
     const data = reactive({
       allList: [] as any, // 所选章节下的所有课件列表
       kjId: route.query.id as string, // 所选的课件id
+      currentCourse: {} as any, // 当前选中的课件
       zsdId: '' as string, // 知识点id
       knowledgePointList: [] as any, //所选课件，所选知识点下所有的资源列表
       courseDetails: [] as any,
@@ -226,6 +227,7 @@ export default defineComponent({
           );
           data.zsdId = currentCourse?.knowledgeList?.[0].id;
           courseList = currentCourse?.knowledgeList?.[0].materialInfo || [];
+          data.currentCourse = currentCourse || {}
         }
       } else {
         // const res = await api_lessonCoursewareKnowledgeDetailDetail({
@@ -244,6 +246,7 @@ export default defineComponent({
           );
           data.zsdId = currentCourse?.knowledgeList?.[0].id;
           courseList = currentCourse?.knowledgeList?.[0].materialInfo || [];
+          data.currentCourse = currentCourse || {}
           // console.log('课件类型', data.allList);
         }
       }
@@ -286,7 +289,27 @@ export default defineComponent({
         });
       });
 
-      data.itemList = allResource.map((m: any, index: number) => {
+      // 当前章节下，所选的课件所有资源列表
+      let allKjResource: any = [];
+      data.currentCourse?.knowledgeList?.forEach((material: any) => {
+        material.materialInfo.forEach((resource: any) => {
+          resource.zsdId = material.id; // 知识点id
+          resource.kjId = data.currentCourse.id; // 课件id
+          resource.bizId =
+            route.query.tab == 'course'
+              ? resource.materialId
+              : resource.bizId;
+          resource.url =
+            resource.type === 'SONG'
+              ? 'https://oss.dayaedu.com/ktqy/1698420034679a22d3f7a.png'
+              : resource.type === 'PPT'
+              ? 'https://oss.dayaedu.com/ktqy/12/1701931810284.png'
+              : resource.coverImg;
+        });
+        allKjResource = allKjResource.concat(material.materialInfo);
+      });
+
+      data.itemList = allKjResource.map((m: any, index: number) => {
         if (!popupData.itemActive) {
           popupData.itemActive = m.id;
           popupData.itemName = m.name;
@@ -307,7 +330,7 @@ export default defineComponent({
         handleSwipeChange(resourceIndex);
       }, 0);
 
-      // console.log('资源', data.itemList, resourceIndex);
+      console.log('资源', data.itemList, resourceIndex);
       setTimeout(() => {
         data.animationState = 'end';
       }, 500);
@@ -884,6 +907,10 @@ export default defineComponent({
 
     // 加载新的章节里的课件
     const loadNewCourseware = async (item: any) => {
+      if(item.id === data.kjId) {
+        showSelectCourseware.value = false;
+        return
+      }
       if (debounceSkip.value) return;
       debounceSkip.value = true;
       data.itemList = [];
@@ -922,17 +949,20 @@ export default defineComponent({
       debounceSkip.value = false;
     };
     // 通过章节id，检测此章节有几个课件
-    const checkCourseware = async (item: any) => {
+    const checkCourseware = async (item: any, checkType?: any) => {
       // 如果有多个课件，需要选择一个课件进入上课页面
-      if (item.coursewareNum) {
+      if (item.coursewareNum || checkType) {
         try {
+          if (checkType) {
+            temporaryData.zjId = activeData.coursewareDetailKnowledgeId
+          }
           const res =
             route.query.tab == 'all'
               ? await api_lessonDetailCourseware({
-                  lessonCoursewareKnowledgeDetailId: item.itemActive
+                  lessonCoursewareKnowledgeDetailId: checkType ? activeData.coursewareDetailKnowledgeId : item.itemActive
                 })
               : await api_classDetailCourseware({
-                  lessonCoursewareKnowledgeDetailId: item.itemActive
+                  lessonCoursewareKnowledgeDetailId: checkType ? activeData.coursewareDetailKnowledgeId : item.itemActive
                 });
           if (res?.code == 200 && res.data?.length) {
             data.coursewareList = res.data;
@@ -1252,6 +1282,7 @@ export default defineComponent({
           onClose={handleClosePopup}>
           <Points
             allList={data.allList}
+            currentCourse={data.currentCourse}
             data={data.knowledgePointList}
             itemActive={popupData.itemActive}
             itemName={popupData.itemPointName}
@@ -1262,6 +1293,10 @@ export default defineComponent({
               popupData.open = false;
               toggleMaterial(res.itemActive, res.zsdId, res.kjId);
             }}
+            onCourseSelect={ async () => {
+              popupData.open = false;
+              checkCourseware({}, 'same')
+            }}            
           />
         </Popup>
         {/* 知识点列表 */}
@@ -1288,6 +1323,7 @@ export default defineComponent({
         {showSelectCourseware.value && (
           <SelectCoursewarePop
             list={data.coursewareList}
+            kjId={data.kjId}
             onClose={() => {
               showSelectCourseware.value = false;
             }}