no message

@@ -21,3 +21,18 @@ export function getHotelRooms(id) {
         }
         }
     })
     })
 }
 }
+
+export function checkResidueRoom(data) {
+    return request({
+        url: `/ota/orderRoom/checkResidueRoom`,
+        method: 'post',
+        data: data
+    })
+}
+export function newsSubmitOrderHotel(data) {
+    return request({
+        url: `/ota/norder/submitOrderRoom`,
+        method: 'post',
+        data: data
+    })
+}

@@ -362,6 +362,12 @@ export const constantRoutes = [
             meta: { title: 'Hotel Reservation' }
             meta: { title: 'Hotel Reservation' }
           },
           },
           {
           {
+            path: 'hotel/:cptId/:hotelId/:roomId',
+            component: () => import('@/viewsPc/booking/hotelOrder'),
+            name: 'hotelOrder',
+            meta: { title: 'Hotel Reservation' }
+          },
+          {
             path: 'car/:cptId',
             path: 'car/:cptId',
             component: () => import('@/viewsPc/booking/car'),
             component: () => import('@/viewsPc/booking/car'),
             name: 'car',
             name: 'car',

@@ -61,8 +61,8 @@
   const list = ref([])
   const list = ref([])
   const loading = ref(false)
   const loading = ref(false)
   onMounted(()=>{
   onMounted(()=>{
+    query.value.activityId = route.params.cptId
     getList()
     getList()
-    cptId.value = route.params.cptId
   })
   })
 
 
   function getList() {
   function getList() {
@@ -78,7 +78,8 @@
     router.push({
     router.push({
       name:'hotelDetail',
       name:'hotelDetail',
       params:{
       params:{
-        hotelId:item.hotelId
+        hotelId:item.hotelId,
+        id:item.id
       }
       }
     })
     })
   }
   }

+<template>
+  <div>
+    <div class="box">
+      <el-card :body-style="{ padding: '0px' }" class="mt20">
+        <div slot="header">
+          <div class="bg-lineg">{{ language == 0 ? '酒店预约下单' : 'Hotel booking order' }}</div>
+        </div>
+
+        <el-row class="pd20" :gutter="20">
+          <el-col :span="14" >
+            <div class="border-info">
+              <h3>{{hotelName}}</h3>
+<!--              <div class="roomType">{{room.roomType}}</div>-->
+              <div class="room">
+                <span>{{room.bedType}}</span>
+                <span>{{ ' | ' + room.area}}m²</span>
+                <span>{{ ' | ' + room.occupantsNum}}人入住</span>
+                <span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum}} 份早餐</span>
+                <span v-show="room.breakfastFlag=='0'">  | 无早餐</span>
+                <span v-show="room.bathroomFlag=='1'">  | 独立卫生间</span>
+                <span v-show="room.windowFlag=='1'"> |  有窗</span>
+                <span v-show="room.addBedFlag=='1'"> |  允许加床</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-item label="入住日期">
+                  <el-date-picker
+                    v-model="rzRange"
+                    type="daterange"
+                    placeholder="选择日期"
+                    value-format="yyyy-MM-dd"
+                    :picker-options="pickerOptions"
+                  />
+                </el-form-item>
+                <el-form-item label="房间数">
+                  <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>
+                  </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-form-item>
+                <el-form-item label="联系电话">
+                  <el-input v-model="form.phone"/>
+                </el-form-item>
+
+                <div v-if="room.addBedFlag=='1'">
+                  <el-form-item label="是否加床">
+                      <el-radio-group>
+                        <el-radio v-model="form.isAddbed" label="1">是</el-radio>
+                        <el-radio v-model="form.isAddbed" label="0">否</el-radio>
+                      </el-radio-group>
+                  </el-form-item>
+                  <el-form-item label="加床张数">
+                    <el-input-number v-model="form.addNum" :min="0" :max="1" @change="changeBed" />
+                  </el-form-item>
+                  <div class="tip" v-if="form.isAddbed=='1'">* 一个房间最多加一张床</div>
+                </div>
+              </el-form>
+            </div>
+          </el-col>
+          <el-col :span="10">
+            <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
+            <div class="border-rr mt20 pd20 ccitemBox">
+              <label> 房费
+                <span class="fr">¥{{(room.roomPrice*form.roomNum*choseRooms.length).toFixed(2)}}</span>
+              </label>
+              <div class="ccitem" v-for="(c, index) in choseRooms" :key="index">
+                {{ c }}
+                <text>{{form.roomNum}}*¥{{room.roomPrice}}</text>
+              </div>
+
+              <label v-if="form.isAddbed=='1'">加床费
+                <span  class="fr">¥{{(room.bedPrice*form.addNum*choseRooms.length).toFixed(2)}}</span>
+              </label>
+
+              <div v-if="form.isAddbed=='1'" class="ccitem" v-for="(c, index) in choseRooms" :key="index">
+                {{ c }}
+                <text>{{form.addNum}}*¥{{room.bedPrice}}</text>
+              </div>
+
+              <label>共计<span  class="fr bigMoney">¥{{money}}</span></label>
+
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+      <div style="height: 60px;"></div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useRouter,useRoute} from "vue-router";
+import {ref, reactive, onMounted} from "vue";
+import {useStorage} from "@vueuse/core/index";
+import { checkResidueRoom,newsSubmitOrderHotel } from "@/apiPc/booking"
+import dayjs from 'dayjs'
+import {ElMessage} from "element-plus";
+const language = useStorage('language', 0)
+const router = useRouter()
+const route = useRoute()
+const room = ref({})
+const hotelName = ref('')
+const canOrderStart = ref('')
+const canOrderNum = ref(0)
+const form = ref({
+  roomNum: 0,
+  addNum: 0
+})
+const rzRange = ref([])
+const rzUserArr = ref([])
+const money = ref(0)
+const choseRooms = ref([])
+let usedays = 0
+onMounted(()=>{
+  console.log(route.query)
+  room.value = JSON.parse(decodeURIComponent(route.query.room))
+  hotelName.value = route.query.hotelName
+  money.value = 0
+  const today = dayjs()
+  canOrderStart.value = today
+  if (room.value.hqNewStart < canOrderStart.value) {
+    room.value.hqNewStart = canOrderStart.value
+  }
+})
+function changeRoomNum(e) {
+  if (form.value.addNum > e) {
+    form.value.addNum = e
+  }
+  countMoney()
+}
+function changeBed() {
+  countMoney()
+}
+function checkreRooms() {
+  var obj = {
+    ahrId: room.value.id,
+    rzStart: rzRange.value[0],
+    rzEnd: rzRange.value[1]
+  }
+  checkResidueRoom(obj).then(res => {
+    canOrderNum.value = res.data.useCount
+  })
+}
+function countMoney() {
+  money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
+      .addNum * usedays)).toFixed(2)
+  // console.log(usedays,money.value)
+}
+function submit() {
+  if (usedays == 0) {
+    ElMessage.error(language.value == 0 ? '入住时间跨度需大于一天' :'Check-in time must be greater than one day')
+    return
+  }
+  form.value.rzStart = rzRange.value[0]
+  form.value.rzEnd = rzRange.value[1]
+
+  form.value.rzUsers = arr.toString()
+  form.value.activeId = room.value.activityId
+  form.value.ahId = room.value.hotelId
+  form.value.ahrId = room.value.id
+  form.value.orderName = hotelName.value
+  form.value.roomName =room.value.roomType
+  var str = ''
+  var str2 = ''
+  if (form.value.addNum && form.value.addNum > 0) {
+    str = `加床${form.value.addNum}张`
+  } else {
+    str = `未加床`
+  }
+  if (room.value.breakfastNum && room.value.breakfastNum > 0) {
+    str2 = `${room.value.breakfastNum}份早餐`
+  } else {
+    str2 = `无早餐`
+  }
+  form.value.room = `${form.value.roomNum} 间·${usedays}晚·${str}·${str2}`
+  console.log(form.value.room)
+
+  // 提交确认
+  ElMessage.confirm(language.value == 0 ? '确认提交订单吗？' :'Confirm to submit the order?', {
+    confirmButtonText: language.value == 0 ? '确定' :'Confirm',
+    cancelButtonText: language.value == 0 ? '取消' :'Cancel',
+    type: 'warning'
+  }).then(() => {
+    newsSubmitOrderHotel(form.value).then(res=>{
+      if (res.data) {
+        if (res.data.roomNum == -100) {
+          ElMessage.warning(language.value == 0 ? '剩余房间数不足' :'The remaining number of rooms is insufficient')
+          checkreRooms()
+        } else {
+          //去付钱
+        }
+      } else {
+        ElMessage.warning(language.value == 0 ? '无可预定的房间' :'No rooms available to book')
+      }
+    })
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.bigMoney{font-size: 36px!important;
+  font-family: DIN Alternate;
+  font-weight: bold;}
+.bg-lineg {
+  height: 40px;
+  line-height: 40px;
+  font-size: 18px;
+  text-align: center;
+}
+.leftboderTT {
+  font-weight: 600;
+  font-size: 16px;
+  color: #453DEA;
+}
+.border-rr{border-radius: 5px;
+  border: 1px solid #DCDFE6;}
+.room{font-weight: 400;
+  font-size: 14px;
+  color: #929AA0;}
+.ccitemBox {
+  overflow: auto;
+
+  label {
+    margin: 10px 0;
+    display: block;
+
+    span {
+      color: #FF8124;font-family: DIN Alternate;
+      font-size: 24px;
+    }
+  }
+}
+
+.ccitem {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: #666;
+  margin: 5px 0;
+
+  label {
+    font-size: 16px;
+    color: #000;
+  }
+
+  span {
+    font-size: 13px;
+  }
+}
+</style>