no message

杨炀
Showing 4 changed files with 153 additions and 28 deletions
src/viewsPc/booking/car.vue
src/viewsPc/booking/hotel.vue
src/viewsPc/booking/hotelDetail.vue
src/viewsPc/booking/hotelOrder.vue
--- a/src/viewsPc/booking/car.vue
View file @35df186
+++ b/src/viewsPc/booking/car.vue
View file @35df186
 <template>
-<div>
+  <div>
+    <div class="banner">
+      <img src="@/assets/booking/jd_text.png">
+    </div>
    <div class="box">
-    <el-card class="mt30"></el-card>
+      <div class="searchBar">
+        <el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border">
+        </el-input>
+        <el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
+          {{ language==0?'搜索':'Search' }}</el-button>
+      </div>
    </div>
-</div>
+    <div class="box" v-loading="loading">
+      <el-card v-for="(h,index) in list" class="mb20" @click="goDetail(h)">
+        <!--        che列表-->
+        <el-row class="hotel" align="middle" :gutter="20">
+          <el-col :span="6">
+            <img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
+          </el-col>
+          <el-col :span="10">
+            <h3 class="esp">{{h.name}}</h3>
+            <div class="starBox">
+              <img  v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">
+            </div>
+            <div class="tagbox">
+              <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>
+              <a v-show="h.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>
+            </div>
+            <p class="esp addr">
+              <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
+              {{h.address}}
+            </p>
+          </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?'立即预约':'Select' }} ⇀</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228"  description="" />
+      <div style="height: 50px"></div>
+    </div>
+  </div>
 </template>
 <script setup>
+import {onMounted} from "@vue/runtime-core"
+import * as booking from "@/apiPc/booking"
+import {useRouter,useRoute} from "vue-router";
+import {useStorage} from "@vueuse/core/index";
+const router = useRouter()
+const route = useRoute()
+const language= useStorage('language',0)
+const query = ref({
+  name:''
+})
+const cptId = ref('')
+const list = ref([])
+const loading = ref(false)
+onMounted(()=>{
+  query.value.activityId = route.params.cptId
+  getList()
+})
-</script>
+function getList() {
+  loading.value = true
+  booking.getHotelList(query.value).then(res=>{
+    list.value = res.rows
+    loading.value = false
+  }).catch(e=>{
+    loading.value = false
+  })
+}
+function goDetail(item) {
+  router.push({
+    name:'hotelDetail',
+    params:{
+      hotelId:item.hotelId,
+    },
+    query:{
+      id:item.id
+    }
-<style scoped>
+  })
+}
+</script>
+<style scoped lang="scss">
+.hotel{
+  h3{margin: 0 0 20px;}
+  img.w100{object-fit: cover;aspect-ratio: 16/9}
+  .addr{font-size: 16px;color: #929AA0;font-weight: 400;}
+  .price{margin: 0 0 25px;
+    color: #FF8124;font-size: 18px;
+    span{font-size: 24px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
+    i{font-style: normal;color: #929AA0;}
+  }
+}
+.banner{height: 140px;background-size: cover;text-align: center;
+  background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center;
+  justify-content: center;
+  img{display: block;margin:-30px auto 0;width: auto;}
+}
+.searchBar{position: relative;top: -30px;
+  background: #FFFFFF;display: flex;padding: 20px;
+  border-radius: 10px;}
+.no-border{border: none;background: #F5F7F9;
+  :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
+}
+.starBox{
+  img{display: inline-block;margin-right: 4px}
+}
+.tagbox{margin: 15px 0;
+  a{color: #AFB5B9;font-size: 12px;}
+  span{border-radius: 13px;font-size: 12px;padding: 4px 10px;margin-right:10px;font-weight: 400;}
+  span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
+  span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
+  span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
+  span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
+}
 </style>
--- a/src/viewsPc/booking/hotel.vue
View file @35df186
+++ b/src/viewsPc/booking/hotel.vue
View file @35df186
@@ -79,8 +79,11 @@
      name:'hotelDetail',
      params:{
        hotelId:item.hotelId,
+      },
+      query:{
        id:item.id
      }
    })
  }
 </script>
--- a/src/viewsPc/booking/hotelDetail.vue
View file @35df186
+++ b/src/viewsPc/booking/hotelDetail.vue
View file @35df186
@@ -80,7 +80,7 @@
                </el-row>
              </el-col>
              <el-col :span="3">
-                <div class="price">{{ language==0?'¥':'€' }}<span>{{r.roomPrice}}</span></div>
+                <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)">
@@ -117,7 +117,7 @@ const router = useRouter()
 const route = useRoute()
 const form = ref({})
 const query = ref({
-  hotelId: route.params.id
+  hotelId: route.query.id
 })
 const loading = ref(false)
 const roomList = ref([])
@@ -135,7 +135,7 @@ function getData() {
  }).catch(err => {
    console.log(err)
  })
-  console.log('params',route.params)
+  query.value.hotelId = route.query.id
  getHotelRooms(query.value).then(res => {
    roomList.value = res.rows
  })
--- a/src/viewsPc/booking/hotelOrder.vue
View file @35df186
+++ b/src/viewsPc/booking/hotelOrder.vue
View file @35df186
@@ -5,7 +5,7 @@
        <div slot="header">
          <div class="bg-lineg">{{ language == 0 ? '酒店预约下单' : 'Hotel booking order' }}</div>
        </div>
