修改引导显示功能

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

@@ -277,6 +277,41 @@
   }
 }
 
+.popoverClassF3 {
+  width: 264px;
+  height: 245px;
+  background: url("./images/follow/f3.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;
+    }
+  }
+}
+
 .popoverClassE1 {
   width: 257px;
   height: 247px;
@@ -313,6 +348,41 @@
   }
 }
 
+.popoverClassE4 {
+  width: 264px;
+  height: 245px;
+  background: url("./images/evaluating/e3.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;
+    }
+  }
+}
+
 .popoverClassER1 {
   width: 257px;
   height: 178px;

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

@@ -1,4 +1,4 @@
-import { PropType, Teleport, defineComponent, nextTick, onMounted, ref } from "vue";
+import { PropType, Teleport, defineComponent, nextTick, onMounted, onUnmounted, ref } from "vue";
 import { Config, DriveStep, PopoverDOM, State, driver } from "driver.js";
 import "driver.js/dist/driver.css";
 import state from "/src/state";
@@ -223,6 +223,7 @@ export const PractiseDriver = defineComponent({
 
       if(!props.statusAll.modelTypeStatus) {
         options.steps?.push({
+          //.van-notice-bar__content
           element: ".driver-8",
           popover: {
             title: "",
@@ -252,6 +253,7 @@ export const PractiseDriver = defineComponent({
       } else {
         options.steps?.push(
           {
+            //  .van-notice-bar__content
             element: ".driver-8",
             popover: {
               title: "",
@@ -360,10 +362,15 @@ export const PractiseDriver = defineComponent({
       endGuide(guideInfo.value);
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("click", handleClickOutside, true);
       state.hasDriverPop = false
     };
 
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside, true);
+    });
+
+
     return () => (
       <Teleport to="body">
         {showCloseBtn.value && (
@@ -475,7 +482,7 @@ export const FollowDriver = defineComponent({
       popover: {
         title: "",
         description: "",
-        popoverClass: "popoverClass popoverClass6 popoverClose",
+        popoverClass: "popoverClass popoverClassF3 popoverClose",
         align: "start",
         side: "top",
         prevBtnText: "再看一遍",
@@ -497,11 +504,14 @@ export const FollowDriver = defineComponent({
 
     const handleClickOutside = (event: any) => {
       if (driverNextStatus.value) return;
+      console.log(driverObj.getActiveIndex(), "driverObj.getActiveIndex()");
       if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
         if (driverObj.isLastStep()) {
           onDriverClose();
         } else {
-          driverObj.moveNext(); // 跳转到下一步
+          // driverObj.moveNext(); // 跳转到下一步
+          const index = driverObj.getActiveIndex();
+          driverObj.moveTo(index + 1);
         }
       }
     };
@@ -545,10 +555,14 @@ export const FollowDriver = defineComponent({
       endGuide(guideInfo.value);
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("click", handleClickOutside, true);
       state.hasDriverPop = false
     };
 
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside, true);
+    })
+
     return () => (
       <Teleport to="body">
         {showCloseBtn.value && (
@@ -640,7 +654,7 @@ export const EvaluatingDriver = defineComponent({
           popover: {
             title: "",
             description: "",
-            popoverClass: "popoverClass popoverClass5",
+            popoverClass: "popoverClass popoverClassE3",
             align: "start",
             side: "top",
             nextBtnText: `下一步 (3/${length})`,
@@ -676,7 +690,7 @@ export const EvaluatingDriver = defineComponent({
       popover: {
         title: "",
         description: "",
-        popoverClass: "popoverClass popoverClass6 popoverClose",
+        popoverClass: "popoverClass popoverClassE4 popoverClose",
         align: "start",
         side: "top",
         prevBtnText: "再看一遍",
@@ -698,6 +712,8 @@ export const EvaluatingDriver = defineComponent({
 
     const handleClickOutside = (event: any) => {
       if (driverNextStatus.value) return;
+
+      console.log(driverObj.getActiveIndex(), "driverObj.getActiveIndex()");
       if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
         if (driverObj.isLastStep()) {
           onDriverClose();
@@ -721,16 +737,18 @@ export const EvaluatingDriver = defineComponent({
             guideInfo.value = {};
           }
         }
+        console.log(guideInfo.value, "guideInfo.value", showCloseBtn.value);
         if (!(guideInfo.value && guideInfo.value.evaluatingDriver)) {
           document.addEventListener("click", handleClickOutside, true);
           nextTick(() => {
             driverObj = driver(driverOptions);
-            driverObj.drive(0);
+            driverObj.drive();
             showCloseBtn.value = true;
             state.hasDriverPop = true;
+            console.log(driverOptions, "driverOptions Evaluating", showCloseBtn.value);
           });
         } else {
-          driverObj.destroy();
+          driverObj?.destroy();
         }
       } catch (e) {
         console.log(e);
@@ -749,10 +767,15 @@ export const EvaluatingDriver = defineComponent({
       endGuide(guideInfo.value);
       driverObj?.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("click", handleClickOutside, true);
       state.hasDriverPop = false;
     };
 
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside, true);
+    });
+
+
     return () => (
       <Teleport to="body">
         {showCloseBtn.value && (
@@ -864,7 +887,7 @@ export const EvaluatingResultDriver = defineComponent({
               driverInitialPosition(popover, options, -1);
             },
             onPrevClick: () => {
-              driverObj.drive(0);
+              driverObj.drive();
             },
             onNextClick: () => {
               onDriverClose();
@@ -900,13 +923,15 @@ export const EvaluatingResultDriver = defineComponent({
           }
         }
         if (!(guideInfo.value && guideInfo.value.evaluatingResultDriver)) {
-          document.addEventListener("click", handleClickOutside, true);
-          nextTick(() => {
-            driverObj = driver(driverOptions);
-            driverObj.drive(0);
-            showCloseBtn.value = true;
-            state.hasDriverPop = true;
-          });
+          setTimeout(() => {
+            document.addEventListener("click", handleClickOutside, true);
+            nextTick(() => {
+              driverObj = driver(driverOptions);
+              driverObj.drive();
+              showCloseBtn.value = true;
+              state.hasDriverPop = true;
+            });
+          }, 200);
         }
       } catch (e) {
         console.log(e);
@@ -914,9 +939,7 @@ export const EvaluatingResultDriver = defineComponent({
     };
 
     onMounted(() => {
-      nextTick(() => {
-        getAllGuidance();
-      })
+      getAllGuidance();
     })
 
     // 结束关闭弹窗
@@ -929,10 +952,15 @@ export const EvaluatingResultDriver = defineComponent({
       endGuide(guideInfo.value);
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("click", handleClickOutside, true);
       state.hasDriverPop = false
     };
 
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside, true);
+    });
+
+
     return () => (
       <Teleport to="body">
         {showCloseBtn.value && (
@@ -1220,10 +1248,15 @@ export const EvaluatingReportDriver = defineComponent({
       endGuide(guideInfo.value);
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("click", handleClickOutside, true);
       state.hasDriverPop = false
     };
 
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside, true);
+    });
+
+
     return () => (
       <Teleport to="body">
         {showCloseBtn.value && (

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 { EvaluatingDriver, EvaluatingResultDriver, FollowDriver, PractiseDriver } from "../custom-plugins/guide-driver";
+import { EvaluatingDriver, FollowDriver, PractiseDriver } from "../custom-plugins/guide-driver";
 
 /** 头部数据和方法 */
 export const headTopData = reactive({