no message

src/components/hotal/RoomCard.vue

+<template>
+    <div>
+      <div class="text-subtitle2 text-weight-bold">選擇房間類型、選項</div>
+      <div class="text-grey-6 f12 q-my-md">請選擇出房間類型</div>
+      <div class="rounded-borders">
+        <div class="non-selectable">
+          <div class="row wrap">
+            <div class="relative q-pa-xs cursor-pointer"
+            :class="{'col-4':prices.length>2,'col':prices.length<3}"
+            v-for="(item,index) in prices" :key="index">
+            <div class="rounded-borders overflow-hidden column "
+            :style="{'border': chooseObj&&item.id==chooseObj.id?'':'1px solid #eee'}"
+            :class="{'bg-grey-1 ':chooseObj&&item.id!=chooseObj.id,
+            'bg-primary shadow-24':chooseObj&&item.id==chooseObj.id}"
+            @click="chosenDateHandler(item)">
+              <q-img :src="item.roomImageURL" 
+              :ratio="16/9" style="width: 100%;"/>
+              <div class="column q-pt-xs q-pb-sm q-px-sm">
+                <span class="fz15 text-weight-bold"
+                :class="{'text-white':chooseObj&&item.id==chooseObj.id}">
+                  <span v-if="item.roomType==1">{{getGradeType(item.gradeType)}}单人间</span>
+                  <span v-if="item.roomType==2">{{getGradeType(item.gradeType)}}双人间</span>
+                  <span v-if="item.roomType==3">{{getGradeType(item.gradeType)}}大床房</span>
+                  <span v-if="item.roomType==4">{{getGradeType(item.gradeType)}}三人间</span>
+                  <span v-if="item.roomType==5">{{getGradeType(item.gradeType)}}四人间</span>
+                  <span v-if="item.roomType==6">{{getGradeType(item.gradeType)}}日式房</span>
+                  <span v-if="item.roomType==7">{{getGradeType(item.gradeType)}}日式+西式混合房</span>
+                  <span v-if="item.roomType==8">{{getGradeType(item.gradeType)}}大床房（小型）</span>
+                  <span v-if="(item.roomType==9||item.roomType=='')&&item.gradeType==''">未知房型</span>
+                </span>
+
+                <span class="fz13" 
+                :class="{'text-grey-6 ':chooseObj&&item.id!=chooseObj.id,
+                  'text-grey-2':chooseObj&&item.id==chooseObj.id}">
+                  <span v-if="item.smoking==0">禁烟, </span>
+                  <span v-if="item.smoking==1">可吸烟, </span>
+                  <span v-if="item.withBath==0">无浴室</span>
+                  <span v-if="item.withBath==1">有浴室</span>
+                </span>
+              </div>
+            </div>
+            <div class="absolute" style="right: 10px;bottom: 65px;">
+              <span class="text-white f12 q-px-sm row items-center" 
+              style="background: rgba(23,23,23,.5);border-radius: 30px;"
+              @click.stop="showImageHandler(item.roomImageURL,item.images)">
+              <q-icon class="q-pl-xs" name="images"></q-icon>
+              <span>{{item.images.length}}</span>
+              </span>
+            </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <q-dialog class="no-padding" v-model="showImagePriview" 
+    v-if="images && images.length > 0">
+      <image-preview :current="currentImage" :images="images"></image-preview>
+    </q-dialog>
+    </div>
+  </template>
+  
+  <script>
+  import { date } from "quasar";
+  import ImagePreview from 'src/components/common/ImagePreview.vue'
+  export default {
+    components: {ImagePreview},
+    props: ["priceList"],
+    data() {
+      return {
+        images: [],
+        currentImage:0,
+        showImagePriview: false,
+        chooseObj:null
+      };
+    },
+    watch: {
+      priceList: {
+        handler(newVal, oldValue) {
+          this.prices = newVal;
+          this.init();
+        },
+        deep: true, // 深度监听
+      },
+    },
+    created() {
+      this.prices = this.priceList;
+    },
+    methods: {
+      init() {
+        this.chooseObj = null
+      },
+      chosenDateHandler(item) {
+        this.chooseObj = item
+        this.$emit("change", item);
+      },
+      showImageHandler(url,img) {
+        this.images = img
+        this.currentImage = url
+        this.showImagePriview = true
+      },
+      //获取房型
+    getGradeType(type) {
+      let gradeType = "";
+      switch (parseInt(type)) {
+        case 1:
+          gradeType = "标准";
+          break;
+        case 2:
+          gradeType = "普通";
+          break;
+        case 3:
+          gradeType = "经济";
+          break;
+        case 4:
+          gradeType = "精品";
+          break;
+        case 5:
+          gradeType = "豪华";
+          break;
+        case 6:
+          gradeType = "套房";
+          break;
+      }
+      return gradeType;
+    },
+    reset() {
+      this.chooseObj = "";
+    },
+    },
+  };
+  </script>
+  
+  <style>
+  .hover-date:hover {
+    background: #eee;
+  }
+  </style>
+  
\ No newline at end of file