+        {{room}}
        <el-row class="pd20" :gutter="20">
          <el-col :span="14" >
            <div class="border-info">
@@ -43,8 +43,8 @@
                <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 :label="language==0?'预计到店':'Expected check-in'">
-                  <el-select v-model="form.ddDate" placeholder="请选择预计到店时间">
+                  <el-select v-model="form.ddDate" :placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'">
                    <el-option
                      v-for="item in ddDateArr"
                      :key="item.value"
@@ -53,21 +53,24 @@
                    />
                  </el-select>
                </el-form-item>
-                <el-form-item label="联系电话">
+                <el-form-item :label="language==0?'联系电话':'Contact phone'">
                  <el-input v-model="form.phone"/>
                </el-form-item>
                <div v-if="room.addBedFlag=='1'">
-                  <el-form-item label="是否加床">
+                  <el-form-item :label="language==0?'是否加床':'Extra bed'">
-                      <el-radio-group>
+                      <el-radio-group v-model="form.isAddbed">
-                        <el-radio v-model="form.isAddbed" label="1">是</el-radio>
+                        <el-radio label="1">{{ language==0?'是':'Yes' }}</el-radio>
-                        <el-radio v-model="form.isAddbed" label="0">否</el-radio>
+                        <el-radio label="0">{{ language==0?'否':'No' }}</el-radio>
                      </el-radio-group>
                  </el-form-item>
-                  <el-form-item label="加床张数">
+                  <el-form-item :label="language==0?'加床张数':'Extra bed num'">
                    <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 class="tip" v-if="form.isAddbed=='1'">*
+                    <span v-if="language == 0">一个房间最多加一张床</span>
+                    <span v-else>A room can only add one bed</span>
+                  </div>
                </div>
              </el-form>
            </div>
@@ -75,24 +78,28 @@
          <el-col :span="10">
            <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
            <div class="border-rr mt20 pd20 ccitemBox">
-              <label> 房费
+              <label> {{ language==0?'房费':'Room fee' }}
-                <span class="fr">¥{{(room.roomPrice*form.roomNum*choseRooms.length).toFixed(2)}}</span>
+                <span class="fr" v-if="language==0">{{ language==0?'¥':'€' }}{{(room.roomPrice*form.roomNum*choseRooms.length).toFixed(2)}}</span>
+                <span class="fr" v-else>{{ language==0?'¥':'€' }}{{(room.roomPriceEn*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>
+                <text v-if="language==0">{{form.roomNum}}*{{ language==0?'¥':'€' }}{{room.roomPrice}}</text>
+                <text v-else>{{form.roomNum}}*{{ language==0?'¥':'€' }}{{room.roomPriceEn}}</text>
              </div>
-              <label v-if="form.isAddbed=='1'">加床费
+              <label v-if="form.isAddbed=='1'">{{ language==0?'加床费':'Extra bed fee' }}
-                <span  class="fr">¥{{(room.bedPrice*form.addNum*choseRooms.length).toFixed(2)}}</span>
+                <span  class="fr" v-if="language==0">{{ language==0?'¥':'€' }}{{(room.bedPrice*form.addNum*choseRooms.length).toFixed(2)}}</span>
+                <span  class="fr" v-else>{{ language==0?'¥':'€' }}{{(room.bedPriceEn*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>
+                <text  v-if="language==0">{{form.addNum}}*{{ language==0?'¥':'€' }}{{room.bedPrice}}</text>
+                <text v-else>{{form.addNum}}*{{ language==0?'¥':'€' }}{{room.bedPriceEn}}</text>
              </div>
-              <label>共计<span  class="fr bigMoney">¥{{money}}</span></label>
+              <label class="bigMoney">{{ language==0?'共计':'Total' }}<span  class="fr bigMoney">{{ language==0?'¥':'€' }}{{money}}</span></label>
            </div>
          </el-col>
@@ -119,6 +126,7 @@ const hotelName = ref('')
 const canOrderStart = ref('')
 const canOrderNum = ref(0)
 const form = ref({
+  isAddbed: '0',
  roomNum: 0,
  addNum: 0
 })
@@ -271,8 +279,14 @@ function getDate(datestr) {
  return date
 }
 function countMoney() {
+  if(language.value == 0){
    money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
        .addNum * usedays)).toFixed(2)
+  } else {
+    money.value = ((room.value.roomPriceEn * form.value.roomNum * usedays) + (room.value.bedPriceEn * form.value
+        .addNum * usedays)).toFixed(2)
+  }
  // console.log(usedays,money.value)
 }
 function submit() {
@@ -352,7 +366,7 @@ function submit() {
  label {
    margin: 10px 0;
    display: block;
+    min-height: 30px;
    span {
      color: #FF8124;font-family: DIN Alternate;
      font-size: 24px;
@@ -363,9 +377,9 @@ function submit() {
 .ccitem {
  display: flex;
  justify-content: space-between;
-  font-size: 14px;
+  font-size: 15px;
  color: #666;
-  margin: 5px 0;
+  margin: 5px 0 10px;
  label {
    font-size: 16px;