01c8ae36 by zhangmeng

票务

1 parent 0de836b9
...@@ -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">
...@@ -37,11 +37,11 @@ ...@@ -37,11 +37,11 @@
37 <div class="address"> 37 <div class="address">
38 {{ triggerLanguage(language, "地址", "Location") }}{{ matchForm.address }} 38 {{ triggerLanguage(language, "地址", "Location") }}{{ matchForm.address }}
39 </div> 39 </div>
40 40
41 41
42 <div v-if="timeData>0"> 42 <div v-if="timeData>0">
43 <!-- 倒计时--> 43 <!-- 倒计时-->
44 44
45 <p class="countDownTitle"> 45 <p class="countDownTitle">
46 <span v-if="language==0">售票倒计时</span> 46 <span v-if="language==0">售票倒计时</span>
47 <span v-else>TICKET COUNTDOWN</span> 47 <span v-else>TICKET COUNTDOWN</span>
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
60 </van-count-down> 60 </van-count-down>
61 </div> 61 </div>
62 <div v-else> 62 <div v-else>
63 63
64 <!-- 票档 --> 64 <!-- 票档 -->
65 <div class="select_item_box"> 65 <div class="select_item_box">
66 <div class="label"> 66 <div class="label">
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
83 </div> 83 </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 86
87 <!-- 场馆 --> 87 <!-- 场馆 -->
88 <div class="select_item_box"> 88 <div class="select_item_box">
89 <div class="label"> 89 <div class="label">
...@@ -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'
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
116 </div> 116 </div>
117 </div> 117 </div>
118 </div> 118 </div>
119 119
120 <!-- 场次 --> 120 <!-- 场次 -->
121 <div class="select_item_box"> 121 <div class="select_item_box">
122 <div class="label"> 122 <div class="label">
...@@ -140,11 +140,11 @@ ...@@ -140,11 +140,11 @@
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>
147 147
148 <!-- 票型 --> 148 <!-- 票型 -->
149 <div class="select_item_box"> 149 <div class="select_item_box">
150 <div class="label"> 150 <div class="label">
...@@ -177,8 +177,8 @@ ...@@ -177,8 +177,8 @@
177 </div> 177 </div>
178 </div> 178 </div>
179 </div> 179 </div>
180 180
181 181
182 <!-- 价格 --> 182 <!-- 价格 -->
183 <div class="select_item_box"> 183 <div class="select_item_box">
184 <div class="label"> 184 <div class="label">
...@@ -205,7 +205,7 @@ ...@@ -205,7 +205,7 @@
205 {{ matchForm.ticketRemark }} 205 {{ matchForm.ticketRemark }}
206 </div> 206 </div>
207 </div> 207 </div>
208 208
209 <div 209 <div
210 v-if="endTime<=0" class="btn" style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px" 210 v-if="endTime<=0" class="btn" style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
211 @click="toSelectClosed" 211 @click="toSelectClosed"
...@@ -219,20 +219,23 @@ ...@@ -219,20 +219,23 @@
219 triggerLanguage(language, "立即购票", "Buy tickets now") 219 triggerLanguage(language, "立即购票", "Buy tickets now")
220 }} 220 }}
221 </div> 221 </div>
222 222
223 </div> 223 </div>
224 224
225 </div> 225 </div>
226 </div> 226 </div>
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" />
235 238
236 <el-dialog v-model="show" title="" width="1000px"> 239 <el-dialog v-model="show" title="" width="1000px">
237 <div> 240 <div>
238 <img :src="fillImgUrl(showUrl)" alt="" style="width: 100%"> 241 <img :src="fillImgUrl(showUrl)" alt="" style="width: 100%">
...@@ -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) {
...@@ -339,7 +344,7 @@ async function getTicketListType() { ...@@ -339,7 +344,7 @@ async function getTicketListType() {
339 const res = await getActivityTypeVoListByLatsId({ latsId: selectForm.value.latsId }) 344 const res = await getActivityTypeVoListByLatsId({ latsId: selectForm.value.latsId })
340 tickList.value = res.data 345 tickList.value = res.data
341 selectForm.value.sessionType = Object.keys(res.data)[0] 346 selectForm.value.sessionType = Object.keys(res.data)[0]
342 347
343 currTick.value = tickList.value[selectForm.value.sessionType][0] 348 currTick.value = tickList.value[selectForm.value.sessionType][0]
344 selectForm.value.latstId = currTick.value?.id 349 selectForm.value.latstId = currTick.value?.id
345 selectForm.value.price = currTick.value?.price 350 selectForm.value.price = currTick.value?.price
...@@ -354,7 +359,7 @@ function select(v) { ...@@ -354,7 +359,7 @@ function select(v) {
354 selectForm.value.id = null 359 selectForm.value.id = null
355 selectForm.value.price = '--' 360 selectForm.value.price = '--'
356 selectForm.value.priceEn = '--' 361 selectForm.value.priceEn = '--'
357 362
358 getVenueList() 363 getVenueList()
359 } 364 }
360 365
...@@ -366,13 +371,13 @@ function selectVenue(v) { ...@@ -366,13 +371,13 @@ function selectVenue(v) {
366 selectForm.value.id = null 371 selectForm.value.id = null
367 selectForm.value.price = '--' 372 selectForm.value.price = '--'
368 selectForm.value.priceEn = '--' 373 selectForm.value.priceEn = '--'
369 374
370 getTicketListType() 375 getTicketListType()
371 } 376 }
372 377
373 function selectSessionType(key) { 378 function selectSessionType(key) {
374 selectForm.value.sessionType = key 379 selectForm.value.sessionType = key
375 380
376 currTick.value = tickList.value[selectForm.value.sessionType][0] 381 currTick.value = tickList.value[selectForm.value.sessionType][0]
377 selectForm.value.latstId = currTick.value?.id 382 selectForm.value.latstId = currTick.value?.id
378 selectForm.value.price = currTick.value?.price 383 selectForm.value.price = currTick.value?.price
...@@ -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>
...@@ -453,18 +472,17 @@ function toSelectClosed() { ...@@ -453,18 +472,17 @@ function toSelectClosed() {
453 display: flex; 472 display: flex;
454 padding: 19px; 473 padding: 19px;
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;
460 object-fit: fill; 478 object-fit: fill;
461 margin-right: 36px; 479 margin-right: 36px;
462 } 480 }
463 481
464 .info { 482 .info {
465 padding-top: 12px; 483 padding-top: 12px;
466 width: 100%; 484 width: 100%;
467 485
468 .title { 486 .title {
469 font-weight: bold; 487 font-weight: bold;
470 font-size: 28px; 488 font-size: 28px;
...@@ -472,7 +490,7 @@ function toSelectClosed() { ...@@ -472,7 +490,7 @@ function toSelectClosed() {
472 line-height: 1.6; 490 line-height: 1.6;
473 margin-bottom: 15px; 491 margin-bottom: 15px;
474 } 492 }
475 493
476 .time { 494 .time {
477 font-weight: 600; 495 font-weight: 600;
478 font-size: 16px; 496 font-size: 16px;
...@@ -480,7 +498,7 @@ function toSelectClosed() { ...@@ -480,7 +498,7 @@ function toSelectClosed() {
480 line-height: 24px; 498 line-height: 24px;
481 margin-bottom: 16px; 499 margin-bottom: 16px;
482 } 500 }
483 501
484 .address { 502 .address {
485 font-weight: 600; 503 font-weight: 600;
486 font-size: 16px; 504 font-size: 16px;
...@@ -488,15 +506,15 @@ function toSelectClosed() { ...@@ -488,15 +506,15 @@ function toSelectClosed() {
488 line-height: 24px; 506 line-height: 24px;
489 margin-bottom: 15px; 507 margin-bottom: 15px;
490 } 508 }
491 509
492 .select_item_box { 510 .select_item_box {
493 display: flex; 511 display: flex;
494 margin-bottom: 10px; 512 margin-bottom: 10px;
495 513
496 &:last-child { 514 &:last-child {
497 margin-bottom: 0; 515 margin-bottom: 0;
498 } 516 }
499 517
500 .label { 518 .label {
501 font-weight: 600; 519 font-weight: 600;
502 font-size: 16px; 520 font-size: 16px;
...@@ -505,18 +523,18 @@ function toSelectClosed() { ...@@ -505,18 +523,18 @@ function toSelectClosed() {
505 margin-right: 12px; 523 margin-right: 12px;
506 flex-shrink: 0; 524 flex-shrink: 0;
507 } 525 }
508 526
509 .forbid { 527 .forbid {
510 opacity: 0.5 !important; 528 opacity: 0.5 !important;
511 cursor: not-allowed !important; 529 cursor: not-allowed !important;
512 } 530 }
513 531
514 .select_item { 532 .select_item {
515 display: flex; 533 display: flex;
516 flex-wrap: wrap; 534 flex-wrap: wrap;
517 gap: 10px; 535 gap: 10px;
518 user-select: none; 536 user-select: none;
519 537
520 .tag_t { 538 .tag_t {
521 padding: 1px 15px; 539 padding: 1px 15px;
522 font-weight: 400; 540 font-weight: 400;
...@@ -526,7 +544,7 @@ function toSelectClosed() { ...@@ -526,7 +544,7 @@ function toSelectClosed() {
526 border: 1px solid #453dea; 544 border: 1px solid #453dea;
527 margin-left: 5px; 545 margin-left: 5px;
528 } 546 }
529 547
530 .tag { 548 .tag {
531 display: flex; 549 display: flex;
532 padding: 12px 18px; 550 padding: 12px 18px;
...@@ -537,7 +555,7 @@ function toSelectClosed() { ...@@ -537,7 +555,7 @@ function toSelectClosed() {
537 color: #4a4a4a; 555 color: #4a4a4a;
538 cursor: pointer; 556 cursor: pointer;
539 } 557 }
540 558
541 .tagActive { 559 .tagActive {
542 display: flex; 560 display: flex;
543 padding: 12px 18px; 561 padding: 12px 18px;
...@@ -548,14 +566,14 @@ function toSelectClosed() { ...@@ -548,14 +566,14 @@ function toSelectClosed() {
548 color: #493ceb; 566 color: #493ceb;
549 cursor: pointer; 567 cursor: pointer;
550 } 568 }
551 569
552 .tao { 570 .tao {
553 border: 1px solid #493ceb; 571 border: 1px solid #493ceb;
554 font-size: 14px; 572 font-size: 14px;
555 color: #493ceb; 573 color: #493ceb;
556 margin-left: 10px; 574 margin-left: 10px;
557 } 575 }
558 576
559 .tagDisabled { 577 .tagDisabled {
560 padding: 12px 18px; 578 padding: 12px 18px;
561 background: #878787; 579 background: #878787;
...@@ -567,7 +585,7 @@ function toSelectClosed() { ...@@ -567,7 +585,7 @@ function toSelectClosed() {
567 } 585 }
568 } 586 }
569 } 587 }
570 588
571 .btn { 589 .btn {
572 width: 175px; 590 width: 175px;
573 height: 40px; 591 height: 40px;
...@@ -587,7 +605,7 @@ function toSelectClosed() { ...@@ -587,7 +605,7 @@ function toSelectClosed() {
587 padding: 50px; 605 padding: 50px;
588 margin-top: 30px; 606 margin-top: 30px;
589 margin-bottom: 30px; 607 margin-bottom: 30px;
590 608
591 .title { 609 .title {
592 padding: 20px 30px; 610 padding: 20px 30px;
593 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%); 611 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
...@@ -597,15 +615,15 @@ function toSelectClosed() { ...@@ -597,15 +615,15 @@ function toSelectClosed() {
597 line-height: 30px; 615 line-height: 30px;
598 margin-bottom: 30px; 616 margin-bottom: 30px;
599 } 617 }
600 618
601 .rich_content { 619 .rich_content {
602 margin-top: 30px; 620 margin-top: 30px;
603 621
604 :deep(img) { 622 :deep(img) {
605 width: 100% !important; 623 width: 100% !important;
606 height: auto !important; 624 height: auto !important;
607 } 625 }
608 626
609 } 627 }
610 } 628 }
611 629
...@@ -623,44 +641,44 @@ function toSelectClosed() { ...@@ -623,44 +641,44 @@ function toSelectClosed() {
623 height: 160px; 641 height: 160px;
624 margin-right: 15px; 642 margin-right: 15px;
625 } 643 }
626 644
627 .info { 645 .info {
628 padding: 0; 646 padding: 0;
629 647
630 .title { 648 .title {
631 font-size: 14px; 649 font-size: 14px;
632 margin: 0; 650 margin: 0;
633 } 651 }
634 652
635 .time, .address, .label, .tip { 653 .time, .address, .label, .tip {
636 font-size: 12px; 654 font-size: 12px;
637 } 655 }
638 656
639 .title, .time, .address, .tip, .select_item_box { 657 .title, .time, .address, .tip, .select_item_box {
640 margin-bottom: 3px; 658 margin-bottom: 3px;
641 } 659 }
642 660
643 .select_item_box { 661 .select_item_box {
644 .label { 662 .label {
645 font-size: 12px; 663 font-size: 12px;
646 } 664 }
647 665
648 .select_item .tag { 666 .select_item .tag {
649 padding: 2px 10px; 667 padding: 2px 10px;
650 font-size: 12px; 668 font-size: 12px;
651 } 669 }
652 670
653 .select_item .tagActive { 671 .select_item .tagActive {
654 padding: 2px 10px; 672 padding: 2px 10px;
655 font-size: 12px; 673 font-size: 12px;
656 } 674 }
657 675
658 .select_item .tagDisabled { 676 .select_item .tagDisabled {
659 padding: 2px 10px; 677 padding: 2px 10px;
660 font-size: 12px; 678 font-size: 12px;
661 } 679 }
662 } 680 }
663 681
664 .btn { 682 .btn {
665 display: inline-block; 683 display: inline-block;
666 margin: 10px 0 0; 684 margin: 10px 0 0;
...@@ -678,8 +696,8 @@ function toSelectClosed() { ...@@ -678,8 +696,8 @@ function toSelectClosed() {
678 .bottom { 696 .bottom {
679 padding: 0 697 padding: 0
680 } 698 }
681 699
682 700
683 } 701 }
684 702
685 .countDownTitle { 703 .countDownTitle {
......
...@@ -81,8 +81,8 @@ export default defineConfig(({ mode, command }) => { ...@@ -81,8 +81,8 @@ export default defineConfig(({ mode, command }) => {
81 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') 81 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
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,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!