no message

src/pages/detailsCar.vue

@@ -31,7 +31,7 @@
           unelevated
           class="q-px-xl"
           label="選擇方案"
-          @click="goScrollHandler('#scheme')"
+          @click="goScrollHandler(priceListHeight)"
         />
       </div>
     </div>
@@ -180,7 +180,7 @@
             label="選擇方案"
             unelevated
             :disable="priceList.length>0?false:true"
-            @click="goScrollHandler('#scheme')"
+            @click="goScrollHandler(priceListHeight)"
             :class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
           />
         </div>
@@ -227,7 +227,7 @@
         <q-tab
           v-for="(x, i) in navs"
           :key="i"
-          @click="goScrollHandler(x.id)"
+          @click="goScrollHandler(x.top + 20)"
           :name="x.display"
           :label="x.display"
         ></q-tab>
@@ -397,7 +397,7 @@
       <div
         :class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
       >
-        <div id="product" :class="{
+        <div ref="product" class="text-h5 text-weight-bold text-left q-mt-xl" :class="{
           'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
         }">產品介紹</div>
         <div
@@ -408,7 +408,6 @@
           v-if="dataList.feature && dataList.feature.featureHtml != ''"
         ></div>
         <div
-          id="price"
           class="text-h5 text-weight-bold text-left q-mt-xl"
           ref="price"
           :class="{
@@ -447,8 +446,29 @@
             'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
           }"
         ></div>
+        
+        <div
+          class="text-h5 text-weight-bold text-left q-mt-xl"
+          ref="warning"
+          :class="{
+            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
+          }"
+        >
+          購買須知
+        </div>
+        <div
+          class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
+          style="border: 1px dashed var(--q-color-warning)"
+          v-html="
+            dataList.feature
+              ? dataList.feature.importantTip || '暂无购买须知'
+              : '暂无购买须知'
+          "
+          :class="{
+            'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
+          }"
+        ></div>
         <div
-          id="assemblypoint"
           class="text-h5 text-weight-bold text-left q-mt-xl"
           ref="assemblypoint"
           :class="{
@@ -475,7 +495,6 @@
           </div>
         </div>
         <div
-          id="experiencelocation"
           class="text-h5 text-weight-bold text-left q-mt-xl"
           ref="experiencelocation"
           :class="{
@@ -502,29 +521,6 @@
           </div>
         </div>
         <div
-          id="warning"
-          class="text-h5 text-weight-bold text-left q-mt-xl"
-          ref="warning"
-          :class="{
-            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-          }"
-        >
-          購買須知
-        </div>
-        <div
-          class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
-          style="border: 1px dashed var(--q-color-warning)"
-          v-html="
-            dataList.feature
-              ? dataList.feature.importantTip || '暂无购买须知'
-              : '暂无购买须知'
-          "
-          :class="{
-            'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-          }"
-        ></div>
-        <div
-          id="tips"
           class="text-h5 text-weight-bold text-left q-mt-xl"
           ref="tips"
           :class="{
@@ -546,7 +542,6 @@
           }"
         ></div>
         <div
-          id="cancelTips"
           class="text-h5 text-weight-bold text-left q-mt-xl"
           ref="cancelTips"
           :class="{
@@ -581,6 +576,7 @@
       </div>
 
       <template v-if="$q.platform.is.desktop">
+        
         <div class="col-1"></div>
         <div class="col q-ml-xl position-relative">
           <div style="position: sticky; top: 100px">
@@ -588,7 +584,12 @@
               class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
               v-for="(x, i) in navs"
               :key="i"
-              @click="goScrollHandler(x.id)"
+              @click="goScrollHandler(x.top + 20)"
+              :class="{
+                'active-trip-module':
+                  currentHeight >= x.top &&
+                  (i == navs.length - 1 || currentHeight < navs[i + 1].top),
+              }"
             >
               {{ x.display }}
             </div>
