no message

杨炀
Showing 6 changed files with 167 additions and 42 deletions
src/apiPc/booking.js
src/viewsPc/booking/hotel.vue
src/viewsPc/booking/hotelDetail.vue
src/viewsPc/booking/hotelOrder.vue
src/viewsPc/match/components/addWdsf.vue
src/viewsPc/match/components/quick-row.vue
--- a/src/apiPc/booking.js
View file @410b27f
+++ b/src/apiPc/booking.js
View file @410b27f
@@ -12,13 +12,11 @@ export function getHotelById(id) {
        method: 'get'
    })
 }
-export function getHotelRooms(id) {
+export function getHotelRooms(params) {
    return request({
        url: `/ota/activityRoom/list`,
        method: 'get',
-        params: {
+        params: params
-            hotelId:id
-        }
    })
 }
--- a/src/viewsPc/booking/hotel.vue
View file @410b27f
+++ b/src/viewsPc/booking/hotel.vue
View file @410b27f
@@ -35,7 +35,7 @@
          </el-col>
          <el-col :span="8" class="text-right">
            <div class="price">¥<span>{{ h.price }}</span><i v-if="language==0">起</i></div>
-            <el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Book Now' }} ⇀</el-button>
+            <el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
          </el-col>
        </el-row>
    </el-card>
--- a/src/viewsPc/booking/hotelDetail.vue
View file @410b27f
+++ b/src/viewsPc/booking/hotelDetail.vue
View file @410b27f
@@ -53,11 +53,11 @@
      <el-card class="mt30 mb60">
        <div class="lineHead">
          <ul>
-            <li>{{ language == 0 ? '房型选择' : 'Room Type' }}</li>
+            <li>{{ language == 0 ? '房型选择' : 'Available Rooms' }}</li>
          </ul>
        </div>
        <div>
-          <div v-for="(r,index) in roomList" :key="index" class="room"  @click="goOrder(r)">
+          <div v-for="(r,index) in roomList" :key="index" class="room">
            <el-row :gutter="30" align="middle">
              <el-col :span="4">
                <div class="roomImg">
@@ -68,26 +68,32 @@
                <h3 class="name">{{ r.roomType }}</h3>
                <el-row :gutter="10">
                  <el-col :span="8">{{ r.area }}m²</el-col>
-                  <el-col :span="8" v-show="r.windowFlag==1"> 有窗</el-col>
+                  <el-col :span="8" v-show="r.windowFlag==1"> {{ language==0?'有窗':'With windows' }}</el-col>
-                  <el-col :span="8" v-show="r.windowFlag==0"> 无窗</el-col>
+                  <el-col :span="8" v-show="r.windowFlag==0"> {{ language==0?'无窗':'Windowless' }}</el-col>
-                  <el-col :span="8" v-show="r.bathroomFlag==1"> 热水洗浴</el-col>
+                  <el-col :span="8" v-show="r.bathroomFlag==1"> {{ language==0?'热水洗浴':'Shower' }}</el-col>
                  <!-- <text v-show="r.bathroomFlag==0"> </text> -->
-                  <el-col :span="8" v-show="r.addBedFlag==1"> 允许加床 </el-col>
+                  <el-col :span="8" v-show="r.addBedFlag==1"> {{ language==0?'允许加床':'Extra bed' }} </el-col>
-                  <el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">{{ r.breakfastNum }}份早餐</el-col>
+                  <el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">
-                  <el-col :span="8" v-else>无早餐</el-col>
+                    {{ r.breakfastNum }}{{ language==0?'份早餐':' breakfasts' }}
+                  </el-col>
+                  <el-col :span="8" v-else>{{ language==0?'无早餐':'No breakfast' }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="3">
-                <div class="price">¥<span>{{r.roomPrice}}</span></div>
+                <div class="price">{{ language==0?'¥':'€' }}<span>{{r.roomPrice}}</span></div>
              </el-col>
              <el-col :span="3">
+                  <div class="bg-lineg" v-if="language==0"   @click="goOrder(r)">
-                  <div class="bg-lineg">
                    订
-                    <div>在线付</div>
+                    <div>{{ language==0?'在线付':'Online' }}</div>
+                  </div>
+                  <el-button v-else class="btn-lineG w100" round type="primary"   @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>
+                   <div class="text-center text-primary mt10 fontsize14" v-else>
+                     {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms
                   </div>
-                   <div class="text-center text-primary mt10 fontsize14"> 剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间</div>
              </el-col>
            </el-row>
          </div>
@@ -110,6 +116,9 @@ const language = useStorage('language', 0)
 const router = useRouter()
 const route = useRoute()
 const form = ref({})
+const query = ref({
+  hotelId: route.params.id
+})
 const loading = ref(false)
 const roomList = ref([])
 const map = ref(null)
@@ -126,7 +135,8 @@ function getData() {
  }).catch(err => {
    console.log(err)
  })
-  getHotelRooms(route.query.id).then(res => {
+  console.log('params',route.params)
+  getHotelRooms(query.value).then(res => {
    roomList.value = res.rows
  })
 }
@@ -200,7 +210,7 @@ function goOrder(room) {
    span{font-size: 36px;font-family: "DIN Alternate"}
  }
  .bg-lineg{margin: auto;border-radius: 10px;text-align: center;padding: 7px 2px 2px;
-    font-size: 24px;width:66px;
+    font-size: 24px;width:66px;cursor: pointer;
    div{background: #fff;font-size: 13px;border-radius: 20px;padding: 0 10px;
      color: #453DEA;font-weight: 500;}
  }
--- a/src/viewsPc/booking/hotelOrder.vue
View file @410b27f
+++ b/src/viewsPc/booking/hotelOrder.vue
View file @410b27f
@@ -10,42 +10,48 @@
          <el-col :span="14" >
            <div class="border-info">
              <h3>{{hotelName}}</h3>
-<!--              <div class="roomType">{{room.roomType}}</div>-->
+              <div class="roomType">{{room.roomType}}</div>
              <div class="room">
                <span>{{room.bedType}}</span>
                <span>{{ ' | ' + room.area}}m²</span>
-                <span>{{ ' | ' + room.occupantsNum}}人入住</span>
+                <span>{{ ' | ' + room.occupantsNum}}{{ language==0?'人入住':' people' }}</span>
-                <span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum}} 份早餐</span>
+                <span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum}} {{ language==0?'份早餐':'breakfasts' }}</span>
-                <span v-show="room.breakfastFlag=='0'">  | 无早餐</span>
+                <span v-show="room.breakfastFlag=='0'">  | {{ language==0?'无早餐':'No breakfast' }}</span>
-                <span v-show="room.bathroomFlag=='1'">  | 独立卫生间</span>
+                <span v-show="room.bathroomFlag=='1'">  | {{ language==0?'热水洗浴':'Shower' }}</span>
-                <span v-show="room.windowFlag=='1'"> |  有窗</span>
+                <span v-show="room.windowFlag=='1'"> |  {{ language==0?'有窗':'With windows' }}</span>
-                <span v-show="room.addBedFlag=='1'"> |  允许加床</span>
+                <span v-show="room.addBedFlag=='1'"> |  {{ language==0?'允许加床':'Extra bed' }}</span>
              </div>
            </div>
            <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
            <div class="border-rr mt20 pd20">
