更新

src/custom-plugins/guide-page/student-guide.tsx

@@ -240,19 +240,17 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
+                          <div class={[styles.btn]} onClick={() => endGuide()}>
                             完成
                           </div>
-                          <div
+                          {/* <div
                             class={styles.nextBtn}
                             onClick={() => {
                               data.step = 0;
                               getStepELe();
                             }}>
                             再看一遍
-                          </div>
+                          </div> */}
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

src/hooks/useDrag/dragbom.jsx

@@ -1,14 +1,52 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive, onMounted, ref } from 'vue';
 import styles from './index.module.less';
+import { setGuidanceShow, guidanceShow } from './useDragGuidance';
 // 底部拖动区域
 export default defineComponent({
   name: 'dragBom',
   setup() {
+    const data = reactive({
+      guidePos: 'bottom'
+    });
+    const guidanceShowDela = ref(false);
+    const initGuidePos = () => {
+      const pageHeight =
+        document.documentElement.clientHeight || document.body.clientHeight;
+      const guideHeight =
+        document.querySelector('.bom_guide')?.getBoundingClientRect().height ||
+        0;
+      const dragTop =
+        document.querySelector('.bom_drag')?.getBoundingClientRect()?.top || 0;
+      data.guidePos = pageHeight - dragTop < guideHeight ? 'top' : 'bottom';
+    };
+    onMounted(() => {
+      if (guidanceShow.value) {
+        const _itme = setTimeout(() => {
+          clearTimeout(_itme);
+          initGuidePos();
+          guidanceShowDela.value = true;
+        }, 300);
+      }
+    });
     return () => (
-      <div class={[styles.dragBom, 'bom_drag']}>
-        <div class={styles.box}></div>
-        <div class={styles.box}></div>
-      </div>
+      <>
+        <div class={[styles.dragBom, 'bom_drag']}>
+          <div class={styles.box}></div>
+          <div class={styles.box}></div>
+        </div>
+        {guidanceShow.value && (
+          <div
+            class={[
+              styles.guide,
+              data.guidePos === 'top' && styles.guideTop,
+              !guidanceShowDela.value && styles.hideGuide,
+              'bom_guide'
+            ]}>
+            <div class={styles.guideBg}></div>
+            <div class={styles.guideDone} onClick={setGuidanceShow}></div>
+          </div>
+        )}
+      </>
     );
   }
 });

src/hooks/useDrag/index.module.less

@@ -16,3 +16,49 @@
     }
   }
 }
+.guide {
+  position: absolute;
+  left: 0;
+  top: calc(100% - 10px);
+  &::before {
+    content: '';
+    display: block;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 3000;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  &.hideGuide {
+    visibility: hidden;
+  }
+  .guideBg {
+    position: relative;
+    z-index: 3001;
+    width: 500px;
+    height: 256px;
+    background: url('./img//modalDragBg.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .guideDone {
+    position: absolute;
+    z-index: 3001;
+    left: 34.6%;
+    top: 72.2%;
+    width: 124px;
+    height: 49px;
+    background: url('./img/modalDragDone.png') no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
+  &.guideTop {
+    top: initial;
+    bottom: 2px;
+    .guideBg {
+      background: url('./img/modalDragBg2.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}

src/hooks/useDrag/useDragGuidance.ts

@@ -0,0 +1,37 @@
+import { getGuidance, setGuidance } from '@/custom-plugins/guide-page/api';
+import { ref } from 'vue';
+
+// 引导页
+export const guidanceShow = ref(false);
+let guideInfoData: Record<string, any> = {};
+export async function getGuidanceShow() {
+  try {
+    const res = await getGuidance({ guideTag: 'guideInfo' });
+    if (res.code === 200) {
+      if (res.data) {
+        const guideInfo = JSON.parse(res.data?.guideValue) || null;
+        if (guideInfo) {
+          guideInfoData = guideInfo;
+          guidanceShow.value = !guideInfo.teacherDrag;
+        }
+      } else {
+        guidanceShow.value = true;
+      }
+    }
+  } catch (e) {
+    console.log(e);
+  }
+}
+export function setGuidanceShow() {
+  try {
+    setGuidance({
+      guideTag: 'guideInfo',
+      guideValue: JSON.stringify(
+        Object.assign(guideInfoData, { teacherDrag: true })
+      )
+    });
+    guidanceShow.value = false;
+  } catch (e) {
+    console.log(e);
+  }
+}

src/views/attend-class/index.tsx

@@ -95,6 +95,7 @@ import { useResizeObserver } from '@vueuse/core';
 import { storage } from '/src/utils/storage';
 import { ACCESS_TOKEN_ADMIN } from '/src/store/mutation-types';
 import useDrag from '@/hooks/useDrag';
+import { getGuidanceShow } from '@/hooks/useDrag/useDragGuidance';
 import Dragbom from '@/hooks/useDrag/dragbom';
 
 export type ToolType = 'init' | 'pen' | 'whiteboard' | 'call';
@@ -1449,6 +1450,8 @@ export default defineComponent({
     };
 
     /* 弹窗加拖动 */
+    // 引导页
+    getGuidanceShow();
     // 选择课件弹窗
     const selCourBoxClass = 'selCourBoxClass_drag';
     const selCourDragData = useDrag(