酒店预订

@@ -59,7 +59,19 @@
       <el-card class="mt30 mb60">
         <div class="lineHead">
           <ul>
-            <li>{{ language == 0 ? '房型选择' : 'Available Rooms' }}</li>
+            <li>
+              {{ language == 0 ? '房型选择' : 'Available Rooms' }}
+              <span style="margin-left: 100px">
+                 <el-date-picker
+                   @change="getDaysBetween"
+                   v-model="hotTime"
+                   type="daterange"
+                   :disabled-date="disabledDateRZ"
+                   :placeholder="language==0?'选择日期':'Select date'"
+                   format="YYYY-MM-DD"
+                   value-format="YYYY-MM-DD"/>
+              </span>
+            </li>
           </ul>
         </div>
         <div>
@@ -89,11 +101,14 @@
                 <div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.roomPrice:r.roomPriceEn}}</span></div>
               </el-col>
               <el-col :span="3">
-                  <div class="bg-lineg" v-if="language==0"   @click="goOrder(r)">
+                <el-link v-if="language==0"  @click="goOrder(r)" :disabled="!r.useCount">
+                  <div  class="bg-lineg " :class="{'forbid':!r.useCount}"   >
                     订
                     <div>{{ language==0?'在线付':'Online' }}</div>
                   </div>
-                  <el-button v-else class="btn-lineG w100" round type="primary" @click="goOrder(r)">Select</el-button>
+                </el-link>
+
+                  <el-button  v-else class="btn-lineG w100" round type="pri mary" @click="goOrder(r)">Select</el-button>
 <!--                   <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">-->
 <!--                     剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间-->
 <!--                   </div>-->
@@ -111,11 +126,14 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup >
 import {useRouter} from "vue-router";
 import {ref, reactive, onMounted} from "vue";
 import {useRoute} from "vue-router";
+import {dayjs} from 'element-plus'
 import {getHotelById, getHotelRooms,checkRoomPayByUserId} from "@/apiPc/booking"
+import {getBaseInfoByActiveId} from "@/apiPc/booking";
+
 
 import {useStorage} from "@vueuse/core/index";
 import useUserStore from "@/store/modules/user";
@@ -129,12 +147,34 @@ const form = ref({})
 const query = ref({
   hotelId: route.query.id
 })
+const hotTime=ref([])
 const showAll = ref(false)
 const loading = ref(false)
 const roomList = ref([])
 const map = ref(null)
+const formTime=ref({})
 onMounted(() => {
+  console.log(route.params)
+  getBaseInfoByActiveId(route.params.cptId).then(res=>{
+    formTime.value = res.data || null
+  }).catch(err=>{
+    console.log(err)
+    formTime.value = null
+  }).finally(()=>{
+    console.log(formTime.value)
+    if (formTime.value){
+      if (dayjs().isBefore(dayjs(formTime.value.hqStart))){
+        hotTime.value[0]=dayjs(formTime.value.hqStart).format('YYYY-MM-DD')
+        hotTime.value[1]=dayjs(formTime.value.hqEnd).add(1,'day').format('YYYY-MM-DD')
+      } else{
+        hotTime.value[0]=dayjs().format('YYYY-MM-DD')
+        hotTime.value[1]=dayjs().add(1,'day').format('YYYY-MM-DD')
+      }
+    }
+
     getData()
+  })
+
 })
 
 function getData() {
@@ -147,13 +187,15 @@ function getData() {
     console.log(err)
   })
   query.value.hotelId = route.query.id
