no message

src/components/car/orderPreview.vue

@@ -13,44 +13,32 @@
       <template v-if="dataList.CarType!=3">
         <div class="text-grey-6 f12 q-my-md">選擇機場</div>
         <div class="row wrap">
-          <q-btn @click="handleSelect(item,1)"
-            :color="selectedAirportObj&&item.Id === selectedAirportObj.Id?'primary':'grey-5'"
-            unelevated
-            class="car-tag mr q-mb-sm"
-            v-for="item in AirportList"
-            :key="item.Id"
-          >
-            {{ item.AirportName }}
-          </q-btn>
+          <div v-for="(x,i) in AirportList" :key="i">
+            <q-chip size="14px" clickable @click="handleSelect(x,1)" 
+            :text-color="selectedAirportObj&&selectedAirportObj.Id==x.Id?'white':'dark'" 
+            :color="selectedAirportObj&&selectedAirportObj.Id==x.Id?'primary':'grey-3'" square>{{ x.AirportName }}</q-chip>
+          </div>
         </div>
       </template>
-      <div class="row">
-        <div v-if="dataList.CarType!=1">
+      <div class="row no-wrap">
+        <div v-if="dataList.CarType!=1" :class="{'col':PlaceList.length>2}">
           <div class="text-grey-6 f12 q-my-md">選擇上車範圍</div>
           <div class="row wrap">
-            <q-btn @click="handleSelect(item,3)"
-              :color="onCarObj&&item.Id === onCarObj.Id?'primary':'grey-5'"
-              unelevated
-              class="car-tag mr q-mb-sm"
-              v-for="item in PlaceList"
-              :key="item.Id"
-            >
-              {{ item.Name }}({{ item.Range }}m)
-            </q-btn>
-          </div>
+            <div v-for="(x,i) in PlaceList" :key="i">
+              <q-chip size="14px" clickable @click="handleSelect(x,3)" 
+              :text-color="onCarObj&&onCarObj.Id==x.Id?'white':'dark'" 
+              :color="onCarObj&&onCarObj.Id==x.Id?'primary':'grey-3'" square>{{ x.Name }}({{ x.Range }}m)</q-chip>
+            </div>
           </div>
-        <div v-if="dataList.CarType!=2">
+        </div>
+        <div v-if="dataList.CarType!=2" class="q-ml-md" :class="{'col':PlaceList.length>2}">
           <div class="text-grey-6 f12 q-my-md">選擇下車範圍</div>
           <div class="row wrap">
-            <q-btn @click="handleSelect(item,4)"
-              :color="unCarObj&&item.Id === unCarObj.Id?'primary':'grey-5'"
-              unelevated
-              class="car-tag mr q-mb-sm"
-              v-for="item in PlaceList"
-              :key="item.Id"
-            >
-              {{ item.Name }}({{ item.Range }}m)
-            </q-btn>
+            <div v-for="(x,i) in PlaceList" :key="i">
+              <q-chip size="14px" clickable @click="handleSelect(x,4)" 
+              :text-color="unCarObj&&unCarObj.Id==x.Id?'white':'dark'" 
+              :color="unCarObj&&unCarObj.Id==x.Id?'primary':'grey-3'" square>{{ x.Name }}({{ x.Range }}m)</q-chip>
+            </div>
           </div>
         </div>
       </div>
@@ -58,15 +46,11 @@
       
       <div class="text-grey-6 f12 q-my-md">選擇車類型</div>
       <div class="row wrap">
-        <q-btn @click="handleSelect(item,2)"
-          :color="selectedCarObj&&item.Id === selectedCarObj.Id?'primary':'grey-5'"
-          unelevated
-          class="car-tag mr"
-          v-for="item in CarTypeList"
-          :key="item.Id"
-        >
-          {{ item.CarName }}({{ item.PeopleNum }}人)
-        </q-btn>
+        <div v-for="(x,i) in CarTypeList" :key="i">
+          <q-chip size="14px" clickable @click="handleSelect(x,2)" 
+          :text-color="selectedCarObj&&selectedCarObj.Id==x.Id?'white':'dark'" 
+          :color="selectedCarObj&&selectedCarObj.Id==x.Id?'primary':'grey-3'" square>{{ x.CarName }}({{ x.PeopleNum }}人)</q-chip>
+        </div>
       </div>
       <div class="text-grey-6 f12 q-my-md">選擇數量</div>
       <div class="row items-end">

src/pages/Pickuporder/orderForm.vue

@@ -118,7 +118,12 @@
               <span class="q-mr-sm"
                 >({{CarObj.PeopleNum}}人/辆)</span
               >
-              <span class="q-mr-sm" v-if="details.TravelHours>0">{{details.TravelHours+'小時'}}</span>
+              <template v-if="details.TravelHours>0">
+                <q-icon name="iconfont icontime" size="20px" class="q-mr-xs q-ml-sm" />
+                <span class="q-mr-sm">
+                  {{`行程時間：${details.TravelHours}小時`}}
+                </span>
+              </template>
             </div>
           </div>
           <q-separator color="grey-2" class="q-mt-md" />

src/pages/detailsCar.vue

@@ -350,7 +350,7 @@
               style="border-top: 1px solid #eee"
               v-if="showOrderPreview"
             >
-              <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
+              <div v-if="dataList.FreeCancelDay>0||dataList.TravelHours>0" class="q-pa-md bg-grey-2 row items-center rounded-borders">
                 <div class="text-subtitle2 text-weight-bold q-mr-xl">
                   關於此方案
                 </div>
@@ -361,6 +361,8 @@
                   icon="iconfont iconcancel"
                   :label="`${dataList.FreeCancelDay}天前可免费取消`"
                 />
+                <q-chip v-if="dataList.TravelHours>0" class="transparent q-mr-xl no-padding" 
+                  icon="iconfont icontime" :label="`行程時間：${dataList.TravelHours}小時`" />
               </div>
               <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
                 <div class="col">