更新

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

@@ -54,7 +54,6 @@ export default defineComponent({
       <div class={styles.container}>
         <div class={styles.pointHead}>
           <img src={iconMulv} />
-          {/* {route.query.name} */}
           {props.itemName}
         </div>
         <div class={styles.content}>

src/views/knowledge-library/examination-mode/index.tsx

@@ -30,6 +30,8 @@ import request from '@/helpers/request';
 import { CurrentTime, useCountDown, useRect } from '@vant/use';
 import MHeader from '@/components/m-header';
 import { useEventListener, useWindowScroll } from '@vueuse/core';
+import { browser } from '@/helpers/utils';
+import { postMessage } from '@/helpers/native-message';
 
 export default defineComponent({
   name: 'unit-detail',
@@ -352,7 +354,11 @@ export default defineComponent({
 
     const onAfter = () => {
       window.removeEventListener('popstate', onBack, false);
-      router.back();
+      if (browser().isApp && state.type !== 'ai') {
+        postMessage({ api: 'back' });
+      } else {
+        router.back();
+      }
     };
 
     onMounted(async () => {

src/views/knowledge-library/index.module.less

@@ -1,6 +1,6 @@
 .knowledgeLibrary {
   min-height: 100vh;
-  background: url('./images/bg.png') no-repeat top center;
+  background: url('./images/bg.png') no-repeat top center #87d1f0;
   background-size: contain;
   position: relative;
 
@@ -47,7 +47,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 60px 0 20px;
+
 
   .btnPractice,
   .btnTest {
@@ -183,4 +183,41 @@
     width: 100%;
     max-height: 154px;
   }
+}
+
+.stickBtnGroup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
+
+  &.stickHide {
+    opacity: 0;
+    transition: opacity .2s ease;
+  }
+
+  .prevBtn,
+  .nextBtn {
+    width: 124px;
+    height: 49px;
+    border: none;
+    margin: 0 10px;
+  }
+
+  .prevBtn {
+    background: url('./images/icon-up-point.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .nextBtn {
+    background: url('./images/icon-down-point.png') no-repeat center;
+    background-size: contain;
+  }
+
+  :global {
+    .van-button--disabled::before {
+      background-color: #fff;
+      opacity: 0.3;
+    }
+  }
 }

src/views/knowledge-library/practice-mode/index.tsx

@@ -32,6 +32,8 @@ import request from '@/helpers/request';
 import { useRect } from '@vant/use';
 import MHeader from '@/components/m-header';
 import { useEventListener, useInterval, useWindowScroll } from '@vueuse/core';
+import { browser } from '@/helpers/utils';
+import { postMessage } from '@/helpers/native-message';
 
 export default defineComponent({
   name: 'unit-detail',
@@ -324,7 +326,11 @@ export default defineComponent({
 
     const onAfter = () => {
       window.removeEventListener('popstate', onBack, false);
-      router.back();
+      if (browser().isApp) {
+        postMessage({ api: 'back' });
+      } else {
+        router.back();
+      }
     };
 
     onMounted(async () => {

src/views/knowledge-library/unit-detail.tsx

@@ -1,20 +1,26 @@
 import MHeader from '@/components/m-header';
 import MSticky from '@/components/m-sticky';
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
 import styles from './index.module.less';
 import { useRoute, useRouter } from 'vue-router';
 import request from '@/helpers/request';
-import Moveable from 'moveable';
-import { useEventListener, useWindowScroll } from '@vueuse/core';
-// import iconExamQuestion from './images/icon-exam-question.png';
+import { useEventListener, useScroll, useWindowScroll } from '@vueuse/core';
 import MEmpty from '@/components/m-empty';
-import { showToast } from 'vant';
+import { Button, showToast } from 'vant';
+import { browser } from '@/helpers/utils';
 
 export default defineComponent({
   name: 'unit-detail',
   setup() {
-    const router = useRouter();
     const route = useRoute();
+    const { isScrolling } = useScroll(document, { behavior: 'smooth' });
 
     const forms = reactive({
       detailId: route.query.detailId,
@@ -22,9 +28,24 @@ export default defineComponent({
       background: 'transparent',
       color: '#fff',
       dataInfo: {} as any,
-      title: ' '
+      title: ' ',
+      listKnowledge: [] as any,
+      prevDetailId: '',
+      nextDetailId: '',
+      scrollingStatus: false
     });
 
+    watch(
+      () => isScrolling.value,
+      () => {
+        let timer;
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          forms.scrollingStatus = isScrolling.value;
+        }, 100);
+      }
+    );
+
     const getList = async () => {
       forms.loading = true;
       try {
@@ -39,111 +60,180 @@ export default defineComponent({
       forms.loading = false;
     };
 
-    const onGotoModel = async () => {
+    const getPointList = async () => {
       try {
-        const { data } = await request.get(
-          '/edu-app/studentUnitExamination/checkKnowledgePointIds',
+        const params: any = {
+          lessonCoursewareId: route.query.lessonCoursewareId
+        };
+        if (browser().ios) {
+          params.platform = 'iOS-STUDENT';
+          params.verson = route.query.verson || '1.0.8';
+        }
+        const { data } = await request.post(
+          '/edu-app/lessonCoursewareDetail/listKnowledge',
           {
-            params: {
-              knowledgePointIds: forms.dataInfo.knowledgePointIds
-            }
+            data: params
           }
         );
-        if (data) {
-          router.push({
-            path: '/practice-mode',
-            query: { knowledgePointIds: forms.dataInfo.knowledgePointIds }
-          });
-        } else {
-          setTimeout(() => {
-            showToast('暂无题目');
-          }, 100);
-          return;
-        }
-      } catch (e) {
+
+        forms.listKnowledge = data || [];
+      } catch {
         //
-        console.log(e);
       }
     };
 
-    const __initMove = () => {
-      const moveable = new Moveable(document.body, {
-        target: document.querySelector('#iconExamQuestion') as any,
-        // If the container is null, the position is fixed. (default: parentElement(document.body))
-        container: document.body,
-        draggable: true,
-        resizable: false,
-        scalable: false,
-        rotatable: false,
-        warpable: false,
-        // Enabling pinchable lets you use events that
-        // can be used in draggable, resizable, scalable, and rotateable.
-        pinchable: false, // ["resizable", "scalable", "rotatable"]
-        origin: false,
-        keepRatio: false,
-        // Resize, Scale Events at edges.
-        edge: false,
-        throttleDrag: 0,
-        throttleResize: 0,
-        throttleScale: 0,
-        throttleRotate: 0
-      });
-      console.log(moveable);
-      moveable
-        .on('click', () => {
-          console.log('click');
-          onGotoModel();
-        })
-        .on('dragStart', ({ target, clientX, clientY }) => {
-          // console.log('onDragStart', target);
-        })
-        .on(
-          'drag',
-          ({
-            target,
-            transform,
-            left,
-            top,
-            right,
-            bottom,
-            beforeDelta,
-            beforeDist,
-            delta,
-            dist,
-            clientX,
-            clientY
-          }) => {
-            // console.log({ left, top, right, bottom });
-            // console.log({ clientX, clientY });
-            // console.log(target.clientWidth, target.clientHeight);
-            // console.log(document.body.clientWidth, document.body.clientHeight);
-            const docWidth = document.body.clientWidth;
-            const docHeight = document.body.clientHeight;
-            if (left <= 0) {
-              target!.style.left = `${0}px`;
-            } else if (docWidth - target.clientWidth / 1.6 <= clientX) {
-              target!.style.left = `${docWidth - target.clientWidth}px`;
-            } else {
-              target!.style.left = `${left}px`;
-            }
-            if (top <= 0) {
-              target!.style.top = `${0}px`;
-            } else if (docHeight - target.clientHeight / 1.6 <= clientY) {
-              target!.style.top = `${docHeight - target.clientHeight}px`;
-            } else {
-              target!.style.top = `${top}px`;
-            }
-
-            // console.log("onDrag translate", dist);
-            // target!.style.transform = transform;
+    const upDisabled = computed(() => {
+      const listKnowledge = forms.listKnowledge || [];
+      let parentIndex = listKnowledge.findIndex(
+        (item: any) => item.id === forms.dataInfo.lessonCoursewareDetailId
+      );
+      const parentItem = listKnowledge.find(
+        (item: any) => item.id === forms.dataInfo.lessonCoursewareDetailId
+      );
+      if (!parentItem) {
+        return true;
+      }
+      let detailIndex =
+        parentItem?.lessonCoursewareDetailKnowledgeDetailList?.findIndex(
+          (item: any) => item.id == forms.detailId
+        );
+      let lessonStatus = false; // 当前章节上面是否有内容
+      let lessonCoursewareDetailId = '';
+      while (detailIndex >= 0) {
+        detailIndex--;
+        if (detailIndex >= 0) {
+          const tempItem =
+            parentItem?.lessonCoursewareDetailKnowledgeDetailList?.[
+              detailIndex
+            ];
+          if (tempItem.id) {
+            lessonStatus = true;
+            lessonCoursewareDetailId = tempItem.id;
           }
-        )
-        .on('dragEnd', ({ target, isDrag, clientX, clientY }) => {
-          // console.log('onDragEnd', target, isDrag);
-        });
+        }
+        if (lessonStatus) {
+          break;
+        }
+      }
+      // 判断当前章节上面课程是否有内容，否则往上一个章节走
+      if (lessonStatus) {
+        forms.prevDetailId = lessonCoursewareDetailId;
+        return false;
+      }
+
+      let prevLessonStatus = false;
+      while (parentIndex >= 0) {
+        parentIndex--;
+        const tempDetail =
+          listKnowledge[parentIndex]
+            ?.lessonCoursewareDetailKnowledgeDetailList || [];
+
+        let tempLessonLength = tempDetail.length;
+        while (tempLessonLength > 0) {
+          if (tempDetail[tempLessonLength - 1]) {
+            prevLessonStatus = true;
+            lessonCoursewareDetailId = tempDetail[tempLessonLength - 1].id;
+          }
+          tempLessonLength--;
+          if (prevLessonStatus) {
+            break;
+          }
+        }
+        if (prevLessonStatus) {
+          break;
+        }
+      }
+      if (prevLessonStatus) {
+        forms.prevDetailId = lessonCoursewareDetailId;
+      }
+      return !prevLessonStatus;
+    });
+
+    const downDisabled = computed(() => {
+      const listKnowledge = forms.listKnowledge || [];
+      let parentIndex = listKnowledge.findIndex(
+        (item: any) => item.id === forms.dataInfo.lessonCoursewareDetailId
+      );
+      const parentItem = listKnowledge.find(
+        (item: any) => item.id === forms.dataInfo.lessonCoursewareDetailId
+      );
+      if (!parentItem) {
+        return true;
+      }
+      let detailIndex =
+        parentItem?.lessonCoursewareDetailKnowledgeDetailList?.findIndex(
+          (item: any) => item.id == forms.detailId
+        );
+      let lessonStatus = false; // 当前章节上面是否有内容
+      let lessonCoursewareDetailId = '';
+      while (
+        detailIndex <
+        parentItem?.lessonCoursewareDetailKnowledgeDetailList.length - 1
+      ) {
+        detailIndex++;
+        if (detailIndex >= 0) {
+          const tempItem =
+            parentItem?.lessonCoursewareDetailKnowledgeDetailList?.[
+              detailIndex
+            ];
+          if (tempItem.id) {
+            lessonStatus = true;
+            lessonCoursewareDetailId = tempItem.id;
+          }
+        }
+        if (lessonStatus) {
+          break;
+        }
+      }
+
+      // 判断当前章节上面课程是否有内容，否则往上一个章节走
+      if (lessonStatus) {
+        forms.nextDetailId = lessonCoursewareDetailId;
+        return false;
+      }
+
+      let nextLessonStatus = false;
+      while (parentIndex <= listKnowledge.length - 1) {
+        parentIndex++;
+        const tempDetail =
+          listKnowledge[parentIndex]
+            ?.lessonCoursewareDetailKnowledgeDetailList || [];
+
+        let tempLessonLength = 0;
+        while (tempLessonLength <= tempDetail.length - 1) {
+          if (tempDetail[tempLessonLength]) {
+            nextLessonStatus = true;
+            lessonCoursewareDetailId =
+              tempDetail[tempLessonLength].lessonCoursewareDetailId;
+          }
+          tempLessonLength++;
+          if (nextLessonStatus) {
+            break;
+          }
+        }
+
+        if (nextLessonStatus) {
+          break;
+        }
+      }
+      if (nextLessonStatus) {
+        forms.nextDetailId = lessonCoursewareDetailId;
+      }
+      return !nextLessonStatus;
+    });
+
+    // 切换
+    const handleChanage = async (type: string) => {
+      if (type === 'up') {
+        forms.detailId = forms.prevDetailId;
+        await getList();
+      } else if (type === 'down') {
+        forms.detailId = forms.nextDetailId;
+        await getList();
+      }
     };
 
-    onMounted(() => {
+    onMounted(async () => {
       useEventListener(document, 'scroll', () => {
         const { y } = useWindowScroll();
         if (y.value > 52) {
@@ -157,6 +247,7 @@ export default defineComponent({
 
       // __initMove();
 
+      await getPointList();
       getList();
     });
     return () => (
@@ -166,17 +257,7 @@ export default defineComponent({
             border={false}
             background={forms.background}
             color={forms.color}
-            title={forms.title}>
-            {/* {{
-              right: () => (
-                <div
-                  class={styles.wroingBtn}
-                  onClick={() => router.push('/wroing-book')}>
-                  <i class={styles.iconWroing}></i>错题本
-                </div>
-              )
-            }} */}
-          </MHeader>
+            title={forms.title}></MHeader>
         </MSticky>
 
         <div class={[styles.containerSection, styles.woringSection]}>
@@ -192,12 +273,24 @@ export default defineComponent({
           )}
         </div>
 
-        {/* <img
-          id="iconExamQuestion"
-          src={iconExamQuestion}
-          class={styles.iconExamQuestion}
-          // onClick={onGotoModel}
-        /> */}
+        <MSticky position="bottom">
+          <div
+            class={[
+              styles.stickBtnGroup,
+              forms.scrollingStatus ? styles.stickHide : ''
+            ]}>
+            <Button
+              round
+              class={styles.prevBtn}
+              disabled={upDisabled.value}
+              onClick={() => handleChanage('up')}></Button>
+            <Button
+              round
+              disabled={downDisabled.value}
+              class={styles.nextBtn}
+              onClick={() => handleChanage('down')}></Button>
+          </div>
+        </MSticky>
       </div>
     );
   }