+  query.value.rzStart=hotTime.value?hotTime.value[0]:null
+  query.value.rzEnd=hotTime.value?hotTime.value[1]:null
   getHotelRooms(query.value).then(res => {
     roomList.value = res.rows
   })
 }
 
 function initMap() {
-  const TMap = (window as any).TMap
+  // const TMap = (window as any).TMap
   var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
   var map = new TMap.Map("map", {
     center: center,//设置地图中心点坐标
@@ -208,7 +250,7 @@ function goOrder(room) {
       ).then((res) => {
         console.log(res)
         router.push({
-          name:'myReservation'
+          name:'myReservation',
         })
       })
       //  .catch((res) => {
@@ -230,10 +272,19 @@ function goNext(room) {
     query:{
       room:encodeURIComponent(JSON.stringify(room)),
       hotelName:form.value.name,
-      checkInTime:form.value.checkInTime
+      checkInTime:form.value.checkInTime,
+      start:hotTime.value[0],
+      end:hotTime.value[1],
     }
   })
 }
+
+function getDaysBetween(){
+  console.log(hotTime.value)
+  getData()
+}
+
+
 function goMap() {
   return
     // var tencentMapUrl = "https://map.qq.com/";
@@ -242,6 +293,7 @@ function goMap() {
   var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:"+form.value.latitude+","+form.value.longitude+"&referer=yellowpage";
   window.open(url, "_blank")
 }
+
 </script>
 
 <style scoped lang="scss">
@@ -363,4 +415,13 @@ function goMap() {
   .el-icon{margin-right: 5px;}
 }
 .oddmb:nth-child(2){margin-bottom: 20px;}
+.forbid{
+  cursor:not-allowed !important;
+  background-color: rgba(0,0,0,.5) !important;
+  background: linear-gradient(90deg, #b38ce3, #3d3a79) !important;
+  color: #aca7a7 !important;
+  div{
+    color: #aca7a7 !important;
+  }
+}
 </style>

@@ -29,11 +29,13 @@
             <div class="border-rr mt20 pd20">
               <el-form :model="form" :label-width="language == 0 ?'100':'160'" :rules="rules" ref="formRef">
                 <el-form-item :label="language==0?'入住日期':'Check-in&Check-out'" required>
-
-                  <el-date-picker @change="getDaysBetween"
+                  <el-date-picker
+                    @change="getDaysBetween"
                     v-model="rzRange"
-                                  type="daterange" :disabled-date="disabledDateRZ"
-                                  :placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
+                    type="daterange"
+                    :disabled-date="disabledDateRZ"
+                    :placeholder="language==0?'选择日期':'Select date'"
+                    format="YYYY-MM-DD"
                     value-format="YYYY-MM-DD"/>
                   <div class="tip" v-if="lform.hqStart">{{ language==0?'可订日期':'Available date' }}：{{ lform.hqStart.slice(0, 10) }} ~ {{ lform.hqEnd.slice(0, 10) }}</div>
 
@@ -249,7 +251,9 @@ const ddDateArr = ref([
     label: '02:00'
   }
 ])
-const rules = ref({})
+const rules = ref({
+  phone: { required: true, message: language.value==0? '请输入联系电话':"Please enter a contact number", trigger: 'blur' }
+})
 
 let usedays = 0
 onMounted(() => {
@@ -258,7 +262,11 @@ onMounted(() => {
   console.log(room.value)
   hotelName.value = route.query.hotelName
   money.value = 0
+  rzRange.value=[]
+  rzRange.value=[route.query.start,route.query.end]
   initDays()
+  getDaysBetween()
+  // checkreRooms()
 })
 function initDays() {
   getBaseInfoByActiveId(route.params.cptId).then(res=>{
@@ -318,9 +326,11 @@ function checkreRooms() {
 }
 
 function getDaysBetween(e) {
-  console.log('入住时间arr', e, rzRange.value)
-  var d1 = Date.parse(e[0])
-  var d2 = Date.parse(e[1])
+  // console.log('入住时间arr', e, rzRange.value)
+  // console.log(e)
+  // console.log(Date.parse(rzRange.value[0]))
+  var d1 = Date.parse(rzRange.value[0])
+  var d2 = Date.parse(rzRange.value[1])
   if (d1 == d2) {
     usedays = 0
     ElMessage.error(language == 0 ? '入住时间跨度需大于一天' :'The duration of the stay must be more than one day.')