@@ -675,43 +676,43 @@ export default {
       ],
       navs: [
         {
-          id: "#product",
+          val: "product",
           top: 0,
           isActive: false,
           display: "產品介紹",
         },
         {
-          id: "#price",
+          val: "price",
           top: 0,
           isActive: false,
           display: "費用說明",
         },
         {
-          id: "#warning",
+          val: "warning",
           top: 0,
           isActive: false,
           display: "購買須知",
         },
         {
-          id: "#assemblypoint",
+          val: "assemblypoint",
           top: 0,
           isActive: false,
           display: "接送點範圍",
         },
         {
-          id: "#experiencelocation",
+          val: "experiencelocation",
           top: 0,
           isActive: false,
           display: "機場地點",
         },
         {
-          id: "#tips",
+          val: "tips",
           top: 0,
           isActive: false,
           display: "溫馨提示",
         },
         {
-          id: "#cancelTips",
+          val: "cancelTips",
           top: 0,
           isActive: false,
           display: "取消政策",
@@ -758,6 +759,7 @@ export default {
     }
   },
   mounted() {
+    window.addEventListener("scroll", this.handleScroll);
     const timeStamp = Date.now()
     const formattedString = date.formatDate(timeStamp, 'YYYY-MM-DD')
     this.currentYM = {
@@ -768,6 +770,7 @@ export default {
     if (localStorage.baseifo) {
       this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
     }
+    window.addEventListener("scroll", this.menu);
     // this.getData();
     window.addEventListener("scroll", this.menu);
     this.getCarData();
@@ -785,6 +788,38 @@ export default {
     getTopNum(x) {
       this.days = JSON.parse(x);
     },
+    handleScroll(e) {
+      let temp = this.getScroll().top;
+      this.stickyHeight = document.querySelector(".q-header--hidden")
+        ? "translateY(0px)"
+        : "translateY(45px)";
+      this.currentHeight = temp;
+      if (
+        this.videoPosition > 0 &&
+        this.videoPosition < this.currentHeight &&
+        this.options.currentPage == 0 &&
+        !this.isPictureInPicture
+      ) {
+        this.isPictureInPicture = true;
+        let t = document.querySelectorAll("video")[0];
+        try {
+          t.requestPictureInPicture();
+        } catch (error) {}
+      } else if (
+        this.videoPosition > 0 &&
+        this.videoPosition > this.currentHeight &&
+        this.options.currentPage == 0 &&
+        this.isPictureInPicture
+      ) {
+        this.isPictureInPicture = false;
+        document.exitPictureInPicture();
+      }
+      let h = document.location.hash;
+      if (h.indexOf("#/detailCar/") == -1) {
+        window.removeEventListener("scroll", this.handleScroll);
+      }
+    },
+    
     getScroll() {
       return {
         left:
@@ -799,9 +834,9 @@ export default {
           0,
       };
     },
-    goScrollHandler(id) {
-      console.log("scrollIntoView", id);
-      document.querySelector(id).scrollIntoView({ behavior: "smooth" });
+    goScrollHandler(top) {
+      window.scrollTo(0, top);
+      // document.querySelector(id).scrollIntoView({ behavior: "smooth" });
     },
     slideHandler(e) {
       this.options.currentPage = e.currentPage;
@@ -893,6 +928,17 @@ export default {
 
                 this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
               }
+              setTimeout(() => {
+                this.navs.forEach((x) => {
+                  x.top =
+                    this.$refs[x.val].getBoundingClientRect().top + this.currentHeight - 60;
+                });
+                this.priceListHeight =
+                  this.$refs.pricelist.getBoundingClientRect().top +
+                  this.currentHeight -
+                  60;
+              }, 1000);
+
               try {
                 document
                   .querySelector("#scrollId .q-page-container")
@@ -1032,6 +1078,21 @@ export default {
 </script>
 
 <style>
+  .active-trip-module {
+    color: var(--q-color-primary);
+    font-weight: 800;
+    position: relative;
+  }
+  .active-trip-module::before {
+    position: absolute;
+    content: " ";
+    top: 0;
+    bottom: 0;
+    left: -25px;
+    width: 5px;
+    border-radius: 5px;
+    background: var(--q-color-primary);
+  }
 .slider-item {
   transform: scale(1);
   transition-timing-function: ease;