-              <el-form :model="form" label-width="100px">
+              <el-form :model="form" :label-width="language == 0 ?'100':'150'">
-                <el-form-item label="入住日期">
+                <el-form-item :label="language==0?'入住日期':'Check-in date'">
-                  <el-date-picker
+                  <el-date-picker @change="getDaysBetween"
                    v-model="rzRange"
                    type="daterange"
-                    placeholder="选择日期"
+                    :placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
-                    value-format="yyyy-MM-dd"
+<!--                    :picker-options="pickerOptions"-->
-                    :picker-options="pickerOptions"
-                  />
                </el-form-item>
-                <el-form-item label="房间数">
+                <el-form-item :label="language==0?'房间数':'Rooms'">
                  <el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum" />
                  <div class="red" v-if="rzRange[1]" style="margin:0 8px;display: block;width: 8em;">
-                    <span>剩余房间数:{{canOrderNum}}</span>
+                    <span v-if="language == 0">剩余房间数:{{canOrderNum}}</span>
+                    <span v-else>{{canOrderNum}} Remaining rooms</span>
                  </div>
                </el-form-item>
                <el-form-item v-for="(n,index) in form.roomNum" :key="index"  :label="`入住人${index+1}`">
                  <el-input v-model="rzUserArr[index]" placeholder="每间填一位住客姓名"/>
                </el-form-item>
                <el-form-item label="预计到店">