src/components/hotal/orderPreview.vue

+<template>
+  <div class="column full-height">
+    <div class="col">
+      <div class="text-right" v-if="$q.platform.is.desktop">
+        <q-btn
+          color="primary"
+          icon="refresh"
+          label="全部重選"
+          @click="resetHandler"
+          flat
+        />
+      </div>
+      <template v-if="p">
+        <div class="text-grey-6 f12 q-my-md">選擇類型</div>
+        <div class="row wrap">
+          <div v-for="(x,i) in p.roomOptions" :key="i">
+            <q-chip size="14px" clickable @click="handleSelect(x)" 
+            :text-color="selectedObj&&selectedObj.id==x.id?'white':'dark'" 
+            :color="selectedObj&&selectedObj.id==x.id?'primary':'grey-3'" square>{{getMealType(x.meals)}}</q-chip>
+          </div>
+        </div>
+      </template>
+      <div class="text-grey-6 f12 q-my-md">選擇數量</div>
+      <div class="row items-end">
+        <div class="col" :class="{'column':$q.platform.is.mobile}">
+          <div>
+            <span class="text-subtitle2 text-weight-bold">{{ selectedObj?getMealType(selectedObj.meals):''}}</span>
+            <span class="text-grey-6 f12 q-ml-sm"></span></span>
+          </div>
+          <div v-if="$q.platform.is.mobile">
+            <span class="text-grey-7 product-price" style="font-size: 13px">
+              CNY {{ selectedObj?getPrice2(selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency):0 }} /人均
+            </span>
+          </div>
+        </div>
+        <div class="row items-end">
+          <span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
+            CNY {{selectedObj? getPrice2(selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency):0 }} /人均
+          </span>
+          <q-input
+            style="width: 150px"
+            @input="changePeople"
+            v-model="chosenObj.Count"
+            class="col"
+            :class="{
+              'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
+            }"
+            mask="#"
+            reverse-fill-mask
+            dense
+            standout
+            readonly
+          >
+            <template v-slot:prepend>
+              <q-btn
+                color="primary"
+                size="sm"
+                class="q-px-none"
+                flat
+                icon="remove"
+                @click="addPeople('Count', -1)"
+              />
+            </template>
+            <template v-slot:append>
+              <q-btn
+                color="primary"
+                size="sm"
+                class="q-px-none"
+                flat
+                icon="add"
+                @click="addPeople('Count', 1)"
+              />
+            </template>
+          </q-input>
+        </div>
+      </div>
+    </div>
+    <div class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee">
+      <div class="row items-center">
+        <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"
+      :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" 
+        :class="{'q-mr-lg':$q.platform.is.desktop}">
+          {{$q.platform.is.mobile?'請選擇上面的房間類型':'請選擇左側的房間類型'}} 
+        </span>
+        <span class="f12 text-negative" 
+        :class="{'q-mr-lg':$q.platform.is.desktop}"
+        v-if="!selectedObj&&p" >
+          {{`請選擇上面的類型`}} 
+        </span>
+        </span>
+        <q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" 
+        :disable="sumPrice==0"
+        @click="goOrderHandler"/>
+        
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { date } from "quasar";
+export default {
+  props: ["SimilarList","msg","price","JapanIncrease","liveNvm"],
+  watch: {
+    price: {
+      handler(n, o) {
+        this.p = n;
+        this.p.roomOptions.forEach(x => {
+          if(this.selectedObj&&this.getMealType(x.meals)==this.getMealType(this.selectedObj.meals)){
+            this.selectedObj = x
+          }
+        });
+        this.calcMoney()
+      },
+      deep: true,
+      immediate: false
+    },
+    JapanIncrease: {
+      handler(n, o) {
+        this.JapanIncrease = n;
+        
+      },
+      deep: true,
+      immediate: true
+    },
+  },
+  data() {
+    return {
+      p: null,
+      chosenObj: null,
+      sumPrice:0,
+      selectedObj: null,
+    };
+  },
+  created() {
+    this.initModel();
+  },
+  methods: {
+    goOrderHandler(){
+      let order = {
+        msg: JSON.stringify(this.msg),
+        // hotelId: this.msg.hotelId,
+        // arrivalDate: this.msg.arrivalDate,
+        // departureDate: this.msg.departureDate,
+        // roomGroup: this.msg.searchroomGroup,
+        liveNvm: this.liveNvm,
+        id: this.p.id,
+        selectedObjId: this.selectedObj.id,
+        chosenObj: this.chosenObj,
+        sumPrice: this.sumPrice
+      }
+      let key = this.$md5(JSON.stringify(order))
+      let pickuporderHotal = localStorage.getItem('pickuporderHotal')
+      pickuporderHotal = pickuporderHotal?JSON.parse(pickuporderHotal):[]
+      pickuporderHotal.push({
+        key,
+        order
+      })
+      localStorage.setItem("pickuporderHotal",JSON.stringify(pickuporderHotal))
+      this.CommonJump('/HotalForm/'+key, {});
+    },
+    handleSelect(item){
+      this.selectedObj = item
+      setTimeout(()=>{
+        this.calcMoney()
+      },100)
+    },
+    initModel() {
+      this.sumPrice=0
+      this.chosenObj = {
+        startDate: "",
+        Count: 1,
+        remark: "",
+      };
+    },
+    resetHandler() {
+      this.selectedObj = null
+      setTimeout(()=>{
+        this.p = null;
+        this.initModel()
+      },100)
+      this.$emit("reset");
+    },
+    changePeople(val) {},
+    addPeople(m, i, isDf = false) {
+      this.chosenObj[m] = parseInt(this.chosenObj[m]) + i;
+      if(m!='Count'){
+        this.chosenObj[m] = this.chosenObj[m] < 0 ? 0 : this.chosenObj[m]++;
+      }else{
+        this.chosenObj[m] = this.chosenObj[m] < 1 ? 1 : this.chosenObj[m]++;
+      }
+      this.calcMoney()
+    },
+    calcMoney() {
+      if (!this.selectedObj) return;
+      let money = this.getPrice2(this.selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency) * this.chosenObj.Count;
+      this.sumPrice = money;
+    },
+    //获取餐
+    getMealType(meals) {
+      if (meals != "") {
+        let mealType = meals.split(",");
+        if (mealType[0] == 0 && mealType[2] == 0) {
+          return "无餐";
+        }
+        if (mealType[0] == 1 && mealType[2] == 1) {
+          return "含早晚餐";
+        }
+        if (mealType[0] == 1 && mealType[2] == 0) {
+          return "含早餐";
+        }
+        if (mealType[0] == 0 && mealType[2] == 1) {
+          return "含晚餐";
+        }
+      }
+    },
+    //获取价格
+    getPrice(price) {
+      return Math.ceil(price / this.JapanIncrease)*(this.auditNum+this.childNum)*this.DateDiff(this.SimilarMsg.arrivalDate,this.SimilarMsg.departureDate);
+    },
+    getPrice2(price){
+        return Math.ceil(price / this.JapanIncrease)
+    },
+  
+  },
+};
+</script>
+
+<style></style>