Merge branch 'master' of http://gitlab.oytour.com/viitto/million

src/components/car/orderPreview.vue

 <template>
   <div class="column full-height">
     <div class="col">
-      <div class="text-right">
+      <div class="text-right" v-if="$q.platform.is.desktop">
         <q-btn
           color="primary"
           icon="refresh"
@@ -112,23 +112,29 @@
         <span class="text-subtitle2 text-grey-6 col">總金額</span>
         <span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</span>
       </div>
-      <div class="q-mt-md text-right">
-        <span class="q-mr-lg f12 text-negative" v-if="!p.startDate" >
+      <div class="q-mt-md text-right"
+      :class="{'row wrap justify-end items-start':$q.platform.is.mobile}">
+        <span :class="{'col-12 q-mb-sm':$q.platform.is.mobile}">
+        <span class="f12 text-negative" v-if="!p.startDate" 
+        :class="{'q-mr-lg':$q.platform.is.desktop}">
           {{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}} 
         </span>
-        <span class="q-mr-lg f12 text-negative" 
+        <span class="f12 text-negative" 
+        :class="{'q-mr-lg':$q.platform.is.desktop}"
         v-if="(p.startDate&&!selectedCarObj)
         ||(p.startDate&&dataList.CarType==1&&(!selectedAirportObj||!unCarObj))
         ||(p.startDate&&dataList.CarType==2&&(!selectedAirportObj||!onCarObj))
         ||(p.startDate&&dataList.CarType==3&&(!onCarObj||!unCarObj))" >
           {{`請選擇上面的${dataList.CarType==3?'車類型、上車下車點':dataList.CarType==1?'機場、車類型、下車點':'機場、車類型、上車點'}`}} 
         </span>
+        </span>
         <q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" 
         :disable="sumPrice==0||!selectedCarObj
         ||(dataList.CarType!=3&&!selectedAirportObj)
         ||(dataList.CarType==1&&!unCarObj)||(dataList.CarType==2&&!onCarObj)
         ||(dataList.CarType==3&&(!onCarObj||!unCarObj))"
         @click="goOrderHandler"/>
+        
       </div>
     </div>
   </div>
