酒店详情页编写

src/components/numberInputStep.vue

@@ -9,9 +9,41 @@
 </style>
 <template>
     <div>
-                    <i class="iconfont iconminus icon-size" @click="minusClick"></i>
-                    <span class="number">{{value}}</span>
-                    <i class="iconfont iconplus icon-size" @click="plusClick"></i>
+          <q-input
+            style="width: 150px"
+            @input="changePeople"
+            v-model="value"
+            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="minusClick"
+              />
+            </template>
+            <template v-slot:append>
+              <q-btn
+                color="primary"
+                size="sm"
+                class="q-px-none"
+                flat
+                icon="add"
+                @click="plusClick"
+              />
+            </template>
+          </q-input>
     </div>
 </template>
 <script>
@@ -48,7 +80,11 @@ export default {
                 this.value+= this.step
                 this.$emit('input', this.value)
             }
-        }
+        },
+    changePeople(val) {
+                this.value+= val
+        this.$emit('input', this.value)
+    },
     },
 }
 </script>
\ No newline at end of file

src/pages/city/cityDetail.vue

@@ -83,11 +83,21 @@
 <template>
   <div class="back">
     <div v-if="detail" class="wapper">
-      <q-breadcrumbs gutter="none">
-        <q-breadcrumbs-el label="Home" />
-        <q-breadcrumbs-el label="Components" />
-        <q-breadcrumbs-el label="Breadcrumbs" />
+      <div class="row items-center q-pt-md q-mb-lg">
+        <q-breadcrumbs
+          class="col f12 no-wrap q-mr-md"
+          style="font-size: 13px"
+        >
+          <q-breadcrumbs-el
+            icon="home"
+            label="首頁"
+            class="cursor-pointer"
+            @click="CommonJump('/index', {})"
+          />
+          <q-breadcrumbs-el :label="detail.AreaName" class="cursor-pointer" />
         </q-breadcrumbs>
+        <!-- <div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div> -->
+      </div>
 
       <div class="flex relative">
         <div class="absolute name">{{detail.AreaName}}</div>

src/pages/detailsHotal.vue

@@ -234,20 +234,20 @@
         style="max-width: 1200px; margin-left: auto; margin-right: auto"
       >
         <div class="text-h6">選擇方案</div>
-        <div class="flex room-item">
+        <!-- <div class="flex room-item"> -->
           <!-- 房型左侧 -->
-          <div class="mr">
+          <!-- <div class="mr">
             <img
               class="room-img"
               src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
             />
             <div class="f18 bold">房型标题</div>
             <div>房型描述</div>
-          </div>
+          </div> -->
           <!-- 房型右侧 -->
-          <div class="ml col-grow">
+          <!-- <div class="ml col-grow"> -->
             <!-- 房型规格 -->
-            <div class="flex justify-between">
+            <!-- <div class="flex justify-between">
               <div>
                 <div>
                   <span class="f16 bold">含早餐</span
@@ -266,9 +266,9 @@
               <div v-for="item in 4" :key="item">
                 购房{{ item }}: 注意事项{{ item }}
               </div>
-            </div>
-          </div>
-        </div>
+            </div> -->
+          <!-- </div> -->
+        <!-- </div> -->
         <div
           style="
             background: #fff;
@@ -277,7 +277,7 @@
             margin-top: 20px;
           "
         >
-          <div
+          <!-- <div
             class="rounded-borders bg-white q-pa-md q-mt-md"
             v-if="$q.platform.is.mobile"
           >
@@ -307,9 +307,9 @@
                 @reset="resetHandler"
               ></order-preview>
             </template>
-          </div>
+          </div> -->
           <!--方案选择区 -->
-          <select-room></select-room>
+          <select-room :detail="dataList"></select-room>
           <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
             所選方案詳情
           </div>
@@ -317,7 +317,7 @@
             class="bg-white rounded-borders q-mt-md"
             v-if="dataList.priceList && dataList.priceList.length > 0"
           >
-            <div class="q-pa-md row">
+            <!-- <div class="q-pa-md row">
               <div class="col">
                 <div
                   class="text-subtitle1 text-weight-bold row items-center"
@@ -361,13 +361,13 @@
                   最早可預訂日期：{{ dataList.priceList[0].startDate }}
                 </div>
               </div>
-            </div>
+            </div> -->
             <div
               class="q-pa-md"
               style="border-top: 1px solid #eee"
               v-if="showOrderPreview"
             >
-              <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
+              <!-- <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
                 <div class="text-subtitle2 text-weight-bold q-mr-xl">
                   關於此方案
                 </div>
