Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
c0c59ce7 by 杨炀
Options

Merge branch 'dev' of https://code.itechtop.cn/yangyang/dance-pc into dev 

# Conflicts:
#	vite.config.js
2 parents 65d4b1e1 6c6e5fb9
Inline Side-by-side
Showing 15 changed files with 2199 additions and 825 deletions
src/apiPc/booking.js
...@@ -237,6 +237,15 @@ export function getBaseInfoByActiveId(id) { ...@@ -237,6 +237,15 @@ export function getBaseInfoByActiveId(id) {
237 }) 237 })
238 } 238 }
239 239
240 export function vehicleConfigList(params) {
241 return request({
242 url: `/ota/vehicleConfig/list`,
243 method: 'get',
244 params
245 })
246 }
247
248
240 export function checkRoomPayByUserId(id) { 249 export function checkRoomPayByUserId(id) {
241 return request({ 250 return request({
242 url: `/ota/norder/checkRoomPayByUserId`, 251 url: `/ota/norder/checkRoomPayByUserId`,
...@@ -648,9 +657,9 @@ export function getTicketOrderInfo(params) { ...@@ -648,9 +657,9 @@ export function getTicketOrderInfo(params) {
648 }) 657 })
649 } 658 }
650 659
651 export function getGateListByLasId(params) { 660 export function getVehicleByCheckIn(params) { // activityId,category,checkIn
652 return request({ 661 return request({
653 url: `/ota/scenicConfig/getGateListByLasId`, 662 url: `/ota/activityVehicle/getVehicleByCheckIn`,
654 method: 'get', 663 method: 'get',
655 params 664 params
656 }) 665 })
...@@ -670,3 +679,34 @@ export function checkPurchasedCustomers(data) { ...@@ -670,3 +679,34 @@ export function checkPurchasedCustomers(data) {
670 data 679 data
671 }) 680 })
672 } 681 }
682
683 // 接机
684 export function getVehicleMap(params) { // activityId
685 return request({
686 url: `/ota/activityVehicle/getVehicleMap`,
687 method: 'get',
688 params
689 })
690 }
691
692 export function getVehicleMa1p(params) { // activityId
693 return request({
694 url: `/ota/activityVehicle/getVehicleMap`,
695 method: 'get',
696 params
697 })
698 }
699
700 // 旅游
701
702 export function getGateListByLasId(params) { // scenicDate,lasId
703 return request({
704 url: `/ota/scenicConfig/getGateListByLasId`,
705 method: 'get',
706 params
707 })
708 }
709
710 // 旅游
711
712
......
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
17 ref="formRef1" :model="form1" :rules="rules" class="form" label-width="100px"
18 size="large"
19 >
20 <el-form-item :label="language==0?'出发地':'place of departure'" prop="checkIn">
21 <el-select
22 v-model="form1.checkIn" :placeholder="language==0?'请选择':'please select'"
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>
14 </div> 37 </div>
38 <div v-else>
39 <el-form
40 ref="formRef1" :model="form1" :rules="rules" class="formEn" label-width="155px"
41 size="large"
42 >
43 <el-form-item label="place of departure" prop="checkIn">
44 <el-select v-model="form1.checkIn" placeholder="please select" @change="changeSelectIn">
45 <el-option v-for="val in cardData.in" :key="val" :label="val" :value="val" />
46 </el-select>
47 </el-form-item>
48 <br>
49 <br>
50 <el-form-item label="place of destination" prop="checkOut">
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>
15 </div> 56 </div>
16 <div v-loading="loading" class="box"> 57
17 <div v-for="(h,index) in list" :key="index" class="routeItem"> 58 <br>
18 <el-row :gutter="20" align="middle" class="w100"> 59 <br>
19 <el-col :lg="2" :sm="6"> 60 <div class="text-center ">
20 <div class="index">{{ language == 0 ? '路线' : 'Route' }}{{ index + 1 }} 61 <el-button class="btn-lineG w50 " round size="large" type="primary" @click="handleSubmit(0)">
62 {{ language == 0 ? '我要接机' : "next step" }}
63 </el-button>
21 </div> 64 </div>
65 <br>
66 <br>
67 </el-card>
22 </el-col> 68 </el-col>
23 <el-col :lg="6" > 69 <el-col :span="12">
24 <p class="esp text-center">{{ h.checkIn }}</p> 70 <el-card>
25 </el-col> 71 <h2 class="text-center gradient-text">{{ language == 0 ? '送机' : 'airport drop-off service' }}</h2>
26 <el-col :lg="4" :sm="6" class="text-center"> 72 <div v-if="language==0">
27 <img class="mauto w40px" src="@/assets/booking/wf.png"/> 73 <el-form
28 </el-col> 74 ref="formRef2" :model="form2" :rules="rules" class="form" label-width="100px"
29 <el-col :lg="6" > 75 size="large"
30 <p class="esp text-center">{{ h.checkOut }}</p> 76 >
31 </el-col> 77 <el-form-item :label="language==0?'出发地':'place of departure'" prop="checkIn">
32 <el-col :lg="3" :sm="12"> 78 <el-select
33 <div v-if="language==0" class="price"> 79 v-model="form2.checkIn" :placeholder="language==0?'请选择':'please select'"
34 ¥ 80 @change="changeSelectOut"
35 <span>{{ h.upPrice }}</span> 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>
36 </div> 93 </div>
37 <div v-else class="price"> 94 <div v-else>
38 € 95 <el-form
39 <span>{{ h.upPriceEn }}</span> 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>
40 </div> 112 </div>
41 113 <br>
42 </el-col> 114 <br>
43 <el-col :lg="3" :sm="12"> 115 <div class="text-center">
44 <el-button class="btn-lineG w100" round type="primary" @click="goOrder(h)"> 116 <el-button class="btn-lineG w50" round size="large" type="primary" @click="handleSubmit(1)">
45 {{ language == 0 ? '我要预订' : 'Select' }} 117 {{ language == 0 ? '我要送机' : 'next step' }}
46 </el-button> 118 </el-button>
119 </div>
120 <br>
121 <br>
122 </el-card>
47 </el-col> 123 </el-col>
48 </el-row> 124 </el-row>
49 </div> 125 </div>
50 126
51 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description=""/> 127
52 <div style="height: 50px"></div> 128 <!-- <div v-loading="loading" class="box">-->
53 </div> 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>-->
54 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))
...@@ -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 }
246
247 .name.flex {
248 align-items: center;
249 }
250
251 .name .tagbox {
252 margin: 0 0 0 15px;
253 } 383 }
254 384
255 .room { 385 .form {
256 background: #FAFBFD; 386 padding-right: 50px;
257 margin: 20px 0 0;
258 padding: 20px;
259 border: 1px solid #E5E5E5;
260 387
261 .name { 388 :deep(.el-form-item) {
389 label {
262 font-size: 20px; 390 font-size: 20px;
263 margin: 0 0 10px; 391 height: 60px;
392 line-height: 60px;
264 } 393 }
265 394
266 .roomImg { 395 .el-select--large .el-select__wrapper {
267 aspect-ratio: 16/9; 396 min-height: 60px;
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 } 397 }
277 } 398 }
399 }
278 400
401 .formEn {
402 padding-right: 50px;
279 403
280 404 :deep(.el-form-item) {
281 .bg-lineg { 405 label {
282 margin: auto; 406 font-size: 14px;
283 border-radius: 10px; 407 height: 60px;
284 text-align: center; 408 line-height: 60px;
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 } 409 }
298 }
299 }
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 410
305 span { 411 .el-select--large .el-select__wrapper {
306 font-size: 36px; 412 min-height: 60px;
307 font-family: "DIN Alternate"
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="getVehicleByCheckIn">
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.data || []
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
...@@ -18,38 +18,51 @@ ...@@ -18,38 +18,51 @@
18 </div> 18 </div>
19 </div> 19 </div>
20 20
21 <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div> 21 <div class="leftboderTT">
22 {{ language == 0 ? '预约信息' : 'Reservation information' }}
23 </div>
22 <div class="border-rr mt20 pd20"> 24 <div class="border-rr mt20 pd20">
23 <el-form ref="formRef" :label-width="language == 0 ?'120':'200'" :model="form" :rules="rules"> 25 <el-form ref="formRef" :label-width="language == 0 ?'120':'200'" :model="form" :rules="rules">
24 <el-form-item :label="language==0?'人数':'Person Count'" required> 26 <el-form-item :label="language==0?'人数':'Person Count'" prop="pickUpBo.count">
25 <el-input-number v-model="form.pickUpBo.count" type="text" @change="changecarNum" /> 27 <el-input-number v-model="form.pickUpBo.count" type="text" @change="changecarNum" />
26 </el-form-item> 28 </el-form-item>
27 <el-form-item :label="language==0?'用车日期':'Date'" required> 29 <el-form-item :label="language==0?'用车日期':'Date'" prop="date1">
28 <el-date-picker 30 <el-date-picker
29 v-model="date1" :disabled-date="disabledDate" 31 v-model="form.date1" :disabled-date="disabledDate"
30 :placeholder="language==0?'选择日期':'Select date'" 32 :placeholder="language==0?'选择日期':'Select date'"
31 format="YYYY-MM-DD" type="date" 33 format="YYYY-MM-DD" type="date"
32 value-format="YYYY-MM-DD" 34 value-format="YYYY-MM-DD"
33 /> 35 />
34 </el-form-item> 36 </el-form-item>
35 <el-form-item :label="language==0?'用车时间':'Time'" required> 37 <el-form-item :label="language==0?'用车时间':'Time'" prop="lvcId">
36 <el-time-picker v-model="revTime1" format="HH:mm" value-format="HH:mm" @change="bindTimeChange" /> 38 <!-- <el-time-picker v-model="revTime1" format="HH:mm" value-format="HH:mm" @change="bindTimeChange" />-->
39
40 <el-select v-model="form.lvcId">
41 <el-option v-for="v in timeList" :key="v.id" :label="`${v.nameStart}~${v.nameEnd}`" :value="v.id" />
42 </el-select>
37 </el-form-item> 43 </el-form-item>
38 <el-form-item :label="language==0?'联系人':'Contacts'" required> 44 <el-form-item
45 v-for="(v,i) in form.list" :key="i" :label="`${language==0?`乘坐人${i+1}`:`Contacts${i+1}`}`"
46 :prop="`list.${i}.name`"
47 :rules="rules.name"
48 >
49 <el-input v-model="v.name" type="text" />
50 </el-form-item>
51 <el-form-item :label="language==0?'联系人':'Contacts'" prop="pickUpBo.contacts">
39 <el-input v-model="form.pickUpBo.contacts" type="text" /> 52 <el-input v-model="form.pickUpBo.contacts" type="text" />
40 </el-form-item> 53 </el-form-item>
41 <el-form-item :label="language==0?'联系电话':'Phone'" required> 54 <el-form-item :label="language==0?'联系电话':'Phone'" prop="pickUpBo.phone">
42 <el-input v-model="form.pickUpBo.phone" type="text" /> 55 <el-input v-model="form.pickUpBo.phone" type="text" />
43 </el-form-item> 56 </el-form-item>
44 <el-form-item :label="language==0?'航班/火车班次:':'Flight/Train No'" required> 57 <el-form-item :label="language==0?'航班/火车班次:':'Flight/Train No'" prop="pickUpBo.no">
45 <el-input v-model="form.pickUpBo.no" type="text" /> 58 <el-input v-model="form.pickUpBo.no" type="text" />
46 </el-form-item> 59 </el-form-item>
47 <el-form-item :label="language==0?'接机/接站地点':'Pick up/Drop off Address'" required> 60 <!-- <el-form-item :label="language==0?'接机/接站地点':'Pick up/Drop off Address'" required>-->
48 <el-input v-model="form.pickUpBo.noAddress" type="text" /> 61 <!-- <el-input v-model="form.pickUpBo.noAddress" type="text" />-->
49 </el-form-item> 62 <!-- </el-form-item>-->
50 <el-form-item :label="language==0?'送达地点':'Delivery Address'" required> 63 <!-- <el-form-item :label="language==0?'送达地点':'Delivery Address'" required>-->
51 <el-input v-model="form.pickUpBo.deliveryAddress" type="text" /> 64 <!-- <el-input v-model="form.pickUpBo.deliveryAddress" type="text" />-->
52 </el-form-item> 65 <!-- </el-form-item>-->
53 <el-form-item :label="language==0?'备注':'Remarks'"> 66 <el-form-item :label="language==0?'备注':'Remarks'">
54 <el-input v-model="form.pickUpBo.remarks" rows="3" type="textarea" /> 67 <el-input v-model="form.pickUpBo.remarks" rows="3" type="textarea" />
55 </el-form-item> 68 </el-form-item>
...@@ -60,15 +73,22 @@ ...@@ -60,15 +73,22 @@
60 <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div> 73 <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
61 <div class="border-rr mt20 pd20 ccitemBox"> 74 <div class="border-rr mt20 pd20 ccitemBox">
62 <label> {{ language == 0 ? '单价' : 'Price' }} 75 <label> {{ language == 0 ? '单价' : 'Price' }}
63 <span class="fr">{{ language == 0 ? '¥' : '€' }}{{ language == 0 ? item.upPrice: item.upPriceEn }}</span> 76 <span class="fr">{{ language == 0 ? '¥' : '€' }}
77 {{ language == 0 ? item.upPrice : item.upPriceEn }}
78 </span>
64 </label> 79 </label>
65 <div class="ccitem"> 80 <div class="ccitem">
66 <span>{{ form.pickUpBo.count }} *{{ language == 0 ? '¥' : '€' }}{{ language == 0 ? item.upPrice: item.upPriceEn }}</span> 81 <span>
82 {{ form.pickUpBo.count }} *{{ language == 0 ? '¥' : '€' }}
83 {{ language == 0 ? item.upPrice : item.upPriceEn }}
84 </span>
67 </div> 85 </div>
68 86
69 <label>{{ language == 0 ? '共计' : 'Total' }}<span 87 <label>{{ language == 0 ? '共计' : 'Total' }}
70 class="fr bigMoney" 88 <span class="fr bigMoney">
71 >{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label> 89 {{ language == 0 ? '¥' : '€' }}{{ money }}
90 </span>
91 </label>
72 92
73 </div> 93 </div>
74 </el-col> 94 </el-col>
...@@ -79,14 +99,17 @@ ...@@ -79,14 +99,17 @@
79 <el-row align="middle" justify="space-between"> 99 <el-row align="middle" justify="space-between">
80 <el-col :span="12"> 100 <el-col :span="12">
81 <label>{{ language == 0 ? '共计金额' : 'Total' }}： 101 <label>{{ language == 0 ? '共计金额' : 'Total' }}：
82 <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ 102 <span class=" text-warning">
83 money 103 {{ language == 0 ? '¥' : '€' }}
84 }}</span></span> 104 <span class="bigMoney">
105 {{ money }}
106 </span>
107 </span>
85 </label> 108 </label>
86 </el-col> 109 </el-col>
87 <el-col :span="12" class="text-right"> 110 <el-col :span="12" class="text-right">
88 <el-button 111 <el-button
89 :loading="payLoading" :disabled="money<=0" class="btn-lineG w200px" round type="primary" 112 :disabled="money<=0" :loading="payLoading" class="btn-lineG w200px" round type="primary"
90 @click="submit" 113 @click="submit"
91 > 114 >
92 {{ language == 0 ? '确认付款' : 'Pay' }} 115 {{ language == 0 ? '确认付款' : 'Pay' }}
...@@ -101,13 +124,14 @@ ...@@ -101,13 +124,14 @@
101 124
102 <script setup> 125 <script setup>
103 import { useRouter, useRoute } from 'vue-router' 126 import { useRouter, useRoute } from 'vue-router'
104 import { ref, onMounted, watch } from 'vue' 127 import { ref, onMounted, getCurrentInstance } from 'vue'
105 import { useStorage } from '@vueuse/core/index' 128 import { useStorage } from '@vueuse/core/index'
106 import { getBaseInfoByActiveId, submitOrderCar } from '@/apiPc/booking' 129 import { getBaseInfoByActiveId, submitOrderCar, vehicleConfigList } from '@/apiPc/booking'
107 import dayjs from 'dayjs' 130 import dayjs from 'dayjs'
108 import { ElMessage, ElMessageBox } from 'element-plus' 131 import { ElMessage, ElMessageBox } from 'element-plus'
109 import useUserStore from '@/store/modules/user' 132 import useUserStore from '@/store/modules/user'
110 133
134 const { proxy } = getCurrentInstance()
111 const payLoading = ref(false) 135 const payLoading = ref(false)
112 const user = useUserStore().user 136 const user = useUserStore().user
113 const language = useStorage('language', 0) 137 const language = useStorage('language', 0)
...@@ -115,31 +139,81 @@ const router = useRouter() ...@@ -115,31 +139,81 @@ const router = useRouter()
115 const route = useRoute() 139 const route = useRoute()
116 const item = ref({}) 140 const item = ref({})
117 const revTime1 = ref('') 141 const revTime1 = ref('')
118 const date1 = ref('')
119 const form = ref({ 142 const form = ref({
120 pickUpBo: { 143 pickUpBo: {
121 count: 1 144 count: 1
122 } 145 },
146 list: [{}]
123 }) 147 })
124 148
125 const money = ref(0) 149 const money = ref(0)
126 const rules = ref({}) 150 const rules = ref({
151 'pickUpBo.count': {
152 required: true,
153 message: language.value == 0 ? '请输入人数' : 'Please enter the number of people',
154 trigger: 'blur'
155 },
156 'pickUpBo.revTime': {
157 required: true,
158 message: language.value == 0 ? '请选择时间' : 'Please select time',
159 trigger: 'blur'
160 },
161 'pickUpBo.contacts': {
162 required: true,
163 message: language.value == 0 ? '请输入联系人' : 'Please enter contacts',
164 trigger: 'blur'
165 },
166 'pickUpBo.phone': {
167 required: true,
168 message: language.value == 0 ? '请输入联系电话' : 'Please enter contact number',
169 trigger: 'blur'
170 },
171 'pickUpBo.no': {
172 required: true,
173 message: language.value == 0 ? '请输入航班号' : 'Please enter flight number',
174 trigger: 'blur'
175 },
176 name: {
177 required: true,
178 message: language.value == 0 ? '请输入姓名' : 'Please enter name',
179 trigger: 'blur'
180 },
181 date1: {
182 required: true,
183 message: language.value == 0 ? '请选择日期' : 'Please select date',
184 trigger: 'blur'
185 },
186 lvcId: {
187 required: true,
188 message: language.value == 0 ? '请选择时间' : 'Please select time ',
189 trigger: 'blur'
190 }
191 })
127 const lform = ref({}) 192 const lform = ref({})
128 193 const timeList = ref([])
129 194
130 onMounted(() => { 195 onMounted(() => {
131 item.value = JSON.parse(decodeURIComponent(route.query.item)) 196 item.value = JSON.parse(decodeURIComponent(route.query.item))
197 console.log(item.value)
132 money.value = 0 198 money.value = 0
133 changecarNum() 199 changecarNum()
134 initDays() 200 initDays()
201 handleVehicleConfigList()
135 }) 202 })
136 203
137 function changecarNum() { 204 function changecarNum() {
138 money.value = (form.value.pickUpBo.count * (language.value == 0 ? item.value.upPrice : item.value.upPriceEn)).toFixed(2) 205 const num = form.value.pickUpBo.count
206 money.value = (num * (language.value == 0 ? item.value.upPrice : item.value.upPriceEn)).toFixed(2)
207
208 if (num) {
209 const arr = [...new Array(num).fill({})]
210 form.value.list = JSON.parse(JSON.stringify(arr))
211 }
139 } 212 }
140 213
141 function bindTimeChange(e) { 214 async function handleVehicleConfigList() {
142 revTime1.value = e 215 const res = await vehicleConfigList({ lavId: item.value.id })
216 timeList.value = res.rows
143 } 217 }
144 218
145 function initDays() { 219 function initDays() {
...@@ -157,33 +231,57 @@ function disabledDate(date) { ...@@ -157,33 +231,57 @@ function disabledDate(date) {
157 return true 231 return true
158 } 232 }
159 233
160 function submit() { 234 async function submit() {
235 await proxy.$refs['formRef'].validate()
161 if (!user) { 236 if (!user) {
162 useUserStore().setReLogin() 237 useUserStore().setReLogin()
163 return 238 return
164 } 239 }
165 if (money.value <= 0) { 240 if (money.value <= 0) {
166 ElMessage.error(language.value == 0 ? '请添加人数' : 'Please add the number of people') 241 await proxy.$modal.msgError(language.value == 0 ? '请添加人数' : 'Please add the number of people')
167 return 242 return
168 } 243 }
169 // 提交确认 244 // 提交确认
170 ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', { 245 await proxy.$modal.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?')
171 confirmButtonText: language.value == 0 ? '确定' : 'Confirm', 246 await pushFrom()
172 cancelButtonText: language.value == 0 ? '取消' : 'Cancel', 247 // await ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
173 type: 'warning' 248 // confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
174 }).then(() => { 249 // cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
175 pushFrom() 250 // type: 'warning'
176 }) 251 // }).then(() => {
252 // pushFrom()
253 // })
177 } 254 }
178 255
179 function pushFrom() { 256 function pushFrom() {
180 payLoading.value = true 257 payLoading.value = true
181 form.value.pickUpBo.revTime = date1.value + ' ' + revTime1.value 258 const checkTime = timeList.value.find(v => v.id == form.value.lvcId)
182 form.value.activeId = item.value.activityId 259 // const name = form.value.list.map(v => v.name)?.toString()
183 form.value.lavId = item.value.id 260 const obj = {
184 form.value.checkIn = item.value.checkIn 261 pickUpBo: {
185 form.value.checkOut = item.value.checkOut 262 revTime: form.value.date1 + ' ' + revTime1.value,
186 submitOrderCar(form.value).then(res => { 263 contacts: form.value.pickUpBo.contacts,
264 phone: form.value.pickUpBo.phone,
265 count: form.value.pickUpBo.count,
266 no: form.value.pickUpBo.no,
267 remarks: form.value.remarks,
268 lvcId: form.value.lvcId,
269 lvcTimes: checkTime.nameStart + '-' + checkTime.nameEnd,
270 customers: form.value.list
271 },
272 activeId: item.value.activityId,
273 lavId: item.value.id,
274 checkIn: item.value.checkIn,
275 checkOut: item.value.checkOut
276
277 }
278 // form.value.pickUpBo.revTime = form.value.date1 + ' ' + revTime1.value
279 // form.value.activeId = item.value.activityId
280 // form.value.lavId = item.value.id
281 // form.value.checkIn = item.value.checkIn
282 // form.value.checkOut = item.value.checkOut
283
284 submitOrderCar(obj).then(res => {
187 payLoading.value = false 285 payLoading.value = false
188 if (res.data && res.data.total != -100) { 286 if (res.data && res.data.total != -100) {
189 router.push({ 287 router.push({
......
src/viewsPc/booking/component/choosePerson.vue
1 <template> 1 <template>
2 <el-dialog v-model="show" width="500" :title="languageFormat(language, '出行人信息', 'Travelers')" center 2 <el-dialog
3 append-to-body> 3 v-model="show" :title="languageFormat(language, '出行人信息', 'Travelers')" append-to-body center
4 <el-button type="primary" plain @click="addPeopl">{{ languageFormat(language, "新增", "Add") }}</el-button> 4 width="500"
5 >
6 <el-button plain type="primary" @click="addPeopl">{{ languageFormat(language, "新增", "Add") }}</el-button>
5 <el-radio-group v-model="personId"> 7 <el-radio-group v-model="personId">
6 <div v-for="(it, index) in personList" :key="index" class="e_item"> 8 <div v-for="(it, index) in personList" :key="index" class="e_item">
7 <el-radio border :value="it.id" :disabled="hasPersonIds?.indexOf(it.id)!=-1"> 9 <el-radio :disabled="hasPersonIds?.indexOf(it.id)!=-1" :value="it.id" border>
8 10
9 <div class="name">{{ it.name }}</div> 11 <div class="name">{{ it.name }}</div>
10 <div class="code"> 12 <div class="code">
...@@ -27,23 +29,23 @@ ...@@ -27,23 +29,23 @@
27 </el-dialog> 29 </el-dialog>
28 30
29 31
30 <el-dialog v-model="showAdd" :title="language ==0?'新增出行人':'Add traveler'" center append-to-body> 32 <el-dialog v-model="showAdd" :title="language ==0?'新增出行人':'Add traveler'" append-to-body center>
31 <el-form 33 <el-form
32 ref="formRef" :model="form" label-width="100px" size="large" 34 ref="formRef" :model="form" label-width="100px" size="large"
33 style="margin: 80px" 35 style="margin: 80px"
34 > 36 >
35 <el-form-item :label="language==0?'姓名':'name'" prop="name" required :show-message="false"> 37 <el-form-item :label="language==0?'姓名':'name'" :show-message="false" prop="name" required>
36 <el-input v-model="form.name" :placeholder="language==0?'请输入':'Please input'"/> 38 <el-input v-model="form.name" :placeholder="language==0?'请输入':'Please input'" />
37 </el-form-item> 39 </el-form-item>
38 <el-form-item :label="language==0?'证件类型':'ID Type'" prop="idcType" required :show-message="false"> 40 <el-form-item :label="language==0?'证件类型':'ID Type'" :show-message="false" prop="idcType" required>
39 <el-select v-model="form.idcType" :placeholder="language==0?'请选择':'Please choose'"> 41 <el-select v-model="form.idcType" :placeholder="language==0?'请选择':'Please choose'">
40 <el-option :label="language==0?'身份证':'Identity card'" value="0"/> 42 <el-option :label="language==0?'身份证':'Identity card'" value="0" />
41 <el-option :label="language==0?'护照':'Passport'" value="1"/> 43 <el-option :label="language==0?'护照':'Passport'" value="1" />
42 <el-option :label="language==0?'其他':'Other'" value="2"/> 44 <el-option :label="language==0?'其他':'Other'" value="2" />
43 </el-select> 45 </el-select>
44 </el-form-item> 46 </el-form-item>
45 <el-form-item :label="language==0?'证件号':'ID number'" prop="idCard" required :show-message="false"> 47 <el-form-item :label="language==0?'证件号':'ID number'" :show-message="false" prop="idCard" required>
46 <el-input v-model="form.idCard" :placeholder="language==0?'请输入证件号':'Please enter the ID after ah'"/> 48 <el-input v-model="form.idCard" :placeholder="language==0?'请输入证件号':'Please enter the ID after ah'" />
47 </el-form-item> 49 </el-form-item>
48 </el-form> 50 </el-form>
49 51
...@@ -58,15 +60,15 @@ ...@@ -58,15 +60,15 @@
58 </template> 60 </template>
59 61
60 <script setup> 62 <script setup>
61 import {aadSceneCustomer, checkSceneCustomer, getMyFriends} from '/@/apiPc/booking' 63 import { aadSceneCustomer, checkSceneCustomer, getMyFriends } from '/@/apiPc/booking'
62 import {languageFormat} from '/@/viewsPc/seat/utils/language' 64 import { languageFormat } from '/@/viewsPc/seat/utils/language'
63 import {onMounted, ref} from 'vue' 65 import { onMounted, ref } from 'vue'
64 import {useStorage} from '@vueuse/core/index' 66 import { useStorage } from '@vueuse/core/index'
65 import _ from 'lodash' 67 import _ from 'lodash'
66 import {getCurrentInstance} from '@vue/runtime-core' 68 import { getCurrentInstance } from '@vue/runtime-core'
67 69
68 const emit = defineEmits(['addPerson']) 70 const emit = defineEmits(['addPerson'])
69 const {proxy} = getCurrentInstance() 71 const { proxy } = getCurrentInstance()
70 72
71 const show = ref(false) 73 const show = ref(false)
72 const showAdd = ref(false) 74 const showAdd = ref(false)
...@@ -96,17 +98,6 @@ const addPeopl = () => { ...@@ -96,17 +98,6 @@ const addPeopl = () => {
96 const addPerson = () => { 98 const addPerson = () => {
97 const person = _.find(personList.value, (it) => it.id == personId.value) 99 const person = _.find(personList.value, (it) => it.id == personId.value)
98 100
99 checkSceneCustomer({
100 customerId: person.id,
101 gateType: currParams.gateType
102 }).then((res) => {
103 if (res.data == 201) {
104 proxy.$modal.msgError(language.value == 0 ? '护照只能购买成人票' : 'Passport can only buy adult tickets')
105 } else if (res.data == 202) {
106 proxy.$modal.msgError(language.value == 0 ? '此身份证不能购买老人票' : 'This ID cannot buy senior tickets')
107 } else if (res.data == 203) {
108 proxy.$modal.msgError(language.value == 0 ? '此身份证不能购买儿童票' : 'This ID cannot buy child tickets')
109 } else {
110 show.value = false 101 show.value = false
111 emit('addPerson', Object.assign(currParams, { 102 emit('addPerson', Object.assign(currParams, {
112 customerId: person.id, 103 customerId: person.id,
...@@ -114,8 +105,26 @@ const addPerson = () => { ...@@ -114,8 +105,26 @@ const addPerson = () => {
114 idcType: person.idcType, 105 idcType: person.idcType,
115 idCard: person.idCard 106 idCard: person.idCard
116 })) 107 }))
117 } 108 // checkSceneCustomer({
118 }) 109 // customerId: person.id,
110 // gateType: currParams.gateType
111 // }).then((res) => {
112 // if (res.data == 201) {
113 // proxy.$modal.msgError(language.value == 0 ? '护照只能购买成人票' : 'Passport can only buy adult tickets')
114 // } else if (res.data == 202) {
115 // proxy.$modal.msgError(language.value == 0 ? '此身份证不能购买老人票' : 'This ID cannot buy senior tickets')
116 // } else if (res.data == 203) {
117 // proxy.$modal.msgError(language.value == 0 ? '此身份证不能购买儿童票' : 'This ID cannot buy child tickets')
118 // } else {
119 // show.value = false
120 // emit('addPerson', Object.assign(currParams, {
121 // customerId: person.id,
122 // name: person.name,
123 // idcType: person.idcType,
124 // idCard: person.idCard
125 // }))
126 // }
127 // })
119 } 128 }
120 129
121 const submit = () => { 130 const submit = () => {
...@@ -151,7 +160,7 @@ defineExpose({ ...@@ -151,7 +160,7 @@ defineExpose({
151 160
152 </script> 161 </script>
153 162
154 <style scoped lang="scss"> 163 <style lang="scss" scoped>
155 .el-radio-group { 164 .el-radio-group {
156 display: block; 165 display: block;
157 } 166 }
......
src/viewsPc/booking/pay.vue
...@@ -125,8 +125,8 @@ ...@@ -125,8 +125,8 @@
125 <p> 125 <p>
126 {{ form?.extJson?.atName }} ｜ 126 {{ form?.extJson?.atName }} ｜
127 {{ form?.extJson?.atsName }} ｜ 127 {{ form?.extJson?.atsName }} ｜
128 <span v-if="form?.extJson?.sessionType == '1000'">{{ language==0?'日间场':'Day' }}</span> 128 <span v-if="form?.extJson?.sessionType == '1000'">{{ language == 0 ? '日间场' : 'Day' }}</span>
129 <span v-else>{{ language==0?'夜间场':'Night' }}</span> 129 <span v-else>{{ language == 0 ? '夜间场' : 'Night' }}</span>
130 {{ form?.extJson?.ticketName }} ｜ 130 {{ form?.extJson?.ticketName }} ｜
131 {{ form?.num }}{{ language == 0 ? '张' : 'Tickets' }} 131 {{ form?.num }}{{ language == 0 ? '张' : 'Tickets' }}
132 </p> 132 </p>
...@@ -161,12 +161,13 @@ ...@@ -161,12 +161,13 @@
161 language == 0 ? '联系方式' : 'Contact Information' 161 language == 0 ? '联系方式' : 'Contact Information'
162 }}：{{ form.phone }} 162 }}：{{ form.phone }}
163 </el-col> 163 </el-col>
164 <el-col :lg="8" :md="12" :sm="12" :xs="24"/> 164 <el-col :lg="8" :md="12" :sm="12" :xs="24" />
165 </el-row> 165 </el-row>
166 <el-row v-if="type == 'car'"> 166 <el-row v-if="type == 'car'">
167 <el-col :lg="12" :md="12" :sm="12" :xs="24"> 167 <el-col :lg="12" :md="12" :sm="12" :xs="24">
168 <div class="st-info"> 168 <div class="st-info">
169 <div>{{ language == 0 ? '用车时间' : 'Delivery Time' }}：{{ form.pickUpBo?.revTime }}</div> 169 <div>{{ language == 0 ? '用车日期' : 'Delivery Date' }}：{{ form.pickUpBo?.revTime }}</div>
170 <div>{{ language == 0 ? '用车时间' : 'Delivery Time' }}：{{ form.pickUpBo?.lvcTimes }}</div>
170 <!-- <div v-for="(car,index) in form.pickUpBo.carsList" :key="index" class="carLine">--> 171 <!-- <div v-for="(car,index) in form.pickUpBo.carsList" :key="index" class="carLine">-->
171 <!-- <div v-if="car.num > 0">--> 172 <!-- <div v-if="car.num > 0">-->
172 <!-- <label>{{ car.name }}</label>--> 173 <!-- <label>{{ car.name }}</label>-->
...@@ -178,15 +179,20 @@ ...@@ -178,15 +179,20 @@
178 <!-- language == 0 ? '辆' : 'Cars'--> 179 <!-- language == 0 ? '辆' : 'Cars'-->
179 <!-- }} * {{ language == 0 ? '¥' : '€' }}{{ car.price }}</span>--> 180 <!-- }} * {{ language == 0 ? '¥' : '€' }}{{ car.price }}</span>-->
180 <!-- </div>--> 181 <!-- </div>-->
181 182 <div>{{ language == 0 ? '乘坐人' : 'Contacts' }}：
182 <div>{{ language == 0 ? '人数' : 'People' }}： {{ form.pickUpBo.count }}</div> 183 <span v-for="v in form.pickUpBo.customers" :key="v" style="margin-right: 20px">{{ v.name }}</span>
183 <div>{{ language == 0 ? '航班/火车班次' : 'Flight/Train' }}： {{ form.pickUpBo.no }}</div>
184 <div>{{ language == 0 ? '接机/接站地点' : 'Pick-up/Drop-off Place' }}：
185 {{ form.pickUpBo.noAddress }}
186 </div> 184 </div>
187 <div>{{ language == 0 ? '送达地点' : 'Delivery Place' }}： {{ form.pickUpBo.deliveryAddress }}</div> 185
186 <div>{{ language == 0 ? '人数' : 'People' }}：{{ form.pickUpBo.count }}</div>
187
188 <!-- <div>{{ language == 0 ? '接机/接站地点' : 'Pick-up/Drop-off Place' }}：-->
189 <!-- {{ form.pickUpBo.noAddress }}-->
190 <!-- </div>-->
191 <!-- <div>{{ language == 0 ? '送达地点' : 'Delivery Place' }}： {{ form.pickUpBo.deliveryAddress }}</div>-->
192
188 <div>{{ language == 0 ? '联系人' : 'Contact Person' }}：{{ form.pickUpBo.contacts }}</div> 193 <div>{{ language == 0 ? '联系人' : 'Contact Person' }}：{{ form.pickUpBo.contacts }}</div>
189 <div>{{ language == 0 ? '联系电话' : 'Contact Phone' }}：{{ form.pickUpBo.phone }}</div> 194 <div>{{ language == 0 ? '联系电话' : 'Contact Phone' }}：{{ form.pickUpBo.phone }}</div>
195 <div>{{ language == 0 ? '航班/火车班次' : 'Flight/Train' }}： {{ form.pickUpBo.no }}</div>
190 <div>{{ language == 0 ? '备注' : 'Remarks' }}：{{ form.pickUpBo.remarks || '-' }}</div> 196 <div>{{ language == 0 ? '备注' : 'Remarks' }}：{{ form.pickUpBo.remarks || '-' }}</div>
191 </div> 197 </div>
192 </el-col> 198 </el-col>
...@@ -266,7 +272,7 @@ ...@@ -266,7 +272,7 @@
266 </el-row> 272 </el-row>
267 <el-row v-if="type == 'ticket'" style="width: 100%"> 273 <el-row v-if="type == 'ticket'" style="width: 100%">
268 <el-col :lg="12"> 274 <el-col :lg="12">
269 {{ language == 0 ? '联系人' : 'Contact' }}：{{form.contacts}} 275 {{ language == 0 ? '联系人' : 'Contact' }}：{{ form.contacts }}
270 </el-col> 276 </el-col>
271 <el-col :lg="12"> 277 <el-col :lg="12">
272 {{ language == 0 ? '联系方式' : 'Contact' }}：{{ form.phone }} 278 {{ language == 0 ? '联系方式' : 'Contact' }}：{{ form.phone }}
...@@ -278,8 +284,8 @@ ...@@ -278,8 +284,8 @@
278 <span class="text-gray">{{ v.idCard }}</span> 284 <span class="text-gray">{{ v.idCard }}</span>
279 </el-col> 285 </el-col>
280 <el-col :lg="12" :md="12" :sm="12" :xs="24" class="text-right"> 286 <el-col :lg="12" :md="12" :sm="12" :xs="24" class="text-right">
281 <span class="text-primary" v-if="language == 0 ">￥ {{ form.price }}</span> 287 <span v-if="language == 0 " class="text-primary">￥ {{ form.price }}</span>
282 <span v-else>€ {{ form.priceEn || 0}}</span> 288 <span v-else>€ {{ form.priceEn || 0 }}</span>
283 </el-col> 289 </el-col>
284 </el-row> 290 </el-row>
285 <el-row style="width: 100%"> 291 <el-row style="width: 100%">
...@@ -290,8 +296,7 @@ ...@@ -290,8 +296,7 @@
290 }}{{ language == 0 ? '张' : 'Tickets' }} 296 }}{{ language == 0 ? '张' : 'Tickets' }}
291 </div> 297 </div>
292 </el-col> 298 </el-col>
293 <el-col :lg="8" :md="12" :sm="12" :xs="24"> 299 <el-col :lg="8" :md="12" :sm="12" :xs="24" />
294 </el-col>
295 <el-col :lg="8" :md="12" :sm="12" :xs="24" class="text-right text-warning"> 300 <el-col :lg="8" :md="12" :sm="12" :xs="24" class="text-right text-warning">
296 {{ form.paymentType == '1' ? '共计' : 'total' }}:{{ 301 {{ form.paymentType == '1' ? '共计' : 'total' }}:{{
297 form.paymentType == '1' ? '￥' : '€' 302 form.paymentType == '1' ? '￥' : '€'
...@@ -363,13 +368,13 @@ ...@@ -363,13 +368,13 @@
363 </div> 368 </div>
364 </el-col> 369 </el-col>
365 <el-col :lg="24"> 370 <el-col :lg="24">
366 <div class="text-center"/> 371 <div class="text-center" />
367 </el-col> 372 </el-col>
368 </el-row> 373 </el-row>
369 </div> 374 </div>
370 </div> 375 </div>
371 <div v-else class="pd20 skeletonBox"> 376 <div v-else class="pd20 skeletonBox">
372 <el-skeleton :rows="8"/> 377 <el-skeleton :rows="8" />
373 <el-button 378 <el-button
374 :style="language == 0 ?'width:200px':'width:400px'" class="btn-lineG" round size="large" 379 :style="language == 0 ?'width:200px':'width:400px'" class="btn-lineG" round size="large"
375 type="primary" @click="showLogin" 380 type="primary" @click="showLogin"
...@@ -483,7 +488,7 @@ ...@@ -483,7 +488,7 @@
483 <div v-if="form.payDate&&form.viewStatus=='1'"> 488 <div v-if="form.payDate&&form.viewStatus=='1'">
484 <div class="text-center"> 489 <div class="text-center">
485 <el-icon color="#32B16C" size="80"> 490 <el-icon color="#32B16C" size="80">
486 <SuccessFilled/> 491 <SuccessFilled />
487 </el-icon> 492 </el-icon>
488 <p class="text-success">{{ language == 0 ? '支付成功' : 'successful!' }}</p> 493 <p class="text-success">{{ language == 0 ? '支付成功' : 'successful!' }}</p>
489 <h3 class="wePrice">{{ language == 0 ? '¥' : '€' }}{{ totalFee || 0 }}</h3> 494 <h3 class="wePrice">{{ language == 0 ? '¥' : '€' }}{{ totalFee || 0 }}</h3>
...@@ -505,7 +510,7 @@ ...@@ -505,7 +510,7 @@
505 </template> 510 </template>
506 </el-result> 511 </el-result>
507 </div> 512 </div>
508 <Dialog ref="DialogRef"/> 513 <Dialog ref="DialogRef" />
509 514
510 <el-dialog 515 <el-dialog
511 v-model="showSJDialog" :close-on-click-modal="false" :close-on-press-escape="false" 516 v-model="showSJDialog" :close-on-click-modal="false" :close-on-press-escape="false"
...@@ -514,7 +519,7 @@ ...@@ -514,7 +519,7 @@
514 <div class="flex"> 519 <div class="flex">
515 <el-form-item :label="language==0?'开票人':'Name'"> 520 <el-form-item :label="language==0?'开票人':'Name'">
516 <div class="flex"> 521 <div class="flex">
517 <el-input v-model="lpName" :placeholder="language==0?'请输入开票人':'Please enter your name'"/> 522 <el-input v-model="lpName" :placeholder="language==0?'请输入开票人':'Please enter your name'" />
518 <el-button type="primary" @click="submitSJ">{{ language == 0 ? '提交并下载' : 'Submit' }}</el-button> 523 <el-button type="primary" @click="submitSJ">{{ language == 0 ? '提交并下载' : 'Submit' }}</el-button>
519 </div> 524 </div>
520 </el-form-item> 525 </el-form-item>
...@@ -530,22 +535,22 @@ ...@@ -530,22 +535,22 @@
530 </template> 535 </template>
531 536
532 <script setup> 537 <script setup>
533 import {getCurrentInstance, ref} from 'vue' 538 import { getCurrentInstance, ref } from 'vue'
534 import {onMounted} from '@vue/runtime-core' 539 import { onMounted } from '@vue/runtime-core'
535 import {useRoute, useRouter} from 'vue-router' 540 import { useRoute, useRouter } from 'vue-router'
536 import * as booking from '@/apiPc/booking' 541 import * as booking from '@/apiPc/booking'
537 import Dialog from '@/viewsPc/booking/component/dailog.vue' 542 import Dialog from '@/viewsPc/booking/component/dailog.vue'
538 543
539 544
540 const {proxy} = getCurrentInstance() 545 const { proxy } = getCurrentInstance()
541 const route = useRoute() 546 const route = useRoute()
542 const router = useRouter() 547 const router = useRouter()
543 const payType = ref('2') 548 const payType = ref('2')
544 const orderId = ref(route.query.orderId) 549 const orderId = ref(route.query.orderId)
545 const matchId = ref() 550 const matchId = ref()
546 import useUserStore from '@/store/modules/user' 551 import useUserStore from '@/store/modules/user'
547 import {useStorage} from '@vueuse/core/index' 552 import { useStorage } from '@vueuse/core/index'
548 import {ElMessage, ElMessageBox} from 'element-plus' 553 import { ElMessage, ElMessageBox } from 'element-plus'
549 import { 554 import {
550 cancelOrder, 555 cancelOrder,
551 cancelOrder2, 556 cancelOrder2,
...@@ -618,7 +623,7 @@ function getData() { ...@@ -618,7 +623,7 @@ function getData() {
618 form.value = { 623 form.value = {
619 pickUpBo: {} 624 pickUpBo: {}
620 } 625 }
621 return booking.getCarBilldetailbyId({orderId: orderId.value}).then(res => { 626 return booking.getCarBilldetailbyId({ orderId: orderId.value }).then(res => {
622 form.value = res.data 627 form.value = res.data
623 if (language.value == 0) { 628 if (language.value == 0) {
624 totalFee.value = res.data.total 629 totalFee.value = res.data.total
...@@ -631,7 +636,7 @@ function getData() { ...@@ -631,7 +636,7 @@ function getData() {
631 }) 636 })
632 } 637 }
633 if (type.value == 'food') { 638 if (type.value == 'food') {
634 return booking.getFoodBilldetailbyId({orderId: orderId.value}).then(res => { 639 return booking.getFoodBilldetailbyId({ orderId: orderId.value }).then(res => {
635 if (language.value == 0) { 640 if (language.value == 0) {
636 totalFee.value = res.data.total 641 totalFee.value = res.data.total
637 } else { 642 } else {
...@@ -644,7 +649,7 @@ function getData() { ...@@ -644,7 +649,7 @@ function getData() {
644 }) 649 })
645 } 650 }
646 if (type.value == 'hotel') { 651 if (type.value == 'hotel') {
647 return booking.getRoomBilldetailbyId({orderId: orderId.value}).then(res => { 652 return booking.getRoomBilldetailbyId({ orderId: orderId.value }).then(res => {
648 if (language.value == 0) { 653 if (language.value == 0) {
649 totalFee.value = res.data.total 654 totalFee.value = res.data.total
650 } else { 655 } else {
...@@ -677,7 +682,7 @@ function getData() { ...@@ -677,7 +682,7 @@ function getData() {
677 682
678 // 旅游订单详情 683 // 旅游订单详情
679 const getTravelOrderInfo = () => { 684 const getTravelOrderInfo = () => {
680 return booking.getScenicOrderInfo({orderId: orderId.value}).then(res => { 685 return booking.getScenicOrderInfo({ orderId: orderId.value }).then(res => {
681 form.value = res.data 686 form.value = res.data
682 totalFee.value = language.value == 0 ? form.value.total : form.value.totalEn 687 totalFee.value = language.value == 0 ? form.value.total : form.value.totalEn
683 matchId.value = form.value.activeId 688 matchId.value = form.value.activeId
...@@ -692,7 +697,7 @@ const getTravelOrderInfo = () => { ...@@ -692,7 +697,7 @@ const getTravelOrderInfo = () => {
692 697
693 // 票务订单详情 698 // 票务订单详情
694 async function getTicketOrderInfoFN() { 699 async function getTicketOrderInfoFN() {
695 const res = await getTicketOrderInfo({orderId: orderId.value}) 700 const res = await getTicketOrderInfo({ orderId: orderId.value })
696 form.value = res.data 701 form.value = res.data
697 form.value.extJson = JSON.parse(form.value.extJson) 702 form.value.extJson = JSON.parse(form.value.extJson)
698 try { 703 try {
...@@ -708,7 +713,7 @@ async function getTicketOrderInfoFN() { ...@@ -708,7 +713,7 @@ async function getTicketOrderInfoFN() {
708 } 713 }
709 714
710 async function getDetail(activeId) { 715 async function getDetail(activeId) {
711 const res = await getTicketInfoByActivityId({activityId: activeId}) 716 const res = await getTicketInfoByActivityId({ activityId: activeId })
712 matchForm.value = res.data 717 matchForm.value = res.data
713 console.log(matchForm.value) 718 console.log(matchForm.value)
714 } 719 }
...@@ -720,14 +725,14 @@ function goHome() { ...@@ -720,14 +725,14 @@ function goHome() {
720 725
721 function goPay() { 726 function goPay() {
722 if (payType.value == '2') { 727 if (payType.value == '2') {
723 booking.createWePay({orderId: orderId.value}).then(res => { 728 booking.createWePay({ orderId: orderId.value }).then(res => {
724 wePayCodeUrl.value = res.data 729 wePayCodeUrl.value = res.data
725 hideconfirmbtn.value = true 730 hideconfirmbtn.value = true
726 startforGetData() 731 startforGetData()
727 }) 732 })
728 } 733 }
729 if (payType.value == '3') { 734 if (payType.value == '3') {
730 booking.createPalPay({orderId: orderId.value}).then(res => { 735 booking.createPalPay({ orderId: orderId.value }).then(res => {
731 if (res.data) { 736 if (res.data) {
732 location.href = res.data 737 location.href = res.data
733 } 738 }
...@@ -804,7 +809,7 @@ function showLogin() { ...@@ -804,7 +809,7 @@ function showLogin() {
804 809
805 810
806 function MakeUpOrder() { 811 function MakeUpOrder() {
807 return booking.getMealOrderInfo({orderId: orderId.value}).then(res => { 812 return booking.getMealOrderInfo({ orderId: orderId.value }).then(res => {
808 form.value = res.data 813 form.value = res.data
809 totalFee.value = language.value == 0 ? form.value.total : form.value.totalEn 814 totalFee.value = language.value == 0 ? form.value.total : form.value.totalEn
810 matchId.value = form.value.activeId 815 matchId.value = form.value.activeId
...@@ -817,7 +822,7 @@ function MakeUpOrder() { ...@@ -817,7 +822,7 @@ function MakeUpOrder() {
817 } 822 }
818 823
819 function MakeUpIno() { 824 function MakeUpIno() {
820 booking.getMealOrderInfoByLogex({asmId: form.value.asmId}).then(res => { 825 booking.getMealOrderInfoByLogex({ asmId: form.value.asmId }).then(res => {
821 formInfo.value = res.data 826 formInfo.value = res.data
822 console.log(res) 827 console.log(res)
823 }) 828 })
...@@ -828,7 +833,7 @@ function MakeUpIno() { ...@@ -828,7 +833,7 @@ function MakeUpIno() {
828 } 833 }
829 834
830 function ScenicInfo() { 835 function ScenicInfo() {
831 booking.getLogexScenicVoById({id: form.value.asId}).then(res => { 836 booking.getLogexScenicVoById({ id: form.value.asId }).then(res => {
832 formInfo.value = res.data 837 formInfo.value = res.data
833 console.log(res) 838 console.log(res)
834 }).catch((e) => { 839 }).catch((e) => {
...@@ -839,7 +844,7 @@ function ScenicInfo() { ...@@ -839,7 +844,7 @@ function ScenicInfo() {
839 844
840 845
841 function photographyOrder() { 846 function photographyOrder() {
842 return booking.getPhotoOrderInfo({orderId: orderId.value}).then(res => { 847 return booking.getPhotoOrderInfo({ orderId: orderId.value }).then(res => {
843 form.value = res.data 848 form.value = res.data
844 totalFee.value = language.value == 0 ? form.value.total : form.value.totalEn 849 totalFee.value = language.value == 0 ? form.value.total : form.value.totalEn
845 photographyInfo() 850 photographyInfo()
...@@ -850,7 +855,7 @@ function photographyOrder() { ...@@ -850,7 +855,7 @@ function photographyOrder() {
850 } 855 }
851 856
852 function photographyInfo() { 857 function photographyInfo() {
853 booking.getPhotoOrderInfoByLogex({aspId: form.value.aspId}).then(res => { 858 booking.getPhotoOrderInfoByLogex({ aspId: form.value.aspId }).then(res => {
854 formInfo.value = res.data 859 formInfo.value = res.data
855 }) 860 })
856 // .catch((e) => { 861 // .catch((e) => {
......
src/viewsPc/booking/ticket/confirmOrder.vue
1 <template> 1 <template>
2 <el-card class="container"> 2 <el-card class="container">
3 <div v-loading="loading"> 3 <div v-loading="loading">
4 <div class="title"> 4 <div class="title father">
5 {{ languageFormat(language, "订单确认", "Order confirmation") }} 5 {{ languageFormat(language, "订单确认", "Order confirmation") }}
6 <span class="son" @click="handelUp">{{ language == 0 ? '上一步' : 'Go back' }}</span>
6 </div> 7 </div>
7 <div class="content pd20"> 8 <div class="content pd20">
8 <el-row gutter="20"> 9 <el-row gutter="20">
...@@ -21,12 +22,15 @@ ...@@ -21,12 +22,15 @@
21 ｜ {{ TickForm2.ticketName }} 22 ｜ {{ TickForm2.ticketName }}
22 </div> 23 </div>
23 24
24 <div v-if="TickForm2.ticketType=='0'" class="address">{{ language==0?'剩余数量':'Remaining Quantity' }}： {{ leftCount }}</div> 25 <div v-if="TickForm2.ticketType=='0'" class="address">{{
26 language == 0 ? '剩余数量' : 'Remaining Quantity'
27 }}： {{ leftCount }}
28 </div>
25 </div> 29 </div>
26 30
27 <div class="ticket_info mb20"> 31 <div class="ticket_info mb20">
28 <div class="tit_box"> 32 <div class="tit_box">
29 <div class="line"/> 33 <div class="line" />
30 <div class="txt"> 34 <div class="txt">
31 {{ languageFormat(language, "订票信息", "Ticket Info") }} 35 {{ languageFormat(language, "订票信息", "Ticket Info") }}
32 </div> 36 </div>
...@@ -37,30 +41,36 @@ ...@@ -37,30 +41,36 @@
37 <div v-if="TickForm2.ticketType == '1'"> 41 <div v-if="TickForm2.ticketType == '1'">
38 <el-form-item :label="language == 0 ? '桌号' : 'Table'"> 42 <el-form-item :label="language == 0 ? '桌号' : 'Table'">
39 43
40 <el-popover placement="right" :width="400" trigger="hover"> 44 <!-- <el-popover :width="400" placement="right" trigger="hover">-->
41 <template #reference> 45 <!-- <template #reference>-->
42 <div class="text-primary underline pointer" @click="showImg"> 46 <!-- <div class="text-primary underline pointer" @click="showImg">-->
43 {{ language == 0 ? '查看区域布局' : ' View Area Layout' }} 47 <!-- {{ language == 0 ? '查看区域布局' : ' View Area Layout' }}-->
44 </div> 48 <!-- </div>-->
45 </template> 49 <!-- </template>-->
46 <el-image :src="fillImgUrl(tickImg)" style="width: 100%;" 50 <!-- <el-image-->
47 :preview-src-list="[fillImgUrl(tickImg)]"/> 51 <!-- :preview-src-list="[fillImgUrl(tickImg)]" :src="fillImgUrl(tickImg)"-->
48 </el-popover> 52 <!-- style="width: 100%;"-->
49 53 <!-- />-->
54 <!-- </el-popover>-->
55 <!-- -->
50 56
51 <el-radio-group v-model="currDesk"> 57 <el-radio-group v-model="currDesk">
52 <el-radio-button v-for="(it, index) in deskList" :key="index" :label="it.deskNo" :value="it" 58 <el-radio-button
53 :disabled="it.status!=0"/> 59 v-for="(it, index) in deskList" :key="index" :disabled="it.status!=0" :label="it.deskNo"
60 :value="it"
61 />
54 </el-radio-group> 62 </el-radio-group>
55 </el-form-item> 63 </el-form-item>
56 <el-form-item :label="language == 0 ? '座位号' : 'Seat'"> 64 <el-form-item :label="language == 0 ? '座位号' : 'Seat'">
57 <el-checkbox-group v-model="currSeat"> 65 <el-checkbox-group v-model="currSeat">
58 <el-checkbox-button v-for="(it, index) in currDesk?.seatList" :key="index" :label="it.seatNo" 66 <el-checkbox-button
59 :value="it" :disabled="it.status!=0"/> 67 v-for="(it, index) in currDesk?.seatList" :key="index" :disabled="it.status!=0"
68 :label="it.seatNo" :value="it"
69 />
60 </el-checkbox-group> 70 </el-checkbox-group>
61 </el-form-item> 71 </el-form-item>
62 <el-form-item :label="language == 0 ?'已选座位号':'Selected Seat'"> 72 <el-form-item :label="language == 0 ?'已选座位号':'Selected Seat'">
63 <el-tag class="mr10" v-for="(s,index) in currSeat" :key="s.id" closable @close="delSeat(s,index)"> 73 <el-tag v-for="(s,index) in currSeat" :key="s.id" class="mr10" closable @close="delSeat(s,index)">
64 {{ s.deskNo }} - {{ s.seatNo }} 74 {{ s.deskNo }} - {{ s.seatNo }}
65 </el-tag> 75 </el-tag>
66 </el-form-item> 76 </el-form-item>
...@@ -96,7 +106,7 @@ ...@@ -96,7 +106,7 @@
96 </div> 106 </div>
97 <div class="idcard">{{ it.idCard }}</div> 107 <div class="idcard">{{ it.idCard }}</div>
98 </div> 108 </div>
99 <el-checkbox :value="it.id" :disabled="!!it.disabled"/> 109 <el-checkbox :disabled="!!it.disabled" :value="it.id" />
100 </div> 110 </div>
101 </el-checkbox-group> 111 </el-checkbox-group>
102 </div> 112 </div>
...@@ -112,7 +122,7 @@ ...@@ -112,7 +122,7 @@
112 122
113 <el-col :lg="8" class="right"> 123 <el-col :lg="8" class="right">
114 <div class="tit_box"> 124 <div class="tit_box">
115 <div class="line"/> 125 <div class="line" />
116 <div class="txt"> 126 <div class="txt">
117 {{ languageFormat(language, "订单明细", "Order summary") }} 127 {{ languageFormat(language, "订单明细", "Order summary") }}
118 </div> 128 </div>
...@@ -123,7 +133,7 @@ ...@@ -123,7 +133,7 @@
123 <div class="time"> 133 <div class="time">
124 {{ language == 0 ? '票价' : 'Cost Ticket' }} 134 {{ language == 0 ? '票价' : 'Cost Ticket' }}
125 </div> 135 </div>
126 <p/> 136 <p />
127 <div class="ticket"> 137 <div class="ticket">
128 {{ language == 0 ? TickForm2.price : TickForm2.priceEn }} 138 {{ language == 0 ? TickForm2.price : TickForm2.priceEn }}
129 <span> {{ language == 0 ? '元' : 'Euro' }}</span> 139 <span> {{ language == 0 ? '元' : 'Euro' }}</span>
...@@ -143,6 +153,15 @@ ...@@ -143,6 +153,15 @@
143 </div> 153 </div>
144 </div> 154 </div>
145 </div> 155 </div>
156 <!-- 场馆布局图-->
157
158 <div style="margin-top: 95px">
159 <el-image
160 :preview-src-list="[fillImgUrl(tickImg)]"
161 :src="fillImgUrl(tickImg)"
162 style="width: 100%;"
163 />
164 </div>
146 </el-col> 165 </el-col>
147 </el-row> 166 </el-row>
148 </div> 167 </div>
...@@ -166,7 +185,7 @@ ...@@ -166,7 +185,7 @@
166 </template> 185 </template>
167 186
168 <script setup> 187 <script setup>
169 import {ref, computed, onMounted} from 'vue' 188 import { ref, computed, onMounted } from 'vue'
170 import { 189 import {
171 customerListApi, 190 customerListApi,
172 submitOrderTicket, 191 submitOrderTicket,
...@@ -176,12 +195,12 @@ import { ...@@ -176,12 +195,12 @@ import {
176 checkPurchasedCustomers, 195 checkPurchasedCustomers,
177 getDeskInfo 196 getDeskInfo
178 } from '@/apiPc/booking' 197 } from '@/apiPc/booking'
179 import {ElMessage, ElMessageBox} from 'element-plus' 198 import { ElMessage, ElMessageBox } from 'element-plus'
180 import {languageFormat} from '@/viewsPc/seat/utils/language.js' 199 import { languageFormat } from '@/viewsPc/seat/utils/language.js'
181 import useUserStore from '/@/store/modules/user' 200 import useUserStore from '/@/store/modules/user'
182 import {useStorage} from '@vueuse/core/index' 201 import { useStorage } from '@vueuse/core/index'
183 import _ from 'lodash' 202 import _ from 'lodash'
184 import {useRoute, useRouter} from 'vue-router' 203 import { useRoute, useRouter } from 'vue-router'
185 204
186 const useStore = useUserStore() 205 const useStore = useUserStore()
187 206
...@@ -243,12 +262,10 @@ onMounted(() => { ...@@ -243,12 +262,10 @@ onMounted(() => {
243 getDeskInfo({ 262 getDeskInfo({
244 atstId: route.params.latstId 263 atstId: route.params.latstId
245 }).then(res => { 264 }).then(res => {
246 deskList.value = res.data 265 deskList.value = res.data?.sort((a, b) => a.deskNo - b.deskNo)
247 currDesk.value = res.data[0] 266 currDesk.value = res.data[0]
248 }) 267 })
249 } 268 } else { // 普通票
250 // 普通票
251 else {
252 getListByAtstId({ 269 getListByAtstId({
253 atstId: route.params.latstId 270 atstId: route.params.latstId
254 }).then(res => { 271 }).then(res => {
...@@ -321,7 +338,7 @@ async function paymentHandle() { ...@@ -321,7 +338,7 @@ async function paymentHandle() {
321 confirmButtonText: language.value == 0 ? '确定' : 'Confirm', 338 confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
322 cancelButtonText: language.value == 0 ? '取消' : 'Cancel', 339 cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
323 type: 'warning' 340 type: 'warning'
324 }).then(async () => { 341 }).then(async() => {
325 try { 342 try {
326 const orderCustomerList = [] 343 const orderCustomerList = []
327 _.each(orderForm.value.customerIds, (id, index) => { 344 _.each(orderForm.value.customerIds, (id, index) => {
...@@ -390,7 +407,7 @@ async function paymentHandle() { ...@@ -390,7 +407,7 @@ async function paymentHandle() {
390 } 407 }
391 408
392 async function getDetail() { 409 async function getDetail() {
393 const res = await getTicketInfoByActivityId({activityId: orderForm.value.activeId}) 410 const res = await getTicketInfoByActivityId({ activityId: orderForm.value.activeId })
394 TickForm.value = res.data 411 TickForm.value = res.data
395 } 412 }
396 413
...@@ -401,8 +418,8 @@ function addPeopl() { ...@@ -401,8 +418,8 @@ function addPeopl() {
401 }) 418 })
402 } 419 }
403 420
404 const showImg = () => { 421 function handelUp() {
405 422 router.go(-1)
406 } 423 }
407 </script> 424 </script>
408 425
...@@ -677,6 +694,16 @@ div { ...@@ -677,6 +694,16 @@ div {
677 } 694 }
678 } 695 }
679 696
697 .father {
698 position: relative;
699 }
700
701 .son {
702 position: absolute;
703 left: 10px;
704 cursor: pointer
705 }
706
680 @media screen and (max-width: 768px) { 707 @media screen and (max-width: 768px) {
681 .container { 708 .container {
682 width: 100%; 709 width: 100%;
......
src/viewsPc/booking/ticket/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div> 2 <div>
3 <!-- top --> 3 <!-- top -->
4 <div class="container top"> 4 <div class="container top">
5 <img :src="fillImgUrl(matchForm.ticketImg)" class="cover_img"> 5 <img :src="fillImgUrl(matchForm.ticketImg)" alt="" class="cover_img">
6 <div class="info"> 6 <div class="info">
7 <div class="title">{{ matchForm.name }}</div> 7 <div class="title">{{ matchForm.name }}</div>
8 <div class="time"> 8 <div class="time">
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
93 <span 93 <span
94 v-if="currVenue?.images" 94 v-if="currVenue?.images"
95 style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px" 95 style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px"
96 @click="showUrl=currVenue.images; show=true" 96 @click="handleImage"
97 > <span style="color: red;font-size: 18px">*</span> 97 > <span style="color: red;font-size: 18px">*</span>
98 {{ 98 {{
99 language == 0 ? '点击查看场馆布局' : 'View Venue Layout' 99 language == 0 ? '点击查看场馆布局' : 'View Venue Layout'
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
140 <span v-else>{{ 140 <span v-else>{{
141 language == 0 ? '夜间场' : 'Night' 141 language == 0 ? '夜间场' : 'Night'
142 }}</span> 142 }}</span>
143 <!-- {{ key=='1000'?'日间场':'夜间场' }}--> 143 <!-- {{ key=='1000'?'日间场':'夜间场' }}-->
144 </div> 144 </div>
145 </div> 145 </div>
146 </div> 146 </div>
...@@ -227,8 +227,11 @@ ...@@ -227,8 +227,11 @@
227 227
228 <div class="container bottom"> 228 <div class="container bottom">
229 <div style="display: flex"> 229 <div style="display: flex">
230 <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language==0?'购票说明':'Notice' }}</div> 230 <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language == 0 ? '购票说明' : 'Notice' }}</div>
231 <div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{ language==0?'购票须知':'Instructions' }}</div> 231 <div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{
232 language == 0 ? '购票须知' : 'Instructions'
233 }}
234 </div>
232 </div> 235 </div>
233 <div v-show="active==1" class="rich_content" v-html="matchForm.ticketDes" /> 236 <div v-show="active==1" class="rich_content" v-html="matchForm.ticketDes" />
234 <div v-show="active==2" class="rich_content" v-html="matchForm.ticketNotice" /> 237 <div v-show="active==2" class="rich_content" v-html="matchForm.ticketNotice" />
...@@ -250,7 +253,8 @@ import { ...@@ -250,7 +253,8 @@ import {
250 getTicketListApi, 253 getTicketListApi,
251 checkNonPayment, 254 checkNonPayment,
252 getStadiumList, 255 getStadiumList,
253 getActivityTypeVoListByLatsId 256 getActivityTypeVoListByLatsId,
257 getBaseInfoByActiveId
254 } from '@/apiPc/booking' 258 } from '@/apiPc/booking'
255 259
256 import { dayjs } from 'element-plus' 260 import { dayjs } from 'element-plus'
...@@ -290,6 +294,7 @@ const venueList = ref([]) ...@@ -290,6 +294,7 @@ const venueList = ref([])
290 const tickList = ref([]) 294 const tickList = ref([])
291 const currVenue = ref(null) 295 const currVenue = ref(null)
292 const currTick = ref(null) 296 const currTick = ref(null)
297 const matchData = ref({})
293 298
294 watch(show, (val) => { 299 watch(show, (val) => {
295 if (!val) { 300 if (!val) {
...@@ -316,7 +321,7 @@ getTicketList() ...@@ -316,7 +321,7 @@ getTicketList()
316 321
317 async function getTicketList() { 322 async function getTicketList() {
318 const res = await getTicketListApi({ 323 const res = await getTicketListApi({
319 activityId: activeId.value, isView: 1 324 activityId: activeId.value, status: 1
320 }) 325 })
321 tickClass.value = res.rows 326 tickClass.value = res.rows
322 if (tickClass.value.length > 0) { 327 if (tickClass.value.length > 0) {
...@@ -418,6 +423,20 @@ function toSelectClosed() { ...@@ -418,6 +423,20 @@ function toSelectClosed() {
418 type: 'warning' 423 type: 'warning'
419 }) 424 })
420 } 425 }
426
427 async function getmatchData() {
428 const res = await getBaseInfoByActiveId(route.params.activeId)
429 matchData.value = res.data
430 console.log(res)
431 }
432
433 function handleImage() {
434 // ticketImg
435 showUrl.value = matchData.value.ticketLayout
436 show.value = true
437 }
438
439 getmatchData()
421 </script> 440 </script>
422 441
423 <style lang="scss" scoped> 442 <style lang="scss" scoped>
...@@ -455,8 +474,8 @@ function toSelectClosed() { ...@@ -455,8 +474,8 @@ function toSelectClosed() {
455 margin-top: 26px; 474 margin-top: 26px;
456 475
457 .cover_img { 476 .cover_img {
458 width: 390px; 477 width: 500px;
459 height: 517px; 478 height: 667px;
460 object-fit: fill; 479 object-fit: fill;
461 margin-right: 36px; 480 margin-right: 36px;
462 } 481 }
......
src/viewsPc/booking/travelDetail.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="box"> 3 <!-- top -->
4 <el-card v-loading="loading" class="mt30"> 4 <div class="container top">
5 <el-row v-if="form" class="hotel" align="middle" :gutter="20"> 5 <img :src="fillImgUrl(travel.cover)" alt="" class="cover_img" st>
6 <!-- <el-col :span="6">-->
7 <!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
8 <!-- </el-col>-->
9 <el-col :span="language == 0?16:24">
10 <h3 class="esp flex">{{ form?.name }}
11
12 <div class="starBox ml20">
13 <img v-for="i in Number(form?.rank||0)" src="@/assets/booking/star.png">
14 </div>
15 </h3>
16
17 <!-- <div class="tagbox">-->
18 <!-- <span v-for="(t,index) in form?.label?.split('，')" v-show="index<4">{{ t }}</span>-->
19 <!-- <a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>-->
20 <!-- </div>-->
21 <div class="info"> 6 <div class="info">
22 <el-icon> 7 <div class="title">{{ travel.name }}</div>
23 <Clock /> 8 <div class="select_item_box">
24 </el-icon> 9 <div class="label">
25 <span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ form?.startTime }} ～ {{ form?.workTime }}</span> 10 {{ triggerLanguage(language, "时间", "Event Date & Time") }} :
26 </div> 11 </div>
27 <div class="info">
28 <el-icon>
29 <Phone />
30 </el-icon>
31 <span class="mr10">{{ language == 0 ? '联系方式' : 'Contact' }}：{{ form?.contact }}</span>
32 </div> 12 </div>
33 <div class="info esp"> 13 <div class="select_item_box">
34 <el-icon> 14 <div class="select_item">
35 <MapLocation /> 15 <div
36 </el-icon> 16 v-for="(v, index) in travel.dateList"
37 <span>{{ form?.address }}</span> 17 :key="index"
18 :class="[
19 v== selectForm.scenicDate ? 'tagActive' : 'tag',
20 ]"
21 @click="select(v)"
22 >
23 {{ v }}
38 </div> 24 </div>
39 <div v-if="form?.introduction" class="info pointer">
40 <div :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()" />
41 </div> 25 </div>
42 </el-col> 26 </div>
43 </el-row> 27
44 <el-empty v-else :image="`/img/order_no.png`" :image-size="228" description="" /> 28 <div>
45 </el-card> 29 <!-- 成人票 -->
46 30 <br>
47 <div class="mt30"> 31 <div v-for="v in ticketList" v-show="v.leftNum!=0" :key="v.id">
48 <el-row :gutter="20"> 32 <div class="select_item_box">
49 <el-col :span="10"> 33 <div class="label ticket">
50 <div class="imgbox hotelImg"> 34 {{ v.name }} :
51 <el-image 35 </div>
52 :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover" 36 <div class="rowBox">
53 :preview-src-list="form?.photos?.split(',')" 37 <span class="titleTick">
38 {{
39 triggerLanguage(language, v.price, v.priceEn)
40 }}
41 {{
42 triggerLanguage(language, '￥/人', '€/person')
43 }}
44 </span>
45 <el-input-number
46 v-model="v.count" :max="v.leftNum" :min="0" :precision="0" class="inputNumber"
47 @change="countTotal"
54 /> 48 />
49 <i class="residue">{{ language == 0 ? '剩余票数' : 'Remaining votes' }}{{ v.leftNum }}</i>
55 </div> 50 </div>
56 </el-col>
57 <el-col :span="14">
58 <el-row class="h100" :gutter="20">
59 <el-col v-for="(p,index) in form?.photos?.split(',').slice(1,7)" :key="index" :span="8" class="oddmb">
60 <div class="imgbox hotelImg">
61 <el-image :src="fillImgUrl(p)" fit="cover" />
62 </div> 51 </div>
63 </el-col>
64 </el-row>
65 </el-col>
66 </el-row>
67 </div> 52 </div>
68 53
69 <el-card class="mt30 mb60"> 54 <!-- 价格 -->
70 <div class="lineHead"> 55 <div class="select_item_box">
71 <ul> 56 <div class="label">
72 <li> 57 {{ triggerLanguage(language, '价格', "Price") }} :
73 {{ language == 0 ? '选择日期' : 'tickets type' }}
74 </li>
75 </ul>
76 </div> 58 </div>
77 <div>
78 <!-- 日期-->
79 <el-calendar v-model="currentDate" class="mt20" :range="calendarRange">
80 <template #header="{date}">
81 <el-row style="width: 100%">
82 <el-col :lg="7" class="forPc" />
83 <el-col :lg="10" class="forPc">
84 <el-row justify="center" align="middle">
85 <!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
86 <div class="cTitle">
87 <!-- <el-date-picker-->
88 <!-- v-model="value2"-->
89 <!-- type="daterange"-->
90 <!-- range-separator="-"-->
91 <!-- start-placeholder="Start date"-->
92 <!-- end-placeholder="End date"-->
93 <!-- format="YYYY-MM-DD"-->
94 <!-- value-format="YYYY-MM-DD"-->
95 <!-- size="small"-->
96 <!-- @change="changee"-->
97 <!-- />-->
98 <!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
99 {{ date }}
100 </div> 59 </div>
101 <!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>--> 60 <div class="select_item_box">
102 </el-row> 61 <div class="select_item">
103 </el-col> 62 <div class="tagActive" style="min-width: 80px">
104 <el-col :lg="7" :xs="24"> 63 {{ language == 0 ? '￥' : '€' }} {{ language == 0 ? selectForm.price : selectForm.priceEn }}
105 <div style="text-align: right;padding-right: 10px"> 64 </div>
106 <el-date-picker 65 </div>
107 v-model="currentDate1" 66 </div>
108 type="date" 67 <!-- 购票备注-->
109 placeholder="YYYY-MM-DD" 68 <div v-if="matchForm.ticketRemark" class="select_item_box">
110 format="YYYY-MM-DD" 69 <div class="label">
111 :disabled-date="disabledDateRZ" 70 {{
112 :clearable="false" 71 triggerLanguage(language, '购票备注', "Ticket Purchase Note")
113 @change="dateChange" 72 }} :
114 />
115 </div> 73 </div>
116 </el-col>
117 </el-row>
118 </template>
119 <template #date-cell="data">
120 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
121 {{ data.data.day.slice(8, 10) }}
122 </div> 74 </div>
123 </template> 75 <div v-if="matchForm.ticketRemark" class="select_item_box">
124 </el-calendar> 76 <div class="select_item">
77 {{ matchForm.ticketRemark }}
78 </div>
125 </div> 79 </div>
126 80
127 <div class="text-center mt30"> 81 <div
128 <el-button 82 v-if="endTime<=0" class="btn" style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
129 style="color: #fff" size="large" 83 @click="toSelectClosed"
130 class="w200px btn-lineG" :class="{'forbid':!(!hotTime[0])}" round @click="goOrder"
131 > 84 >
132 <span v-if="btnDisable">{{ language==0?'不在预定时间内':'OUT OF ORDER TIME' }}</span> 85 {{
133 <span v-else>{{ language==0?'立即预订':'BOOK NOW' }}</span> 86 triggerLanguage(language, "售票结束", "Sale closed")
134 </el-button> 87 }}
88 </div>
89 <div v-else class="btn" style="margin-left: 40px;margin-top: 10px" @click="toSelectSeat()">
90 {{
91 triggerLanguage(language, "立即购票", "Buy tickets now")
92 }}
93 </div>
94
95 </div>
96
97 </div>
98 </div>
99
100 <div class="container bottom">
101 <div style="display: flex">
102 <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language == 0 ? '购票说明' : 'Notice' }}</div>
103 <div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{
104 language == 0 ? '购票须知' : 'Instructions'
105 }}
106 </div>
107 </div>
108 <div v-show="active==1" class="rich_content" v-html="travel.descriptions" />
109 <div v-show="active==2" class="rich_content" v-html="travel.notice" />
110
111 <el-dialog v-model="show" title="" width="1000px">
112 <div>
113 <img :src="fillImgUrl(showUrl)" alt="" style="width: 100%">
135 </div> 114 </div>
136 </el-card> 115 </el-dialog>
137 </div> 116 </div>
138 </div> 117 </div>
139 </template> 118 </template>
140 119
120
141 <script setup> 121 <script setup>
142 import { useRouter } from 'vue-router' 122 import { ref, computed, onMounted } from 'vue'
143 import { ref, onMounted, computed } from 'vue' 123 import * as booking from '@/apiPc/booking'
144 import { useRoute } from 'vue-router'
145 import { dayjs } from 'element-plus'
146 import { getScenicById, checkOrderPay } from '@/apiPc/booking'
147 import { getBaseInfoByActiveId } from '@/apiPc/booking'
148 124
149 import { useStorage } from '@vueuse/core/index'
150 import { ElMessageBox } from 'element-plus' 125 import { ElMessageBox } from 'element-plus'
151 const currentDate = ref(new Date()) 126 import { fillImgUrl } from '/@/utils/ruoyi'
152 const currentDate1 = ref(new Date()) 127 import useUserStore from '/@/store/modules/user'
153 const calendarRange = ref([dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())]) 128 import { triggerLanguage } from '@/utils/ruoyi'
129 import { useStorage } from '@vueuse/core/index'
130 import { useRoute, useRouter } from 'vue-router'
131 import { getCurrentInstance } from '@vue/runtime-core'
154 132
155 const language = useStorage('language', 0) 133 const language = useStorage('language', 0)
156 const router = useRouter() 134 const useStore = useUserStore()
135 const user = computed(() => useUserStore().user)
157 const route = useRoute() 136 const route = useRoute()
158 const form = ref({}) 137 const router = useRouter()
159 const query = ref({ 138 const show = ref(false)
160 lasId: route.query.lasId 139 const showUrl = ref('')
140 const activeId = ref(route.params.activeId)
141 const active = ref(1)
142
143 const timeData = ref()
144 const endTime = ref()
145 const matchForm = ref({})
146 const selectForm = ref({
147 latsId: null,
148 scenicDate: '',
149 price: '--',
150 priceEn: '--'
161 }) 151 })
162 const hotTime = ref([]) 152
163 const showAll = ref(false) 153 const { proxy } = getCurrentInstance()
164 const loading = ref(false) 154 const travel = ref({})
165 const formTime = ref({}) 155 const ticketList = ref([])
166 156
167 onMounted(() => { 157 onMounted(() => {
168 getBaseInfoByActiveId(route.params.cptId).then(res => { 158 getLogexScenicVoById()
169 formTime.value = res.data || null
170 }).catch(err => {
171 console.log(err)
172 formTime.value = null
173 }).finally(() => {
174 console.log(formTime.value)
175 getData()
176 })
177 }) 159 })
178 160
179 function getData() { 161 async function getLogexScenicVoById() {
180 loading.value = true 162 const res = await booking.getLogexScenicVoById({ id: activeId.value })
181 getScenicById(route.params.scenicId).then(res => { 163 travel.value = res.data
182 loading.value = false 164 selectForm.value.latsId = travel.value.id
183 form.value = res.data 165 if (travel.value.dateList && travel.value.dateList.length > 0) {
184 // initMap() 166 selectForm.value.scenicDate = travel.value.dateList[0]
185 }).catch(err => { 167 await getGateListByLasId()
186 console.log(err) 168 }
169 }
170
171 async function getGateListByLasId() {
172 const res = await booking.getGateListByLasId({
173 latsId: selectForm.value.latsId,
174 scenicDate: selectForm.value.scenicDate
187 }) 175 })
176 ticketList.value = res.data
177 for (const v of ticketList.value) {
178 v.leftNum = v.num - v.orderCount
179 v.count = 0
180 }
188 } 181 }
189 function dateChange() { 182
190 currentDate.value = currentDate1.value 183 function select(v) {
191 calendarRange.value = [dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())] 184 selectForm.value.scenicDate = v
185 selectForm.value.price = '--'
186 selectForm.value.priceEn = '--'
187 getGateListByLasId()
192 } 188 }
193 189
194 function selectDate(date) { 190 function countTotal() {
195 query.value.currentDate = date 191 let price = 0
196 currentDate1.value = currentDate.value = dayjs(date).toDate() 192 let priceEn = 0
197 console.log(date) 193 for (const val of ticketList.value) {
194 if (val.count > 0) {
195 price += val.price * val.count
196 priceEn += val.priceEn * val.count
197 val.personArr = [...new Array(val.count).fill({
198 customerId: '',
199 name: '',
200 idcType: '',
201 idCard: ''
202 })]
203 }
204 }
205 selectForm.value.price = price
206 selectForm.value.priceEn = priceEn
198 } 207 }
199 208
200 const btnDisable = computed(() => { 209 async function toSelectSeat() {
201 if (formTime.value.scenicStart) { 210 if (!user.value) {
202 const curr = currentDate.value.valueOf() 211 useStore.setVisitor()
203 const today = dayjs(dayjs().format('YYYY-MM-DD')).valueOf() 212 return
204 const start = dayjs(formTime.value.scenicStart).valueOf()
205 const end = dayjs(formTime.value.scenicEnd).valueOf()
206 if (curr >= start && curr <= end && curr >= today) {
207 return false
208 }
209 } 213 }
210 return true
211 })
212 214
213 215 if (!selectForm.value.scenicDate) {
214 function goOrder() { 216 await proxy.$modal.confirm(language.value == 0 ? '请选择日期' : 'Please select a date')
215 if(btnDisable.value){
216 return 217 return
217 } 218 }
218 ElMessageBox.confirm(language.value == 0 ? `你当前选择的出行日期为${dayjs(currentDate.value).format('YYYY-MM-DD')}是否确定？` : `Your current check-in time is ${dayjs(currentDate.value).format('YYYY-MM-DD')} Are you sure?`, { type: 'warning' }).then({}).then(() => { 219 if (!selectForm.value.price == '--' || selectForm.value.price == '--') {
219 checkOrderPay(6).then(res => { 220 await proxy.$modal.confirm(language.value == 0 ? '请选择购票数量' : 'Please select the number of tickets to purchase')
220 if (res.data == -100) { 221 return
221 ElMessageBox.confirm(
222 language.value == 0 ? '你有未支付的旅游预订，是否前往个人中心查看' : 'You already have an unpaid travel order, do you want to go to the personal center to check it?',
223 language.value == 0 ? '提示' : 'Warning',
224 {
225 confirmButtonText: language.value == 1 ? 'Go My Reservation ' : '前往我的预订',
226 // cancelButtonText: language.value==1?'Continue to book':'继续预订',
227 type: 'warning'
228 } 222 }
229 ).then((res) => { 223 await checkOrderPay()
230 console.log(res) 224 }
231 router.push({ 225
226 async function checkOrderPay() {
227 const res = await booking.checkOrderPay(8)
228 if (res.data == -100) {
229 await proxy.$modal.confirm(language.value == 0 ? '你有未支付的旅游预订，是否前往个人中心查看?' : 'You already have an unpaid travel order, do you want to go to the personal center to check it?')
230 await router.push({
232 name: 'myReservation' 231 name: 'myReservation'
233 }) 232 })
234 }) 233 } else {
235 return
236 }
237 goNext() 234 goNext()
238 }) 235 }
239 })
240 } 236 }
241 237
242 function goNext() { 238 function goNext() {
243 router.push({ 239 router.push({
244 name: 'travelOrder', 240 name: 'travelOrder',
245 params: { 241 params: {
246 start: dayjs(currentDate.value).format('YYYY-MM-DD') 242 start: selectForm.value.scenicDate
247 }, 243 },
248 query: { 244 query: {
249 lasId: query.value.lasId 245 lasId: selectForm.value.latsId,
246 item: encodeURIComponent(JSON.stringify(ticketList.value))
250 } 247 }
251 }) 248 })
252 } 249 }
253 250
254 function disabledDateRZ(date) { 251 function toSelectClosed() {
255 // 判读今天大与form.value.hqStart 252 ElMessageBox.confirm(language.value == 0 ? '售票结束' : 'Sale closed', language.value == 0 ? '提示' : 'Tips', {
256 if (formTime.value.scenicStart) { 253 confirmButtonText: language.value == 0 ? '确定' : 'OK',
257 const today = dayjs().format('YYYY-MM-DD') 254 cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
258 if (formTime.value.scenicStart < today) { 255 type: 'warning'
259 return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf())) 256 })
260 } else {
261 return !((date.getTime() >= dayjs(formTime.value.scenicStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf()))
262 }
263 }
264 } 257 }
265 258
259
266 </script> 260 </script>
267 261
268 <style scoped lang="scss"> 262 <style lang="scss" scoped>
269 .room { 263 .forWei {
270 background: #FAFBFD; 264 display: none
271 margin: 20px 0 0; 265 }
272 padding: 20px;
273 border: 1px solid #E5E5E5;
274 266
275 .name { 267 .buBg {
276 font-size: 20px; 268 cursor: pointer;
277 margin: 0 0 10px; 269 font-size: 18px;
278 } 270 padding: 8px 13px;
271 border-radius: 5px;
272 margin-right: 10px;
273 }
279 274
280 .roomImg { 275 .bg {
281 aspect-ratio: 16/9; 276 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
282 border-radius: 10px; 277 color: #fff;
283 overflow: hidden; 278 }
284 279
285 img { 280 .container {
281 width: 1200px;
282 margin: 0 auto;
283 background-color: #fff;
284 box-shadow: 0 0 46px 0 rgba(1, 16, 64, 0.08);
285 border-radius: 8px;
286 box-sizing: border-box;
287 font-family: SourceHanSansCN, SourceHanSansCN;
288 padding-bottom: 20px;
289 }
290
291 .top {
292 display: flex;
293 padding: 19px;
294 margin-top: 26px;
295
296 .cover_img {
297 width: 500px;
298 height: 667px;
299 object-fit: fill;
300 margin-right: 36px;
301 }
302
303 .info {
304 padding-top: 12px;
286 width: 100%; 305 width: 100%;
287 object-fit: cover; 306
288 object-position: center; 307 .title {
289 height: 100%; 308 font-weight: bold;
309 font-size: 28px;
310 color: #000000;
311 line-height: 1.6;
312 margin-bottom: 15px;
290 } 313 }
314
315 .time {
316 font-weight: 600;
317 font-size: 16px;
318 color: #000;
319 line-height: 24px;
320 margin-bottom: 16px;
291 } 321 }
292 322
293 .price { 323 .address {
294 color: #FF8124; 324 font-weight: 600;
295 font-size: 24px; 325 font-size: 16px;
326 color: #000;
327 line-height: 24px;
328 margin-bottom: 15px;
329 }
296 330
297 span { 331 .select_item_box {
298 font-size: 36px; 332 display: flex;
299 font-family: "DIN Alternate" 333 margin-bottom: 10px;
334
335 &:last-child {
336 margin-bottom: 0;
300 } 337 }
338
339 .label {
340 font-weight: 600;
341 font-size: 16px;
342 color: #000;
343 line-height: 24px;
344 margin-right: 12px;
345 flex-shrink: 0;
301 } 346 }
302 347
303 .bg-lineg { 348 .ticket {
304 margin: auto; 349 height: 40px;
305 border-radius: 10px; 350 line-height: 40px;
306 text-align: center; 351 width: 100px;
307 padding: 7px 2px 2px; 352 }
308 font-size: 24px; 353
309 width: 66px; 354 .rowBox {
355 display: flex;
356
357 .titleTick {
358 color: #493ceb;
310 cursor: pointer; 359 cursor: pointer;
360 font-weight: 600;
361 font-size: 18px;
362 margin-right: 30px;
363 height: 40px;
364 line-height: 40px;
365 width: 180px;
366 //text-align: center;
367 }
311 368
312 div { 369 .inputNumber {
313 background: #fff; 370 height: 35px;
314 font-size: 13px; 371 margin: 2.5px;
315 border-radius: 20px;
316 padding: 0 10px;
317 color: #453DEA;
318 font-weight: 500;
319 } 372 }
373
374 .residue {
375 height: 40px;
376 line-height: 40px;
377 font-size: 14px;
378 color: orange;
379 margin-left: 10px;
320 } 380 }
321 }
322 381
323 .hotel {
324 h3 {
325 margin: 0 0 20px;
326 } 382 }
327 383
328 img.w100 { 384 .forbid {
329 object-fit: cover; 385 opacity: 0.5 !important;
330 aspect-ratio: 16/9 386 cursor: not-allowed !important;
331 } 387 }
332 388
333 .addr { 389 .select_item {
334 font-size: 16px; 390 display: flex;
335 color: #929AA0; 391 flex-wrap: wrap;
392 gap: 10px;
393 user-select: none;
394
395 .tag_t {
396 padding: 1px 15px;
336 font-weight: 400; 397 font-weight: 400;
398 font-size: 14px;
399 color: #493ceb;
400 border-radius: 6px;
401 border: 1px solid #453dea;
402 margin-left: 5px;
403 }
404
405 .tag {
406 display: flex;
407 padding: 12px 18px;
408 background: #eeeeee;
409 border-radius: 4px;
410 border: 1px solid #29343c;
411 font-size: 14px;
412 color: #4a4a4a;
413 cursor: pointer;
337 } 414 }
338 415
339 .price { 416 .tagActive {
340 margin: 0 0 25px; 417 display: flex;
341 color: #FF8124; 418 padding: 12px 18px;
342 font-size: 18px; 419 background: #fff;
420 border-radius: 4px;
421 border: 1px solid #493ceb;
422 font-size: 14px;
423 color: #493ceb;
424 cursor: pointer;
425 }
343 426
344 span { 427 .tao {
345 font-size: 24px; 428 border: 1px solid #493ceb;
346 margin: 0 8px; 429 font-size: 14px;
347 font-family: 'DINAlternate-Bold'; 430 color: #493ceb;
348 font-weight: 600; 431 margin-left: 10px;
349 } 432 }
350 433
351 i { 434 .tagDisabled {
352 font-style: normal; 435 padding: 12px 18px;
353 color: #929AA0; 436 background: #878787;
437 border-radius: 4px;
438 border: 1px solid #29343c;
439 font-size: 14px;
440 color: #4a4a4a;
441 cursor: no-drop;
442 }
354 } 443 }
355 } 444 }
356 }
357 445
358 :deep(.button) { 446 .btn {
359 display: block; 447 width: 175px;
360 height: 55px; 448 height: 40px;
361 width: auto; 449 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
362 color: #fff; 450 border-radius: 20px;
451 line-height: 40px;
452 text-align: center;
453 font-weight: 500;
454 font-size: 16px;
455 color: #ffffff;
456 cursor: pointer;
457 }
458 }
459 }
363 460
364 span { 461 .bottom {
365 display: block !important; 462 padding: 50px;
463 margin-top: 30px;
464 margin-bottom: 30px;
366 465
367 div { 466 .title {
368 margin-top: 3px; 467 padding: 20px 30px;
468 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
469 font-weight: bold;
470 font-size: 20px;
471 color: #ffffff;
472 line-height: 30px;
473 margin-bottom: 30px;
369 } 474 }
475
476 .rich_content {
477 margin-top: 30px;
478
479 :deep(img) {
480 width: 100% !important;
481 height: auto !important;
370 } 482 }
371 483
484 }
372 } 485 }
373 486
374 .starBox { 487 @media screen and (max-width: 768px) {
375 img { 488 .container {
376 display: inline-block; 489 width: 100%;
377 margin-right: 4px 490 }
491 .forWei {
492 display: block
493 }
494 .top {
495 //transform: scale(0.5);transform-origin: left top;
496 .cover_img {
497 width: 120px;
498 height: 160px;
499 margin-right: 15px;
378 } 500 }
379 }
380 501
381 .tagbox { 502 .info {
382 margin: 15px 0; 503 padding: 0;
383 504
384 a { 505 .title {
385 color: #AFB5B9; 506 font-size: 14px;
386 font-size: 12px; 507 margin: 0;
387 } 508 }
388 509
389 span { 510 .time, .address, .label, .tip {
390 border-radius: 13px;
391 font-size: 12px; 511 font-size: 12px;
392 padding: 4px 10px;
393 margin-right: 10px;
394 font-weight: 400;
395 } 512 }
396 513
397 span:nth-child(4n) { 514 .title, .time, .address, .tip, .select_item_box {
398 background: rgba(50, 177, 108, 0.2); 515 margin-bottom: 3px;
399 color: rgba(50, 177, 108, 1);
400 } 516 }
401 517
402 span:nth-child(4n+1) { 518 .select_item_box {
403 background: rgba(243, 152, 0, 0.2); 519 .label {
404 color: rgba(243, 152, 0, 1); 520 font-size: 12px;
405 } 521 }
406 522
407 span:nth-child(4n+2) { 523 .select_item .tag {
408 background: rgba(0, 160, 233, 0.2); 524 padding: 2px 10px;
409 color: rgba(0, 160, 233, 1); 525 font-size: 12px;
410 } 526 }
411 527
412 span:nth-child(4n+3) { 528 .select_item .tagActive {
413 background: rgba(247, 64, 166, 0.2); 529 padding: 2px 10px;
414 color: rgba(247, 64, 166, 1); 530 font-size: 12px;
415 } 531 }
416 }
417 532
418 .mapBox { 533 .select_item .tagDisabled {
419 position: relative; 534 padding: 2px 10px;
420 overflow: hidden; 535 font-size: 12px;
421 height: 200px; 536 }
422
423 #map {
424 position: relative;
425 left: -70px;
426 width: calc(100% + 160px);
427 } 537 }
428 }
429
430 .hotelImg {
431 border-radius: 10px;
432 overflow: hidden;
433 aspect-ratio: 16/9;
434 538
435 img { 539 .btn {
436 object-fit: cover; 540 display: inline-block;
437 object-position: center; 541 margin: 10px 0 0;
438 width: 100%; 542 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
439 height: 100%; 543 border-radius: 20px;
544 line-height: 40px;
545 text-align: center;
546 font-weight: 500;
547 font-size: 16px;
548 color: #ffffff;
549 cursor: pointer;
550 }
551 }
552 }
553 .bottom {
554 padding: 0
440 } 555 }
441 }
442 556
443 .info {
444 font-weight: 400;
445 font-size: 14px;
446 color: #929AA0;
447 557
448 .el-icon {
449 margin-right: 5px;
450 }
451 } 558 }
452 559
453 .oddmb:nth-child(2) { 560 .countDownTitle {
454 margin-bottom: 20px; 561 text-align: center;
562 color: #000;
563 position: relative;
564 width: 100%;
565 left: 0;
566 font-size: 28px;
455 } 567 }
456 568
457 .forbid { 569 .countDownTitle span {
458 cursor: not-allowed !important; 570 background: #fff;
459 filter:grayscale(0.4);opacity: 0.7; 571 padding: 0 10px;
572 position: relative;
573 z-index: 1;
460 } 574 }
461 575
462 .forbid:hover { 576 .countDownTitle::after {
463 box-shadow: none; 577 position: absolute;
578 background: #ccc;
579 height: 1px;
580 content: '';
581 top: 0;
582 bottom: 0;
583 margin: auto;
584 width: 100%;
585 left: 0;
464 } 586 }
465 587
466 .lineHead{display: flex;justify-content: space-between;} 588 .van-count-down {
467 .el-calendar {
468 --el-calendar-border: none;
469 --el-calendar-cell-width: 40px;
470 text-align: center; 589 text-align: center;
471 --el-text-color-regular: #8E8D94; 590 margin: 20px 0;
472 591 display: flex;
473 :deep(.el-calendar__header) {
474 justify-content: center; 592 justify-content: center;
475 padding: 0 0 10px 593 }
476 }
477
478 :deep(.el-calendar__body) {
479 border: 1px solid #F0F0F0;
480 padding: 0
481 }
482
483 :deep(.el-calendar-table .el-calendar-day) {
484 padding: 1px;
485 }
486
487 :deep(.el-calendar-table td.is-selected) {
488 background: transparent;
489 }
490
491 :deep(.el-calendar__button-group) {
492 display: none;
493 }
494 594
495 :deep(.el-calendar-table thead th) { 595 .colon {
496 padding: 5px 0 0 596 display: inline-block;
497 } 597 font-size: 20px;
598 height: 110px;
599 line-height: 110px;
600 margin: 0 8px;
601 color: #7B7F83;
602 }
498 603
499 .primaryDate { 604 .block {
605 display: inline-block;
606 opacity: 0.7;
607 width: 100px;
608 height: 110px;
609 line-height: 110px;
500 color: #fff; 610 color: #fff;
501 background: linear-gradient(90deg, #8623FC, #453DEA); 611 font-size: 35px;
502 }
503
504 .date {
505 margin: auto;
506 border-radius: 50%;
507 width: 30px;
508 height: 30px;
509 line-height: 30px;
510 font-weight: bold; 612 font-weight: bold;
511 } 613 border-radius: 10px;
614 background: url(@/assets/img/djs_bg.png) left;
615 background-size: 100% 100%;
616 text-align: center;
512 } 617 }
513 618
619
514 </style> 620 </style>
......
src/viewsPc/booking/travelDetailOld.vue 0 → 100644
1 <template>
2 <div>
3 <div class="box">
4 <el-card v-loading="loading" class="mt30">
5 <el-row v-if="form" :gutter="20" align="middle" class="hotel">
6 <!-- <el-col :span="6">-->
7 <!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
8 <!-- </el-col>-->
9 <el-col :span="language == 0?16:24">
10 <h3 class="esp flex">{{ form?.name }}
11
12 <div class="starBox ml20">
13 <img v-for="i in Number(form?.rank||0)" src="@/assets/booking/star.png">
14 </div>
15 </h3>
16
17 <!-- <div class="tagbox">-->
18 <!-- <span v-for="(t,index) in form?.label?.split('，')" v-show="index<4">{{ t }}</span>-->
19 <!-- <a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>-->
20 <!-- </div>-->
21 <div class="info">
22 <el-icon>
23 <Clock />
24 </el-icon>
25 <span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{
26 form?.startTime
27 }} ～ {{ form?.workTime }}</span>
28 </div>
29 <div class="info">
30 <el-icon>
31 <Phone />
32 </el-icon>
33 <span class="mr10">{{ language == 0 ? '联系方式' : 'Contact' }}：{{ form?.contact }}</span>
34 </div>
35 <div class="info esp">
36 <el-icon>
37 <MapLocation />
38 </el-icon>
39 <span>{{ form?.address }}</span>
40 </div>
41 <div v-if="form?.introduction" class="info pointer">
42 <div :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()" />
43 </div>
44 </el-col>
45 </el-row>
46 <el-empty v-else :image="`/img/order_no.png`" :image-size="228" description="" />
47 </el-card>
48
49 <div class="mt30">
50 <el-row :gutter="20">
51 <el-col :span="10">
52 <div class="imgbox hotelImg">
53 <el-image
54 :preview-src-list="form?.photos?.split(',')" :src="fillImgUrl(form?.photos?.split(',')[0])"
55 fit="cover"
56 />
57 </div>
58 </el-col>
59 <el-col :span="14">
60 <el-row :gutter="20" class="h100">
61 <el-col v-for="(p,index) in form?.photos?.split(',').slice(1,7)" :key="index" :span="8" class="oddmb">
62 <div class="imgbox hotelImg">
63 <el-image :src="fillImgUrl(p)" fit="cover" />
64 </div>
65 </el-col>
66 </el-row>
67 </el-col>
68 </el-row>
69 </div>
70
71 <el-card class="mt30 mb60">
72 <div class="lineHead">
73 <ul>
74 <li>
75 {{ language == 0 ? '选择日期' : 'tickets type' }}
76 </li>
77 </ul>
78 </div>
79 <div>
80 <!-- 日期-->
81 <el-calendar v-model="currentDate" :range="calendarRange" class="mt20">
82 <template #header="{date}">
83 <el-row style="width: 100%">
84 <el-col :lg="7" class="forPc" />
85 <el-col :lg="10" class="forPc">
86 <el-row align="middle" justify="center">
87 <!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
88 <div class="cTitle">
89 <!-- <el-date-picker-->
90 <!-- v-model="value2"-->
91 <!-- type="daterange"-->
92 <!-- range-separator="-"-->
93 <!-- start-placeholder="Start date"-->
94 <!-- end-placeholder="End date"-->
95 <!-- format="YYYY-MM-DD"-->
96 <!-- value-format="YYYY-MM-DD"-->
97 <!-- size="small"-->
98 <!-- @change="changee"-->
99 <!-- />-->
100 <!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
101 {{ date }}
102 </div>
103 <!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
104 </el-row>
105 </el-col>
106 <el-col :lg="7" :xs="24">
107 <div style="text-align: right;padding-right: 10px">
108 <el-date-picker
109 v-model="currentDate1"
110 :clearable="false"
111 :disabled-date="disabledDateRZ"
112 format="YYYY-MM-DD"
113 placeholder="YYYY-MM-DD"
114 type="date"
115 @change="dateChange"
116 />
117 </div>
118 </el-col>
119 </el-row>
120 </template>
121 <template #date-cell="data">
122 <div
123 :class="data.data.day==query.currentDate?'primaryDate date':'date'"
124 @click="selectDate(data.data.day)"
125 >
126 {{ data.data.day.slice(8, 10) }}
127 </div>
128 </template>
129 </el-calendar>
130 </div>
131
132 <div class="text-center mt30">
133 <el-button
134 :class="{'forbid':!(!hotTime[0])}" class="w200px btn-lineG"
135 round size="large" style="color: #fff" @click="goOrder"
136 >
137 <span v-if="btnDisable">{{ language == 0 ? '不在预定时间内' : 'OUT OF ORDER TIME' }}</span>
138 <span v-else>{{ language == 0 ? '立即预订' : 'BOOK NOW' }}</span>
139 </el-button>
140 </div>
141 </el-card>
142 </div>
143 </div>
144 </template>
145
146 <script setup>
147 import { useRouter } from 'vue-router'
148 import { ref, onMounted, computed } from 'vue'
149 import { useRoute } from 'vue-router'
150 import { dayjs } from 'element-plus'
151 import { getScenicById, checkOrderPay } from '@/apiPc/booking'
152 import { getBaseInfoByActiveId } from '@/apiPc/booking'
153
154 import { useStorage } from '@vueuse/core/index'
155 import { ElMessageBox } from 'element-plus'
156
157 const currentDate = ref(new Date())
158 const currentDate1 = ref(new Date())
159 const calendarRange = ref([dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())])
160
161 const language = useStorage('language', 0)
162 const router = useRouter()
163 const route = useRoute()
164 const form = ref({})
165 const query = ref({
166 lasId: route.query.lasId
167 })
168 const hotTime = ref([])
169 const showAll = ref(false)
170 const loading = ref(false)
171 const formTime = ref({})
172
173 onMounted(() => {
174 getBaseInfoByActiveId(route.params.cptId).then(res => {
175 formTime.value = res.data || null
176 }).catch(err => {
177 console.log(err)
178 formTime.value = null
179 }).finally(() => {
180 console.log(formTime.value)
181 getData()
182 })
183 })
184
185 function getData() {
186 loading.value = true
187 getScenicById(route.params.scenicId).then(res => {
188 loading.value = false
189 form.value = res.data
190 // initMap()
191 }).catch(err => {
192 console.log(err)
193 })
194 }
195
196 function dateChange() {
197 currentDate.value = currentDate1.value
198 calendarRange.value = [dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())]
199 }
200
201 function selectDate(date) {
202 query.value.currentDate = date
203 currentDate1.value = currentDate.value = dayjs(date).toDate()
204 console.log(date)
205 }
206
207 const btnDisable = computed(() => {
208 if (formTime.value.scenicStart) {
209 const curr = currentDate.value.valueOf()
210 const today = dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
211 const start = dayjs(formTime.value.scenicStart).valueOf()
212 const end = dayjs(formTime.value.scenicEnd).valueOf()
213 if (curr >= start && curr <= end && curr >= today) {
214 return false
215 }
216 }
217 return true
218 })
219
220
221 function goOrder() {
222 if (btnDisable.value) {
223 return
224 }
225 ElMessageBox.confirm(language.value == 0 ? `你当前选择的出行日期为${dayjs(currentDate.value).format('YYYY-MM-DD')}是否确定？` : `Your current check-in time is ${dayjs(currentDate.value).format('YYYY-MM-DD')} Are you sure?`, { type: 'warning' }).then({}).then(() => {
226 checkOrderPay(6).then(res => {
227 if (res.data == -100) {
228 ElMessageBox.confirm(
229 language.value == 0 ? '你有未支付的旅游预订，是否前往个人中心查看' : 'You already have an unpaid travel order, do you want to go to the personal center to check it?',
230 language.value == 0 ? '提示' : 'Warning',
231 {
232 confirmButtonText: language.value == 1 ? 'Go My Reservation ' : '前往我的预订',
233 // cancelButtonText: language.value==1?'Continue to book':'继续预订',
234 type: 'warning'
235 }
236 ).then((res) => {
237 console.log(res)
238 router.push({
239 name: 'myReservation'
240 })
241 })
242 return
243 }
244 goNext()
245 })
246 })
247 }
248
249 function goNext() {
250 router.push({
251 name: 'travelOrder',
252 params: {
253 start: dayjs(currentDate.value).format('YYYY-MM-DD')
254 },
255 query: {
256 lasId: query.value.lasId
257 }
258 })
259 }
260
261 function disabledDateRZ(date) {
262 // 判读今天大与form.value.hqStart
263 if (formTime.value.scenicStart) {
264 const today = dayjs().format('YYYY-MM-DD')
265 if (formTime.value.scenicStart < today) {
266 return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf()))
267 } else {
268 return !((date.getTime() >= dayjs(formTime.value.scenicStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf()))
269 }
270 }
271 }
272
273 </script>
274
275 <style lang="scss" scoped>
276 .room {
277 background: #FAFBFD;
278 margin: 20px 0 0;
279 padding: 20px;
280 border: 1px solid #E5E5E5;
281
282 .name {
283 font-size: 20px;
284 margin: 0 0 10px;
285 }
286
287 .roomImg {
288 aspect-ratio: 16/9;
289 border-radius: 10px;
290 overflow: hidden;
291
292 img {
293 width: 100%;
294 object-fit: cover;
295 object-position: center;
296 height: 100%;
297 }
298 }
299
300 .price {
301 color: #FF8124;
302 font-size: 24px;
303
304 span {
305 font-size: 36px;
306 font-family: "DIN Alternate"
307 }
308 }
309
310 .bg-lineg {
311 margin: auto;
312 border-radius: 10px;
313 text-align: center;
314 padding: 7px 2px 2px;
315 font-size: 24px;
316 width: 66px;
317 cursor: pointer;
318
319 div {
320 background: #fff;
321 font-size: 13px;
322 border-radius: 20px;
323 padding: 0 10px;
324 color: #453DEA;
325 font-weight: 500;
326 }
327 }
328 }
329
330 .hotel {
331 h3 {
332 margin: 0 0 20px;
333 }
334
335 img.w100 {
336 object-fit: cover;
337 aspect-ratio: 16/9
338 }
339
340 .addr {
341 font-size: 16px;
342 color: #929AA0;
343 font-weight: 400;
344 }
345
346 .price {
347 margin: 0 0 25px;
348 color: #FF8124;
349 font-size: 18px;
350
351 span {
352 font-size: 24px;
353 margin: 0 8px;
354 font-family: 'DINAlternate-Bold';
355 font-weight: 600;
356 }
357
358 i {
359 font-style: normal;
360 color: #929AA0;
361 }
362 }
363 }
364
365 :deep(.button) {
366 display: block;
367 height: 55px;
368 width: auto;
369 color: #fff;
370
371 span {
372 display: block !important;
373
374 div {
375 margin-top: 3px;
376 }
377 }
378
379 }
380
381 .starBox {
382 img {
383 display: inline-block;
384 margin-right: 4px
385 }
386 }
387
388 .tagbox {
389 margin: 15px 0;
390
391 a {
392 color: #AFB5B9;
393 font-size: 12px;
394 }
395
396 span {
397 border-radius: 13px;
398 font-size: 12px;
399 padding: 4px 10px;
400 margin-right: 10px;
401 font-weight: 400;
402 }
403
404 span:nth-child(4n) {
405 background: rgba(50, 177, 108, 0.2);
406 color: rgba(50, 177, 108, 1);
407 }
408
409 span:nth-child(4n+1) {
410 background: rgba(243, 152, 0, 0.2);
411 color: rgba(243, 152, 0, 1);
412 }
413
414 span:nth-child(4n+2) {
415 background: rgba(0, 160, 233, 0.2);
416 color: rgba(0, 160, 233, 1);
417 }
418
419 span:nth-child(4n+3) {
420 background: rgba(247, 64, 166, 0.2);
421 color: rgba(247, 64, 166, 1);
422 }
423 }
424
425 .mapBox {
426 position: relative;
427 overflow: hidden;
428 height: 200px;
429
430 #map {
431 position: relative;
432 left: -70px;
433 width: calc(100% + 160px);
434 }
435 }
436
437 .hotelImg {
438 border-radius: 10px;
439 overflow: hidden;
440 aspect-ratio: 16/9;
441
442 img {
443 object-fit: cover;
444 object-position: center;
445 width: 100%;
446 height: 100%;
447 }
448 }
449
450 .info {
451 font-weight: 400;
452 font-size: 14px;
453 color: #929AA0;
454
455 .el-icon {
456 margin-right: 5px;
457 }
458 }
459
460 .oddmb:nth-child(2) {
461 margin-bottom: 20px;
462 }
463
464 .forbid {
465 cursor: not-allowed !important;
466 filter: grayscale(0.4);
467 opacity: 0.7;
468 }
469
470 .forbid:hover {
471 box-shadow: none;
472 }
473
474 .lineHead {
475 display: flex;
476 justify-content: space-between;
477 }
478
479 .el-calendar {
480 --el-calendar-border: none;
481 --el-calendar-cell-width: 40px;
482 text-align: center;
483 --el-text-color-regular: #8E8D94;
484
485 :deep(.el-calendar__header) {
486 justify-content: center;
487 padding: 0 0 10px
488 }
489
490 :deep(.el-calendar__body) {
491 border: 1px solid #F0F0F0;
492 padding: 0
493 }
494
495 :deep(.el-calendar-table .el-calendar-day) {
496 padding: 1px;
497 }
498
499 :deep(.el-calendar-table td.is-selected) {
500 background: transparent;
501 }
502
503 :deep(.el-calendar__button-group) {
504 display: none;
505 }
506
507 :deep(.el-calendar-table thead th) {
508 padding: 5px 0 0
509 }
510
511 .primaryDate {
512 color: #fff;
513 background: linear-gradient(90deg, #8623FC, #453DEA);
514 }
515
516 .date {
517 margin: auto;
518 border-radius: 50%;
519 width: 30px;
520 height: 30px;
521 line-height: 30px;
522 font-weight: bold;
523 }
524 }
525
526 </style>
src/viewsPc/booking/travelOrder.vue
...@@ -3,26 +3,27 @@ ...@@ -3,26 +3,27 @@
3 <div class="box"> 3 <div class="box">
4 <el-card :body-style="{ padding: '0px' }" class="mt20"> 4 <el-card :body-style="{ padding: '0px' }" class="mt20">
5 <div slot="header"> 5 <div slot="header">
6 <div class="bg-lineg">{{ language == 0 ? '旅游服务下单' : 'Hotel booking order' }}</div> 6 <div class="bg-lineg father">{{ language == 0 ? '旅游服务下单' : 'Hotel booking order' }}
7 <sapn class="son" @click="handleGo">{{ language == 0 ? '上一步' : 'Back go' }}</sapn>
8 </div>
7 </div> 9 </div>
8 <!-- {{room}}--> 10 <!-- {{room}}-->
9 <el-row class="pd20" :gutter="20"> 11 <el-row :gutter="20" class="pd20">
10 <el-col :span="14"> 12 <el-col :span="14">
11 <div class="border-info"> 13 <div class="border-info">
12 <el-row class="hotel" align="middle" :gutter="20"> 14 <el-row :gutter="20" align="middle" class="hote ">
13 <!-- <el-col :span="6">-->
14 <!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
15 <!-- </el-col>-->
16 <el-col :span="language == 0?16:24"> 15 <el-col :span="language == 0?16:24">
17 <h3 class="esp flex">{{ scenicItem?.name }} 16 <h3 class="esp flex">{{ scenicItem?.name }}
18 17
19 <el-tag effect="dark" class="ml20">{{ scenicItem?.rank||0 }}A</el-tag> 18 <el-tag class="ml20" effect="dark">{{ scenicItem?.rank || 0 }}A</el-tag>
20 </h3> 19 </h3>
21 <div class="info"> 20 <div class="info">
22 <el-icon> 21 <el-icon>
23 <Clock /> 22 <Clock />
24 </el-icon> 23 </el-icon>
25 <span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ scenicItem?.startTime }} ～ {{ scenicItem?.workTime }}</span> 24 <span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ scenicItem?.startTime }} ～ {{
25 scenicItem?.workTime
26 }}</span>
26 </div> 27 </div>
27 <div class="info"> 28 <div class="info">
28 <el-icon> 29 <el-icon>
...@@ -42,71 +43,83 @@ ...@@ -42,71 +43,83 @@
42 43
43 <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div> 44 <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
44 <div class="border-rr mt20 pd20"> 45 <div class="border-rr mt20 pd20">
45 <el-form ref="formRef" v-loading="loading" :model="form" :label-width="language == 0 ?'120':'160'" :rules="rules"> 46 <el-form
47 ref="formRef" v-loading="loading" :label-width="language == 0 ?'120':'160'" :model="form"
48 :rules="rules"
49 >
50 <!-- &lt;!&ndash; :disabled-date="disabledDateRZ"&ndash;&gt;-->
51 <!-- <el-form-item :label="language==0?'选择日期':'Date'" required>-->
52 <!-- <el-date-picker-->
53 <!-- v-model="rzRange"-->
54 <!-- :clearable="false"-->
46 <!-- :disabled-date="disabledDateRZ"--> 55 <!-- :disabled-date="disabledDateRZ"-->
47 <el-form-item :label="language==0?'选择日期':'Date'" required> 56 <!-- format="YYYY-MM-DD"-->
48 <el-date-picker 57 <!-- value-format="YYYY-MM-DD"-->
49 v-model="rzRange" 58 <!-- @change="dateChange"-->
50 format="YYYY-MM-DD" 59 <!-- />-->
51 value-format="YYYY-MM-DD" 60 <!-- -->
52 :disabled-date="disabledDateRZ" 61 <!-- <div v-if="lform.scenicStart" class="tip">{{-->
53 :clearable="false" 62 <!-- language == 0 ? '可订日期' : 'Available date'-->
54 @change="dateChange" 63 <!-- }}：{{ lform.scenicStart.slice(0, 10) }} ~ {{ lform.scenicEnd.slice(0, 10) }}-->
55 /> 64 <!-- </div>-->
56 65 <!-- -->
57 <div v-if="lform.scenicStart" class="tip">{{ language==0?'可订日期':'Available date' }}：{{ lform.scenicStart.slice(0, 10) }} ~ {{ lform.scenicEnd.slice(0, 10) }}</div> 66 <!-- &lt;!&ndash; :picker-options="pickerOptions"&ndash;&gt;-->
58 67 <!-- </el-form-item>-->
59 <!-- :picker-options="pickerOptions"--> 68 <!-- <el-form-item v-for="(n,i) in gateList" :key="i" :label="language==0? n.name:n.name" prop="count">-->
60 </el-form-item> 69 <!-- <el-input-number v-model="n.count" :max="n.leftNum" :min="0" @change="changeNum(n)" />-->
61 <el-form-item v-for="(n,i) in gateList" :key="i" :label="language==0? n.name:n.name" prop="count"> 70 <!-- <el-popover placement="top-start">-->
62 <el-input-number v-model="n.count" :min="0" :max="n.leftNum" @change="changeNum(n)" /> 71 <!-- <template #reference>-->
63 <el-popover placement="top-start"> 72 <!-- <el-icon class="ml20">-->
64 <template #reference> 73 <!-- <Warning />-->
65 <el-icon class="ml20"><Warning /></el-icon> 74 <!-- </el-icon>-->
66 </template> 75 <!-- </template>-->
67 <div v-html="n.details"></div> 76 <!-- <div v-html="n.details" />-->
68 </el-popover> 77 <!-- </el-popover>-->
69 <div class="red ml20"> 78 <!-- <div class="red ml20">-->
70 <span v-if="language == 0">单价: ¥{{ n.price }}</span> 79 <!-- <span v-if="language == 0">单价: ¥{{ n.price }}</span>-->
71 <span v-else>€ {{ n.priceEn }} / Ticket</span> 80 <!-- <span v-else>€ {{ n.priceEn }} / Ticket</span>-->
72 </div> 81 <!-- </div>-->
73 <div class="red ml20"> 82 <!-- <div class="red ml20">-->
74 <span v-if="language == 0">剩余票数:{{ n.leftNum }}</span> 83 <!-- <span v-if="language == 0">剩余票数:{{ n.leftNum }}</span>-->
75 <span v-else>{{ n.leftNum }} sheet remaining </span> 84 <!-- <span v-else>{{ n.leftNum }} sheet remaining </span>-->
76 </div> 85 <!-- </div>-->
77 86 <!-- -->
78 </el-form-item> 87 <!-- </el-form-item>-->
79 88 <!-- -->
80 <div v-if="needPersonNum>0" class="fakeFormItem"> 89 <div v-if="needPersonNum>0" class="fakeFormItem">
81 <label v-if="language == 0">需填写{{ needPersonNum }}位游客</label> 90 <label v-if="language == 0">需填写{{ needPersonNum }}位游客</label>
82 <label v-else>Need {{ needPersonNum }} visitors</label> 91 <label v-else>Need {{ needPersonNum }} visitors</label>
83 <div> 92 <div>
84 <label class="text-warning" v-show="needPersonNum > hasPersonNum && language==0"> 93 <label v-show="needPersonNum > hasPersonNum && language==0" class="text-warning">
85 还需填写{{ needPersonNum-hasPersonNum }}位游客 94 还需填写{{ needPersonNum - hasPersonNum }}位游客
86 </label> 95 </label>
87 </div> 96 </div>
88 </div> 97 </div>
89 <div v-for="(n,i) in gateList" :key="i"> 98 <div v-for="(n,i) in gateList" :key="i">
90 <div v-for="(p,j) in n.personArr" :key="j" class="fakeFormItem personIt"> 99 <div v-for="(p,j) in n.personArr" :key="j" class="fakeFormItem personIt">
91 <label> 100 <label>
92 <el-icon @click="delPerson(n,j)"><Remove /></el-icon> 101 <!-- <el-icon @click="delPerson(n,j)">-->
93 {{ n.name }}{{ j+1 }} 102 <!-- <Remove />-->
103 <!-- </el-icon>-->
104 {{ n.name }}{{ j + 1 }}
94 </label> 105 </label>
95 <div v-if="p.name" class="mation"> 106 <div v-if="p.name" class="mation">
96 <div>{{ p.name }}</div> 107 <div>{{ p.name }}</div>
97 <span v-if="p.idcType==0">{{language==0?'身份证':'ID number'}}</span> 108 <span v-if="p.idcType==0">{{ language == 0 ? '身份证' : 'ID number' }}</span>
98 <span v-if="p.idcType==1">{{language==0?'护照':'Passport'}}</span> 109 <span v-if="p.idcType==1">{{ language == 0 ? '护照' : 'Passport' }}</span>
99 <span v-if="p.idcType==2">{{language==0?'其他':'Other'}}</span> 110 <span v-if="p.idcType==2">{{ language == 0 ? '其他' : 'Other' }}</span>
100 ：{{ p.idCard }} 111 ：{{ p.idCard }}
101 </div> 112 </div>
102 <el-icon @click="showAddPerson(n, j,p)" color="#453DEA"><Edit /></el-icon> 113 <el-icon color="#453DEA" @click="showAddPerson(n, j,p)">
114 <Edit />
115 </el-icon>
103 </div> 116 </div>
104 </div> 117 </div>
105 118
106 <el-form-item :label="language==0?'联系人':'Contact'" required prop="contacts"> 119 <el-form-item :label="language==0?'联系人':'Contact'" prop="contacts">
107 <el-input v-model="form.contacts" /> 120 <el-input v-model="form.contacts" />
108 </el-form-item> 121 </el-form-item>
109 <el-form-item :label="language==0?'联系手机':'Contact phone'" required prop="phone"> 122 <el-form-item :label="language==0?'联系手机':'Contact phone'" prop="phone" required>
110 <el-input v-model="form.phone" /> 123 <el-input v-model="form.phone" />
111 </el-form-item> 124 </el-form-item>
112 125
...@@ -118,15 +131,19 @@ ...@@ -118,15 +131,19 @@
118 <div class="border-rr mt20 pd20 ccitemBox"> 131 <div class="border-rr mt20 pd20 ccitemBox">
119 132
120 <div v-for="(c, index) in gateList" v-show="c.count>0" :key="index" class="ccitem"> 133 <div v-for="(c, index) in gateList" v-show="c.count>0" :key="index" class="ccitem">
121
122 {{ c.name }} 134 {{ c.name }}
123 <span v-if="language==0">{{ c.count }} * {{ '¥' }}{{ c.price }}</span> 135 <span v-if="language==0">
124 <span v-else>{{ c.count }} * {{ '€' }} {{ c.priceEn }}</span> 136 {{ c.count }} * {{ '¥' }}{{ c.price }}
137 </span>
138 <span v-else>{{ c.count }} * {{ '€' }} {{ c.priceEn }}
139 </span>
125 </div> 140 </div>
126 141
127 <label>{{ language == 0 ? '共计' : 'Total' }}<span 142 <label>{{ language == 0 ? '共计' : 'Total' }}
128 class="fr bigMoney" 143 <span class="fr bigMoney">
129 >{{ language == 0 ? '¥' : '€' }} {{ money }}</span></label> 144 {{ language == 0 ? '¥' : '€' }} {{ money }}
145 </span>
146 </label>
130 147
131 </div> 148 </div>
132 </el-col> 149 </el-col>
...@@ -134,14 +151,18 @@ ...@@ -134,14 +151,18 @@
134 </el-card> 151 </el-card>
135 152
136 <el-card class="mt30"> 153 <el-card class="mt30">
137 <el-row justify="space-between" align="middle"> 154 <el-row align="middle" justify="space-between">
138 <el-col :span="12"> 155 <el-col :span="12">
139 <label>{{ language == 0 ? '共计金额' : 'Total' }}： 156 <label>{{ language == 0 ? '共计金额' : 'Total' }}：
140 <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ money }}</span></span> 157 <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{
158 money
159 }}</span></span>
141 </label> 160 </label>
142 </el-col> 161 </el-col>
143 <el-col :span="12" class="text-right"> 162 <el-col :span="12" class="text-right">
144 <el-button type="primary" class="btn-lineG w200px" size="large" round @click="submit">{{ language == 0 ?'确认付款':'Book Now' }}</el-button> 163 <el-button class="btn-lineG w200px" round size="large" type="primary" @click="submit">
164 {{ language == 0 ? '确认付款' : 'Book Now' }}
165 </el-button>
145 </el-col> 166 </el-col>
146 </el-row> 167 </el-row>
147 </el-card> 168 </el-card>
...@@ -187,29 +208,53 @@ const rzRange = ref('') ...@@ -187,29 +208,53 @@ const rzRange = ref('')
187 const gateList = ref([]) 208 const gateList = ref([])
188 const money = ref(0) 209 const money = ref(0)
189 const choosePersonRef = ref([]) 210 const choosePersonRef = ref([])
211 const ticketList = ref([])
212
190 const rules = ref({ 213 const rules = ref({
191 phone: { required: true, message: language.value == 0 ? '请输入联系电话' : 'Please enter a contact number', trigger: 'blur' } 214 phone: {
215 required: true,
216 message: language.value == 0 ? '请输入联系电话' : 'Please enter a contact number',
217 trigger: 'blur'
218 },
219 contacts: {
220 required: true,
221 message: language.value == 0 ? '请输入联人' : 'Please enter a contact',
222 trigger: 'blur'
223 }
192 }) 224 })
193 225
226
194 onMounted(() => { 227 onMounted(() => {
195 money.value = 0 228 money.value = 0
196 rzRange.value = route.params.start 229 rzRange.value = route.params.start
197 230 gateList.value = ticketList.value = JSON.parse(decodeURIComponent(route.query.item))
231 console.log(gateList.value)
198 getScenic() 232 getScenic()
199 initDays() 233 countMoney()
200 getGate() 234 checkPersonNum()
235 // changeNum()
236 // initDays()
237 // getGate()
201 }) 238 })
239
202 function initDays() { 240 function initDays() {
203 // 可定日期范围 241 // 可定日期范围
204 getBaseInfoByActiveId(route.params.cptId).then(res => { 242 getBaseInfoByActiveId(route.params.cptId).then(res => {
205 lform.value = res.data 243 lform.value = res.data
206 }) 244 })
207 } 245 }
246
247 function getTotal() {
248 // get
249 }
250
251
208 function getScenic() { 252 function getScenic() {
209 getScenicById(route.params.scenicId).then(res => { 253 getScenicById(route.params.scenicId).then(res => {
210 scenicItem.value = res.data 254 scenicItem.value = res.data
211 }) 255 })
212 } 256 }
257
213 function getGate() { 258 function getGate() {
214 gateList.value = [] 259 gateList.value = []
215 loading.value = true 260 loading.value = true
...@@ -259,6 +304,11 @@ const checkPersonNum = () => { ...@@ -259,6 +304,11 @@ const checkPersonNum = () => {
259 }) 304 })
260 } 305 }
261 306
307 function getCountInfo() {
308 // get
309 }
310
311
262 function changeNum(e) { 312 function changeNum(e) {
263 checkPersonNum() 313 checkPersonNum()
264 314
...@@ -329,6 +379,10 @@ function submit() { ...@@ -329,6 +379,10 @@ function submit() {
329 useUserStore().setReLogin() 379 useUserStore().setReLogin()
330 return 380 return
331 } 381 }
382 if (!form.value.contacts) {
383 ElMessage.warning(language.value == 0 ? '请填写联系人' : 'Please fill in the contact person.')
384 return
385 }
332 if (!form.value.phone) { 386 if (!form.value.phone) {
333 ElMessage.warning(language.value == 0 ? '请填写手机号' : 'Please fill in the phone number') 387 ElMessage.warning(language.value == 0 ? '请填写手机号' : 'Please fill in the phone number')
334 return 388 return
...@@ -394,9 +448,13 @@ function submit() { ...@@ -394,9 +448,13 @@ function submit() {
394 }) 448 })
395 } 449 }
396 450
451 function handleGo() {
452 router.go(-1)
453 }
454
397 </script> 455 </script>
398 456
399 <style scoped lang="scss"> 457 <style lang="scss" scoped>
400 .bigMoney { 458 .bigMoney {
401 font-size: 36px !important; 459 font-size: 36px !important;
402 font-family: 'DIN Alternate'; 460 font-family: 'DIN Alternate';
...@@ -463,20 +521,56 @@ function submit() { ...@@ -463,20 +521,56 @@ function submit() {
463 .red { 521 .red {
464 color: #FF8124; 522 color: #FF8124;
465 } 523 }
524
466 .fakeFormItem { 525 .fakeFormItem {
467 display: flex; 526 display: flex;
468 padding: 10px 0; 527 padding: 10px 0;
469 label{ height: 32px; font-size: var(--el-form-label-font-size); width: 120px; 528
470 color: var(--el-text-color-regular); padding: 0 12px 0 0; 529 label {
471 line-height: 32px;flex: 0 0 auto; 530 height: 32px;
531 font-size: var(--el-form-label-font-size);
532 width: 120px;
533 color: var(--el-text-color-regular);
534 padding: 0 12px 0 0;
535 line-height: 32px;
536 flex: 0 0 auto;
472 display: inline-flex; 537 display: inline-flex;
473 justify-content: flex-end; 538 justify-content: flex-end;
474 align-items: center;gap: 10px;white-space: nowrap;} 539 align-items: center;
540 gap: 10px;
541 white-space: nowrap;
542 }
543 }
544
545 .tip {
546 font-size: 14px;
547 color: #666;
548 padding: 0 10px;
475 } 549 }
476 .tip{font-size: 14px;color: #666;padding: 0 10px;} 550
477 .personIt{display: flex;align-items: center; 551 .personIt {
478 .mation{width: 200px;font-size: 12px; 552 display: flex;
479 div{font-size: 14px;} 553 align-items: center;
554
555 .mation {
556 width: 200px;
557 font-size: 12px;
558
559 div {
560 font-size: 14px;
561 }
480 } 562 }
481 } 563 }
564
565 .father {
566 position: relative;
567
568 }
569
570 .son {
571 position: absolute;
572 left: 10px;
573 cursor: pointer;
574 }
575
482 </style> 576 </style>
......
src/viewsPc/components/homeQuick.vue
1 <template> 1 <template>
2 <div v-if="language == 0" class="itemBox"> 2 <div v-if="language == 0" class="itemBox">
3 <el-row :gutter="20"> 3 <el-row :gutter="20">
4 <el-col :sm="12" :lg="8" :xs="12"> 4 <el-col :lg="8" :sm="12" :xs="12">
5 <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn01.png">酒店预订</div> 5 <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn01.png">酒店预订</div>
6 </el-col> 6 </el-col>
7 <el-col :sm="12" :lg="8" :xs="12"> 7 <el-col :lg="8" :sm="12" :xs="12">
8 <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn02.png">车辆预订</div> 8 <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn02.png">车辆预订</div>
9 </el-col> 9 </el-col>
10 <!-- <el-col :sm="12" :lg="8" :xs="12">--> 10 <!-- <el-col :sm="12" :lg="8" :xs="12">-->
11 <!-- <div class="item" @click="popRemark(3)"><img src="@/assets/dance/btn03.png">餐饮预订</div>--> 11 <!-- <div class="item" @click="popRemark(3)"><img src="@/assets/dance/btn03.png">餐饮预订</div>-->
12 <!-- </el-col>--> 12 <!-- </el-col>-->
13 <el-col :sm="12" :lg="8" :xs="12"> 13 <el-col :lg="8" :sm="12" :xs="12">
14 <div class="item" @click="popRemark(8)"><img src="@/assets/dance/btn08.png">旅游服务</div> 14 <div class="item" @click="popRemark(8)"><img src="@/assets/dance/btn08.png">旅游服务</div>
15 </el-col> 15 </el-col>
16 <el-col :sm="12" :lg="8" :xs="12"> 16 <el-col :lg="8" :sm="12" :xs="12">
17 <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn04.png">票务预订</div> 17 <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn04.png">票务预订</div>
18 </el-col> 18 </el-col>
19 <el-col :sm="12" :lg="8" :xs="12"> 19 <el-col :lg="8" :sm="12" :xs="12">
20 <div class="item" @click="popRemark(4)"><img src="@/assets/dance/btn05.png">化妆预约</div> 20 <div class="item" @click="popRemark(4)"><img src="@/assets/dance/btn05.png">化妆预约</div>
21 </el-col> 21 </el-col>
22 <el-col :sm="12" :lg="8" :xs="12"> 22 <el-col :lg="8" :sm="12" :xs="12">
23 <div class="item" @click="popRemark(5)"><img src="@/assets/dance/btn06.png">拍照预约</div> 23 <div class="item" @click="popRemark(5)"><img src="@/assets/dance/btn06.png">拍照预约</div>
24 </el-col> 24 </el-col>
25 </el-row> 25 </el-row>
26 </div> 26 </div>
27 <div v-else class="itemBox_en"> 27 <div v-else class="itemBox_en">
28 <el-row :gutter="20"> 28 <el-row :gutter="20">
29 <el-col :sm="12" :lg="8" :xs="12"> 29 <el-col :lg="8" :sm="12" :xs="12">
30 <div class="item_en" @click="popRemark(1)"><img src="@/assets/dance/btn01.png"> 30 <div class="item_en" @click="popRemark(1)"><img src="@/assets/dance/btn01.png">
31 <p>HOTEL RESERVATION</p> 31 <p>HOTEL RESERVATION</p>
32 </div> 32 </div>
33 </el-col> 33 </el-col>
34 <el-col :sm="12" :lg="8" :xs="12"> 34 <el-col :lg="8" :sm="12" :xs="12">
35 <div class="item_en" @click="popRemark(2)"><img src="@/assets/dance/btn02.png"> 35 <div class="item_en" @click="popRemark(2)"><img src="@/assets/dance/btn02.png">
36 <p>TRANSPORTATION RESERVATION</p> 36 <p>TRANSPORTATION RESERVATION</p>
37 </div> 37 </div>
38 </el-col> 38 </el-col>
39 <!-- <el-col :sm="12" :lg="8" :xs="12">--> 39 <!-- <el-col :sm="12" :lg="8" :xs="12">-->
40 <!-- <div class="item_en" @click="popRemark(3)"><img src="@/assets/dance/btn03.png">--> 40 <!-- <div class="item_en" @click="popRemark(3)"><img src="@/assets/dance/btn03.png">-->
41 <!-- <p>DINING RESERVATION</p>--> 41 <!-- <p>DINING RESERVATION</p>-->
42 <!-- </div>--> 42 <!-- </div>-->
43 <!-- </el-col>--> 43 <!-- </el-col>-->
44 <el-col :sm="12" :lg="8" :xs="12"> 44 <el-col :lg="8" :sm="12" :xs="12">
45 <div class="item_en" @click="popRemark(8)"><img src="@/assets/dance/btn08.png"> 45 <div class="item_en" @click="popRemark(8)"><img src="@/assets/dance/btn08.png">
46 <p>TRAVEL SERVICE</p> 46 <p>TRAVEL SERVICE</p>
47 </div> 47 </div>
48 </el-col> 48 </el-col>
49 <el-col :sm="12" :lg="8" :xs="12"> 49 <el-col :lg="8" :sm="12" :xs="12">
50 <div class="item_en" @click="popRemark(0)"> 50 <div class="item_en" @click="popRemark(0)">
51 <img src="@/assets/dance/btn04.png"> 51 <img src="@/assets/dance/btn04.png">
52 <p>TICKET BOOKING</p> 52 <p>TICKET BOOKING</p>
53 </div> 53 </div>
54 </el-col> 54 </el-col>
55 <el-col :sm="12" :lg="8" :xs="12"> 55 <el-col :lg="8" :sm="12" :xs="12">
56 <div class="item_en" @click="popRemark(4)"><img src="@/assets/dance/btn05.png"> 56 <div class="item_en" @click="popRemark(4)"><img src="@/assets/dance/btn05.png">
57 <p>MAKEUP APPOINTMENT</p> 57 <p>MAKEUP APPOINTMENT</p>
58 </div> 58 </div>
59 </el-col> 59 </el-col>
60 <el-col :sm="12" :lg="8" :xs="12"> 60 <el-col :lg="8" :sm="12" :xs="12">
61 <div class="item_en" @click="popRemark(5)"><img src="@/assets/dance/btn06.png"> 61 <div class="item_en" @click="popRemark(5)"><img src="@/assets/dance/btn06.png">
62 <p>PHOTOGRAPHY APPOINTMENT</p> 62 <p>PHOTOGRAPHY APPOINTMENT</p>
63 </div> 63 </div>
...@@ -114,7 +114,6 @@ onMounted(() => { ...@@ -114,7 +114,6 @@ onMounted(() => {
114 114
115 function building() { 115 function building() {
116 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.') 116 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
117 return
118 } 117 }
119 118
120 function popRemark(type) { 119 function popRemark(type) {
...@@ -173,14 +172,14 @@ function goBooking(n) { ...@@ -173,14 +172,14 @@ function goBooking(n) {
173 router.push({ path: `/booking/photography/${props.matchId}` }) 172 router.push({ path: `/booking/photography/${props.matchId}` })
174 break 173 break
175 case 8: 174 case 8:
176 // 酒店 175 // 旅游
177 router.push({ path: `/booking/travel/${props.matchId}` }) 176 router.push({ path: `/booking/travel/${props.matchId}` })
178 break 177 break
179 } 178 }
180 } 179 }
181 </script> 180 </script>
182 181
183 <style scoped lang="scss"> 182 <style lang="scss" scoped>
184 .itemBox { 183 .itemBox {
185 padding: 20px 40px; 184 padding: 20px 40px;
186 } 185 }
...@@ -248,9 +247,16 @@ function goBooking(n) { ...@@ -248,9 +247,16 @@ function goBooking(n) {
248 } 247 }
249 248
250 @media screen and (max-width: 768px) { 249 @media screen and (max-width: 768px) {
251 .itemBox,.itemBox_en{padding: 0 20px 20px} 250 .itemBox, .itemBox_en {
252 .item{font-size: 16px; 251 padding: 0 20px 20px
253 img{width: 50px;height: 50px} 252 }
253 .item {
254 font-size: 16px;
255
256 img {
257 width: 50px;
258 height: 50px
259 }
254 } 260 }
255 } 261 }
256 </style> 262 </style>
......
src/viewsPc/components/orderRemark.vue
1 <template> 1 <template>
2 <el-dialog :title="title" v-model="show" width="400px" @close="close"> 2 <el-dialog v-model="show" :title="title" destroy-on-close width="400px" @close="close">
3 <div> 3 <div>
4 <h2 class="text-warning text-center" v-if="cptName">{{cptName}}</h2> 4 <h2 v-if="cptName" class="text-warning text-center">{{ cptName }}</h2>
5 5
6 <div v-if="type==1" class="plr20" v-html="form.reserveDes"></div> 6 <div v-if="type==1" class="plr20" v-html="form.reserveDes" />
7 <div v-if="type==2" class="plr20" v-html="form.reserveDesCar"></div> 7 <div v-if="type==2" class="plr20" v-html="form.reserveDesCar" />
8 <div v-if="type==3" class="plr20" v-html="form.reserveDesFood"></div> 8 <div v-if="type==3" class="plr20" v-html="form.reserveDesFood" />
9 <div v-if="type==4" class="plr20" v-html="form.reserveDesMeal"></div> 9 <div v-if="type==4" class="plr20" v-html="form.reserveDesMeal" />
10 <div v-if="type==5" class="plr20" v-html="form.reserveDesPhoto"></div> 10 <div v-if="type==5" class="plr20" v-html="form.reserveDesPhoto" />
11 <div v-if="type==0" class="plr20" v-html="form.reserveDesTitck"></div> 11 <div v-if="type==0" class="plr20" v-html="form.reserveDesTitck" />
12 <div v-if="type==8" class="plr20" v-html="form.reserveDesTravel"></div> 12 <div v-if="type==8" class="plr20" v-html="form.reserveDesScenic" />
13 </div> 13 </div>
14 <template #footer> 14 <template #footer>
15 <div class="dialog-footer text-center"> 15 <div class="dialog-footer text-center">
16 <el-button type="primary" class="btn-lineG w200px" round @click="ok">{{language==0?'确定':'Confirm'}}</el-button> 16 <el-button class="btn-lineG w200px" round type="primary" @click="ok">{{ language == 0 ? '确定' : 'Confirm' }}
17 </el-button>
17 </div> 18 </div>
18 </template> 19 </template>
19 </el-dialog> 20 </el-dialog>
20 </template> 21 </template>
21 22
22 <script setup> 23 <script setup>
23 import {getBaseInfoByActiveId} from "@/apiPc/booking"; 24 import { getBaseInfoByActiveId } from '@/apiPc/booking'
24 import {getCurrentInstance} from "@vue/runtime-core"; 25 import { getCurrentInstance } from '@vue/runtime-core'
25 import {useStorage} from "@vueuse/core/index"; 26 import { useStorage } from '@vueuse/core/index'
26 const emit = defineEmits([ 'submit']) 27
27 const {proxy} = getCurrentInstance() 28 const emit = defineEmits(['submit'])
28 const language= useStorage('language',0) 29 const { proxy } = getCurrentInstance()
29 import useUserStore from "@/store/modules/user"; 30 const language = useStorage('language', 0)
31 import useUserStore from '@/store/modules/user'
32
30 const user = useUserStore().user 33 const user = useUserStore().user
31 const title = ref('') 34 const title = ref('')
32 const cptName = ref('') 35 const cptName = ref('')
...@@ -48,16 +51,18 @@ defineExpose({ ...@@ -48,16 +51,18 @@ defineExpose({
48 51
49 function getData() { 52 function getData() {
50 console.log(matchId) 53 console.log(matchId)
51 getBaseInfoByActiveId(matchId).then(res=>{ 54 getBaseInfoByActiveId(matchId).then(res => {
52 form.value = res.data || {} 55 form.value = res.data || {}
53 console.log(form.value) 56 console.log(form.value)
54 }).catch(err=>{ 57 }).catch(err => {
55 console.log(err) 58 console.log(err)
56 }) 59 })
57 } 60 }
61
58 function close() { 62 function close() {
59 show.value = false 63 show.value = false
60 } 64 }
65
61 function ok() { 66 function ok() {
62 // type 67 // type
63 show.value = false 68 show.value = false
...@@ -70,6 +75,6 @@ function ok() { ...@@ -70,6 +75,6 @@ function ok() {
70 } 75 }
71 </script> 76 </script>
72 77
73 <style scoped lang="scss"> 78 <style lang="scss" scoped>
74 79
75 </style> 80 </style>
......
vite.config.js
...@@ -70,8 +70,8 @@ export default defineConfig(({ mode, command }) => { ...@@ -70,8 +70,8 @@ export default defineConfig(({ mode, command }) => {
70 rewrite: (p) => p.replace(/^\/dev-api\/ztx-train/, '') 70 rewrite: (p) => p.replace(/^\/dev-api\/ztx-train/, '')
71 }, 71 },
72 '/dev-api/ztx-match': { 72 '/dev-api/ztx-match': {
73 // target: 'http://192.168.1.118:8081', 73 target: 'http://192.168.1.118:8081',
74 target: 'https://wdsfwuxicenter.com/stage-api/', 74 // target: 'https://wdsfwuxicenter.com/stage-api/',
75 changeOrigin: true, 75 changeOrigin: true,
76 rewrite: (p) => p.replace(/^\/dev-api\/ztx-match/, '') 76 rewrite: (p) => p.replace(/^\/dev-api\/ztx-match/, '')
77 }, 77 },
...@@ -82,8 +82,8 @@ export default defineConfig(({ mode, command }) => { ...@@ -82,8 +82,8 @@ export default defineConfig(({ mode, command }) => {
82 }, 82 },
83 '/dev-api': { 83 '/dev-api': {
84 // target: 'http://192.168.1.118:8081/', 84 // target: 'http://192.168.1.118:8081/',
85 // target: 'http://192.168.1.130:8081', 85 target: 'http://192.168.1.118:8081',
86 target: 'https://jijin.wtwuxicenter.com/stage-api', 86 // target: 'https://jijin.wtwuxicenter.com/stage-api',
87 // target: 'https://wdsfwuxicenter.com/stage-api/', 87 // target: 'https://wdsfwuxicenter.com/stage-api/',
88 changeOrigin: true, 88 changeOrigin: true,
89 rewrite: (p) => p.replace(/^\/dev-api/, '') 89 rewrite: (p) => p.replace(/^\/dev-api/, '')
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!