+                  <el-select v-model="form.ddDate" placeholder="请选择预计到店时间">
+                    <el-option
+                      v-for="item in ddDateArr"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="form.phone"/>
@@ -120,6 +126,76 @@ const rzRange = ref([])
 const rzUserArr = ref([])
 const money = ref(0)
 const choseRooms = ref([])
+const ddDateArr = ref([
+    {
+      value: '08:00',
+      label: '08:00'
+    },
+    {
+      value: '09:00',
+      label: '09:00'
+    },
+    {
+      value: '10:00',
+      label: '10:00'
+    },
+    {
+      value: '11:00',
+      label: '11:00'
+    },
+    {
+      value: '12:00',
+      label: '12:00'
+    },
+    {
+      value: '13:00',
+      label: '13:00'
+    },
+    {
+      value: '14:00',
+      label: '14:00'
+    },
+    {
+      value: '15:00',
+      label: '15:00'
+    },
+    {
+      value: '16:00',
+      label: '16:00'
+    },
+    {
+      value: '17:00',
+      label: '17:00'
+    },
+    {
+      value: '18:00',
+      label: '18:00'
+    },
+    {
+      value: '19:00',
+      label: '19:00'
+    },
+    {
+      value: '20:00',
+      label: '20:00'
+    },
+    {
+      value: '21:00',
+      label: '21:00'
+    },
+    {
+      value: '22:00',
+      label: '22:00'
+    },
+    {
+      value: '23:00',
+      label: '23:00'
+    },
+    {
+      value: '00:00',
+      label: '00:00'
+    }
+])
 let usedays = 0
 onMounted(()=>{
  console.log(route.query)
@@ -136,6 +212,8 @@ function changeRoomNum(e) {
  if (form.value.addNum > e) {
    form.value.addNum = e
  }
+  console.log(e)
+  rzUserArr.value.length = e
  countMoney()
 }
 function changeBed() {
@@ -151,6 +229,47 @@ function checkreRooms() {
    canOrderNum.value = res.data.useCount
  })
 }
+function getDaysBetween(e) {
+  console.log('入住时间arr',e,rzRange.value)
+  var d1 = Date.parse(e[0])
+  var d2 = Date.parse(e[1])
+  if (d1 == d2) {
+    usedays = 0
+    ElMessage.error('入住时间跨度需大于一天')
+    // console.trace()
+    rzRange.value = []
+    return
+  } else {
+    var days = (d2 - d1) / (1 * 24 * 60 * 60 * 1000);
+    usedays = days
+  }
+  countMoney()
+  var startTime = getDate(rzRange.value[0]);
+  var endTime = getDate(rzRange.value[1]);
+  var dateArr = [];
+  while ((endTime.getTime() - startTime.getTime()) > 0) {
+    var year = startTime.getFullYear();
+    var month = (startTime.getMonth() + 1).toString().length === 1 ? "0" + (parseInt(startTime.getMonth()
+        .toString(), 10) + 1) : (startTime.getMonth() + 1);
+    var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
+    dateArr.push(year + "-" + month + "-" + day);
+    startTime.setDate(startTime.getDate() + 1);
+  }
+  choseRooms.value = dateArr;
+  checkreRooms()
+}
+function getDate(datestr) {
+  var temp = datestr.split("-");
+  if (temp[1] === '01') {
+    temp[0] = parseInt(temp[0], 10) - 1;
+    temp[1] = '12';
+  } else {
+    temp[1] = parseInt(temp[1], 10) - 1;
+  }
+  //new Date()的月份入参实际都是当前值-1
+  var date = new Date(temp[0], temp[1], temp[2]);
+  return date
+}
 function countMoney() {
  money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
      .addNum * usedays)).toFixed(2)
--- a/src/viewsPc/match/components/addWdsf.vue
View file @410b27f
+++ b/src/viewsPc/match/components/addWdsf.vue
View file @410b27f
@@ -91,9 +91,7 @@
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" class="btn-lineG w200px" round @click="submitForm">
-          {{
+          {{language == 0 ? '确定' : 'Save' }}
-            language == 0 ? '确定' : 'Save'
-          }}
        </el-button>
      </div>
    </template>
--- a/src/viewsPc/match/components/quick-row.vue
View file @410b27f
+++ b/src/viewsPc/match/components/quick-row.vue
View file @410b27f
@@ -46,7 +46,7 @@
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
-        <div class="funcBtn" @click="building">
+        <div class="funcBtn" @click="goBooking(1)">
          <img src="@/assets/dance/btn01.png"/>
          <h4>Hotel Reservation</h4>
        </div>