Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
1ceae698 by 杨炀
Options

no message

1 parent 6332eb7e
Expand all
Inline Side-by-side
Showing 7 changed files with 223 additions and 17 deletions
src/routerPc/en.js
...@@ -398,6 +398,18 @@ export const constantRoutes = [ ...@@ -398,6 +398,18 @@ export const constantRoutes = [
398 meta: {title: 'Hotel Reservation'} 398 meta: {title: 'Hotel Reservation'}
399 }, 399 },
400 { 400 {
401 path: 'travel/:cptId',
402 component: () => import('@/viewsPc/booking/travel'),
403 name: 'travel',
404 meta: {title: 'Hotel Reservation'}
405 },
406 {
407 path: 'travel/:cptId/:hotelId',
408 component: () => import('@/viewsPc/booking/travelDetail'),
409 name: 'travelDetail',
410 meta: {title: 'Hotel Reservation'}
411 },
412 {
401 path: 'car/:cptId/:id', 413 path: 'car/:cptId/:id',
402 component: () => import('@/viewsPc/booking/carOrder'), 414 component: () => import('@/viewsPc/booking/carOrder'),
403 name: 'carOrder', 415 name: 'carOrder',
...@@ -410,6 +422,12 @@ export const constantRoutes = [ ...@@ -410,6 +422,12 @@ export const constantRoutes = [
410 meta: {title: 'Hotel Reservation'} 422 meta: {title: 'Hotel Reservation'}
411 }, 423 },
412 { 424 {
425 path: 'travel/:cptId/:hotelId/:roomId',
426 component: () => import('@/viewsPc/booking/travelOrder'),
427 name: 'travelOrder',
428 meta: {title: 'Travel Reservation'}
429 },
430 {
413 path: 'car/:cptId', 431 path: 'car/:cptId',
414 component: () => import('@/viewsPc/booking/car'), 432 component: () => import('@/viewsPc/booking/car'),
415 name: 'car', 433 name: 'car',
......
src/viewsPc/booking/travel.vue 0 → 100644
1 <template>
2 <div>
3 <div class="banner">
4 <h2>{{ language==0?'旅游服务':'Travel Service' }}</h2>
5 </div>
6 <div class="box">
7 <div class="searchBar">
8 <el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border">
9 </el-input>
10 <el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
11 {{ language==0?'搜索':'Search' }}</el-button>
12 </div>
13 </div>
14
15 <div class="box" v-loading="loading">
16 <el-row :gutter="20">
17 <el-col :lg="24" :md="24" :sm="24" :xs="24" :xl="24" v-for="(h,index) in list" class="mb20">
18 <el-card @click="goDetail(h)">
19 <!-- 酒店列表-->
20 <el-row class="hotel" align="middle" :gutter="20">
21 <el-col :span="6">
22 <div class="imgbox">
23 <img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
24 </div>
25 </el-col>
26 <el-col :span="12">
27 <h3 class="esp">{{h.name}}</h3>
28 <div class="starBox">
29 <img v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">
30 </div>
31 <div class="tagbox esp">
32 <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>
33 <a v-show="h.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>
34 </div>
35 <p class="esp addr mt20">
36 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
37 {{h.address}}
38 </p>
39 </el-col>
40 <el-col :span="4" class="text-right">
41 <div class="price">{{ language==0?'¥':'€' }}<span>{{ h.price }}</span>
42 <i v-if="language==0">起</i>
43 </div>
44 <el-button class="btn-lineG w200px" round type="primary" >{{ language==0?'立即预订':'Select' }} ⇀</el-button>
45 </el-col>
46 </el-row>
47 </el-card>
48 </el-col>
49 </el-row>
50 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
51 <div style="height: 50px"></div>
52 </div>
53 </div>
54 </template>
55
56 <script setup>
57 import {onMounted} from "@vue/runtime-core"
58 import * as booking from "@/apiPc/booking"
59 import {useRouter,useRoute} from "vue-router";
60 import {useStorage} from "@vueuse/core/index";
61 import useUserStore from "@/store/modules/user";
62 const router = useRouter()
63 const route = useRoute()
64 const user = useUserStore().user
65 const useStore = useUserStore
66 const language= useStorage('language',0)
67 const query = ref({
68 name:''
69 })
70 const cptId = ref('')
71 const list = ref([])
72 const loading = ref(false)
73 onMounted(()=>{
74 query.value.activityId = route.params.cptId
75 getList()
76 })
77
78 function getList() {
79 loading.value = true
80 booking.getHotelList(query.value).then(res=>{
81 list.value = res.rows
82 loading.value = false
83 console.log(list.value)
84
85 }).catch(e=>{
86 loading.value = false
87 })
88 }
89 function goDetail(item) {
90 if(!user){
91 useStore().setVisitor()
92 return
93 }
94 router.push({
95 name:'travelDetail',
96 params:{
97 hotelId:item.hotelId,
98 },
99 query:{
100 id:item.id
101 }
102
103 })
104 }
105 </script>
106
107 <style scoped lang="scss">
108 .hotel{
109 h3{margin: 0 0 10px;}
110 img.w100{object-fit: cover;aspect-ratio: 16/9}
111 .addr{font-size: 14px;color: #929AA0;font-weight: 400;margin: 0 0 10px;}
112 .price{margin: 0 0 8px;
113 color: #FF8124;font-size: 18px;
114 span{font-size: 36px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
115 i{font-style: normal;color: #929AA0;}
116 }
117 }
118 .banner{height: 140px;background-size: cover;text-align: center;
119 background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center;
120 justify-content: center;
121 img{display: block;margin:-30px auto 0;width: auto;}
122 color: #fff;font-style: italic;font-size: 24px;text-transform: uppercase;
123 h2{margin:-30px auto 0;font-weight: bold;letter-spacing: 4px;}
124 }
125 .searchBar{position: relative;top: -30px;
126 background: #FFFFFF;display: flex;padding: 20px;
127 border-radius: 10px;}
128 .no-border{border: none;background: #F5F7F9;
129 :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
130 }
131 .imgbox {width: 100%;height: 100%;position: relative;
132 img{width: 100%;height: 100%;}
133 .starBox{position: absolute;bottom: 0;right: 0;background: rgba(0,0,0,0.4);padding: 10px 15px 3px;}
134 }
135 .po-r-b{}
136 .starBox{
137 border-radius: 14px 0 0 0;
138 img{display: inline-block;margin-right: 4px;width: 24px;}
139 }
140 .tagbox{margin: 10px 0;
141 a{color: #AFB5B9;font-size: 12px;}
142 span{border-radius: 13px;font-size: 12px;padding: 3px 10px;margin-right:10px;font-weight: 400;}
143 span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
144 span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
145 span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
146 span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
147 }
148 </style>
src/viewsPc/match/components/addWdsf.vue
...@@ -245,6 +245,14 @@ const ocrSuccess = (res) => { ...@@ -245,6 +245,14 @@ const ocrSuccess = (res) => {
245 } 245 }
246 246
247 function submitForm() { 247 function submitForm() {
248 if(!form.value.wdsfMin&&!card.value){
249 ElMessage.warning(language.value == 0 ? '请输入你的WDSF会员号' : 'Please fill in your WDSF MIN')
250 return
251 }
252 if(card.value&&!isCodeTrue.value){
253 ElMessage.warning(language.value == 0 ? '请验证你的WDSF会员号' : 'Please verify your WDSF MIN')
254 return
255 }
248 if (!form.value.passportNumber) { 256 if (!form.value.passportNumber) {
249 ElMessage.warning(language.value == 0 ? '请输入你的证件号' : 'Please fill in your passport number') 257 ElMessage.warning(language.value == 0 ? '请输入你的证件号' : 'Please fill in your passport number')
250 return 258 return
......
src/viewsPc/match/components/quick-row.vue
1 <template> 1 <template>
2 <div style="filter: opacity(1)"> 2 <div style="filter: opacity(1)">
3 <el-row v-if="language==0" class="btnbox" justify='space-between'> 3 <el-row v-if="language==0" class="btnbox" justify='space-between' :gutter="15">
4 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 4 <el-col :lg="3" :md="6" :sm="12" :xs="12">
5 <div class="funcBtn" @click="popRemark(0)"> 5 <div class="funcBtn" @click="popRemark(0)">
6 <img src="@/assets/dance/btn04.png"/> 6 <img src="@/assets/dance/btn04.png"/>
7 <h4>票务预订</h4> 7 <h4>票务预订</h4>
8 </div> 8 </div>
9 </el-col> 9 </el-col>
10 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 10 <el-col :lg="3" :md="6" :sm="12" :xs="12">
11 <div class="funcBtn" @click="popRemark(1)"> 11 <div class="funcBtn" @click="popRemark(1)">
12 <img src="@/assets/dance/btn01.png"/> 12 <img src="@/assets/dance/btn01.png"/>
13 <h4>酒店预订</h4> 13 <h4>酒店预订</h4>
14 </div> 14 </div>
15 </el-col> 15 </el-col>
16 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 16 <el-col :lg="3" :md="6" :sm="12" :xs="11">
17 <div class="funcBtn" @click="popRemark(8)">
18 <img src="@/assets/dance/btn08.png"/>
19 <h4>旅游服务</h4>
20 </div>
21 </el-col>
22 <el-col :lg="3" :md="6" :sm="12" :xs="11">
17 <div class="funcBtn" @click="popRemark(2)"> 23 <div class="funcBtn" @click="popRemark(2)">
18 <img src="@/assets/dance/btn02.png"/> 24 <img src="@/assets/dance/btn02.png"/>
19 <h4>车辆预订</h4> 25 <h4>车辆预订</h4>
20 </div> 26 </div>
21 </el-col> 27 </el-col>
22 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 28 <el-col :lg="3" :md="6" :sm="12" :xs="11">
23 <div class="funcBtn" @click="popRemark(6)"> 29 <div class="funcBtn" @click="popRemark(6)">
24 <img src="@/assets/dance/btn07.png"/> 30 <img src="@/assets/dance/btn07.png"/>
25 <h4>预订查询</h4> 31 <h4>预订查询</h4>
26 </div> 32 </div>
27 </el-col> 33 </el-col>
28 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 34 <el-col :lg="3" :md="6" :sm="12" :xs="11">
29 <div class="funcBtn" @click="popRemark(3)"> 35 <div class="funcBtn" @click="popRemark(3)">
30 <img src="@/assets/dance/btn03.png"/> 36 <img src="@/assets/dance/btn03.png"/>
31 <h4>餐饮预订</h4> 37 <h4>餐饮预订</h4>
32 </div> 38 </div>
33 </el-col> 39 </el-col>
34 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 40 <el-col :lg="3" :md="6" :sm="12" :xs="11">
35 <div class="funcBtn" @click="popRemark(4)"> 41 <div class="funcBtn" @click="popRemark(4)">
36 <img src="@/assets/dance/btn05.png"/> 42 <img src="@/assets/dance/btn05.png"/>
37 <h4>化妆预约</h4> 43 <h4>化妆预约</h4>
38 </div> 44 </div>
39 </el-col> 45 </el-col>
40 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 46 <el-col :lg="3" :md="6" :sm="12" :xs="11">
41 <div class="funcBtn" @click="popRemark(5)"> 47 <div class="funcBtn" @click="popRemark(5)">
42 <img src="@/assets/dance/btn06.png"/> 48 <img src="@/assets/dance/btn06.png"/>
43 <h4>拍照预约</h4> 49 <h4>拍照预约</h4>
44 </div> 50 </div>
45 </el-col> 51 </el-col>
46 </el-row> 52 </el-row>
47 <el-row v-else class="btnbox" justify='space-between'> 53
48 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 54
55 <el-row v-else class="btnbox enBtnbox" justify='space-between' :gutter="15">
56 <el-col :lg="3" :md="8" :sm="12" :xs="12">
49 <div class="funcBtn" @click="popRemark(0)"> 57 <div class="funcBtn" @click="popRemark(0)">
50 <img src="@/assets/dance/btn04.png"/> 58 <img src="@/assets/dance/btn04.png"/>
51 <h4>TICKET BOOKING</h4> 59 <h4>TICKET BOOKING</h4>
52 </div> 60 </div>
53 </el-col> 61 </el-col>
54 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 62 <el-col :lg="3" :md="8" :sm="12" :xs="12">
55 <div class="funcBtn" @click="popRemark(1)"> 63 <div class="funcBtn" @click="popRemark(1)">
56 <img src="@/assets/dance/btn01.png"/> 64 <img src="@/assets/dance/btn01.png"/>
57 <h4>HOTEL RESERVATION</h4> 65 <h4>HOTEL RESERVATION</h4>
58 </div> 66 </div>
59 </el-col> 67 </el-col>
60 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 68 <el-col :lg="3" :md="8" :sm="12" :xs="12">
69 <div class="funcBtn" @click="popRemark(8)">
70 <img src="@/assets/dance/btn08.png"/>
71 <h4>TRAVEL SERVICE</h4>
72 </div>
73 </el-col>
74 <el-col :lg="3" :md="8" :sm="12" :xs="12">
61 <div class="funcBtn" @click="popRemark(2)"> 75 <div class="funcBtn" @click="popRemark(2)">
62 <img src="@/assets/dance/btn02.png"/> 76 <img src="@/assets/dance/btn02.png"/>
63 <h4>TRANSPORTATION RESERVATION</h4> 77 <h4>TRANSPORTATION RESERVATION</h4>
64 </div> 78 </div>
65 </el-col> 79 </el-col>
66 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 80 <el-col :lg="3" :md="8" :sm="12" :xs="12">
67 <div class="funcBtn" @click="popRemark(6)"> 81 <div class="funcBtn" @click="popRemark(6)">
68 <img src="@/assets/dance/btn07.png"/> 82 <img src="@/assets/dance/btn07.png"/>
69 <h4>RESERVATION SEARCH</h4> 83 <h4>RESERVATION SEARCH</h4>
70 </div> 84 </div>
71 </el-col> 85 </el-col>
72 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 86 <el-col :lg="3" :md="8" :sm="12" :xs="12">
73 <div class="funcBtn" @click="popRemark(3)"> 87 <div class="funcBtn" @click="popRemark(3)">
74 <img src="@/assets/dance/btn03.png"/> 88 <img src="@/assets/dance/btn03.png"/>
75 <h4>DINING RESERVATION</h4> 89 <h4>DINING RESERVATION</h4>
76 </div> 90 </div>
77 </el-col> 91 </el-col>
78 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 92 <el-col :lg="3" :md="8" :sm="12" :xs="12">
79 <div class="funcBtn" @click="popRemark(4)"> 93 <div class="funcBtn" @click="popRemark(4)">
80 <img src="@/assets/dance/btn05.png"/> 94 <img src="@/assets/dance/btn05.png"/>
81 <h4>MAKEUP APPOINTMENT</h4> 95 <h4>MAKEUP APPOINTMENT</h4>
82 </div> 96 </div>
83 </el-col> 97 </el-col>
84 <el-col :lg="3" :md="7" :sm="11" :xs="11"> 98 <el-col :lg="3" :md="8" :sm="12" :xs="12">
85 <div class="funcBtn" @click="popRemark(5)"> 99 <div class="funcBtn" @click="popRemark(5)">
86 <img src="@/assets/dance/btn06.png"/> 100 <img src="@/assets/dance/btn06.png"/>
87 <h4>PHOTOGRAPHY APPOINTMENT</h4> 101 <h4>PHOTOGRAPHY APPOINTMENT</h4>
...@@ -146,7 +160,9 @@ function popRemark(type) { ...@@ -146,7 +160,9 @@ function popRemark(type) {
146 } 160 }
147 }) 161 })
148 } 162 }
149 163 if (type == 8) {
164 //todo 旅游
165 }
150 if (!form.value) { 166 if (!form.value) {
151 building() 167 building()
152 return 168 return
...@@ -248,4 +264,20 @@ h4 { ...@@ -248,4 +264,20 @@ h4 {
248 font-size: 13px; 264 font-size: 13px;
249 box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); 265 box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
250 } 266 }
267
268 .enBtnbox{
269 .funcBtn{
270 h4{font-size:16px;display: flex;align-items: center;width: 100%;justify-content: center;height: 36px;}
271 }
272 }
273 @media screen and (max-width: 1400px) {
274 .enBtnbox .funcBtn{
275 h4{font-size:14px;}
276 }
277 }
278 @media screen and (max-width: 1250px) {
279 .enBtnbox .funcBtn{
280 h4{font-size:12px;}
281 }
282 }
251 </style> 283 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!