详情页 日期选项

src/pages/detailsProduct.vue

@@ -13,9 +13,9 @@
         " 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 }">
+            currentHeight < navs[0].top
+            )||$q.platform.is.mobile
+        " :style="{ transform: $q.platform.is.mobile?'':stickyHeight }">
         <div style="max-width: 1200px; margin-left: auto; margin-right: auto"
           :class="{ 'q-px-md': $q.screen.width < 1220 }" class="q-py-sm row items-center">
           <span class="col product-price text-subtitle1 text-weight-bold" style="text-align: left"
@@ -108,7 +108,8 @@
           border-top: 1px solid #eee;
           box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
           z-index: 999;
-        " v-if="currentHeight > priceListHeight + 800 && $q.platform.is.mobile" :style="{ transform: stickyHeight }">
+        " v-if="currentHeight > priceListHeight + 800 && $q.platform.is.mobile" 
+        :style="{ transform: stickyHeight }">
         <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" align="left"
           narrow-indicator>
           <q-tab v-for="(x, i) in navs" :key="i" @click="goScrollHandler(x.top + 20)" :name="x.display"
@@ -119,15 +120,20 @@
         <div style="max-width: 1200px; margin-left: auto; margin-right: auto">
           <div class="text-h6">選擇方案</div>
           <div class="rounded-borders bg-white q-pa-md q-mt-md" v-if="$q.platform.is.mobile">
-            <q-field class="q-mt-md" stack-label label="選擇日期、選項" standout dense>
-              <div class="self-center full-width no-outline" tabindex="0">
+            <div style="background: rgba(0, 0, 0, 0.05);border-radius: 4px;" 
+            class="q-mt-md q-pa-sm relative" 
+            @click="showDate = !showDate">
+              <div class="fz12 absolute" style="left: 10px;top:5px">選擇日期、選項</div>
+              <div class="fz14 self-center full-width no-outline q-pt-md " tabindex="0">
                 {{ currentPrice.startDate }}
               </div>
-              <q-popup-proxy ref="qDateProxy">
-                <calendar v-loading="calLoading" class="bg-white q-pa-md" :priceList="dataList.priceList"
+            </div>
+            <popup mode="top" v-model="showDate">
+              <q-card flat class="rounded-borders q-py-md">
+                <calendar v-loading="calLoading" class="bg-white q-pa-md" :tcid="msg.tcid" :priceList="dataList.priceList" :dataList="dataList"
                   @change="changeChosenDateHandler" ref="calendarMobile"></calendar>
-              </q-popup-proxy>
-            </q-field>
+              </q-card>
+            </popup>
             <order-preview :travel="dataList" :price="currentPrice" @reset="resetHandler"
               @changeCity="changeCityHandler" v-if="currentPrice && currentPrice.startDate"></order-preview>
           </div>
@@ -463,6 +469,7 @@
   import block from "src/components/trip/block/index";
   import Flight from "src/components/trip/flight.vue";
   import NoneData from "src/components/common/noneData.vue";
+  import popup from "../components/props/index";
   export default {
     props: [],
     data() {
@@ -596,6 +603,7 @@
         moreDays: 0,
         calLoading: false,
         loadCount: 0,
+        showDate: true,
       };
     },
     components: {
@@ -608,6 +616,7 @@
       block,
       Flight,
       NoneData,
+      popup
     },
     watch: {
       days: {
@@ -729,7 +738,7 @@
         let temp = this.getScroll().top;
         this.stickyHeight = document.querySelector(".q-header--hidden") ?
           "translateY(0px)" :
-          "translateY(45px)";
+          "translateY(54px)";
         this.currentHeight = temp;
         if (
           this.videoPosition > 0 &&
@@ -832,7 +841,8 @@
           }
         }
         if (this.$q.platform.is.mobile) {
-          this.$refs.qDateProxy.hide();
+          
+          // this.$refs.qDateProxy.hide();
         }
         this.$forceUpdate();
         this.$nextTick(() => {
@@ -973,6 +983,11 @@
                   }
                 });
               }
+              if(this.$q.platform.is.mobile){
+                setTimeout(() => {
+                  this.showDate = false;
+                }, 100);
+              }
             } catch (error) {}
             this.$q.loading.hide();
             this.loadCount++