no message

@@ -10,6 +10,8 @@
     <title>亚洲体育舞蹈节</title>
     <!--  <script src="./browser.js"></script>-->
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
+
+    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=QTBBZ-N5J6C-7Z42F-AEBA6-JV3LV-ABFOE"></script>
     <style>
         html,
         body,

@@ -12,3 +12,12 @@ export function getHotelById(id) {
         method: 'get'
     })
 }
+export function getHotelRooms(id) {
+    return request({
+        url: `/ota/activityRoom/list`,
+        method: 'get',
+        params: {
+            hotelId:id
+        }
+    })
+}

@@ -7,7 +7,7 @@
  .popo{position: absolute;left: 0;}
  .no-pointer { pointer-events: none }
  .blur20 { filter: blur(20px) }
-
+.flex{display: flex;}
  .pt5 {
 	padding-top: 5px;
  }

@@ -40,6 +40,7 @@
         </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>
@@ -69,13 +70,15 @@
     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.id
+        hotelId:item.hotelId
       }
     })
   }

@@ -2,30 +2,168 @@
   <div>
     <div class="box">
       <el-card class="mt30">
-        <h3>{{form.name}}</h3>
+        <el-row class="hotel" align="middle" :gutter="20">
+<!--          <el-col :span="6">-->
+<!--            <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
+<!--          </el-col>-->
+          <el-col :span="16">
+            <h3 class="esp">{{form.name}}</h3>
+            <div class="starBox">
+              <img  v-for="i in Number(form.starLevel||0)" src="@/assets/booking/star.png">
+            </div>
+            <div class="tagbox">
+              <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{t}}</span>
+              <a v-show="form.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>
+            </div>
+            <div>
+              <el-icon></el-icon>
+              <span class="mr10">{{ language==0?'入住时间':'Check-in' }}：{{form.checkInTime}}</span>
+              <span>{{ language==0?'离店时间':'Check-out' }}：{{form.checkOutTime}}</span>
+            </div>
+            <div v-if="form.introduction" class="flex esp">
+              <el-icon></el-icon>
+              {{ language==0?'酒店简介':'Introduction' }}：<span v-html="form.introduction.toString()"></span>
+            </div>
+            <p class="esp addr">
+              <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
+              {{form.address}}
+            </p>
+          </el-col>
+          <el-col :span="8" class="text-right">
+            <div class="mapBox">
+              <div id="map"></div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <div class="mt30">
+        <div v-for="p in form.photos?.split(',')">
+          <img :src="fillImgUrl(p)">
+        </div>
+      </div>
+
+      <el-card class="mt30 mb60">
+        <div class="lineHead">
+          <ul><li>{{language==0?'房型选择':'Room Type'}}</li></ul>
+        </div>
+
+        <div>
+          <div v-for="(r,index) in roomList" :key="index" class="room">
+            <el-row>
+              <el-col :span="6">
+                <div class="roomImg">
+                  <img :src="fillImgUrl(r.photos?.split(',')[0])">
+                </div>
+              </el-col>
+              <el-col :span="14">
+              </el-col>
+              <el-col :span="4">
+              </el-col>
+            </el-row>
+          </div>
+        </div>
       </el-card>
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {useRouter} from "vue-router";
 import {ref, reactive, onMounted} from "vue";
 import {useRoute} from "vue-router";
-import { getHotelById } from "@/apiPc/booking"
+import { getHotelById,getHotelRooms } from "@/apiPc/booking"
+import {useStorage} from "@vueuse/core/index";
+const language= useStorage('language',0)
 const router = useRouter()
 const route = useRoute()
 const form = ref({})
-getData()
+const roomList = ref([])
+const map = ref(null)
+onMounted(()=>{
+  getData()
+})
 function getData() {
-  getHotelById(route.params.hotelId).then(res=>{
+  getHotelById(route.params.hotelId).then(res => {
     form.value = res.data
-  }).catch(err=>{
+    initMap()
+  }).catch(err => {
     console.log(err)
   })
+  getHotelRooms(route.params.hotelId).then(res => {
+    roomList.value = res.rows
+  })
+}
+function initMap() {
+  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,//设置地图中心点坐标
+    zoom: 17,   //设置地图缩放级别
+  });
+  var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
+  //创建InfoWindow实例，并进行初始化
+  var infowindow = new TMap.InfoWindow({
+    content: form.value.name, //信息窗口内容
+    position:infoWindowLocation,//显示信息窗口的坐标
+    map:map,
+    offset: { x: 0, y: -32 }
+  });
+  infowindow.close();
+  var marker = new TMap.MultiMarker({
+    map: map,
+    //样式定义
+    styles: {
+      "myStyle": new TMap.MarkerStyle({
+        "anchor": { x: 16, y: 32 }
+      })
+    },
+    //点标记数据数组
+    geometries: [{
+      "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
+      // "styleId": 'myStyle',  //指定样式id
+      "position": new TMap.LatLng(form.value.latitude, form.value.longitude),  //点标记坐标位置
+      "properties": {//自定义属性
+        "title": form.value.name
+      }
+    }
+    ]
+  })
+  marker.on("click", function (evt) {
+    //设置infoWindow
+    infowindow.open(); //打开信息窗
+    infowindow.setPosition(evt.geometry.position);//设置信息窗位置
+  })
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.room{background: #FAFBFD;
+  border: 1px solid #E5E5E5;}
+.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;}
+}
+}
+.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);}
+}
+.mapBox{ position: relative;overflow: hidden;height: 200px;
+  #map{ position: relative;left: -70px;
+    width: calc(100% + 160px);
+  }
+}
 </style>