feat: 弹窗引导页

src/page-instrument/custom-plugins/guide-driver/index.less

@@ -265,6 +265,24 @@
   }
 }
 
+.popoverClass6-end {
+  width: 270px;
+  height: 145px;
+  background: url("./images/practise/d6.png") no-repeat center;
+  background-size: contain;
+  &.popoverClose {
+    .driver-popover-navigation-btns {
+      position: absolute;
+      right: 15px;
+      justify-content: end;
+    }
+
+    .driver-popover-prev-btn {
+      margin-left: 14px;
+    }
+  }
+}
+
 .popoverClass8 {
   width: 270px;
   height: 145px;

src/page-instrument/custom-plugins/guide-driver/index.tsx

@@ -83,7 +83,7 @@ export const PractiseDriver = defineComponent({
 
       // pc端不显示标题和模式切换引导
       if (state.platform === IPlatform.PC) {
-        length -= 2;
+        // length -= 2;
       } else {
         // 判断是否有标题
         if (!props.statusAll.backTitle || props.statusAll.titleType === "NONE") {
@@ -247,19 +247,29 @@ export const PractiseDriver = defineComponent({
         },
       });
 
+      
       if (state.platform === IPlatform.PC) {
         options.steps?.push({
           element: ".driver-6",
           popover: {
             title: "",
             description: "",
-            popoverClass: "popoverClass popoverClass6",
+            popoverClass: "popoverClass popoverClass6-end popoverClose",
             align: "end",
             side: "bottom",
-            nextBtnText: `下一步 (${options.steps.length + 1}/${length})`, //"下一步6/" + length,
-            showButtons: ["next"],
+            prevBtnText: "再看一遍",
+            doneBtnText: "完成",
+            showButtons: ["next", "previous"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
+              const rect = options.state.activeElement?.getBoundingClientRect();
+              popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
+            },
+            onPrevClick: () => {
+              driverObj.drive(0);
+            },
+            onNextClick: () => {
+              onDriverClose();
             },
           },
         });

src/page-instrument/header-top/index.tsx

@@ -9,7 +9,7 @@ import { Badge, Circle, Popover, Popup, showConfirmDialog, showToast, NoticeBar
 import Speed from "./speed";
 import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
 import Settting from "./settting";
-import state, { IPlatform, handleChangeSection, handleResetPlay, handleRessetState, togglePlay, IPlayState, refreshMusicSvg, EnumMusicRenderType, resetSettings } from "/src/state";
+import state, { IPlatform, handleChangeSection, handleResetPlay, handleRessetState, togglePlay, IPlayState, refreshMusicSvg, EnumMusicRenderType, resetSettings, handleGuide } from "/src/state";
 import { getAudioCurrentTime } from "/src/view/audio-list";
 import { followData, toggleFollow } from "/src/view/follow-practice";
 import { api_back } from "/src/helpers/communication";
@@ -639,15 +639,6 @@ export default defineComponent({
     });
 
 
-    // 完成拖动弹窗引导页
-    const handleGuide = async () => {
-      state.guideInfo.teacherDrag = true;
-      try {
-        const res = await setGuidance({ guideTag: "guideInfo", guideValue: JSON.stringify(state.guideInfo) });
-      } catch (e) {
-        console.log(e);
-      }
-    };
     return () => (
       <>
         <div

src/page-instrument/header-top/music-type/index.tsx

@@ -3,7 +3,7 @@ import { headImg } from "../image";
 import { useClickAway } from "@vant/use";
 import { headData } from "..";
 import styles from "./index.module.less";
-import state, { IPlatform } from "/src/state";
+import state, { IPlatform, handleGuide } from "/src/state";
 import { Popup } from "@varlet/ui";
 import TheComfirm from "../../component/the-comfirm";
 import { musicRenderTypeKey, resetRenderMusicScore } from "/src/view/music-score";
@@ -43,16 +43,6 @@ export default defineComponent({
 			musicTypeData.show = false
 		}
 
-		// 完成拖动弹窗引导页
-		const handleGuide = async () => {
-			state.guideInfo.teacherDrag = true;
-			try{
-					const res = await setGuidance({guideTag:'guideInfo',guideValue:JSON.stringify(state.guideInfo)})
-			}catch(e){
-				console.log(e)
-			}   
-	  	}
-
 		const parentClassName = "transBoxClass_drag";
 		const userId = storeData.user?.id ? String(storeData.user?.id) : '';
 		const positionInfo = state.platform !== IPlatform.PC ? {

src/page-instrument/header-top/settting/index.tsx

@@ -1,9 +1,9 @@
-import { defineComponent, reactive, computed, toRef } from "vue";
+import { defineComponent, reactive, computed, toRef, ref } from "vue";
 import styles from "./index.module.less"
 import { headImg } from "../image";
 import { headTopData } from "../index"
 import { Switch, showToast, Field, Popup, Slider } from "vant";
-import state, { refreshMusicSvg, IPlatform, checkMoveNoSave } from "/src/state"
+import state, { refreshMusicSvg, IPlatform, checkMoveNoSave, handleGuide } from "/src/state"
 import { api_closeCamera, api_openCamera, api_savePicture } from "/src/helpers/communication";
 import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnimation"
 import Recommendation from "../../custom-plugins/helper-model/recommendation";
@@ -36,15 +36,6 @@ export default defineComponent({
 			  }
 			: useDrag([`${parentClassName} .top_draging`, `${parentClassName} .bom_drag`], parentClassName, toRef(helperData, "recommendationShow"), userId);
 
-		// 完成拖动弹窗引导页
-		const handleGuide = async () => {
-			state.guideInfo.teacherDrag = true;
-			try {
-			const res = await setGuidance({ guideTag: "guideInfo", guideValue: JSON.stringify(state.guideInfo) });
-			} catch (e) {
-			console.log(e);
-			}
-		};
 
         // 加减评测频率
 		const operateHz = (type: number) => {

src/page-instrument/header-top/settting1/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, reactive, watch, toRef } from "vue";
+import { defineComponent, nextTick, reactive, watch, toRef, ref } from "vue";
 import styles from "./index.module.less";
 import iconClose from "../image/close2.svg";
 import {
@@ -43,6 +43,7 @@ export default defineComponent({
 			show: false,
 			recommendationShow: false, // 建议
 		});
+
 		const downPng = () => {
 			showLoadingToast({ message: "下载中", duration: 0 });
 			setTimeout(async () => {
@@ -116,15 +117,7 @@ export default defineComponent({
 		  toRef(helperData, 'recommendationShow'),
 		  userId
 		)
-	    // 完成拖动弹窗引导页
-		const handleGuide = async () => {
-			state.guideInfo.teacherDrag = true;
-				  try{
-					  const res = await setGuidance({guideTag:'guideInfo',guideValue:JSON.stringify(state.guideInfo)})
-			}catch(e){
-			  console.log(e)
-			}   
-		}
+
 
 		return () => (
 			<div class={styles["header-settting"]}>

src/page-instrument/simple-detail/index.module.less

@@ -46,6 +46,7 @@ body {
         }
         #cursorImg-0 {
             margin-top: -20PX !important;
+            opacity: 0 !important;
             // transform: translateX(6PX) !important;
         }
     }

src/state.ts

@@ -2225,4 +2225,16 @@ watch(
       refreshMusicSvg();
     }
   }
-)
+)
+
+		// 完成拖动弹窗引导页
+export const handleGuide = async () => {
+    const guideInfoStore = localStorage.getItem('guideInfo') ? JSON.parse(localStorage.getItem('guideInfo')) : {};
+    guideInfoStore.teacherDrag = true;
+    try {
+      localStorage.setItem("guideInfo", JSON.stringify(guideInfoStore));
+      state.guideInfo = guideInfoStore
+    } catch (e) {
+      console.log(e);
+    }
+};

src/view/plugins/toggleMusicSheet/index.tsx

@@ -1,8 +1,8 @@
-import { computed, defineComponent, reactive, toRef, watch } from 'vue'
+import { computed, defineComponent, reactive, toRef, watch, ref } from 'vue'
 import styles from './index.module.less'
 import { Icon, Popup } from 'vant'
 import ChoosePartName from './choosePartName'
-import state, { togglePlay, IPlatform } from "/src/state";
+import state, { togglePlay, IPlatform, handleGuide } from "/src/state";
 import qs from 'query-string'
 import { getInstrumentName, sortMusical } from "/src/constant/instruments";
 import { getQuery } from "/src/utils/queryString";
@@ -96,15 +96,6 @@ export default defineComponent({
       userId
     )
 
-    // 完成拖动弹窗引导页
-    const handleGuide = async () => {
-      state.guideInfo.teacherDrag = true;
-			try{
-				const res = await setGuidance({guideTag:'guideInfo',guideValue:JSON.stringify(state.guideInfo)})
-      }catch(e){
-        console.log(e)
-      }   
-    }
 
     return () => (
       <Popup v-model:show={toggleMusicSheet.show} class="popup-custom van-scale center-closeBtn switchBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>

src/view/plugins/useDrag/index.module.less

@@ -49,7 +49,7 @@
     position: absolute;
     z-index: 99;
     left: 34.6%;
-    top: 72.2%;
+    top: initial;
     width: 50px;
     height: 20px;
     background: url('./img/modalDragDone.png') no-repeat;
@@ -63,6 +63,9 @@
       background: url('./img/modalDragBg2.png') no-repeat;
       background-size: 100% 100%;
     }
+    .guideDone {
+      top: 77.2%;
+    }
   }
   &.guideLeft {
     top: initial;
@@ -72,6 +75,9 @@
       background: url('./img/modalDragBgLeft.png') no-repeat;
       background-size: 100% 100%;
     }
+    .guideDone {
+      top: 77.2%;
+    }
   }
   &.guideRight {
     top: initial;
@@ -81,5 +87,8 @@
       background: url('./img/modalDragBgRight.png') no-repeat;
       background-size: 100% 100%;
     }
+    .guideDone {
+      top: 77.2%;
+    }
   }
 }

vite.config.ts

@@ -52,7 +52,7 @@ export default defineConfig({
     // https: true,
     proxy: {
       "^/instrument/.*": {
-        target: "https://dev.gym.lexiaoya.cn",
+        target: "https://test.gym.lexiaoya.cn",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),
       },