no message

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
@@ -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"
@@ -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>
 
@@ -749,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) {
@@ -777,6 +780,29 @@ export default {
     // 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) {
@@ -859,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();