Skip to content

jijin / dance-pc

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

车辆

1 parent 08fc48dc
Inline Side-by-side
Showing 5 changed files with 664 additions and 201 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/car.vue
...@@ -4,64 +4,178 @@ ...@@ -4,64 +4,178 @@
4 <img v-if="language==0" src="@/assets/booking/cl_text_c.png"> 4 <img v-if="language==0" src="@/assets/booking/cl_text_c.png">
5 <img v-else src="@/assets/booking/cl_text_e.png"> 5 <img v-else src="@/assets/booking/cl_text_e.png">
6 </div> 6 </div>
7 <br>
8 <br>
9 <br>
7 <div class="box"> 10 <div class="box">
8 <div class="searchBar"> 11 <el-row :gutter="180">
9 <el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border"> 12 <el-col :span="12">
10 </el-input> 13 <el-card>
11 <el-button class="btn-lineG" icon="search" size="large" type="primary" @click="getList"> 14 <h2 class="text-center gradient-text">{{ language == 0 ? '接机' : "airport pickup" }}</h2>
12 {{ language == 0 ? '搜索' : 'Search' }} 15 <div v-if="language==0">
13 </el-button> 16 <el-form
14 </div> 17 ref="formRef1" :model="form1" :rules="rules" class="form" label-width="100px"
15 </div> 18 size="large"
16 <div v-loading="loading" class="box"> 19 >
17 <div v-for="(h,index) in list" :key="index" class="routeItem"> 20 <el-form-item :label="language==0?'出发地':'place of departure'" prop="checkIn">
18 <el-row :gutter="20" align="middle" class="w100"> 21 <el-select
19 <el-col :lg="2" :sm="6"> 22 v-model="form1.checkIn" :placeholder="language==0?'请选择':'please select'"
20 <div class="index">{{ language == 0 ? '路线' : 'Route' }}{{ index + 1 }} 23 @change="changeSelectIn"
24 >
25 <el-option v-for="val in cardData.in" :key="val" :label="val" :value="val" />
26
27 </el-select>
28 </el-form-item>
29 <br>
30 <br>
31 <el-form-item :label="language==0?'到达地':'place of destination'" prop="checkOut">
32 <el-select v-model="form1.checkOut" :placeholder="language==0?'请选择':'please select'">
33 <el-option v-for="val in daoOptionIn" :key="val.id" :label="val.checkOut" :value="val.id" />
34 </el-select>
35 </el-form-item>
36 </el-form>
21 </div> 37 </div>
22 </el-col> 38 <div v-else>
23 <el-col :lg="6" > 39 <el-form
24 <p class="esp text-center">{{ h.checkIn }}</p> 40 ref="formRef1" :model="form1" :rules="rules" class="formEn" label-width="155px"
25 </el-col> 41 size="large"
26 <el-col :lg="4" :sm="6" class="text-center"> 42 >
27 <img class="mauto w40px" src="@/assets/booking/wf.png"/> 43 <el-form-item label="place of departure" prop="checkIn">
28 </el-col> 44 <el-select v-model="form1.checkIn" placeholder="please select" @change="changeSelectIn">
29 <el-col :lg="6" > 45 <el-option v-for="val in cardData.in" :key="val" :label="val" :value="val" />
30 <p class="esp text-center">{{ h.checkOut }}</p> 46 </el-select>
31 </el-col> 47 </el-form-item>
32 <el-col :lg="3" :sm="12"> 48 <br>
33 <div v-if="language==0" class="price"> 49 <br>
34 ¥ 50 <el-form-item label="place of destination" prop="checkOut">
35 <span>{{ h.upPrice }}</span> 51 <el-select v-model="form1.checkOut" placeholder="please select">
52 <el-option v-for="val in daoOptionIn" :key="val.id" :label="val.checkOut" :value="val.id" />
53 </el-select>
54 </el-form-item>
55 </el-form>
36 </div> 56 </div>
37 <div v-else class="price"> 57
38 € 58 <br>
39 <span>{{ h.upPriceEn }}</span> 59 <br>
60 <div class="text-center ">
61 <el-button class="btn-lineG w50 " round size="large" type="primary" @click="handleSubmit(0)">
62 {{ language == 0 ? '我要接机' : "next step" }}
63 </el-button>
40 </div> 64 </div>
41 65 <br>
42 </el-col> 66 <br>
43 <el-col :lg="3" :sm="12"> 67 </el-card>
44 <el-button class="btn-lineG w100" round type="primary" @click="goOrder(h)"> 68 </el-col>
45 {{ language == 0 ? '我要预订' : 'Select' }} 69 <el-col :span="12">
46 </el-button> 70 <el-card>
47 </el-col> 71 <h2 class="text-center gradient-text">{{ language == 0 ? '送机' : 'airport drop-off service' }}</h2>
48 </el-row> 72 <div v-if="language==0">
49 </div> 73 <el-form
50 74 ref="formRef2" :model="form2" :rules="rules" class="form" label-width="100px"
51 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description=""/> 75 size="large"
52 <div style="height: 50px"></div> 76 >
77 <el-form-item :label="language==0?'出发地':'place of departure'" prop="checkIn">
78 <el-select
79 v-model="form2.checkIn" :placeholder="language==0?'请选择':'please select'"
80 @change="changeSelectOut"
81 >
82 <el-option v-for="val in cardData.out" :key="val" :label="val" :value="val" />
83 </el-select>
84 </el-form-item>
85 <br>
86 <br>
87 <el-form-item :label="language==0?'到达地':'place of destination'" prop="checkOut">
88 <el-select v-model="form2.checkOut" :placeholder="language==0?'请选择':'please select'">
89 <el-option v-for="val in daoOptionOut" :key="val.id" :label="val.checkOut" :value="val.id" />
90 </el-select>
91 </el-form-item>
92 </el-form>
93 </div>
94 <div v-else>
95 <el-form
96 ref="formRef2" :model="form2" :rules="rules" class="formEn" label-width="155px"
97 size="large"
98 >
99 <el-form-item label="place of departure" prop="checkIn">
100 <el-select v-model="form2.checkIn" placeholder="please select" @change="changeSelectOut">
101 <el-option v-for="val in cardData.out" :key="val" :label="val" :value="val" />
102 </el-select>
103 </el-form-item>
104 <br>
105 <br>
106 <el-form-item label="place of destination" prop="checkOut">
107 <el-select v-model="form2.checkOut" placeholder="please select">
108 <el-option v-for="val in daoOptionOut" :key="val.id" :label="val.checkOut" :value="val.id" />
109 </el-select>
110 </el-form-item>
111 </el-form>
112 </div>
113 <br>
114 <br>
115 <div class="text-center">
116 <el-button class="btn-lineG w50" round size="large" type="primary" @click="handleSubmit(1)">
117 {{ language == 0 ? '我要送机' : 'next step' }}
118 </el-button>
119 </div>
120 <br>
121 <br>
122 </el-card>
123 </el-col>
124 </el-row>
53 </div> 125 </div>
54 126
127
128 <!-- <div v-loading="loading" class="box">-->
129 <!-- <div v-for="(h,index) in list" :key="index" class="routeItem">-->
130 <!-- <el-row :gutter="20" align="middle" class="w100">-->
131 <!-- <el-col :lg="2" :sm="6">-->
132 <!-- <div class="index">{{ language == 0 ? '路线' : 'Route' }}{{ index + 1 }}-->
133 <!-- </div>-->
134 <!-- </el-col>-->
135 <!-- <el-col :lg="6">-->
136 <!-- <p class="esp text-center">{{ h.checkIn }}</p>-->
137 <!-- </el-col>-->
138 <!-- <el-col :lg="4" :sm="6" class="text-center">-->
139 <!-- <img class="mauto w40px" src="@/assets/booking/wf.png">-->
140 <!-- </el-col>-->
141 <!-- <el-col :lg="6">-->
142 <!-- <p class="esp text-center">{{ h.checkOut }}</p>-->
143 <!-- </el-col>-->
144 <!-- <el-col :lg="3" :sm="12">-->
145 <!-- <div v-if="language==0" class="price">-->
146 <!-- ¥-->
147 <!-- <span>{{ h.upPrice }}</span>-->
148 <!-- </div>-->
149 <!-- <div v-else class="price">-->
150 <!-- €-->
151 <!-- <span>{{ h.upPriceEn }}</span>-->
152 <!-- </div>-->
153 <!-- -->
154 <!-- </el-col>-->
155 <!-- <el-col :lg="3" :sm="12">-->
156 <!-- <el-button class="btn-lineG w100" round type="primary" @click="goOrder(h)">-->
157 <!-- {{ language == 0 ? '我要预订' : 'Select' }}-->
158 <!-- </el-button>-->
159 <!-- </el-col>-->
160 <!-- </el-row>-->
161 <!-- </div>-->
162 <!-- -->
163 <!-- <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />-->
164 <!-- <div style="height: 50px" />-->
165 <!-- </div>-->
166
55 </div> 167 </div>
56 </template> 168 </template>
57 169
58 <script setup> 170 <script setup>
59 import {onMounted} from "@vue/runtime-core" 171 import { getCurrentInstance, onMounted, ref } from '@vue/runtime-core'
60 import * as booking from "@/apiPc/booking" 172 import * as booking from '@/apiPc/booking'
61 import {useRouter, useRoute} from "vue-router"; 173 import { useRouter, useRoute } from 'vue-router'
62 import {useStorage} from "@vueuse/core/index"; 174 import { useStorage } from '@vueuse/core/index'
63 import useUserStore from "@/store/modules/user"; 175 import useUserStore from '@/store/modules/user'
64 176 import { getVehicleByCheckIn } from '@/apiPc/booking'
177
178 const { proxy } = getCurrentInstance()
65 const user = useUserStore().user 179 const user = useUserStore().user
66 const router = useRouter() 180 const router = useRouter()
67 const route = useRoute() 181 const route = useRoute()
...@@ -69,14 +183,29 @@ const language = useStorage('language', 0) ...@@ -69,14 +183,29 @@ const language = useStorage('language', 0)
69 const query = ref({ 183 const query = ref({
70 name: '' 184 name: ''
71 }) 185 })
72 const activeName = ref(0)
73 const cptId = ref('')
74 const list = ref([]) 186 const list = ref([])
75 const loading = ref(false) 187 const loading = ref(false)
188
189 const form1 = ref({})
190 const form2 = ref({})
191 const rules = ref({
192 checkIn: [
193 { required: true, message: `${language.value == 0 ? '请选择' : 'please select'}`, trigger: 'blur' }
194 ],
195 checkOut: [
196 { required: true, message: `${language.value == 0 ? '请选择' : 'please select'}`, trigger: 'blur' }
197 ]
198
199 })
200 const cardData = ref({})
201 const daoOptionIn = ref([])
202 const daoOptionOut = ref([])
203
76 onMounted(() => { 204 onMounted(() => {
77 query.value.activityId = route.params.cptId 205 query.value.activityId = route.params.cptId
78 // if (language.value==0) 206 // if (language.value==0)
79 getList() 207 // getList()
208 getVehicleMap()
80 }) 209 })
81 210
82 function getList() { 211 function getList() {
...@@ -90,6 +219,70 @@ function getList() { ...@@ -90,6 +219,70 @@ function getList() {
90 }) 219 })
91 } 220 }
92 221
222 async function getVehicleMap() {
223 const res = await booking.getVehicleMap({ activityId: route.params.cptId })
224 cardData.value = res.data
225 }
226
227 async function changeSelectIn() {
228 const res = await booking.getVehicleByCheckIn({
229 activityId: route.params.cptId,
230 checkIn: form1.value.checkIn,
231 category: '0'
232 })
233 form1.value.checkOut = ''
234 daoOptionIn.value = res.data
235 }
236
237 async function changeSelectOut() {
238 const res = await booking.getVehicleByCheckIn({
239 activityId: route.params.cptId,
240 checkIn: form1.value.checkIn,
241 category: '1'
242 })
243 form2.value.checkOut = ''
244 daoOptionOut.value = res.data
245 }
246
247 async function handleSubmit(v) {
248 let checkOut = {}
249 let obj = {}
250 if (v == 0) {
251 await proxy.$refs['formRef1'].validate()
252 checkOut = daoOptionIn.value.find(v => v.id == form1.value.checkOut) || {}
253 obj = {
254 activityId: route.params.cptId,
255 checkIn: form1.value.checkIn,
256 checkOut: checkOut.checkOut,
257 category: v
258 }
259 } else {
260 await proxy.$refs['formRef2'].validate()
261 checkOut = daoOptionOut.value.find(v => v.id == form2.value.checkOut) || {}
262
263 obj = {
264 activityId: route.params.cptId,
265 checkIn: form2.value.checkIn,
266 checkOut: checkOut.checkOut,
267 category: v
268 }
269 // await getVehicleByCheckIn({
270 // activityId: route.params.cptId,
271 // checkIn: form2.value.checkIn,
272 // checkOut: checkOut.checkOut,
273 // category: v
274 // })
275 }
276 await router.push({
277 name: 'carList',
278 params: {
279 id: route.params.cptId
280 },
281 query: obj
282 })
283 }
284
285
93 function goOrder(item, car) { 286 function goOrder(item, car) {
94 if (!user) { 287 if (!user) {
95 useUserStore().setReLogin() 288 useUserStore().setReLogin()
...@@ -98,7 +291,7 @@ function goOrder(item, car) { ...@@ -98,7 +291,7 @@ function goOrder(item, car) {
98 router.push({ 291 router.push({
99 name: 'carOrder', 292 name: 'carOrder',
100 params: { 293 params: {
101 id: item.id, 294 id: item.id
102 }, 295 },
103 query: { 296 query: {
104 item: encodeURIComponent(JSON.stringify(item)) 297 item: encodeURIComponent(JSON.stringify(item))
...@@ -112,25 +305,25 @@ function goOrder(item, car) { ...@@ -112,25 +305,25 @@ function goOrder(item, car) {
112 .hotel { 305 .hotel {
113 margin-bottom: 20px; 306 margin-bottom: 20px;
114 cursor: pointer; 307 cursor: pointer;
115 308
116 .index { 309 .index {
117 display: flex; 310 display: flex;
118 font-weight: 500; 311 font-weight: 500;
119 padding-left: 20px; 312 padding-left: 20px;
120 font-size: 18px; 313 font-size: 18px;
121 align-items: center; 314 align-items: center;
122 315
123 img { 316 img {
124 margin-left: 15px; 317 margin-left: 15px;
125 } 318 }
126 } 319 }
127 320
128 p { 321 p {
129 font-weight: 500; 322 font-weight: 500;
130 font-size: 24px; 323 font-size: 24px;
131 color: #000000; 324 color: #000000;
132 } 325 }
133 326
134 &:hover .el-card { 327 &:hover .el-card {
135 box-shadow: 0 0 10px #aaa; 328 box-shadow: 0 0 10px #aaa;
136 } 329 }
...@@ -172,7 +365,7 @@ function goOrder(item, car) { ...@@ -172,7 +365,7 @@ function goOrder(item, car) {
172 display: flex; 365 display: flex;
173 align-items: center; 366 align-items: center;
174 justify-content: center; 367 justify-content: center;
175 368
176 img { 369 img {
177 display: block; 370 display: block;
178 margin: -30px auto 0; 371 margin: -30px auto 0;
...@@ -180,131 +373,43 @@ function goOrder(item, car) { ...@@ -180,131 +373,43 @@ function goOrder(item, car) {
180 } 373 }
181 } 374 }
182 375
183 .searchBar { 376 .gradient-text {
184 position: relative; 377 font-family: FZJunHeiS-B-GB;
185 top: -30px; 378 font-weight: 600;
186 background: #FFFFFF; 379 font-size: 24px;
187 display: flex; 380 background: linear-gradient(0deg, #8226FC 0%, #483BEB 100%);
188 padding: 20px; 381 -webkit-background-clip: text;
189 border-radius: 10px; 382 -webkit-text-fill-color: transparent;
190 }
191
192 .no-border {
193 border: none;
194 background: #F5F7F9;
195
196 :deep(.el-input__wrapper) {
197 border: none;
198 box-shadow: none;
199 background: #F5F7F9;
200 }
201 }
202
203 .starBox {
204 img {
205 display: inline-block;
206 margin-right: 4px
207 }
208 }
209
210 .tagbox {
211 margin: 15px 0;
212
213 a {
214 color: #AFB5B9;
215 font-size: 12px;
216 }
217
218 span {
219 border-radius: 13px;
220 font-size: 12px;
221 padding: 4px 10px;
222 margin-right: 10px;
223 font-weight: 400;
224 }
225
226 span:nth-child(4n) {
227 background: rgba(50, 177, 108, 0.2);
228 color: rgba(50, 177, 108, 1);
229 }
230
231 span:nth-child(4n+1) {
232 background: rgba(243, 152, 0, 0.2);
233 color: rgba(243, 152, 0, 1);
234 }
235
236 span:nth-child(4n+2) {
237 background: rgba(0, 160, 233, 0.2);
238 color: rgba(0, 160, 233, 1);
239 }
240
241 span:nth-child(4n+3) {
242 background: rgba(247, 64, 166, 0.2);
243 color: rgba(247, 64, 166, 1);
244 }
245 } 383 }
246 384
247 .name.flex { 385 .form {
248 align-items: center; 386 padding-right: 50px;
249 } 387
250 388 :deep(.el-form-item) {
251 .name .tagbox { 389 label {
252 margin: 0 0 0 15px; 390 font-size: 20px;
253 } 391 height: 60px;
254 392 line-height: 60px;
255 .room {
256 background: #FAFBFD;
257 margin: 20px 0 0;
258 padding: 20px;
259 border: 1px solid #E5E5E5;
260
261 .name {
262 font-size: 20px;
263 margin: 0 0 10px;
264 }
265
266 .roomImg {
267 aspect-ratio: 16/9;
268 border-radius: 10px;
269 overflow: hidden;
270
271 img {
272 width: 100%;
273 object-fit: cover;
274 object-position: center;
275 height: 100%;
276 } 393 }
277 } 394
278 395 .el-select--large .el-select__wrapper {
279 396 min-height: 60px;
280
281 .bg-lineg {
282 margin: auto;
283 border-radius: 10px;
284 text-align: center;
285 padding: 7px 2px 2px;
286 font-size: 24px;
287 width: 66px;
288 cursor: pointer;
289
290 div {
291 background: #fff;
292 font-size: 13px;
293 border-radius: 20px;
294 padding: 0 10px;
295 color: #453DEA;
296 font-weight: 500;
297 } 397 }
298 } 398 }
299 } 399 }
300 .routeItem{background: #fff;border-radius: 10px;margin: 0 0 20px;padding: 10px 20px;box-shadow: 0 0 6px #eee;
301 .price {
302 color: #FF8124;
303 font-size: 24px;
304 400
305 span { 401 .formEn {
306 font-size: 36px; 402 padding-right: 50px;
307 font-family: "DIN Alternate" 403
404 :deep(.el-form-item) {
405 label {
406 font-size: 14px;
407 height: 60px;
408 line-height: 60px;
409 }
410
411 .el-select--large .el-select__wrapper {
412 min-height: 60px;
308 } 413 }
309 } 414 }
310 } 415 }
......
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!