更新

src/hooks/useDrag/index.module.less

@@ -37,8 +37,8 @@
   .guideBg {
     position: relative;
     z-index: 99;
-    width: 200px;
-    height: 102px;
+    width: 300px;
+    height: 153px;
     background: url('./img/modalDragBg.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -47,8 +47,8 @@
     z-index: 99;
     left: 34.6%;
     top: 72.2%;
-    width: 50px;
-    height: 20px;
+    width: 75px;
+    height: 30px;
     background: url('./img/modalDragDone.png') no-repeat;
     background-size: 100% 100%;
     cursor: pointer;

src/hooks/useDrag/index.ts

@@ -39,7 +39,6 @@ export default function useDrag(
           const classDom = document.querySelector(
             `.${className}`
           ) as HTMLElement;
-          console.log(classDom)
           if (classDom) {
             classDom.style.cursor = 'move';
             drag(classDom, boxClassDom, pos);

src/hooks/useDrag/useDragGuidance.ts

@@ -0,0 +1,44 @@
+import { getGuidance, setGuidance } from '../../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/views/tempo-practice/index.tsx

@@ -36,6 +36,7 @@ import { handleStartBeat, hendleEndBeat } from './beat-tick';
 import { browser } from '@/helpers/utils';
 import { useRoute } from 'vue-router';
 import useDrag from '@/hooks/useDrag';
+import useDragGuidance from '@/hooks/useDrag/useDragGuidance';
 import { state as stateData } from '@/state';
 
 export default defineComponent({
@@ -245,6 +246,8 @@ export default defineComponent({
         stateData.user.data.id
       );
     }
+    // 引导页
+    const {guidanceShow,setGuidanceShow}=useDragGuidance()
     return () => (
       <div
         onClick={() => {
@@ -479,6 +482,8 @@ export default defineComponent({
           v-model:show={state.settingStatus}
           class={[styles.settingPopup, settingBoxClass]}>
           <SettingModal
+            onGuideDone={setGuidanceShow}
+            showGuide={guidanceShow.value}
             dataJson={state.dataJson}
             onClose={() => (state.settingStatus = false)}
           />

src/views/tempo-practice/setting-modal/index.tsx

@@ -18,12 +18,17 @@ import { useRoute } from 'vue-router';
 import Dragbom from '@/hooks/useDrag/dragbom';
 
 export default defineComponent({
-  emits: ['close'],
+  emits: ['close',"guideDone"],
   props: {
     dataJson: {
       type: Object,
       default: () => {}
-    }
+    },
+    /** 是否显示引导 */
+		showGuide: {
+			type: Boolean,
+			default: false,
+		}
   },
   name: 'setting-modal',
   setup(props, { emit }) {
@@ -175,7 +180,7 @@ export default defineComponent({
         </div>
         <div class={styles.btnGroup}>
           <Button class={styles.btnSubmit} onClick={onSubmit}></Button>
-          {route.query.platform === 'modal' && <Dragbom></Dragbom>}
+          {route.query.platform === 'modal' && <Dragbom showGuide={props.showGuide} onGuideDone={() => emit("guideDone")}></Dragbom>}
         </div>
       </div>
     );