酒店预订

zhangmeng
Showing 2 changed files with 89 additions and 18 deletions
src/viewsPc/booking/hotelDetail.vue
src/viewsPc/booking/hotelOrder.vue
--- a/src/viewsPc/booking/hotelDetail.vue
View file @086b11e
+++ b/src/viewsPc/booking/hotelDetail.vue
View file @086b11e
@@ -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(() => {
-  getData()
+  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>
--- a/src/viewsPc/booking/hotelOrder.vue
View file @086b11e
+++ b/src/viewsPc/booking/hotelOrder.vue
View file @086b11e
@@ -29,12 +29,14 @@
            <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
-                  <el-date-picker @change="getDaysBetween"
+                    @change="getDaysBetween"
-                                  v-model="rzRange"
+                    v-model="rzRange"
-                                  type="daterange" :disabled-date="disabledDateRZ"
+                    type="daterange"
-                                  :placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
+                    :disabled-date="disabledDateRZ"
-                                  value-format="YYYY-MM-DD"/>
+                    :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>
                  <!--                    :picker-options="pickerOptions"-->
@@ -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)
+  // console.log('入住时间arr', e, rzRange.value)
-  var d1 = Date.parse(e[0])
+  // console.log(e)
-  var d2 = Date.parse(e[1])
+  // 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.')