@@ -176,6 +182,7 @@ export default {
   },
   created() {
     this.initModel();
+    console.log(this.p,'=======')
     if(this.p.startDate){
       this.chosenObj.startDate = this.p.startDate;
       this.calcMoney()

src/pages/detailsCar.vue

@@ -12,6 +12,12 @@
         z-index: 999;
       "
       class="bg-white"
+      v-if="
+        (currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
+        (currentHeight > priceListHeight &&
+          currentHeight < navs[0].top &&
+          $q.platform.is.mobile)
+      "
       :style="{ transform: stickyHeight }"
     >
       <div
@@ -31,7 +37,7 @@
           unelevated
           class="q-px-xl"
           label="選擇方案"
-          @click="goScrollHandler('#scheme')"
+          @click="goScrollHandler(priceListHeight)"
         />
       </div>
     </div>
@@ -180,7 +186,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 +233,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>
@@ -243,20 +249,12 @@
         style="max-width: 1200px; margin-left: auto; margin-right: auto"
       >
         <div class="text-h6">選擇方案</div>
-        <div
-          style="
-            background: #fff;
-            padding: 20px;
-            border-radius: 10px;
-            margin-top: 20px;
-          "
-        >
           <div
             class="rounded-borders bg-white q-pa-md q-mt-md"
             v-if="$q.platform.is.mobile"
           >
             <q-field
-              class="q-my-md"
+              class="q-mt-md"
               stack-label
               label="選擇日期、選項"
               standout
@@ -274,22 +272,20 @@
                 ></calendar>
               </q-popup-proxy>
             </q-field>
-            <template v-if="currentPrice && currentPrice.startDate">
-              <order-preview
-                class="q-pa-md"
-                :dataList="dataList"
-                :configId="msg.configId"
-                :Month="currentYM.str"
-                :price="currentPrice"
-                @reset="resetHandler"
-                @getPriceList="getPriceList"
-              ></order-preview>
-            </template>
+            <order-preview
+              :dataList="dataList"
+              :configId="msg.configId"
+              :Month="currentYM.str"
+              :price="currentPrice"
+              @reset="resetHandler"
+              @getPriceList="getPriceList"
+            ></order-preview>
+            
           </div>
           <!--方案选择区 -->
-          <!-- <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
+          <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
             所選方案詳情
-          </div> -->
+          </div>
           <div
             class="bg-white rounded-borders q-mt-md"
             v-if="priceList && priceList.length > 0"
@@ -313,7 +309,7 @@
                 </div>
                 <div class="text-grey f12">
                   <ul class="q-pl-md no-margin">
-                    <li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
+                    <li v-for="(x, i) in warnBuy" :class="{'q-mt-md':$q.platform.is.desktop|(i!=0&&$q.platform.is.mobile)}" :key="i">
                       {{ x }}
                     </li>
                   </ul>
@@ -331,7 +327,7 @@
                     color="primary"
                     outline
                     :label="showOrderPreview ? '取消選擇' : '選擇'"
-                    @click="showOrderPreview = !showOrderPreview"
+                    @click="changeShowOrderPreviewHandler"
                     class="q-px-lg"
                   />
                 </div>
@@ -384,7 +380,7 @@
               </div>
             </div>
           </div>
-        </div>
+        
       </div>
     </div>
 
@@ -397,7 +393,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 +404,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 +442,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 +491,6 @@
           </div>
         </div>
         <div
-          id="experiencelocation"
           class="text-h5 text-weight-bold text-left q-mt-xl"
           ref="experiencelocation"
           :class="{
@@ -502,29 +517,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 +538,6 @@
           }"
         ></div>
         <div
-          id="cancelTips"
           class="text-h5 text-weight-bold text-left q-mt-xl"
           ref="cancelTips"
           :class="{
@@ -581,6 +572,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 +580,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 +672,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: "取消政策",
@@ -748,6 +745,13 @@ export default {
       immediate: true,
       deep: true,
     },
+    currentPrice: {
+      handler: function (val, oldval) {
+        this.currentPrice = val;
+      },
+      immediate: false,
+      deep: true,
+    },
   },
   created() {
     if (this.$route.params.id) {
@@ -758,6 +762,7 @@ export default {
     }
   },
   mounted() {
+    window.addEventListener("scroll", this.handleScroll);
     const timeStamp = Date.now()
     const formattedString = date.formatDate(timeStamp, 'YYYY-MM-DD')
     this.currentYM = {
@@ -768,12 +773,36 @@ 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();
     // this.getCarPriceData();
   },
   methods: {
+    changeShowOrderPreviewHandler(){
+      this.showOrderPreview=!this.showOrderPreview
+      if(!this.showOrderPreview){
+      //   // this.currentPrice=null
+      //   if(this.currentPrice){
+      //     this.currentPrice.isSupportChildren=null
+      //     this.currentPrice.unionCityList=null
+      //     this.currentPrice.singleRoomPrice=0
+      //     this.currentPrice.originalB2CPrice=0
+      //   }
+        this.changeTripShowHandler()
+      }
+    },
+    changeTripShowHandler() {
+      this.$nextTick(() => {
+        this.navs.forEach((x) => {
+          x.top =
+            this.$refs[x.val].getBoundingClientRect().top +
+            this.currentHeight -
+            60;
+        });
+      });
+    },
     getPriceList(Arr,id){
       this.priceList = JSON.parse(Arr)
       if(this.selectedCar === id) {
@@ -785,6 +814,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 +860,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;
@@ -824,7 +885,9 @@ export default {
     },
     resetHandler() {
       this.currentPrice.startDate = "";
-      this.$refs.calendar.reset();
+      if(!this.$q.platform.is.mobile){
+        this.$refs.calendar.reset();
+      }
     },
     changeChosenDateHandler(val) {
       val.price.version = new Date().getTime();
@@ -893,6 +956,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 +1106,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;

src/pages/detailsNew.vue

@@ -308,7 +308,7 @@
               </div>
               <div class="text-grey f12">
                 <ul class="q-pl-md no-margin">
-                  <li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
+                  <li v-for="(x, i) in warnBuy" :class="{'q-mt-md':$q.platform.is.desktop|(i!=0&&$q.platform.is.mobile)}" :key="i">
                     {{ x }}
                   </li>
                 </ul>