@@ -383,7 +383,7 @@
                   icon="iconfont iconroundcheck"
                   label="6個工作日內（不含例休假）確認"
                 />
-              </div>
+              </div> -->
               <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
                 <div class="col">
                   <calendar
@@ -433,17 +433,22 @@
             'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
           }" id="product">产品介绍</div>
         <div
-          class="q-mt-md q-pb-xl"
+          class="q-mt-md"
           ref="diyContext"
           :style="{ zoom: zoomDiyContext }"
           v-html="dataList.Descriptions"
         ></div>
-        <div>
+        <div id="server"
+          class="text-h5 text-weight-bold text-left q-mt-xl"
+          :class="{
+            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
+          }">服务设施</div>
+        <div class="q-mt-sm flex flex-wrap">
           <template v-for="item in dataList.FacilityServices">
-            <div v-for="el in item.list" :key="el.ID">{{el.Content}}</div>
+            <div style="width: 25%; padding: 10px" v-for="el in item.list" :key="el.ID">{{el.Content}}</div>
           </template>
         </div>
-        <div
+        <!-- <div
           id="price"
           class="text-h5 text-weight-bold text-left q-mt-xl"
           ref="price"
@@ -482,7 +487,7 @@
           :class="{
             'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
           }"
-        ></div>
+        ></div> -->
         <div
           id="warning"
           class="text-h5 text-weight-bold text-left q-mt-xl"
@@ -672,11 +677,17 @@ export default {
           display: "產品介紹",
         },
         {
-          id: "#price",
+          id: "#server",
           top: 0,
           isActive: false,
-          display: "費用說明",
+          display: "服务设施",
         },
