页面修改

src/components/trip/style2.vue

 <style>
-    .Style2_main{
-        position: relative;
-        margin-bottom: 60px;
-        margin-top: -10px;
-        padding: 40px 0;
-        background-color: #fff;
-        border-bottom: 1px solid #e5e5e5;
-        z-index: 3;
-    }
-    .Style2_main .wl-section-block{
-        width: 100%;
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 20px;
-        display:flex;
-    }
-    .Style2_main .wl-section-block>*{
-        flex:1;
-    }
-    .Style2_main .tour-intro{
-        padding-left:30px;
-    }
-    .Style2_main .tour_Nmae{
-        margin-bottom: 10px;
-        font-size: 24px;
-        font-weight: bold;
-    }
-    .Style2_main .drop-wrap{
-        position: relative;
-        margin-bottom:10px;
-        display: inline-block;
-        vertical-align: middle;
-    }
-    .drop-wrap a,.print_box{
-        margin-right: 10px;
-        margin-bottom: 10px;
-        display: inline-block;
-        font-size: 14px;
-        color: #006be2;
-        padding: 4px 8px;
-        transition: .15s ease-in;
-    }
-    .Style2_main .tour-detail-list{
-        padding: 0 0 20px;
-        font-size: 14px;
-        color: #999;
-        list-style: none;
-    }
-    .Style2_main .tour-detail-list li{
-        line-height:2;
-    }
-    .Style2_main .tour-cover2 img{
-        width:100%;
-        height:auto;
+  .Style2_main {
+    position: relative;
+    margin-bottom: 60px;
+    margin-top: -10px;
+    padding: 40px 0;
+    background-color: #fff;
+    border-bottom: 1px solid #e5e5e5;
+    z-index: 3;
+  }
+
+  .Style2_main .wl-section-block {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: flex;
+  }
+
+  .Style2_main .wl-section-block>* {
+    flex: 1;
+  }
+
+  .Style2_main .tour-intro {
+    padding-left: 30px;
+  }
+
+  .Style2_main .tour_Nmae {
+    margin-bottom: 10px;
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .Style2_main .drop-wrap {
+    position: relative;
+    margin-bottom: 10px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .drop-wrap a,
+  .print_box {
+    margin-right: 10px;
+    margin-bottom: 10px;
+    display: inline-block;
+    font-size: 14px;
+    color: #006be2;
+    padding: 4px 8px;
+    transition: .15s ease-in;
+  }
+
+  .Style2_main .tour-detail-list {
+    padding: 0 0 20px;
+    font-size: 14px;
+    color: #999;
+    list-style: none;
+  }
+
+  .Style2_main .tour-detail-list li {
+    line-height: 2;
+  }
+
+  .Style2_main .tour-cover2 img {
+    width: 100%;
+    height: auto;
+  }
+
+  @media only screen and (max-width: 768px) {
+    .Style2_main .wl-section-block {
+      padding: 0;
+      display: block;
     }
-    @media only screen and (max-width: 768px){
-        .Style2_main .wl-section-block {
-            padding: 0;
-            display: block;
-        }
-        .Style2_main{
-            padding:0;
-        }
+
+    .Style2_main {
+      padding: 0;
     }
+  }
+
 </style>
 <template>
   <div class="Style2_main">
     <div class="wl-section-block">
-        <div class="tour-cover2" v-if="imgCover.length>0">
-            <img :src="imgCover[0].Url"/>
-        </div>
-        <div class="tour-intro">
-            <div class="tour_Nmae">{{dataList.title}}</div>
-            <div class="drop-wrap">
-                <a>分享</a>
-                <a class="print_box" @click="window.print()">打印</a>
-            </div>
-            <ul class="tour-detail-list">
-                <li>行程編號：{{dataList.currentPriceInfo.tcnum}}</li>   
-                <li>旅遊地點：{{dataList.countryName}}</li>
-                <li>旅遊天數：{{dataList.dayNum}}天</li>
-                <li>出團日期：{{dataList.currentPriceInfo.startDate}}</li>
-            </ul>
+      <div class="tour-cover2" v-if="imgCover.length>0">
+        <img :src="imgCover[0].Url" />
+      </div>
+      <div class="tour-intro">
+        <div class="tour_Nmae">{{dataList.title}}</div>
+        <div class="drop-wrap">
+          <a>分享</a>
+          <a class="print_box" @click="window.print()">打印</a>
         </div>
+        <ul class="tour-detail-list">
+          <li>行程編號：
+            <template v-if="dataList.currentPriceInfo&&dataList.currentPriceInfo.tcnum">
+              {{dataList.currentPriceInfo.tcnum}}
+            </template></li>
+          <li>旅遊地點：{{dataList.countryName}}</li>
+          <li>旅遊天數：{{dataList.dayNum}}天</li>
+          <li>出團日期：
+            <template v-if="dataList.currentPriceInfo&&dataList.currentPriceInfo.startDate">
+              {{dataList.currentPriceInfo.startDate}}
+            </template>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -91,12 +111,12 @@
     props: ['dataList'],
     data() {
       return {
-        imgCover:[]
+        imgCover: []
       };
     },
     created() {},
     mounted() {
-        this.imgCover = JSON.parse(this.dataList.imgCover);
+      this.imgCover = JSON.parse(this.dataList.imgCover);
     },
     methods: {
 

src/components/trip/tripList.vue

@@ -2,9 +2,9 @@
   <div class="q-mt-lg q-mb-lg">
     <div class="section-block download1">
       <!-- <div class="group-title">{{plugData.Title}}</div> -->
-      <q-table :pagination.sync="paginationDesktop" :data="plugData.priceList" :columns="columns" row-key="id"
+      <q-table v-if="plugData.priceList&&plugData.priceList.length>0 && !$q.screen.xs" :pagination.sync="paginationDesktop" :data="plugData.priceList" :columns="columns" row-key="id"
         :filter="filter" table-header-class="travel-list" card-class="travel-list" :pagination-label="formatLabel"
-        rows-per-page-label=" " :rows-per-page-options="[]" TCNUM-data-labe="沒有找到適合的團期" v-if="!$q.screen.xs">
+        rows-per-page-label=" " :rows-per-page-options="[]" TCNUM-data-labe="沒有找到適合的團期">
         <template v-slot:body="props">
           <q-tr :props="props">
             <q-td key="startDate" :props="props">
@@ -41,7 +41,7 @@
           </q-tr>
         </template>
       </q-table>
-      <q-table :pagination.sync="pagination" v-if="$q.screen.xs" grid :data="plugData.priceList" :columns="columns"
+      <q-table :pagination.sync="pagination" v-if="plugData.priceList&&plugData.priceList.length>0 && $q.screen.xs"  grid :data="plugData.priceList" :columns="columns"
         row-key="id" :filter="filter" table-header-class="travel-list" card-class="travel-list"
         :pagination-label="formatLabel" rows-per-page-label=" " :rows-per-page-options="[]" TCNUM-data-labe="沒有找到適合的團期">
         <template v-slot:item="props">