Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
3d7074eb by 杨炀
Options

no message

1 parent bec13a3e
Inline Side-by-side
Showing 5 changed files with 162 additions and 10 deletions
index.html
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
10 <title>亚洲体育舞蹈节</title> 10 <title>亚洲体育舞蹈节</title>
11 <!-- <script src="./browser.js"></script>--> 11 <!-- <script src="./browser.js"></script>-->
12 <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> 12 <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
13
14 <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=QTBBZ-N5J6C-7Z42F-AEBA6-JV3LV-ABFOE"></script>
13 <style> 15 <style>
14 html, 16 html,
15 body, 17 body,
......
src/apiPc/booking.js
...@@ -12,3 +12,12 @@ export function getHotelById(id) { ...@@ -12,3 +12,12 @@ export function getHotelById(id) {
12 method: 'get' 12 method: 'get'
13 }) 13 })
14 } 14 }
15 export function getHotelRooms(id) {
16 return request({
17 url: `/ota/activityRoom/list`,
18 method: 'get',
19 params: {
20 hotelId:id
21 }
22 })
23 }
......
src/assets/styles/ruoyi.scss
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 .popo{position: absolute;left: 0;} 7 .popo{position: absolute;left: 0;}
8 .no-pointer { pointer-events: none } 8 .no-pointer { pointer-events: none }
9 .blur20 { filter: blur(20px) } 9 .blur20 { filter: blur(20px) }
10 10 .flex{display: flex;}
11 .pt5 { 11 .pt5 {
12 padding-top: 5px; 12 padding-top: 5px;
13 } 13 }
......
src/viewsPc/booking/hotel.vue
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
40 </el-row> 40 </el-row>
41 </el-card> 41 </el-card>
42 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" /> 42 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
43 <div style="height: 50px"></div>
43 </div> 44 </div>
44 45
45 </div> 46 </div>
...@@ -69,13 +70,15 @@ ...@@ -69,13 +70,15 @@
69 booking.getHotelList(query.value).then(res=>{ 70 booking.getHotelList(query.value).then(res=>{
70 list.value = res.rows 71 list.value = res.rows
71 loading.value = false 72 loading.value = false
73 }).catch(e=>{
74 loading.value = false
72 }) 75 })
73 } 76 }
74 function goDetail(item) { 77 function goDetail(item) {
75 router.push({ 78 router.push({
76 name:'hotelDetail', 79 name:'hotelDetail',
77 params:{ 80 params:{
78 hotelId:item.id 81 hotelId:item.hotelId
79 } 82 }
80 }) 83 })
81 } 84 }
......
src/viewsPc/booking/hotelDetail.vue
...@@ -2,30 +2,168 @@ ...@@ -2,30 +2,168 @@
2 <div> 2 <div>
3 <div class="box"> 3 <div class="box">
4 <el-card class="mt30"> 4 <el-card class="mt30">
5 <h3>{{form.name}}</h3> 5 <el-row class="hotel" align="middle" :gutter="20">
6 <!-- <el-col :span="6">-->
7 <!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
8 <!-- </el-col>-->
9 <el-col :span="16">
10 <h3 class="esp">{{form.name}}</h3>
11 <div class="starBox">
12 <img v-for="i in Number(form.starLevel||0)" src="@/assets/booking/star.png">
13 </div>
14 <div class="tagbox">
15 <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{t}}</span>
16 <a v-show="form.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>
17 </div>
18 <div>
19 <el-icon></el-icon>
20 <span class="mr10">{{ language==0?'入住时间':'Check-in' }}：{{form.checkInTime}}</span>
21 <span>{{ language==0?'离店时间':'Check-out' }}：{{form.checkOutTime}}</span>
22 </div>
23 <div v-if="form.introduction" class="flex esp">
24 <el-icon></el-icon>
25 {{ language==0?'酒店简介':'Introduction' }}：<span v-html="form.introduction.toString()"></span>
26 </div>
27 <p class="esp addr">
28 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
29 {{form.address}}
30 </p>
31 </el-col>
32 <el-col :span="8" class="text-right">
33 <div class="mapBox">
34 <div id="map"></div>
35 </div>
36 </el-col>
37 </el-row>
38 </el-card>
39
40 <div class="mt30">
41 <div v-for="p in form.photos?.split(',')">
42 <img :src="fillImgUrl(p)">
43 </div>
44 </div>
45
46 <el-card class="mt30 mb60">
47 <div class="lineHead">
48 <ul><li>{{language==0?'房型选择':'Room Type'}}</li></ul>
49 </div>
50
51 <div>
52 <div v-for="(r,index) in roomList" :key="index" class="room">
53 <el-row>
54 <el-col :span="6">
55 <div class="roomImg">
56 <img :src="fillImgUrl(r.photos?.split(',')[0])">
57 </div>
58 </el-col>
59 <el-col :span="14">
60 </el-col>
61 <el-col :span="4">
62 </el-col>
63 </el-row>
64 </div>
65 </div>
6 </el-card> 66 </el-card>
7 </div> 67 </div>
8 </div> 68 </div>
9 </template> 69 </template>
10 70
11 <script setup> 71 <script setup lang="ts">
12 import {useRouter} from "vue-router"; 72 import {useRouter} from "vue-router";
13 import {ref, reactive, onMounted} from "vue"; 73 import {ref, reactive, onMounted} from "vue";
14 import {useRoute} from "vue-router"; 74 import {useRoute} from "vue-router";
15 import { getHotelById } from "@/apiPc/booking" 75 import { getHotelById,getHotelRooms } from "@/apiPc/booking"
76 import {useStorage} from "@vueuse/core/index";
77 const language= useStorage('language',0)
16 const router = useRouter() 78 const router = useRouter()
17 const route = useRoute() 79 const route = useRoute()
18 const form = ref({}) 80 const form = ref({})
19 getData() 81 const roomList = ref([])
82 const map = ref(null)
83 onMounted(()=>{
84 getData()
85 })
20 function getData() { 86 function getData() {
21 getHotelById(route.params.hotelId).then(res=>{ 87 getHotelById(route.params.hotelId).then(res => {
22 form.value = res.data 88 form.value = res.data
23 }).catch(err=>{ 89 initMap()
90 }).catch(err => {
24 console.log(err) 91 console.log(err)
25 }) 92 })
93 getHotelRooms(route.params.hotelId).then(res => {
94 roomList.value = res.rows
95 })
96 }
97 function initMap() {
98 const TMap = (window as any).TMap
99 var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
100 var map = new TMap.Map("map", {
101 center: center,//设置地图中心点坐标
102 zoom: 17, //设置地图缩放级别
103 });
104 var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
105 //创建InfoWindow实例，并进行初始化
106 var infowindow = new TMap.InfoWindow({
107 content: form.value.name, //信息窗口内容
108 position:infoWindowLocation,//显示信息窗口的坐标
109 map:map,
110 offset: { x: 0, y: -32 }
111 });
112 infowindow.close();
113 var marker = new TMap.MultiMarker({
114 map: map,
115 //样式定义
116 styles: {
117 "myStyle": new TMap.MarkerStyle({
118 "anchor": { x: 16, y: 32 }
119 })
120 },
121 //点标记数据数组
122 geometries: [{
123 "id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
124 // "styleId": 'myStyle', //指定样式id
125 "position": new TMap.LatLng(form.value.latitude, form.value.longitude), //点标记坐标位置
126 "properties": {//自定义属性
127 "title": form.value.name
128 }
129 }
130 ]
131 })
132 marker.on("click", function (evt) {
133 //设置infoWindow
134 infowindow.open(); //打开信息窗
135 infowindow.setPosition(evt.geometry.position);//设置信息窗位置
136 })
26 } 137 }
27 </script> 138 </script>
28 139
29 <style scoped> 140 <style scoped lang="scss">
30 141 .room{background: #FAFBFD;
142 border: 1px solid #E5E5E5;}
143 .hotel{
144 h3{margin: 0 0 20px;}
145 img.w100{object-fit: cover;aspect-ratio: 16/9}
146 .addr{font-size: 16px;color: #929AA0;font-weight: 400;}
147 .price{margin: 0 0 25px;
148 color: #FF8124;font-size: 18px;
149 span{font-size: 24px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
150 i{font-style: normal;color: #929AA0;}
151 }
152 }
153 .starBox{
154 img{display: inline-block;margin-right: 4px}
155 }
156 .tagbox{margin: 15px 0;
157 a{color: #AFB5B9;font-size: 12px;}
158 span{border-radius: 13px;font-size: 12px;padding: 4px 10px;margin-right:10px;font-weight: 400;}
159 span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
160 span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
161 span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
162 span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
163 }
164 .mapBox{ position: relative;overflow: hidden;height: 200px;
165 #map{ position: relative;left: -70px;
166 width: calc(100% + 160px);
167 }
168 }
31 </style> 169 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!