+        // {
+        //   id: "#price",
+        //   top: 0,
+        //   isActive: false,
+        //   display: "費用說明",
+        // },
         {
           id: "#warning",
           top: 0,

src/pages/hotel/selectRoom.vue

@@ -61,44 +61,49 @@
     <div>
           <div class="flex justify-between">
             <div class="f20 flex item-center">
-              湖岩美术馆 & 爱宝乐园 包车一日游
-              <span class="cancel">3天前可免费取消</span>
+              {{detail.Name}}
+              <!-- <span class="cancel">3天前可免费取消</span> -->
             </div>
             <div>
-              <div class="f20">
-                CNY {{ moneyFormat(detail.MinPrice, 0)
+              <div class="f20 text-right">
+                CNY {{ moneyFormat(minPrice, 0)
                 }}<span class="f14">起</span>
               </div>
-              <div>最早可预订日</div>
+              <div>最早可预订日{{startDate}}</div>
             </div>
           </div>
-          <div class="flex bold mr about">
+          <!-- <div class="flex bold mr about">
             关于此方案
             <div class="flex normal ml">
               <div class="ml">3天前可免费取消</div>
             </div>
-          </div>
+          </div> -->
           <div>
             <div class="mt mb bold f18">选择日期、选项</div>
             <div class="flex">
               <div style="width: 50%">
-                <div>请选择出发日期</div>
+                <!-- <div>请选择出发日期</div> -->
                 <div>
                   <div class="flex justify-between f20 bold padding">
                     <span>{{ currentYM.str }}</span>
                     <div>
-                      <i
-                        class="iconfont iconpreviewleft"
-                        style="font-size: 28px"
-                        :class="{ gray: isCurrent }"
+                      <q-btn
+            color="primary"
+            round
+            icon="iconfont iconpreviewleft"
+            flat
             @click="handleMinus"
-                      ></i
-                      ><i
+            class="q-mr-sm"
+            :disable="isCurrent"
+          />
+          <q-btn
+            color="primary"
+            round
+            icon="iconfont iconpreviewright"
+            flat
             @click="handlePlus"
-                        :class="{ gray: isLast }"
-                        class="iconfont iconpreviewright"
-                        style="font-size: 28px"
-                      ></i>
+            :disable="isLast"
+          />
                     </div>
                   </div>
                   <table class="date-table">
@@ -145,29 +150,33 @@
                 <div class="mt mb">房间选择</div>
                 <div>注意：以下计费与报价均是按照人数进行计费</div>
                 <!-- <div class="mt mb">选择辆数</div> -->
-                <div v-for="item in roomList" :key="item.id" class="flex bold f18 mt mb">
-                  <span>{{item.label}}</span>
-                  <div class="flex">
-                    <span>CNY{{item.price}}</span>
-                    <!-- <i class="iconfont iconminus"></i>
-                    <span>1</span>
-                    <i class="iconfont iconplus"></i> -->
+                <div class="mt pt" v-for="item in roomList" :key="item.id">
+                  <div class="flex justify-between bold f18 mt mb items-center">
+                  <span>{{item.RoomName}}</span>
+                  <div class="flex items-center">
+                    <span>CNY{{item.UPriceFormat}}</span>
                     <number-input-step :defaultValue="item.value" @input="handleValueChange(item, $event)"></number-input-step>
-                    <span>预计<span class="blue">{{item.room}}</span>间房</span>
+                    <span class="ml f14 normal">预计<span class="primary">{{item.Number}}</span>间房</span>
+                  </div>
                   </div>
+                  <div v-if="item.Tips" class="f12 mb grey">{{item.Tips}}</div>
                 </div>
                 <q-separator />
                 <div class="flex justify-between mt mb">
                   <span>总金额</span>
-                  <span class="f20">CNY 100</span>
+                  <span class="f20">CNY {{allPrice}}</span>
                 </div>
                 <div>
-                <div>仅剩 10 间已选 17 人 16 间</div>
-                <div>超出现有的库存预定，我们会即时与酒店协商，请保证收讯通畅</div>
+                <div>仅剩 {{hotelInfor.RemainingInventory}} 间已选 {{sumPeople}} 人 {{total}} 间</div>
+                <div v-if="total > hotelInfor.RemainingInventory">超出现有的库存预定，我们会即时与酒店协商，请保证收讯通畅</div>
                 </div>
                 <div class="flex flex-end">
-                  <q-btn class="mr" label="加入购物车"></q-btn>
-                  <q-btn label="立即订购"></q-btn>
+                  <!-- <q-btn
+          color="primary"
+          unelevated class="mr" label="加入购物车"></q-btn> -->
+                  <q-btn 
+          color="primary"
+          unelevated label="立即订购"></q-btn>
                 </div>
               </div>
             </div>
@@ -188,6 +197,12 @@ export default {
     components: {numberInputStep},
     data() {
         return {
+          minPrice: 0,
+          startDate: '',
+          total: 0, // 总的房间数
+          sumPeople: 0, //总的人
+          allPrice: 0, // 总价
+          allNumber: 0, // 剩余房间数
           hotelInfor: {},
           selectDateStr: '',
       daysList: [],
@@ -209,6 +224,7 @@ export default {
       },
       handleValueChange(item, event) {
         console.log('handleValueChange', item, event)
+        item.PeopleNumber = event
         this.calculateNum()
       },
     handleMinus() {
@@ -289,9 +305,12 @@ export default {
             }
             r.data.data.forEach((item, index) => {
               if (!isCurrent || index >= days) {
+                const {min, disabled} = this.getMinPrice(item)
                 list[y].push({
                   ...item,
                   day: ++day,
+                  price: min,
+                  disabled: disabled
                 });
                 week++;
                 if (week === 7) {
@@ -315,9 +334,28 @@ export default {
         },
         null
       );
+    },
+    getMinPrice(day) {
+      let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
+      let arr = []
+      // console.log('day min', day.PriceList[0][roomTyps])
+      roomTyps.forEach(item => {
+        if(day.PriceList[0][item]) {
+        arr.push(day.PriceList[0][item])
+      }
+      })
+      if(!this.startDate && arr.length) {
+        this.startDate = day.DateStr
+        this.minPrice = Math.min(...arr)
+      }
+      return {
+        min: Math.min(...arr),
+        disabled: !arr.length
+      }
     },
         // 组装可选房间
         setList() {
+          let detailList = []
             let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
             let roomLangs = ['标准间', '大床房', '自然单间', '三人间', '司机间']
             let tips = ['', '本房型不同的酒店入住人数限制不同，系统默认该房型只能入住一人', '', '', '']
@@ -345,16 +383,19 @@ export default {
                     detailList.push(dataMsg)
                 }
             })
+            console.log('detailList', detailList)
             this.roomList = detailList
         },
         // 计算房间数量
         calculateNum() {
             this.total = 0
             this.sumPeople = 0
-            this.parameters.DetailList.forEach(item => {
+            this.allPrice = 0
+            this.roomList.forEach(item => {
                 item.Number = Math.ceil(parseFloat(item.PeopleNumber) / parseFloat(item.LimitGuestNum))
                 this.total += item.Number
                 this.sumPeople += parseInt(item.PeopleNumber)
+                this.allPrice += item.PeopleNumber * item.Unit_Price
             })
         },
     }