更新 引导页

src/hooks/useDrag/dragbom.tsx

@@ -19,7 +19,7 @@ export default defineComponent({
     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;
+      const dragTop = document.querySelector('.dragbomBox')?.getBoundingClientRect()?.top || 0;
       data.guidePos = pageHeight - dragTop < guideHeight ? "top" : "bottom";
     }
     onMounted(() => {
@@ -27,10 +27,12 @@ export default defineComponent({
     });
     return () => (
       <>
+      <div class={[styles.dragbomBox,"dragbomBox"]}>
         <div class={[styles.dragBom, 'bom_drag']}>
           <div class={styles.box}></div>
           <div class={[styles.box, styles.right]}></div>
         </div>
+      </div>
         {
           props.showGuide && 
           <div class={[styles.guide, data.guidePos === "top" && styles.guideTop, 'bom_guide']}>

src/hooks/useDrag/index.module.less

@@ -1,3 +1,11 @@
+.dragbomBox{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 36px;
+  width: 100%;
+  padding: 0 14px 0 15px;
+}
 .dragBom {
   width: 100%;
   height: 21px;

src/hooks/useDrag/useDragGuidance.ts

@@ -0,0 +1,39 @@
+import { getGuidance, setGuidance } from "../../page-instrument/custom-plugins/guide-page/api"
+import { ref } from "vue"
+
+export default function useDragGuidance() {
+   // 引导页
+   const guidanceShow = ref(false)
+   let guideInfoData: Record<string, any> = {}
+   getGuidanceShow()
+   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)
+      }
+   }
+   function setGuidanceShow() {
+      try {
+         setGuidance({ guideTag: "guideInfo", guideValue: JSON.stringify(Object.assign(guideInfoData, { teacherDrag: true })) })
+         guidanceShow.value = false
+      } catch (e) {
+         console.log(e)
+      }
+   }
+   return {
+      guidanceShow,
+      setGuidanceShow
+   }
+}

src/page-instrument/view-figner/index.module.less

@@ -1422,7 +1422,7 @@
     background: url('./image/subject-bg1.png') no-repeat center;
     border-radius: 12px;
     background-size: contain;
-    overflow: hidden;
+    overflow: initial;
 }
 
 .linkSourceClass {
@@ -1461,14 +1461,6 @@
     //     display: none;
     // }
 }
-.dragbomBox{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 36px;
-    width: 100%;
-    padding: 0 14px 0 15px;
-}
 .dragTopBox{
     position: absolute;
     top: 0;

src/page-instrument/view-figner/index.tsx

@@ -20,6 +20,7 @@ import ChangeSubject from "./change-subject";
 import { Tabs,Tab } from "vant"
 import useDrag from '/src/hooks/useDrag';
 import Dragbom from '/src/hooks/useDrag/dragbom';
+import useDragGuidance from '/src/hooks/useDrag/useDragGuidance';
 
 export default defineComponent({
   name: "viewFigner",
@@ -996,6 +997,8 @@ export default defineComponent({
         value:"2"
       }
     ]
+    // 引导页
+    const {guidanceShow,setGuidanceShow}=useDragGuidance()
     // 切换乐器弹窗
     let changeSubjectShowBoxDragData: any;
     let changeSubjectShowBoxClass: string;
@@ -1725,9 +1728,7 @@ export default defineComponent({
             </div>
             {query.platform==="pc" && <>
               <div class={[styles.dragTopBox,"dragTopBox"]}></div>
-              <div class={[styles.dragbomBox,"dragbomBox"]}>
-                <Dragbom></Dragbom>
-              </div>
+              <Dragbom showGuide={guidanceShow.value} onGuideDone={setGuidanceShow}></Dragbom>
             </>}
           </Popup>
 
@@ -1776,9 +1777,7 @@ export default defineComponent({
             />
             {query.platform==="pc" && <>
               <div class={[styles.dragTopBox,"dragTopBox"]}></div>
-              <div class={[styles.dragbomBox,"dragbomBox"]}>
-                <Dragbom></Dragbom>
-              </div>
+              <Dragbom showGuide={guidanceShow.value} onGuideDone={setGuidanceShow}></Dragbom>
             </>}
           </Popup>