Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
caa89a71 by zhangmeng
Options

车辆

1 parent 08fc48dc
Expand all
Inline Side-by-side
Showing 5 changed files with 383 additions and 25 deletions
src/apiPc/booking.js
...@@ -648,9 +648,9 @@ export function getTicketOrderInfo(params) { ...@@ -648,9 +648,9 @@ export function getTicketOrderInfo(params) {
648 }) 648 })
649 } 649 }
650 650
651 export function getGateListByLasId(params) { 651 export function getVehicleByCheckIn(params) { // activityId,category,checkIn
652 return request({ 652 return request({
653 url: `/ota/scenicConfig/getGateListByLasId`, 653 url: `/ota/activityVehicle/getVehicleByCheckIn`,
654 method: 'get', 654 method: 'get',
655 params 655 params
656 }) 656 })
...@@ -670,3 +670,22 @@ export function checkPurchasedCustomers(data) { ...@@ -670,3 +670,22 @@ export function checkPurchasedCustomers(data) {
670 data 670 data
671 }) 671 })
672 } 672 }
673
674 // 接机
675 export function getVehicleMap(params) { // activityId
676 return request({
677 url: `/ota/activityVehicle/getVehicleMap`,
678 method: 'get',
679 params
680 })
681 }
682
683 export function getVehicleMa1p(params) { // activityId
684 return request({
685 url: `/ota/activityVehicle/getVehicleMap`,
686 method: 'get',
687 params
688 })
689 }
690
691
......
src/routerPc/en.js
...@@ -404,6 +404,18 @@ export const constantRoutes = [ ...@@ -404,6 +404,18 @@ export const constantRoutes = [
404 meta: { title: 'Hotel Reservation' } 404 meta: { title: 'Hotel Reservation' }
405 }, 405 },
406 { 406 {
407 path: 'car/:cptId',
408 component: () => import('@/viewsPc/booking/car'),
409 name: 'car',
410 meta: { title: 'Vehicle Reservation' }
411 },
412 {
413 path: 'carList/:cptId',
414 component: () => import('@/viewsPc/booking/carList'),
415 name: 'carList',
416 meta: { title: 'carList' }
417 },
418 {
407 path: 'car/:cptId/:id', 419 path: 'car/:cptId/:id',
408 component: () => import('@/viewsPc/booking/carOrder'), 420 component: () => import('@/viewsPc/booking/carOrder'),
409 name: 'carOrder', 421 name: 'carOrder',
...@@ -416,12 +428,6 @@ export const constantRoutes = [ ...@@ -416,12 +428,6 @@ export const constantRoutes = [
416 meta: { title: 'Hotel Reservation' } 428 meta: { title: 'Hotel Reservation' }
417 }, 429 },
418 { 430 {
419 path: 'car/:cptId',
420 component: () => import('@/viewsPc/booking/car'),
421 name: 'car',
422 meta: { title: 'Vehicle Reservation' }
423 },
424 {
425 path: 'dinner/:cptId', 431 path: 'dinner/:cptId',
426 component: () => import('@/viewsPc/booking/dinner'), 432 component: () => import('@/viewsPc/booking/dinner'),
427 name: 'dinner', 433 name: 'dinner',
......
src/viewsPc/booking/carList.vue 0 → 100644
1 <template>
2 <div>
3 <div class="banner">
4 <img v-if="language==0" src="@/assets/booking/cl_text_c.png">
5 <img v-else src="@/assets/booking/cl_text_e.png">
6 </div>
7 <div class="box">
8 <div class="searchBar">
9 <el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border" />
10 <el-button class="btn-lineG" icon="search" size="large" type="primary" @click="getList">
11 {{ language == 0 ? '搜索' : 'Search' }}
12 </el-button>
13 </div>
14 </div>
15 <div v-loading="loading" class="box">
16 <div v-for="(h,index) in list" :key="index" class="routeItem">
17 <el-row :gutter="20" align="middle" class="w100">
18 <el-col :lg="2" :sm="6">
19 <div class="index">{{ language == 0 ? '路线' : 'Route' }}{{ index + 1 }}
20 </div>
21 </el-col>
22 <el-col :lg="6">
23 <p class="esp text-center">{{ h.checkIn }}</p>
24 </el-col>
25 <el-col :lg="4" :sm="6" class="text-center">
26 <img class="mauto w40px" src="@/assets/booking/wf.png">
27 </el-col>
28 <el-col :lg="6">
29 <p class="esp text-center">{{ h.checkOut }}</p>
30 </el-col>
31 <el-col :lg="3" :sm="12">
32 <div v-if="language==0" class="price">
33 ¥
34 <span>{{ h.upPrice }}</span>
35 </div>
36 <div v-else class="price">
37 €
38 <span>{{ h.upPriceEn }}</span>
39 </div>
40
41 </el-col>
42 <el-col :lg="3" :sm="12">
43 <el-button class="btn-lineG w100" round type="primary" @click="goOrder(h)">
44 {{ language == 0 ? '我要预订' : 'Select' }}
45 </el-button>
46 </el-col>
47 </el-row>
48 </div>
49
50 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
51 <div style="height: 50px" />
52 </div>
53
54 </div>
55 </template>
56
57 <script setup>
58 import { onMounted, ref } from '@vue/runtime-core'
59 import * as booking from '@/apiPc/booking'
60 import { useRouter, useRoute } from 'vue-router'
61 import { useStorage } from '@vueuse/core/index'
62 import useUserStore from '@/store/modules/user'
63
64 const user = useUserStore().user
65 const router = useRouter()
66 const route = useRoute()
67 const language = useStorage('language', 0)
68 const query = ref({})
69 const activeName = ref(0)
70 const cptId = ref('')
71 const list = ref([])
72 const loading = ref(false)
73
74
75 onMounted(() => {
76 query.value.activityId = route.query.activityId
77 query.value.checkIn = route.query.checkIn
78 query.value.checkOut = route.query.checkOut
79 query.value.category = route.query.category
80 // if (language.value==0)
81 // getList()
82 getVehicleByCheckIn()
83 })
84
85
86 function getList() {
87 // if (language.value!=0)return
88 loading.value = true
89 booking.getActivityCarList(query.value).then(res => {
90 list.value = res.rows
91 loading.value = false
92 }).catch(e => {
93 loading.value = false
94 })
95 }
96
97 async function getVehicleByCheckIn() {
98 loading.value = true
99 const res = await booking.getVehicleByCheckIn(query.value)
100 list.value = res.rows
101 loading.value = false
102 }
103
104 function goOrder(item, car) {
105 if (!user) {
106 useUserStore().setReLogin()
107 return
108 }
109 router.push({
110 name: 'carOrder',
111 params: {
112 id: item.id
113 },
114 query: {
115 item: encodeURIComponent(JSON.stringify(item))
116 }
117 })
118 }
119 </script>
120
121 <style lang="scss" scoped>
122
123 .hotel {
124 margin-bottom: 20px;
125 cursor: pointer;
126
127 .index {
128 display: flex;
129 font-weight: 500;
130 padding-left: 20px;
131 font-size: 18px;
132 align-items: center;
133
134 img {
135 margin-left: 15px;
136 }
137 }
138
139 p {
140 font-weight: 500;
141 font-size: 24px;
142 color: #000000;
143 }
144
145 &:hover .el-card {
146 box-shadow: 0 0 10px #aaa;
147 }
148 }
149
150 .hotel:nth-child(7n) .index {
151 color: #009E96;
152 }
153
154 .hotel:nth-child(7n+1) .index {
155 color: #FF8124;
156 }
157
158 .hotel:nth-child(7n+2) .index {
159 color: #E4007F;
160 }
161
162 .hotel:nth-child(7n+3) .index {
163 color: #0068B7;
164 }
165
166 .hotel:nth-child(7n+4) .index {
167 color: #32B16C;
168 }
169
170 .hotel:nth-child(7n+5) .index {
171 color: #920783;
172 }
173
174 .hotel:nth-child(7n+6) .index {
175 color: #00B7EE;
176 }
177
178 .banner {
179 height: 140px;
180 background-size: cover;
181 text-align: center;
182 background: url("@/assets/booking/cl_bg.png") center;
183 display: flex;
184 align-items: center;
185 justify-content: center;
186
187 img {
188 display: block;
189 margin: -30px auto 0;
190 width: auto;
191 }
192 }
193
194 .searchBar {
195 position: relative;
196 top: -30px;
197 background: #FFFFFF;
198 display: flex;
199 padding: 20px;
200 border-radius: 10px;
201 }
202
203 .no-border {
204 border: none;
205 background: #F5F7F9;
206
207 :deep(.el-input__wrapper) {
208 border: none;
209 box-shadow: none;
210 background: #F5F7F9;
211 }
212 }
213
214 .starBox {
215 img {
216 display: inline-block;
217 margin-right: 4px
218 }
219 }
220
221 .tagbox {
222 margin: 15px 0;
223
224 a {
225 color: #AFB5B9;
226 font-size: 12px;
227 }
228
229 span {
230 border-radius: 13px;
231 font-size: 12px;
232 padding: 4px 10px;
233 margin-right: 10px;
234 font-weight: 400;
235 }
236
237 span:nth-child(4n) {
238 background: rgba(50, 177, 108, 0.2);
239 color: rgba(50, 177, 108, 1);
240 }
241
242 span:nth-child(4n+1) {
243 background: rgba(243, 152, 0, 0.2);
244 color: rgba(243, 152, 0, 1);
245 }
246
247 span:nth-child(4n+2) {
248 background: rgba(0, 160, 233, 0.2);
249 color: rgba(0, 160, 233, 1);
250 }
251
252 span:nth-child(4n+3) {
253 background: rgba(247, 64, 166, 0.2);
254 color: rgba(247, 64, 166, 1);
255 }
256 }
257
258 .name.flex {
259 align-items: center;
260 }
261
262 .name .tagbox {
263 margin: 0 0 0 15px;
264 }
265
266 .room {
267 background: #FAFBFD;
268 margin: 20px 0 0;
269 padding: 20px;
270 border: 1px solid #E5E5E5;
271
272 .name {
273 font-size: 20px;
274 margin: 0 0 10px;
275 }
276
277 .roomImg {
278 aspect-ratio: 16/9;
279 border-radius: 10px;
280 overflow: hidden;
281
282 img {
283 width: 100%;
284 object-fit: cover;
285 object-position: center;
286 height: 100%;
287 }
288 }
289
290
291 .bg-lineg {
292 margin: auto;
293 border-radius: 10px;
294 text-align: center;
295 padding: 7px 2px 2px;
296 font-size: 24px;
297 width: 66px;
298 cursor: pointer;
299
300 div {
301 background: #fff;
302 font-size: 13px;
303 border-radius: 20px;
304 padding: 0 10px;
305 color: #453DEA;
306 font-weight: 500;
307 }
308 }
309 }
310
311 .routeItem {
312 background: #fff;
313 border-radius: 10px;
314 margin: 0 0 20px;
315 padding: 10px 20px;
316 box-shadow: 0 0 6px #eee;
317
318 .price {
319 color: #FF8124;
320 font-size: 24px;
321
322 span {
323 font-size: 36px;
324 font-family: "DIN Alternate"
325 }
326 }
327 }
328 </style>
src/viewsPc/booking/carOrder.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 <h3 class="esp">{{ item.checkOut }}</h3> 17 <h3 class="esp">{{ item.checkOut }}</h3>
18 </div> 18 </div>
19 </div> 19 </div>
20 20
21 <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div> 21 <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
22 <div class="border-rr mt20 pd20"> 22 <div class="border-rr mt20 pd20">
23 <el-form ref="formRef" :label-width="language == 0 ?'120':'200'" :model="form" :rules="rules"> 23 <el-form ref="formRef" :label-width="language == 0 ?'120':'200'" :model="form" :rules="rules">
...@@ -60,21 +60,25 @@ ...@@ -60,21 +60,25 @@
60 <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div> 60 <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
61 <div class="border-rr mt20 pd20 ccitemBox"> 61 <div class="border-rr mt20 pd20 ccitemBox">
62 <label> {{ language == 0 ? '单价' : 'Price' }} 62 <label> {{ language == 0 ? '单价' : 'Price' }}
63 <span class="fr">{{ language == 0 ? '¥' : '€' }}{{ language == 0 ? item.upPrice: item.upPriceEn }}</span> 63 <span class="fr">{{ language == 0 ? '¥' : '€' }}{{
64 language == 0 ? item.upPrice : item.upPriceEn
65 }}</span>
64 </label> 66 </label>
65 <div class="ccitem"> 67 <div class="ccitem">
66 <span>{{ form.pickUpBo.count }} *{{ language == 0 ? '¥' : '€' }}{{ language == 0 ? item.upPrice: item.upPriceEn }}</span> 68 <span>{{ form.pickUpBo.count }} *{{
69 language == 0 ? '¥' : '€'
70 }}{{ language == 0 ? item.upPrice : item.upPriceEn }}</span>
67 </div> 71 </div>
68 72
69 <label>{{ language == 0 ? '共计' : 'Total' }}<span 73 <label>{{ language == 0 ? '共计' : 'Total' }}<span
70 class="fr bigMoney" 74 class="fr bigMoney"
71 >{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label> 75 >{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label>
72 76
73 </div> 77 </div>
74 </el-col> 78 </el-col>
75 </el-row> 79 </el-row>
76 </el-card> 80 </el-card>
77 81
78 <el-card class="mt30"> 82 <el-card class="mt30">
79 <el-row align="middle" justify="space-between"> 83 <el-row align="middle" justify="space-between">
80 <el-col :span="12"> 84 <el-col :span="12">
...@@ -86,7 +90,7 @@ ...@@ -86,7 +90,7 @@
86 </el-col> 90 </el-col>
87 <el-col :span="12" class="text-right"> 91 <el-col :span="12" class="text-right">
88 <el-button 92 <el-button
89 :loading="payLoading" :disabled="money<=0" class="btn-lineG w200px" round type="primary" 93 :disabled="money<=0" :loading="payLoading" class="btn-lineG w200px" round type="primary"
90 @click="submit" 94 @click="submit"
91 > 95 >
92 {{ language == 0 ? '确认付款' : 'Pay' }} 96 {{ language == 0 ? '确认付款' : 'Pay' }}
...@@ -129,6 +133,7 @@ const lform = ref({}) ...@@ -129,6 +133,7 @@ const lform = ref({})
129 133
130 onMounted(() => { 134 onMounted(() => {
131 item.value = JSON.parse(decodeURIComponent(route.query.item)) 135 item.value = JSON.parse(decodeURIComponent(route.query.item))
136 console.log(item.value)
132 money.value = 0 137 money.value = 0
133 changecarNum() 138 changecarNum()
134 initDays() 139 initDays()
...@@ -234,13 +239,13 @@ function pushFrom() { ...@@ -234,13 +239,13 @@ function pushFrom() {
234 239
235 .ccitemBox { 240 .ccitemBox {
236 overflow: auto; 241 overflow: auto;
237 242
238 label { 243 label {
239 margin: 10px 0; 244 margin: 10px 0;
240 display: block; 245 display: block;
241 font-weight: 600; 246 font-weight: 600;
242 min-height: 30px; 247 min-height: 30px;
243 248
244 span { 249 span {
245 color: #FF8124; 250 color: #FF8124;
246 font-family: DIN Alternate; 251 font-family: DIN Alternate;
...@@ -255,12 +260,12 @@ function pushFrom() { ...@@ -255,12 +260,12 @@ function pushFrom() {
255 font-size: 15px; 260 font-size: 15px;
256 color: #666; 261 color: #666;
257 margin: 5px 0 10px; 262 margin: 5px 0 10px;
258 263
259 label { 264 label {
260 font-size: 16px; 265 font-size: 16px;
261 color: #000; 266 color: #000;
262 } 267 }
263 268
264 span { 269 span {
265 font-size: 13px; 270 font-size: 13px;
266 } 271 }
...@@ -278,12 +283,12 @@ function pushFrom() { ...@@ -278,12 +283,12 @@ function pushFrom() {
278 283
279 .tagbox { 284 .tagbox {
280 margin: 15px 0; 285 margin: 15px 0;
281 286
282 a { 287 a {
283 color: #AFB5B9; 288 color: #AFB5B9;
284 font-size: 12px; 289 font-size: 12px;
285 } 290 }
286 291
287 span { 292 span {
288 border-radius: 13px; 293 border-radius: 13px;
289 font-size: 12px; 294 font-size: 12px;
...@@ -291,22 +296,22 @@ function pushFrom() { ...@@ -291,22 +296,22 @@ function pushFrom() {
291 margin-right: 10px; 296 margin-right: 10px;
292 font-weight: 400; 297 font-weight: 400;
293 } 298 }
294 299
295 span:nth-child(4n) { 300 span:nth-child(4n) {
296 background: rgba(50, 177, 108, 0.2); 301 background: rgba(50, 177, 108, 0.2);
297 color: rgba(50, 177, 108, 1); 302 color: rgba(50, 177, 108, 1);
298 } 303 }
299 304
300 span:nth-child(4n+1) { 305 span:nth-child(4n+1) {
301 background: rgba(243, 152, 0, 0.2); 306 background: rgba(243, 152, 0, 0.2);
302 color: rgba(243, 152, 0, 1); 307 color: rgba(243, 152, 0, 1);
303 } 308 }
304 309
305 span:nth-child(4n+2) { 310 span:nth-child(4n+2) {
306 background: rgba(0, 160, 233, 0.2); 311 background: rgba(0, 160, 233, 0.2);
307 color: rgba(0, 160, 233, 1); 312 color: rgba(0, 160, 233, 1);
308 } 313 }
309 314
310 span:nth-child(4n+3) { 315 span:nth-child(4n+3) {
311 background: rgba(247, 64, 166, 0.2); 316 background: rgba(247, 64, 166, 0.2);
312 color: rgba(247, 64, 166, 1); 317 color: rgba(247, 64, 166, 1);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!