no message

src/components/hotal/RoomCard.vue

 <template>
-    <div>
+    <div v-if="prices">
       <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-6':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-separator color="grey-2" class="q-my-md" />
+      <div class="rounded-borders col" v-for="(item,index) in prices" :key="index"
+      :class="{'max-width':$q.platform.is.mobile?'100vw':'auto'}">
+        <div class="non-selectable row">
+            <div class="q-pr-md cursor-pointer" @click="showImageHandler(item.roomImageURL,item.images)"
+            :class="{'col-2':$q.platform.is.desktop,'col-6':$q.platform.is.mobile}"
+            style="border-right: 1px solid #F5F5F5;">
+              <div class="relative rounded-borders overflow-hidden column bg-grey-1"
+              style="border: 1px solid #eee">
                 <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 class="fz15 text-weight-bold">
                     <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>
@@ -29,28 +26,61 @@
                     <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 class="fz13 text-grey-6">
                     <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)">
+                  style="background: rgba(23,23,23,.5);border-radius: 30px;">
                   <q-icon class="q-pl-xs" name="images"></q-icon>
                   <span>{{item.images.length}}</span>
                   </span>
                 </div>
               </div>
+            
+            </div>
+            <div class="col" :class="{'column':$q.platform.is.desktop,'row no-wrap scroll':$q.platform.is.mobile}">
+              <div class="relative q-pt-lg q-pb-sm q-pl-md" v-for="(subItem,indexs) in item.roomOptions"
+              :style="{'border-bottom': indexs+1!=item.roomOptions.length?'1px solid #F5F5F5':'',
+            'min-width':$q.platform.is.mobile?'150px':'auto'}">
+                <div class="q-pt-sm" 
+                :class="{'row no-wrap justify-between':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
+                    <template v-if="$q.platform.is.desktop">
+                    <div class="col-2 text-grey-6 q-pr-sm">
+                        {{subItem.bookingDeadline}}
+                    </div>
+                    <div class="col">{{subItem.childRates}}</div>
+                    <div class="col-2 text-red">
+                        <div>入住时间 {{subItem['check-inStartTime']}}</div>
+                        <div>最迟入住时间 {{subItem['finalCheck-inTime']}}</div>
+                        <div>最迟退房时间 {{subItem['finalCheck-outTime']}}</div>
+                    </div>
+                    </template>
+                    <div class="col" v-if="getPrice2(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)">
+                        <span class="fz13">CNY</span>
+                        <span class="text-red text-weight-bold q-px-sm"
+                        :class="{'fz28':$q.platform.is.desktop}">{{getPrice2(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)}}
+                          <span style="font-size:12px;color:#888888">/人均</span>
+                      </span>
+                        <!-- <span>{{getPrice(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)}}</span> -->
+                    </div>
+                    <div>
+                        <q-btn color="primary" label="立即預訂" unelevated :class="{'q-px-lg':$q.platform.is.desktop}"
+                        @click="goOrderHandler(subItem.roomOptionCd)"/>
+                    </div>
+                </div>
+                <span class="absolute q-px-sm text-white" :class="getMealType(subItem.meals)=='无餐'?'bg-dark':'bg-green'"
+                style="left: 0;top:0;border-top-right-radius: 5px;border-bottom-right-radius: 5px;">{{getMealType(subItem.meals)}}</span>
+                <span class="text-red-6" v-if="$q.platform.is.desktop">{{subItem.minNights}}</span>
               </div>
             </div>
         </div>
+        <q-separator color="grey-2" class="q-my-md"/>
+      </div>
       <q-dialog class="no-padding" v-model="showImagePriview" 
     v-if="images && images.length > 0">
       <image-preview :current="currentImage" :images="images"></image-preview>
@@ -63,7 +93,7 @@
   import ImagePreview from 'src/components/common/ImagePreview.vue'
   export default {
     components: {ImagePreview},
-    props: ["priceList"],
+    props: ["priceList",'SimilarObj','msg'],
     data() {
       return {
         images: [],
@@ -80,11 +110,39 @@
         },
         deep: true, // 深度监听
       },
+      SimilarObj: {
+        handler(newVal, oldValue) {
+          this.SimilarObj = newVal;
+        },
+        deep: true,
+      },
+      msg: {
+        handler(newVal, oldValue) {
+          this.msg = newVal;
+        },
+        deep: true,
+      },
     },
     created() {
       this.prices = this.priceList;
     },
     methods: {
+      goOrderHandler(item){
+      let order = {
+        msg: this.msg,
+        liveNvm: this.SimilarObj.liveNvm,
+        roomOptionCd: item,
+      }
+      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, {});
+    },
       init() {
         this.chooseObj = null
       },
