添加上下切换动画

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

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, toRefs } from 'vue';
+import { defineComponent, reactive, toRefs, watch } from 'vue';
 import styles from './chapter.module.less';
 import iconMenuChapter from '../image/icon-menu-chapter.svg';
 import { Collapse, CollapseItem, Icon, Image, showToast } from 'vant';
@@ -29,6 +29,14 @@ export default defineComponent({
     const pointData = reactive({
       active: active.value
     });
+
+    watch(
+      () => props.itemActive,
+      () => {
+        // console.log(itemActive.value, active.value, detail.value, 'active');
+        pointData.active = active.value;
+      }
+    );
     return () => (
       <div class={styles.container}>
         <div class={styles.pointHead}>

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

@@ -21,6 +21,10 @@ export default defineComponent({
     itemActive: {
       type: String,
       default: ''
+    },
+    itemName: {
+      type: String,
+      default: ''
     }
   },
   emits: ['handleSelect'],
@@ -45,11 +49,13 @@ export default defineComponent({
         return props.itemActive == item.id ? iconVideoActive : iconVideo;
       }
     };
+
     return () => (
       <div class={styles.container}>
         <div class={styles.pointHead}>
           <img src={iconMulv} />
-          {route.query.name}
+          {/* {route.query.name} */}
+          {props.itemName}
         </div>
         <div class={styles.content}>
           {props.data.map((item, index: number) => {

src/views/courseware-play/index.tsx

@@ -7,7 +7,8 @@ import {
   onUnmounted,
   ref,
   watch,
-  Transition
+  Transition,
+  computed
 } from 'vue';
 import iconBack from './image/back.svg';
 import styles from './index.module.less';
@@ -39,6 +40,7 @@ import {
 import VideoItem from './component/video-item';
 import Chapter from './component/chapter';
 import { api_lessonCoursewareDetail } from '../courseware-list/api';
+import detail from '../information/help-center/detail';
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -112,6 +114,8 @@ export default defineComponent({
         if (res?.code == 200 && Array.isArray(res?.data?.lessonList)) {
           data.courseDetails = res.data.lessonList || [];
         }
+
+        console.log(data.courseDetails, 'data.courseDetails');
       } catch {
         //
       }
@@ -352,11 +356,187 @@ export default defineComponent({
     };
 
     // 上一个知识点, 下一个知识点
-    const handlePreAndNext = (type: string) => {
+    const handlePreAndNext = async (type: string) => {
       if (type === 'up') {
-        handleSwipeChange(popupData.activeIndex - 1);
+        // 判断上面是否还有章节
+        if (popupData.activeIndex > 0) {
+          handleSwipeChange(popupData.activeIndex - 1);
+          return;
+        }
+
+        // 获取当前是哪个章节
+        let detailIndex = data.courseDetails.findIndex(
+          (item: any) => item.id == activeData.lessonCoursewareDetailId
+        );
+        const detailItem = data.courseDetails[detailIndex]?.knowledgeList || [];
+        let lessonIndex = detailItem.findIndex(
+          (item: any) => item.id == activeData.coursewareDetailKnowledgeId
+        );
+
+        let lessonStatus = false; // 当前章节上面是否有内容
+        let lessonCoursewareDetailId = '';
+        let coursewareDetailKnowledgeId = '';
+        let coursewareDetailKnowledgeName = '';
+        while (lessonIndex >= 0) {
+          lessonIndex--;
+
+          if (lessonIndex >= 0) {
+            if (detailItem[lessonIndex].containMaterial) {
+              lessonStatus = true;
+              lessonCoursewareDetailId =
+                detailItem[lessonIndex].lessonCoursewareDetailId;
+              coursewareDetailKnowledgeId = detailItem[lessonIndex].id;
+              coursewareDetailKnowledgeName = detailItem[lessonIndex].name;
+            }
+          }
+
+          if (lessonStatus) {
+            break;
+          }
+        }
+        // 判断当前章节下面课程是否有内容，否则往上一个章节走
+        if (lessonStatus) {
+          loadingClass.value = true;
+          activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
+          activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
+          await getDetail();
+          popupData.activeIndex = data.itemList.length - 1 || 0;
+          popupData.itemActive =
+            data.knowledgePointList[data.itemList.length - 1]?.id ||
+            data.knowledgePointList[0]?.id;
+          popupData.itemName = coursewareDetailKnowledgeName;
+          popupData.chapterOpen = false;
+          loadingClass.value = false;
+          return;
+        }
+
+        let prevLessonStatus = false;
+        while (detailIndex >= 0) {
+          detailIndex--;
+          const tempDetail =
+            data.courseDetails[detailIndex]?.knowledgeList || [];
+          let tempLessonLength = tempDetail.length;
+          while (tempLessonLength > 0) {
+            if (tempDetail[tempLessonLength - 1].containMaterial) {
+              prevLessonStatus = true;
+              lessonCoursewareDetailId =
+                tempDetail[tempLessonLength - 1].lessonCoursewareDetailId;
+              coursewareDetailKnowledgeId = tempDetail[tempLessonLength - 1].id;
+              coursewareDetailKnowledgeName =
+                tempDetail[tempLessonLength - 1].name;
+            }
+            tempLessonLength--;
+            if (prevLessonStatus) {
+              break;
+            }
+          }
+
+          if (prevLessonStatus) {
+            break;
+          }
+        }
+
+        // 判断当前章节下面课程是否有内容，否则往上一个章节走
+        if (prevLessonStatus) {
+          loadingClass.value = true;
+          activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
+          activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
+          await getDetail();
+          popupData.activeIndex = data.itemList.length - 1 || 0;
+          popupData.itemActive =
+            data.knowledgePointList[data.itemList.length - 1]?.id ||
+            data.knowledgePointList[0]?.id;
+          popupData.itemName = coursewareDetailKnowledgeName;
+          popupData.chapterOpen = false;
+          loadingClass.value = false;
+          return;
+        }
       } else {
-        handleSwipeChange(popupData.activeIndex + 1);
+        if (popupData.activeIndex < data.itemList.length - 1) {
+          handleSwipeChange(popupData.activeIndex + 1);
+          return;
+        }
+
+        // 获取当前是哪个章节
+        let detailIndex = data.courseDetails.findIndex(
+          (item: any) => item.id == activeData.lessonCoursewareDetailId
+        );
+        const detailItem = data.courseDetails[detailIndex]?.knowledgeList || [];
+        let lessonIndex = detailItem.findIndex(
+          (item: any) => item.id == activeData.coursewareDetailKnowledgeId
+        );
+
+        let lessonStatus = false; // 当前章节下面是否有内容
+        let lessonCoursewareDetailId = '';
+        let coursewareDetailKnowledgeId = '';
+        let coursewareDetailKnowledgeName = '';
+        while (lessonIndex < detailItem.length - 1) {
+          lessonIndex++;
+          if (lessonIndex >= 0) {
+            if (detailItem[lessonIndex].containMaterial) {
+              lessonStatus = true;
+              lessonCoursewareDetailId =
+                detailItem[lessonIndex].lessonCoursewareDetailId;
+              coursewareDetailKnowledgeId = detailItem[lessonIndex].id;
+              coursewareDetailKnowledgeName = detailItem[lessonIndex].name;
+            }
+          }
+          if (lessonStatus) {
+            break;
+          }
+        }
+        // 判断当前章节下面课程是否有内容，否则往下一个章节走
+        if (lessonStatus) {
+          loadingClass.value = true;
+          activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
+          activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
+          await getDetail();
+          popupData.activeIndex = 0;
+          popupData.itemActive = data.knowledgePointList[0].id;
+          popupData.itemName = coursewareDetailKnowledgeName;
+          popupData.chapterOpen = false;
+          loadingClass.value = false;
+          return;
+        }
+
+        let nextLessonStatus = false;
+        while (detailIndex <= data.courseDetails.length - 1) {
+          detailIndex++;
+          const tempDetail =
+            data.courseDetails[detailIndex]?.knowledgeList || [];
+          let tempLessonLength = 0;
+          while (tempLessonLength <= tempDetail.length - 1) {
+            if (tempDetail[tempLessonLength].containMaterial) {
+              nextLessonStatus = true;
+              lessonCoursewareDetailId =
+                tempDetail[tempLessonLength].lessonCoursewareDetailId;
+              coursewareDetailKnowledgeId = tempDetail[tempLessonLength].id;
+              coursewareDetailKnowledgeName = tempDetail[tempLessonLength].name;
+            }
+            tempLessonLength++;
+            if (nextLessonStatus) {
+              break;
+            }
+          }
+
+          if (nextLessonStatus) {
+            break;
+          }
+        }
+
+        // 判断当前章节下面课程是否有内容，否则往上一个章节走
+        if (nextLessonStatus) {
+          loadingClass.value = true;
+          activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
+          activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
+          await getDetail();
+          popupData.activeIndex = 0;
+          popupData.itemActive = data.knowledgePointList[0].id;
+          popupData.itemName = coursewareDetailKnowledgeName;
+          popupData.chapterOpen = false;
+          loadingClass.value = false;
+          return;
+        }
       }
     };
 
@@ -364,187 +544,318 @@ export default defineComponent({
     const handleClosePopup = () => {
       // setModelOpen();
     };
+
+    // popupData.activeIndex == 0 && styles.btnsDisabled
+    // popupData.activeIndex == data.itemList.length - 1
+
+    // 是否允许上一页
+    const isUpArrow = computed(() => {
+      /**
+       * 1，判断当前课程中是否处在第一个资源；
+       * 2，判断当前课程是否在当前章节的第一个；
+       * 3，判断当前章节，当前课程上面还没有其它课程，是否有资源；
+       * 4，判断当前章节上面还没有其它章节；
+       * 5，判断上面章节里面课程是否有资源；
+       */
+
+      if (popupData.activeIndex > 0) {
+        return true;
+      }
+
+      // 获取当前是哪个章节
+      let detailIndex = data.courseDetails.findIndex(
+        (item: any) => item.id == activeData.lessonCoursewareDetailId
+      );
+      const detailItem = data.courseDetails[detailIndex]?.knowledgeList || [];
+      let lessonIndex = detailItem.findIndex(
+        (item: any) => item.id == activeData.coursewareDetailKnowledgeId
+      );
+
+      // 说明已经是第一单元，第一课
+      if (detailIndex <= 0 && lessonIndex <= 0) {
+        return false;
+      }
+
+      let lessonStatus = false; // 当前章节上面是否有内容
+      while (lessonIndex >= 0) {
+        lessonIndex--;
+
+        if (lessonIndex >= 0) {
+          if (detailItem[lessonIndex].containMaterial) {
+            lessonStatus = true;
+          }
+        }
+      }
+      // 判断当前章节下面课程是否有内容，否则往上一个章节走
+      if (lessonStatus) {
+        return true;
+      }
+
+      // 已经是第一个章节了
+      if (detailIndex <= 0) {
+        return false;
+      }
+
+      let prevLessonStatus = false;
+      while (detailIndex >= 0) {
+        detailIndex--;
+        const tempDetail = data.courseDetails[detailIndex]?.knowledgeList || [];
+        let tempLessonLength = tempDetail.length;
+        while (tempLessonLength > 0) {
+          if (tempDetail[tempLessonLength - 1].containMaterial) {
+            prevLessonStatus = true;
+          }
+          tempLessonLength--;
+        }
+
+        if (prevLessonStatus) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+
+    // 是否允许下一页
+    const isDownArrow = computed(() => {
+      if (popupData.activeIndex < data.itemList.length - 1) {
+        return true;
+      }
+
+      // 获取当前是哪个章节
+      let detailIndex = data.courseDetails.findIndex(
+        (item: any) => item.id == activeData.lessonCoursewareDetailId
+      );
+      const detailItem = data.courseDetails[detailIndex]?.knowledgeList || [];
+      let lessonIndex = detailItem.findIndex(
+        (item: any) => item.id == activeData.coursewareDetailKnowledgeId
+      );
+
+      // 说明已经是最后-单元，最后一课
+      if (
+        detailIndex >= data.courseDetails.length - 1 &&
+        lessonIndex >= detailItem.length - 1
+      ) {
+        return false;
+      }
+
+      let lessonStatus = false; // 当前章节下面是否有内容
+      while (lessonIndex < detailItem.length - 1) {
+        lessonIndex++;
+        if (lessonIndex >= 0) {
+          if (detailItem[lessonIndex].containMaterial) {
+            lessonStatus = true;
+          }
+        }
+      }
+      // 判断当前章节下面课程是否有内容，否则往下一个章节走
+      if (lessonStatus) {
+        return true;
+      }
+
+      // 已经是最后一个章节了
+      if (detailIndex >= data.courseDetails.length - 1) {
+        return false;
+      }
+
+      let nextLessonStatus = false;
+      while (detailIndex < data.courseDetails.length - 1) {
+        detailIndex++;
+        const tempDetail = data.courseDetails[detailIndex]?.knowledgeList || [];
+        let tempLessonLength = 0;
+        while (tempLessonLength <= tempDetail.length - 1) {
+          if (tempDetail[tempLessonLength].containMaterial) {
+            nextLessonStatus = true;
+          }
+          tempLessonLength++;
+        }
+
+        if (nextLessonStatus) {
+          return true;
+        }
+      }
+
+      return false;
+    });
     return () => (
       <div id="playContent" class={styles.playContent}>
-        {!loadingClass.value && (
-          <div>
-            <div
-              class={styles.coursewarePlay}
-              style={{ width: parentContainer.width }}
-              onClick={() => setModelOpen()}>
-              <div class={styles.wraps}>
-                {data.itemList.map((m: any, mIndex: number) => {
-                  const isRender =
-                    m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2;
-                  const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4;
-                  if (isRender) {
-                    m.isRender = true;
-                  }
-                  return isRender ? (
-                    <div
-                      key={'index' + mIndex}
-                      class={[
-                        styles.itemDiv,
-                        popupData.activeIndex === mIndex && styles.itemActive,
-                        activeData.isAnimation && styles.acitveAnimation,
-                        Math.abs(popupData.activeIndex - mIndex) < 2
-                          ? styles.show
-                          : styles.hide
-                      ]}
-                      style={
-                        mIndex < popupData.activeIndex
-                          ? effects[effectIndex.value].prev
-                          : mIndex > popupData.activeIndex
-                          ? effects[effectIndex.value].next
-                          : {}
-                      }
-                      onClick={(e: Event) => {
-                        if (Date.now() - activeData.nowTime < 300) {
-                          handleDbClick(m);
-                          return;
-                        }
-                        activeData.nowTime = Date.now();
-                      }}>
-                      {m.type === 'IMG' && <img src={m.content} />}
-                      {m.type === 'VIDEO' && (
-                        <VideoItem
-                          ref={(v: any) => (data.videoRefs[mIndex] = v)}
-                          item={m}
-                          show={popupData.activeIndex === mIndex}
-                          pageVisibility={pageVisibility.value}
-                          showModel={activeData.model}
-                          isEmtry={isEmtry}
-                          onLoadedmetadata={() => {
-                            m.isprepare = true;
-                            m.error = false;
-                          }}
-                          onEnded={() => {
-                            const _index = popupData.activeIndex + 1;
-                            if (_index < data.itemList.length) {
-                              handleSwipeChange(_index);
-                            }
-                          }}
-                          onReset={() => {
-                            m.error = false;
-                          }}
-                          onError={() => {
-                            m.isprepare = true;
-                            m.error = true;
-                          }}
-                        />
-                      )}
-                      {m.type === 'SONG' && (
-                        <AudioItem
-                          item={m}
-                          show={popupData.activeIndex === mIndex}
-                          pageVisibility={pageVisibility.value}
-                          showModel={activeData.model}
-                          isEmtry={isEmtry}
-                          onEnded={() => {
-                            const _index = popupData.activeIndex + 1;
-                            if (_index < data.itemList.length) {
-                              handleSwipeChange(_index);
-                            }
-                          }}
-                          onClose={() => {
-                            clearTimeout(activeData.timer);
-                            activeData.timer = setTimeout(() => {
-                              activeData.model = false;
-                            }, 4000);
-                          }}
-                        />
-                      )}
-                      {m.type === 'MUSIC' && (
-                        <MusicScore
-                          pageVisibility={pageVisibility.value}
-                          show={popupData.activeIndex === mIndex}
-                          activeModel={activeData.model}
-                          data-vid={m.id}
-                          music={m}
-                        />
-                      )}
-
-                      {m.type === 'VIDEO' && (
-                        <Transition name="van-fade">
-                          {!m.isprepare && (
-                            <div class={styles.loadWrap}>
-                              <Vue3Lottie
-                                style={{ width: '100%', height: '100%' }}
-                                animationData={playLoadData}></Vue3Lottie>
-                            </div>
-                          )}
-                        </Transition>
-                      )}
-                    </div>
-                  ) : (
-                    <div
-                      key={'index' + mIndex}
-                      class={[
-                        styles.itemDiv,
-                        popupData.activeIndex === mIndex && styles.itemActive,
-                        activeData.isAnimation && styles.acitveAnimation,
-                        Math.abs(popupData.activeIndex - mIndex) < 2
-                          ? styles.show
-                          : styles.hide
-                      ]}
-                      style={
-                        mIndex < popupData.activeIndex
-                          ? effects[effectIndex.value].prev
-                          : mIndex > popupData.activeIndex
-                          ? effects[effectIndex.value].next
-                          : {}
-                      }></div>
-                  );
-                })}
-              </div>
-              <Transition name="right">
-                {activeData.model && (
+        <div
+          class={styles.coursewarePlay}
+          style={{ width: parentContainer.width }}
+          onClick={() => setModelOpen()}>
+          {!loadingClass.value && (
+            <div class={styles.wraps}>
+              {data.itemList.map((m: any, mIndex: number) => {
+                const isRender =
+                  m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2;
+                const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4;
+                if (isRender) {
+                  m.isRender = true;
+                }
+                return isRender ? (
                   <div
-                    class={styles.rightFixedBtns}
+                    key={'index' + mIndex}
+                    class={[
+                      styles.itemDiv,
+                      popupData.activeIndex === mIndex && styles.itemActive,
+                      activeData.isAnimation && styles.acitveAnimation,
+                      Math.abs(popupData.activeIndex - mIndex) < 2
+                        ? styles.show
+                        : styles.hide
+                    ]}
+                    style={
+                      mIndex < popupData.activeIndex
+                        ? effects[effectIndex.value].prev
+                        : mIndex > popupData.activeIndex
+                        ? effects[effectIndex.value].next
+                        : {}
+                    }
                     onClick={(e: Event) => {
-                      e.stopPropagation();
-                      clearTimeout(activeData.timer);
+                      if (Date.now() - activeData.nowTime < 300) {
+                        handleDbClick(m);
+                        return;
+                      }
+                      activeData.nowTime = Date.now();
                     }}>
-                    <div
-                      class={[styles.fullBtn, styles.point]}
-                      onClick={() => (popupData.chapterOpen = true)}>
-                      <img src={iconChange} />
-                      <span>切换</span>
-                    </div>
-
-                    <div
-                      class={[styles.fullBtn, styles.point]}
-                      onClick={() => (popupData.open = true)}>
-                      <img src={iconMenu} />
-                      <span>课件</span>
-                    </div>
-
-                    <div
-                      class={[
-                        styles.fullBtn,
-                        popupData.activeIndex == 0 && styles.btnsDisabled
-                      ]}
-                      onClick={() => handlePreAndNext('up')}>
-                      <img src={iconUp} />
-                      <span style={{ textAlign: 'center' }}>上一个</span>
-                    </div>
-
-                    <div
-                      class={[
-                        styles.fullBtn,
-                        popupData.activeIndex == data.itemList.length - 1 &&
-                          styles.btnsDisabled
-                      ]}
-                      onClick={() => handlePreAndNext('down')}>
-                      <span style={{ textAlign: 'center' }}>下一个</span>
-                      <img src={iconDown} />
-                    </div>
+                    {m.type === 'IMG' && <img src={m.content} />}
+                    {m.type === 'VIDEO' && (
+                      <VideoItem
+                        ref={(v: any) => (data.videoRefs[mIndex] = v)}
+                        item={m}
+                        show={popupData.activeIndex === mIndex}
+                        pageVisibility={pageVisibility.value}
+                        showModel={activeData.model}
+                        isEmtry={isEmtry}
+                        onLoadedmetadata={() => {
+                          m.isprepare = true;
+                          m.error = false;
+                        }}
+                        onEnded={() => {
+                          const _index = popupData.activeIndex + 1;
+                          if (_index < data.itemList.length) {
+                            handleSwipeChange(_index);
+                          }
+                        }}
+                        onReset={() => {
+                          m.error = false;
+                        }}
+                        onError={() => {
+                          m.isprepare = true;
+                          m.error = true;
+                        }}
+                      />
+                    )}
+                    {m.type === 'SONG' && (
+                      <AudioItem
+                        item={m}
+                        show={popupData.activeIndex === mIndex}
+                        pageVisibility={pageVisibility.value}
+                        showModel={activeData.model}
+                        isEmtry={isEmtry}
+                        onEnded={() => {
+                          const _index = popupData.activeIndex + 1;
+                          if (_index < data.itemList.length) {
+                            handleSwipeChange(_index);
+                          }
+                        }}
+                        onClose={() => {
+                          clearTimeout(activeData.timer);
+                          activeData.timer = setTimeout(() => {
+                            activeData.model = false;
+                          }, 4000);
+                        }}
+                      />
+                    )}
+                    {m.type === 'MUSIC' && (
+                      <MusicScore
+                        pageVisibility={pageVisibility.value}
+                        show={popupData.activeIndex === mIndex}
+                        activeModel={activeData.model}
+                        data-vid={m.id}
+                        music={m}
+                      />
+                    )}
+
+                    {m.type === 'VIDEO' && (
+                      <Transition name="van-fade">
+                        {!m.isprepare && (
+                          <div class={styles.loadWrap}>
+                            <Vue3Lottie
+                              style={{ width: '100%', height: '100%' }}
+                              animationData={playLoadData}></Vue3Lottie>
+                          </div>
+                        )}
+                      </Transition>
+                    )}
                   </div>
-                )}
-              </Transition>
+                ) : (
+                  <div
+                    key={'index' + mIndex}
+                    class={[
+                      styles.itemDiv,
+                      popupData.activeIndex === mIndex && styles.itemActive,
+                      activeData.isAnimation && styles.acitveAnimation,
+                      Math.abs(popupData.activeIndex - mIndex) < 2
+                        ? styles.show
+                        : styles.hide
+                    ]}
+                    style={
+                      mIndex < popupData.activeIndex
+                        ? effects[effectIndex.value].prev
+                        : mIndex > popupData.activeIndex
+                        ? effects[effectIndex.value].next
+                        : {}
+                    }></div>
+                );
+              })}
             </div>
-          </div>
-        )}
+          )}
+          <Transition name="right">
+            {activeData.model && (
+              <div
+                class={styles.rightFixedBtns}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  clearTimeout(activeData.timer);
+                }}>
+                <div
+                  class={[styles.fullBtn, styles.point]}
+                  onClick={() => (popupData.chapterOpen = true)}>
+                  <img src={iconChange} />
+                  <span>切换</span>
+                </div>
+
+                <div
+                  class={[styles.fullBtn, styles.point]}
+                  onClick={() => (popupData.open = true)}>
+                  <img src={iconMenu} />
+                  <span>课件</span>
+                </div>
+
+                <div
+                  class={[
+                    styles.fullBtn,
+                    // popupData.activeIndex == 0 && styles.btnsDisabled
+                    !isUpArrow.value && styles.btnsDisabled
+                  ]}
+                  onClick={() => handlePreAndNext('up')}>
+                  <img src={iconUp} />
+                  <span style={{ textAlign: 'center' }}>上一个</span>
+                </div>
+
+                <div
+                  class={[
+                    styles.fullBtn,
+                    !isDownArrow.value && styles.btnsDisabled
+                  ]}
+                  onClick={() => handlePreAndNext('down')}>
+                  <span style={{ textAlign: 'center' }}>下一个</span>
+                  <img src={iconDown} />
+                </div>
+              </div>
+            )}
+          </Transition>
+        </div>
 
         <div
           style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
@@ -556,7 +867,6 @@ export default defineComponent({
           </div>
           <div class={styles.menu}>{popupData.itemName}</div>
         </div>
-
         {/* 课件列表 */}
         <Popup
           class={styles.popup}
@@ -569,13 +879,13 @@ export default defineComponent({
           <Points
             data={data.knowledgePointList}
             itemActive={popupData.itemActive}
+            itemName={popupData.itemName}
             onHandleSelect={(res: any) => {
               popupData.open = false;
               toggleMaterial(res.itemActive);
             }}
           />
         </Popup>
-
         {/* 知识点列表 */}
         <Popup
           class={styles.popup}
@@ -590,13 +900,12 @@ export default defineComponent({
             itemActive={activeData.coursewareDetailKnowledgeId as any}
             active={activeData.lessonCoursewareDetailId as any}
             onHandleSelect={async (item: any) => {
-              console.log(item, 'item');
               loadingClass.value = true;
               activeData.coursewareDetailKnowledgeId = item.itemActive;
               activeData.lessonCoursewareDetailId = item.tabActive;
               await getDetail();
               popupData.activeIndex = 0;
-              popupData.itemActive = item.itemActive;
+              popupData.itemActive = data.knowledgePointList[0].id;
               popupData.itemName = item.itemName;
               popupData.chapterOpen = false;
               loadingClass.value = false;