添加引导

src/hooks/useDrag/useDragGuidance.ts

@@ -34,6 +34,7 @@ export default function useDragGuidance() {
    }
    return {
       guidanceShow,
+      guideInfoData,
       setGuidanceShow
    }
 }

src/page-instrument/component/mode-type-mode/index.tsx

@@ -87,8 +87,8 @@ export default defineComponent({
             <img id="modeType-1" style={{ cursor: state.isPercussion ? "not-allowed" : "pointer" }} onClick={() => headTopData.handleChangeModeType("follow")} src={state.isPercussion ? icons.icon_5 : icons.icon_2} />
             <img id="modeType-2" style={{ cursor: state.enableEvaluation ? "pointer" : "not-allowed" }} onClick={() => headTopData.handleChangeModeType("evaluating")} src={state.enableEvaluation ? icons.icon_3 : icons.icon_4} />
           </div>
-          {data.showPC && data.showTip && !query.isCbs ? <TeacherBootom></TeacherBootom> : null}
-          {data.showStudent && data.showTip && !query.isCbs ? <StudentBottom></StudentBottom> : null}
+          {/* {data.showPC && data.showTip && !query.isCbs ? <TeacherBootom></TeacherBootom> : null}
+          {data.showStudent && data.showTip && !query.isCbs ? <StudentBottom></StudentBottom> : null} */}
           {data.showVip && <TheVip />}
         </div>
         {headTopData.modeType && headTopData.modeType !== "init" && state.modeType == "practise" && state.fingeringInfo?.name && state.setting.displayFingering && <GuideIndex list={["detail"]} />}

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

@@ -41,7 +41,7 @@
 .popoverClass1 {
   width: 257px;
   height: 247px;
-  background: url("./images/d1.png") no-repeat center;
+  background: url("./images/practise/d1.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
@@ -54,7 +54,7 @@
 .popoverClass2 {
   width: 264px;
   height: 228px;
-  background: url("./images/d2.png") no-repeat center;
+  background: url("./images/practise/d2.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
@@ -66,7 +66,7 @@
 .popoverClass3 {
   width: 264px;
   height: 245px;
-  background: url("./images/d3.png") no-repeat center;
+  background: url("./images/practise/d3.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
@@ -78,7 +78,7 @@
 .popoverClass4 {
   width: 265px;
   height: 245px;
-  background: url("./images/d4.png") no-repeat center;
+  background: url("./images/practise/d4.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
@@ -90,7 +90,7 @@
 .popoverClass5 {
   width: 264px;
   height: 245px;
-  background: url("./images/d5.png") no-repeat center;
+  background: url("./images/practise/d5.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
@@ -102,19 +102,54 @@
 .popoverClass6 {
   width: 264px;
   height: 245px;
-  background: url("./images/d6.png") no-repeat center;
+  background: url("./images/practise/d6.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
     right: 24px;
     bottom: 23px;
   }
+
+  &.popoverClose {
+
+    .driver-popover-navigation-btns {
+      position: absolute;
+      bottom: 23px;
+      left: 0;
+      right: 15px;
+      justify-content: flex-start;
+    }
+
+    .driver-popover-next-btn {
+      // right: 14px;
+      // bottom: 18px;
+      position: relative;
+      top: 0;
+      right: 0;
+    }
+
+    .driver-popover-prev-btn {
+      margin-left: 14px;
+    }
+  }
 }
 
 .popoverClass7 {
   width: 267px;
   height: 221px;
-  background: url("./images/d7.png") no-repeat center;
+  background: url("./images/practise/d7.png") no-repeat center;
+  background-size: contain;
+
+  .driver-popover-next-btn {
+    right: 14px;
+    bottom: 18px;
+  }
+}
+
+.popoverClass7-1 {
+  width: 267px;
+  height: 221px;
+  background: url("./images/practise/d7-1.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
@@ -126,7 +161,7 @@
 .popoverClass8 {
   width: 277px;
   height: 152px;
-  background: url("./images/d8.png") no-repeat center;
+  background: url("./images/practise/d8.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
@@ -138,9 +173,11 @@
 .popoverClass9 {
   width: 270px;
   height: 192px;
-  background: url("./images/d9.png") no-repeat center;
+  background: url("./images/practise/d9.png") no-repeat center;
   background-size: contain;
+}
 
+.popoverClose {
   .driver-popover-navigation-btns {
     position: absolute;
     bottom: -48px;

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

@@ -1,5 +1,5 @@
 import { defineComponent, nextTick, ref } from "vue";
-import { Config, PopoverDOM, State, driver } from "driver.js";
+import { Config, DriveStep, PopoverDOM, State, driver } from "driver.js";
 import "driver.js/dist/driver.css";
 import state from "/src/state";
 import { getGuidance, setGuidance } from "../guide-page/api";
@@ -12,8 +12,9 @@ const endGuide = (guideInfo: any) => {
   }
 };
 
+/** 练习模式 */
 export const PractiseDriver = defineComponent({
-  name: "practise-driver",
+  name: "PractiseDriver",
   setup() {
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -25,11 +26,30 @@ export const PractiseDriver = defineComponent({
       } catch {}
     };
 
+    // 乐器方向不一样引导位置不一样
+    const instrumentDirection: DriveStep = {
+      element: ".driver-7",
+      popover: {
+        title: "",
+        description: "",
+        popoverClass: `popoverClass ${state.fingeringInfo.direction === "transverse" ? "popoverClass7" : "popoverClass7-1"}`,
+        align: state.fingeringInfo.direction === "transverse" ? "start" : "center",
+        side: state.fingeringInfo.direction === "transverse" ? "top" : "left",
+        nextBtnText: "下一步7/9",
+        showButtons: ["next", "close"],
+        onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+          if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
+        },
+        onCloseClick: () => {
+          onDriverClose();
+        },
+      },
+    };
+
     const driverObj = driver({
       showProgress: false,
       allowClose: false,
       popoverOffset: 3,
-      // stageRadius: 1000,
       disableActiveInteraction: true,
       steps: [
         {
@@ -141,24 +161,7 @@ export const PractiseDriver = defineComponent({
             },
           },
         },
-        {
-          element: ".driver-7",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass7",
-            align: "start",
-            side: "top",
-            nextBtnText: "下一步7/9",
-            showButtons: ["next", "close"],
-            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-              driverInitialPosition(popover, options);
-            },
-            onCloseClick: () => {
-              onDriverClose();
-            },
-          },
-        },
+        instrumentDirection,
         {
           element: ".driver-8",
           popover: {
@@ -174,7 +177,7 @@ export const PractiseDriver = defineComponent({
               options.config.stagePadding = 0;
               try {
                 const rect = options.state.activeElement?.getBoundingClientRect();
-                popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 8 + "px";
+                popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
               } catch {}
             },
             onCloseClick: () => {
@@ -187,10 +190,10 @@ export const PractiseDriver = defineComponent({
           popover: {
             title: "",
             description: "",
-            popoverClass: "popoverClass popoverClass9",
+            popoverClass: "popoverClass popoverClass9 popoverClose",
             align: "end",
             side: "bottom",
-            prevBtnText: "在看一遍",
+            prevBtnText: "再看一遍",
             doneBtnText: "完成",
             showButtons: ["next", "previous", "close"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -201,7 +204,7 @@ export const PractiseDriver = defineComponent({
                 popover.wrapper.style.marginLeft = -((rect?.width || 0) / 2 - 8) + "px";
               } catch {}
             },
-            onPrevClick: (element, step, options) => {
+            onPrevClick: () => {
               driverObj.drive(0);
             },
             onNextClick: () => {
@@ -215,13 +218,6 @@ export const PractiseDriver = defineComponent({
       ],
     });
 
-    // watch(
-    //   () => state.audioDone,
-    //   () => {
-    //     driverObj.drive(0);
-    //   }
-    // );
-
     const guideInfo = ref({} as any);
     const getAllGuidance = async () => {
       try {
@@ -237,7 +233,7 @@ export const PractiseDriver = defineComponent({
         }
         if (!(guideInfo.value && guideInfo.value.practiseDriver)) {
           nextTick(() => {
-            driverObj.drive(7);
+            driverObj.drive(5);
           });
         }
       } catch (e) {
@@ -261,3 +257,253 @@ export const PractiseDriver = defineComponent({
     return () => <div></div>;
   },
 });
+
+/** 跟练模式 */
+export const FollowDriver = defineComponent({
+  name: "FollowDriver",
+  setup() {
+    // 初始化部分引导位置
+    const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
+      options.config.stageRadius = 5;
+      options.config.stagePadding = 8;
+      try {
+        const rect = options.state.activeElement?.getBoundingClientRect();
+        popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
+      } catch {}
+    };
+
+    const driverObj = driver({
+      showProgress: false,
+      allowClose: false,
+      popoverOffset: 3,
+      disableActiveInteraction: true,
+      steps: [
+        {
+          element: ".follow-1",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass1",
+            align: "end",
+            side: "top",
+            nextBtnText: "下一步1/3",
+            showButtons: ["next", "close"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              options.config.stageRadius = 1000;
+              options.config.stagePadding = 0;
+            },
+            onCloseClick: () => {
+              onDriverClose();
+            },
+          },
+        },
+        {
+          element: ".driver-5",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass5",
+            align: "start",
+            side: "top",
+            nextBtnText: "下一步2/3",
+            showButtons: ["next", "close"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
+            },
+            onCloseClick: () => {
+              onDriverClose();
+            },
+          },
+        },
+        {
+          element: ".driver-6",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass6 popoverClose",
+            align: "start",
+            side: "top",
+            prevBtnText: "再看一遍",
+            doneBtnText: "完成",
+            showButtons: ["next", "previous", "close"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
+            },
+            onPrevClick: () => {
+              driverObj.drive(0);
+            },
+            onNextClick: () => {
+              onDriverClose();
+            },
+            onCloseClick: () => {
+              onDriverClose();
+            },
+          },
+        },
+      ],
+    });
+
+    const guideInfo = ref({} as any);
+    const getAllGuidance = async () => {
+      try {
+        if (state.guideInfo) {
+          guideInfo.value = state.guideInfo;
+        } else {
+          const res = await getGuidance({ guideTag: "guideInfo" });
+          if (res.data) {
+            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
+          } else {
+            guideInfo.value = {};
+          }
+        }
+        if (!(guideInfo.value && guideInfo.value.followDriver)) {
+          nextTick(() => {
+            driverObj.drive(0);
+          });
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
+    getAllGuidance();
+
+    // 结束关闭弹窗
+    const onDriverClose = () => {
+      if (!guideInfo.value) {
+        guideInfo.value = { followDriver: true };
+      } else {
+        guideInfo.value.followDriver = true;
+      }
+      endGuide(guideInfo.value);
+      driverObj.destroy();
+    };
+
+    return () => <div></div>;
+  },
+});
+
+// 评测模式
+export const EvaluatingDriver = defineComponent({
+  name: "EvaluatingDriver",
+  setup() {
+    // 初始化部分引导位置
+    const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
+      options.config.stageRadius = 5;
+      options.config.stagePadding = 8;
+      try {
+        const rect = options.state.activeElement?.getBoundingClientRect();
+        popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
+      } catch {}
+    };
+
+    const driverObj = driver({
+      showProgress: false,
+      allowClose: false,
+      popoverOffset: 3,
+      disableActiveInteraction: true,
+      steps: [
+        {
+          element: ".follow-1",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass1",
+            align: "end",
+            side: "top",
+            nextBtnText: "下一步1/3",
+            showButtons: ["next", "close"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              options.config.stageRadius = 1000;
+              options.config.stagePadding = 0;
+            },
+            onCloseClick: () => {
+              onDriverClose();
+            },
+          },
+        },
+        {
+          element: ".driver-5",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass5",
+            align: "start",
+            side: "top",
+            nextBtnText: "下一步2/3",
+            showButtons: ["next", "close"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
+            },
+            onCloseClick: () => {
+              onDriverClose();
+            },
+          },
+        },
+        {
+          element: ".driver-6",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass6 popoverClose",
+            align: "start",
+            side: "top",
+            prevBtnText: "再看一遍",
+            doneBtnText: "完成",
+            showButtons: ["next", "previous", "close"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
+            },
+            onPrevClick: () => {
+              driverObj.drive(0);
+            },
+            onNextClick: () => {
+              onDriverClose();
+            },
+            onCloseClick: () => {
+              onDriverClose();
+            },
+          },
+        },
+      ],
+    });
+
+    const guideInfo = ref({} as any);
+    const getAllGuidance = async () => {
+      try {
+        if (state.guideInfo) {
+          guideInfo.value = state.guideInfo;
+        } else {
+          const res = await getGuidance({ guideTag: "guideInfo" });
+          if (res.data) {
+            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
+          } else {
+            guideInfo.value = {};
+          }
+        }
+        if (!(guideInfo.value && guideInfo.value.followDriver)) {
+          nextTick(() => {
+            driverObj.drive(0);
+          });
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
+    getAllGuidance();
+
+    // 结束关闭弹窗
+    const onDriverClose = () => {
+      if (!guideInfo.value) {
+        guideInfo.value = { followDriver: true };
+      } else {
+        guideInfo.value.followDriver = true;
+      }
+      endGuide(guideInfo.value);
+      driverObj.destroy();
+    };
+
+    return () => <div></div>;
+  },
+});

src/page-instrument/follow-model/index.tsx

@@ -5,15 +5,15 @@ import { followData, handleFollowEnd, handleFollowStart } from "/src/view/follow
 import { Popup } from "vant";
 import Microphone from "./microphone";
 import state, { IPlatform } from "/src/state";
-import PcEndIcon from "../header-top/image/pc_end_icon.png"
+import PcEndIcon from "../header-top/image/pc_end_icon.png";
 import { headImg } from "/src/page-instrument/header-top/image";
 
 export default defineComponent({
-	name: "follow-model",
-	setup() {
-		return () => (
-			<>
-				{/* <Transition name="pop-center">
+  name: "follow-model",
+  setup() {
+    return () => (
+      <>
+        {/* <Transition name="pop-center">
 					{!followData.start && (
 						<div class={styles.startBtn} key="start">
 							<img
@@ -37,40 +37,37 @@ export default defineComponent({
 						</div>
 					)}
 				</Transition> */}
-				<div class={styles.operatingBtn}>
-					{!followData.start && (
-						<img class={styles.iconBtn} src={headImg("icon_play.png")} 
-						onClick={() => {
-							handleFollowStart()
-						}} />
-						)}
-					{followData.start && (
-						<>
-						<img class={styles.iconBtn} src={headImg("icon_reset.png")} onClick={()=>handleFollowEnd()} />  
-						<img class={styles.iconBtn} src={headImg("submit.png")} onClick={() => handleFollowEnd()}/> 
-						</>
-					)} 
-				</div>				
-				{/* <div style={{ display: followData.start ? "" : "none" }} class={styles.noteState}>
+        <div class={styles.operatingBtn}>
+          {!followData.start && (
+            <img
+              class={[styles.iconBtn, "follow-1"]}
+              src={headImg("icon_play.png")}
+              onClick={() => {
+                handleFollowStart();
+              }}
+            />
+          )}
+          {followData.start && (
+            <>
+              <img class={styles.iconBtn} src={headImg("icon_reset.png")} onClick={() => handleFollowEnd()} />
+              <img class={styles.iconBtn} src={headImg("submit.png")} onClick={() => handleFollowEnd()} />
+            </>
+          )}
+        </div>
+        {/* <div style={{ display: followData.start ? "" : "none" }} class={styles.noteState}>
 					<span style={{ background: "#ffca67" }} class={styles.dot}></span>
 					<span>低</span>
 					<span style={{ background: "rgb(255, 0, 0)" }} class={styles.dot}></span>
 					<span>高</span>
 				</div> */}
-				<Popup
-					teleport="body"
-					closeOnClickOverlay={false}
-					class={["popup-custom", "van-scale"]}
-					transition="van-scale"
-					v-model:show={followData.earphone}
-				>
-					<Microphone
-						onClose={() => {
-							followData.earphone = false;
-						}}
-					/>
-				</Popup>
-			</>
-		);
-	},
+        <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={followData.earphone}>
+          <Microphone
+            onClose={() => {
+              followData.earphone = false;
+            }}
+          />
+        </Popup>
+      </>
+    );
+  },
 });

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

@@ -31,7 +31,7 @@ import { getGuidance, setGuidance } from "../custom-plugins/guide-page/api";
 import ModeView from "./modeView";
 import { smoothAnimationState } from "../view-detail/smoothAnimation";
 import { isMusicList, musicListShow } from "../component/the-music-list";
-import { PractiseDriver } from "../custom-plugins/guide-driver";
+import { FollowDriver, PractiseDriver } from "../custom-plugins/guide-driver";
 
 /** 头部数据和方法 */
 export const headTopData = reactive({
@@ -829,11 +829,13 @@ export default defineComponent({
         <ModeView></ModeView>
 
         {/* isAllBtns */}
-        {isAllBtns.value && !query.isCbs && showGuideIndex.value && <TeacherTop></TeacherTop>}
-        {isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>}
+        {/* {isAllBtns.value && !query.isCbs && showGuideIndex.value && <TeacherTop></TeacherTop>}
+        {isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>} */}
 
         {/* 练习模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "practise" && state.audioDone && !state.isVip && <PractiseDriver />}
+        {state.modeType === "practise" && !query.isCbs && state.audioDone && !state.isVip && <PractiseDriver />}
+        {/* 跟练模式功能引导 加载音频完成 不是会员 */}
+        {state.modeType === "follow" && !query.isCbs && state.audioDone && !state.isVip && <FollowDriver />}
       </>
     );
   },

src/page-instrument/main.ts

@@ -10,18 +10,19 @@ import "../style.css";
 import App from "./App";
 import router from "./router";
 import "./theme.css";
+import "./custom-plugins/guide-driver/index.less"
 import { getQuery } from "/src/utils/queryString";
 
 (function () {
 	const query = getQuery();
 	const u = navigator.userAgent;
 	const instance: any =
-	(window as any).DAYA ||
-	(window as any).webkit?.messageHandlers?.DAYA ||
-	(window as any).COLEXIU ||
-	(window as any).webkit?.messageHandlers?.COLEXIU ||
-	(window as any).ORCHESTRA ||
-	(window as any).webkit?.messageHandlers?.ORCHESTRA;
+		(window as any).DAYA ||
+		(window as any).webkit?.messageHandlers?.DAYA ||
+		(window as any).COLEXIU ||
+		(window as any).webkit?.messageHandlers?.COLEXIU ||
+		(window as any).ORCHESTRA ||
+		(window as any).webkit?.messageHandlers?.ORCHESTRA;
 	const apiPrefix = query.isCbs ? "/cbs-app" : u.includes("COLEXIUSTUDENT") ? "/edu-app" : "/edu-app"
 	setStoreData({
 		isApp: instance ? true : false,