@@ -97,6 +155,36 @@
         this.currentImage = url
         this.showImagePriview = true
       },
+    //获取价格
+    getPrice(price) {
+      //(chargeableRateInfoPerPersonForANightBySetCurrency/0.9975)*入住天数*入住人数
+      //天数
+          this.init();
+      return Math.ceil(price / this.SimilarObj.JapanIncrease)*(this.SimilarObj.numberOfAdults+this.SimilarObj.numberOfChildren)*this.DateDiff(this.SimilarObj.arrivalDate,this.SimilarObj.departureDate);
+    },
+    getPrice2(price){
+      if(this.SimilarObj.JapanIncrease)
+        return Math.ceil(price / this.SimilarObj.JapanIncrease)
+    },
+    //获取餐
+    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 "含晚餐";
+        }
+      }
+    },
+    
       //获取房型
     getGradeType(type) {
       let gradeType = "";

src/components/hotal/orderPreview.vue

@@ -20,7 +20,78 @@
           </div>
         </div>
       </template>
-      <div class="text-grey-6 f12 q-my-md">選擇數量</div>
+      <div class="text-grey-6 f12 q-my-md">住宿日期</div>
+      <div v-for="(x,index) in roomGroup" :key="index">
+        <div v-for="(y,i) in x.rateGroup" :key="i">
+          <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">{{y.stayDate}}</span></span>
+              </div>
+              <div v-if="$q.platform.is.mobile">
+                <span class="text-grey-7 product-price" style="font-size: 13px">
+                  <template v-if="y.perAdultRateBySetCurrency">
+                     CNY{{y.perAdultRateBySetCurrency}}/人
+                  </template>
+                  <template v-else="y.totalPerRoomRateBySetCurrency">
+                     CNY{{y.totalPerRoomRateBySetCurrency}}/晚
+                  </template>
+                  <!-- 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">
+                <template v-if="y.perAdultRateBySetCurrency">
+                  CNY{{y.perAdultRateBySetCurrency}}/人
+                </template>
+                <template v-else="y.totalPerRoomRateBySetCurrency">
+                  CNY{{y.totalPerRoomRateBySetCurrency}}/晚
+                </template>
+                <!-- 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>
+      
+      <!-- <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>
@@ -73,7 +144,7 @@
             </template>
           </q-input>
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee">
       <div class="row items-center">
@@ -135,6 +206,7 @@ export default {
       chosenObj: null,
       sumPrice:0,
       selectedObj: null,
+      roomGroup: null
     };
   },
   created() {
@@ -143,7 +215,7 @@ export default {
   methods: {
     goOrderHandler(){
       let order = {
-        msg: JSON.stringify(this.msg),
+        msg: this.msg,
         // hotelId: this.msg.hotelId,
         // arrivalDate: this.msg.arrivalDate,
         // departureDate: this.msg.departureDate,
@@ -152,7 +224,7 @@ export default {
         id: this.p.id,
         selectedObjId: this.selectedObj.id,
         roomOptionCd: this.selectedObj.roomOptionCd,
-        chosenObj: this.chosenObj,
+        Count: this.chosenObj.Count,
         sumPrice: this.sumPrice
       }
       let key = this.$md5(JSON.stringify(order))
@@ -167,11 +239,110 @@ export default {
     },
     handleSelect(item){
       this.selectedObj = item
-      console.log(this.selectedObj,'-----')
+      this.sumPrice = 0
       setTimeout(()=>{
-        this.calcMoney()
+        this.getData()
+        // this.calcMoney()
       },100)
     },
+    getData() {
+      let msg = JSON.parse(JSON.stringify(this.msg))
+      msg.roomOptionCd = this.selectedObj.roomOptionCd
+      this.$q.loading.show();
+      this.apipost(
+        "dmc_post_Get_GetJAPAN_RoomsList",
+        msg,
+        (r) => {
+          this.$q.loading.hide();
+          if (r.data.resultCode == 1) {
+            let rateGrouoLen = 0;
+            if(Object.prototype.toString.call(r.data.data.roomGroup) == '[object Object]'){
+                let arr = [];
+                arr.push(r.data.data.roomGroup);
+                this.roomGroup=arr;
+            }
+            this.roomGroup.forEach(x=>{
+                    if(Object.prototype.toString.call(x.rateGroup) == '[object Object]'){
+                        let arr = [];
+                        arr.push(x.rateGroup);
+                        x.rateGroup= arr;
+                    }
+                    let tt = 0;
+                    let tt2 = 0;
+                    let AdultTotalPrice = 0;
+                    let childToTalPrice = 0;
+                    let AdultCount = 0;
+                    let childCount = 0;
+
+                    let AdultJapanPrice = 0;
+                    let ChildJapanPrice = 0;
+                    let AdultJapanCount = 0;
+                    let childJapanCount = 0;
+                    
+                    //原始成人
+                    let oldAount=0;
+                    let childAount=0;
+                    let oldAuditPrice=0;
+                    let oldChildPrice=0;
+                    // this.TotalChildCount+=x.roomChildCount*x.rateGroup.length;
+
+                    rateGrouoLen+= x.rateGroup.length;
+                    // this.chekedChildCount = this.numberOfChildren*rateGrouoLen;
+                    //无价格 只有房间价格
+                    this.sumPrice = 0
+                    let onlyRoomPrice=0;
+                    let onlyJanpnase=0;
+                    x.rateGroup.forEach(z=>{
+                        if(z.perAdultRateBySetCurrency){
+                            z.oldAuditPrice = z.perAdultRateBySetCurrency;
+                            z.oldchildPrice = z.perChildRateBySetCurrency;
+
+                            z.perAdultRateBySetCurrency = Math.ceil(z.perAdultRateBySetCurrency/r.data.data.JapanIncrease);
+                            z.perChildRateBySetCurrency = Math.ceil(z.perChildRateBySetCurrency/r.data.data.JapanIncrease);
+                            if(x.roomAdultCount>0){
+                                AdultTotalPrice+=parseFloat(z.perAdultRateBySetCurrency);
+                                oldAuditPrice+=parseFloat(z.oldAuditPrice);
+
+                                AdultJapanPrice+=parseFloat(z.perAdultRate);
+
+                            }
+                            if(x.roomChildCount>0){
+                                childToTalPrice+=parseFloat(z.perChildRateBySetCurrency);
+                                oldChildPrice+=parseFloat(z.oldchildPrice);
+
+                                ChildJapanPrice+=parseFloat(z.perChildRate);
+                            }
+                        }
+                        if(z.totalPerRoomRateBySetCurrency){
+                            z.totalPerRoomRateBySetCurrency = Math.ceil(z.totalPerRoomRateBySetCurrency/r.data.data.JapanIncrease);
+
+                            onlyRoomPrice+=parseFloat(z.totalPerRoomRateBySetCurrency);
+                            onlyJanpnase+=parseFloat(z.totalPerRoomRate);
+                        }
+                        
+                    })
+                    AdultCount+=AdultTotalPrice*x.roomAdultCount;
+                    childCount+=childToTalPrice*x.roomChildCount;
+                    // AdultCount+=AdultTotalPrice;
+                    // childCount+=childToTalPrice;
+                    oldAount+=oldAuditPrice;
+                    childAount+=childAount;
+                    // this.parameters.totalChargeableRateInfo += parseFloat(AdultCount+childCount+onlyRoomPrice);
+                    // this.parameters.OldTotalPrice+=parseFloat(oldAount+childAount+onlyRoomPrice);
+                    AdultJapanCount+=AdultJapanPrice*x.roomAdultCount;
+                    childJapanCount+=ChildJapanPrice*x.roomChildCount;
+                    // this.SettlementPrice=this.parameters.totalChargeableRateInfo;
+                    // this.SettlementPrice=this.parameters.totalChargeableRateInfo;
+
+                    // let price=this.parameters.totalChargeableRateInfo;
+                    
+                    this.sumPrice += parseFloat(AdultJapanCount+childJapanCount+onlyJanpnase);
+                    console.log(this.sumPrice,'----')
+                  })
+                
+          }
+        })
+    },
     initModel() {
       this.sumPrice=0
       this.chosenObj = {