Skip to content

杨炀 / dance-pc

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

H5适配

1 parent 514607a8
Inline Side-by-side
Showing 5 changed files with 515 additions and 421 deletions
src/viewsPc/booking/pay.vue
...@@ -469,11 +469,11 @@ ...@@ -469,11 +469,11 @@
469 <div v-if="payType == '2'&&wePayCodeUrl"> 469 <div v-if="payType == '2'&&wePayCodeUrl">
470 <div class="payImgbox flexCenter"> 470 <div class="payImgbox flexCenter">
471 <div> 471 <div>
472 <img :src="wePayCodeUrl" class="border" width="260"> 472 <img :src="wePayCodeUrl" class="border payImg1" width="260">
473 <img class="mt20" src="@/assets/img/sm.png"> 473 <img class="mt20 payImg2" src="@/assets/img/sm.png">
474 </div> 474 </div>
475 <div class="ml20"> 475 <div class="ml20">
476 <img height="360" src="@/assets/img/rr.jpg"> 476 <img class="payImg3" height="360" src="@/assets/img/rr.jpg">
477 </div> 477 </div>
478 </div> 478 </div>
479 <div v-if="language==0" class="tip text-center text-danger"> 479 <div v-if="language==0" class="tip text-center text-danger">
...@@ -1161,4 +1161,24 @@ const showSJ = () => { ...@@ -1161,4 +1161,24 @@ const showSJ = () => {
1161 .price { 1161 .price {
1162 color: orange; 1162 color: orange;
1163 } 1163 }
1164
1165
1166 @media screen and (max-width: 768px) {
1167 .payImgbox {
1168 width: 100%;
1169
1170 .payImg1 {
1171 width: 40vw;
1172 }
1173
1174 .payImg2 {
1175 width: 40vw;
1176 }
1177
1178 .payImg3 {
1179 width: 40vw;
1180 height: auto;
1181 }
1182 }
1183 }
1164 </style> 1184 </style>
......
src/viewsPc/booking/ticket/addInvoice.vue
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 <div> 22 <div>
23 <p>票档：{{ ticketForm.extJson?.atName }}</p> 23 <p>票档：{{ ticketForm.extJson?.atName }}</p>
24 <p>场馆：{{ ticketForm.extJson?.atsName }}</p> 24 <p>场馆：{{ ticketForm.extJson?.atsName }}</p>
25 <p>场次：{{ ticketForm.extJson?.sessionType =='1000'? '日间场' : '夜间场' }}</p> 25 <p>场次：{{ ticketForm.extJson?.sessionType == '1000' ? '日间场' : '夜间场' }}</p>
26 <p>票型：{{ ticketForm.extJson?.atstName }}</p> 26 <p>票型：{{ ticketForm.extJson?.atstName }}</p>
27 </div> 27 </div>
28 <div> 28 <div>
...@@ -34,14 +34,14 @@ ...@@ -34,14 +34,14 @@
34 <el-col :lg="8" :md="12" :sm="12" :xs="24">联系方式：{{ ticketForm.phone }} 34 <el-col :lg="8" :md="12" :sm="12" :xs="24">联系方式：{{ ticketForm.phone }}
35 </el-col> 35 </el-col>
36 <el-col :lg="8" :md="12" :sm="12" :xs="24"> 36 <el-col :lg="8" :md="12" :sm="12" :xs="24">
37 共计:{{ (totalMoney*1).toFixed(2) }}{{ 37 共计:{{ (totalMoney * 1).toFixed(2) }}{{
38 paymentType == 1 ? '￥' : '€' 38 paymentType == 1 ? '￥' : '€'
39 }} 39 }}
40 </el-col> 40 </el-col>
41 </el-row> 41 </el-row>
42 </div> 42 </div>
43 </div> 43 </div>
44 44
45 <div class="leftboderTT"> 45 <div class="leftboderTT">
46 {{ paymentType != 3 ? '开票信息' : 'Invoice information' }} 46 {{ paymentType != 3 ? '开票信息' : 'Invoice information' }}
47 </div> 47 </div>
...@@ -51,15 +51,17 @@ ...@@ -51,15 +51,17 @@
51 class="mw500" 51 class="mw500"
52 > 52 >
53 <el-form-item :label="language==0 ?'开票金额':'Amount'"> 53 <el-form-item :label="language==0 ?'开票金额':'Amount'">
54 <span class="bigprice">{{ paymentType != 3 ? '¥' : '€' }}{{ paymentType != 3?ticketForm.total:ticketForm.totalEn }}</span> 54 <span class="bigprice">{{
55 paymentType != 3 ? '¥' : '€'
56 }}{{ paymentType != 3 ? ticketForm.total : ticketForm.totalEn }}</span>
55 </el-form-item> 57 </el-form-item>
56 58
57 <el-form-item :label="language==0 ?`发票形式`:'Invoice Form'" prop="invoiceForm" required> 59 <el-form-item :label="language==0 ?`发票形式`:'Invoice Form'" prop="invoiceForm" required>
58 <el-radio-group v-model="form.invoiceForm"> 60 <el-radio-group v-model="form.invoiceForm">
59 <el-radio value="1">{{ language == 0 ? '电子发票' : 'E-invoice' }}</el-radio> 61 <el-radio value="1">{{ language == 0 ? '电子发票' : 'E-invoice' }}</el-radio>
60 </el-radio-group> 62 </el-radio-group>
61 </el-form-item> 63 </el-form-item>
62 64
63 <el-form-item :label="language==0 ?`发票类型`:'Invoice Type'" prop="invoiceType" required> 65 <el-form-item :label="language==0 ?`发票类型`:'Invoice Type'" prop="invoiceType" required>
64 <el-radio-group v-model="form.invoiceType"> 66 <el-radio-group v-model="form.invoiceType">
65 <el-radio value="0">{{ language == 0 ? '企业' : 'Company' }}</el-radio> 67 <el-radio value="0">{{ language == 0 ? '企业' : 'Company' }}</el-radio>
...@@ -101,7 +103,7 @@ ...@@ -101,7 +103,7 @@
101 </el-form-item> 103 </el-form-item>
102 </div> 104 </div>
103 </el-form> 105 </el-form>
104 106
105 <div v-if="remark" class="tip"> 107 <div v-if="remark" class="tip">
106 <label>{{ paymentType != 3 ? '开票须知' : 'Invoice Notice' }}:</label> 108 <label>{{ paymentType != 3 ? '开票须知' : 'Invoice Notice' }}:</label>
107 <div v-html="remark" /> 109 <div v-html="remark" />
...@@ -109,7 +111,7 @@ ...@@ -109,7 +111,7 @@
109 </div> 111 </div>
110 </el-col> 112 </el-col>
111 </el-row> 113 </el-row>
112 114
113 <el-row align="middle" class="pd20" justify="center"> 115 <el-row align="middle" class="pd20" justify="center">
114 <el-col :span="12" class="text-center"> 116 <el-col :span="12" class="text-center">
115 <el-button class="btn-lineG w200px" round size="large" type="primary" @click="submit"> 117 <el-button class="btn-lineG w200px" round size="large" type="primary" @click="submit">
...@@ -119,7 +121,7 @@ ...@@ -119,7 +121,7 @@
119 </el-row> 121 </el-row>
120 </el-card> 122 </el-card>
121 <div style="height: 60px;" /> 123 <div style="height: 60px;" />
122 124
123 </div> 125 </div>
124 </div> 126 </div>
125 <address-list-dialog ref="dialogAddressListRef" @submit="getAddress" /> 127 <address-list-dialog ref="dialogAddressListRef" @submit="getAddress" />
...@@ -224,13 +226,13 @@ async function getTickInfo() { ...@@ -224,13 +226,13 @@ async function getTickInfo() {
224 // message.value = JSON.parse(ticketForm.value.extJson.message) 226 // message.value = JSON.parse(ticketForm.value.extJson.message)
225 // console.log(message.value) 227 // console.log(message.value)
226 paymentType.value = ticketForm.value.paymentType 228 paymentType.value = ticketForm.value.paymentType
227 229
228 await getDetail(ticketForm.value.activeId) 230 await getDetail(ticketForm.value.activeId)
229 // console.log(ticketForm.value) 231 // console.log(ticketForm.value)
230 } catch (e) { 232 } catch (e) {
231 console.log(e) 233 console.log(e)
232 } finally { 234 } finally {
233 235
234 } 236 }
235 } 237 }
236 238
...@@ -339,7 +341,7 @@ function goBack() { ...@@ -339,7 +341,7 @@ function goBack() {
339 341
340 .border-info { 342 .border-info {
341 position: relative; 343 position: relative;
342 344
343 & > label { 345 & > label {
344 position: absolute; 346 position: absolute;
345 right: 0; 347 right: 0;
...@@ -349,7 +351,7 @@ function goBack() { ...@@ -349,7 +351,7 @@ function goBack() {
349 padding: 5px 15px; 351 padding: 5px 15px;
350 font-size: 14px; 352 font-size: 14px;
351 } 353 }
352 354
353 .poPrice { 355 .poPrice {
354 position: absolute; 356 position: absolute;
355 bottom: 0px; 357 bottom: 0px;
...@@ -404,12 +406,12 @@ function goBack() { ...@@ -404,12 +406,12 @@ function goBack() {
404 406
405 .ccitemBox { 407 .ccitemBox {
406 overflow: auto; 408 overflow: auto;
407 409
408 label { 410 label {
409 margin: 10px 0; 411 margin: 10px 0;
410 display: block; 412 display: block;
411 min-height: 30px; 413 min-height: 30px;
412 414
413 span { 415 span {
414 color: #FF8124; 416 color: #FF8124;
415 font-family: DIN Alternate; 417 font-family: DIN Alternate;
...@@ -424,12 +426,12 @@ function goBack() { ...@@ -424,12 +426,12 @@ function goBack() {
424 font-size: 15px; 426 font-size: 15px;
425 color: #666; 427 color: #666;
426 margin: 5px 0 10px; 428 margin: 5px 0 10px;
427 429
428 label { 430 label {
429 font-size: 16px; 431 font-size: 16px;
430 color: #000; 432 color: #000;
431 } 433 }
432 434
433 span { 435 span {
434 font-size: 13px; 436 font-size: 13px;
435 } 437 }
...@@ -475,4 +477,5 @@ function goBack() { ...@@ -475,4 +477,5 @@ function goBack() {
475 line-height: 1; 477 line-height: 1;
476 font-family: "DIN Alternate"; 478 font-family: "DIN Alternate";
477 } 479 }
480
478 </style> 481 </style>
......
src/viewsPc/booking/ticket/confirmOrder.vue
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
12 <div class="name">{{ TickForm.name }}</div> 12 <div class="name">{{ TickForm.name }}</div>
13 <div class="address">{{ TickForm.address }}</div> 13 <div class="address">{{ TickForm.address }}</div>
14 </div> 14 </div>
15 15
16 16
17 <div class="ticket_info mb20"> 17 <div class="ticket_info mb20">
18 <div class="tit_box"> 18 <div class="tit_box">
19 <div class="line" /> 19 <div class="line" />
...@@ -21,12 +21,12 @@ ...@@ -21,12 +21,12 @@
21 {{ languageFormat(language, "订票信息", "Ticket Info") }} 21 {{ languageFormat(language, "订票信息", "Ticket Info") }}
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <div class="form"> 25 <div class="form">
26 <el-form ref="formRef" :model="orderForm" :rules="rules" label-width="140px"> 26 <el-form ref="formRef" :model="orderForm" :rules="rules" label-position="top" label-width="130px">
27 <div v-if="TickForm2.ticketType == '1'"> 27 <div v-if="TickForm2.ticketType == '1'">
28 <el-form-item :label="language == 0 ? '桌号' : 'Table'"> 28 <el-form-item :label="language == 0 ? '桌号' : 'Table'">
29 29
30 <!-- <el-popover :width="400" placement="right" trigger="hover">--> 30 <!-- <el-popover :width="400" placement="right" trigger="hover">-->
31 <!-- <template #reference>--> 31 <!-- <template #reference>-->
32 <!-- <div class="text-primary underline pointer" @click="showImg">--> 32 <!-- <div class="text-primary underline pointer" @click="showImg">-->
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
39 <!-- />--> 39 <!-- />-->
40 <!-- </el-popover>--> 40 <!-- </el-popover>-->
41 <!-- --> 41 <!-- -->
42 42
43 <el-radio-group v-model="currDesk"> 43 <el-radio-group v-model="currDesk">
44 <el-radio-button 44 <el-radio-button
45 v-for="(it, index) in deskList" :key="index" :disabled="it.status!=0" :label="it.deskNo" 45 v-for="(it, index) in deskList" :key="index" :disabled="it.status!=0" :label="it.deskNo"
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
105 </div> 105 </div>
106 </div> 106 </div>
107 </el-col> 107 </el-col>
108 108
109 <el-col :lg="8" class="right"> 109 <el-col :lg="8" class="right">
110 <div class="tit_box"> 110 <div class="tit_box">
111 <div class="line" /> 111 <div class="line" />
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
113 {{ languageFormat(language, "订单明细", "Order summary") }} 113 {{ languageFormat(language, "订单明细", "Order summary") }}
114 </div> 114 </div>
115 </div> 115 </div>
116 116
117 <div class="detail"> 117 <div class="detail">
118 <div class="detail_top"> 118 <div class="detail_top">
119 <div class="time"> 119 <div class="time">
...@@ -148,14 +148,14 @@ ...@@ -148,14 +148,14 @@
148 <span v-else>{{ language == 0 ? '夜间场' : 'Night' }}</span> 148 <span v-else>{{ language == 0 ? '夜间场' : 'Night' }}</span>
149 ｜ {{ TickForm2.ticketName }} 149 ｜ {{ TickForm2.ticketName }}
150 </div> 150 </div>
151 151
152 <div v-if="TickForm2.ticketType=='0'" class="address">{{ 152 <div v-if="TickForm2.ticketType=='0'" class="address">{{
153 language == 0 ? '剩余数量' : 'Remaining Quantity' 153 language == 0 ? '剩余数量' : 'Remaining Quantity'
154 }}： {{ leftCount }} 154 }}： {{ leftCount }}
155 </div> 155 </div>
156 </div> 156 </div>
157 </div> 157 </div>
158 158
159 <!-- 场馆布局图--> 159 <!-- 场馆布局图-->
160 <div style="margin-top: 30px"> 160 <div style="margin-top: 30px">
161 <el-image 161 <el-image
...@@ -256,7 +256,7 @@ onMounted(() => { ...@@ -256,7 +256,7 @@ onMounted(() => {
256 tickImg.value = route.query.tickImg 256 tickImg.value = route.query.tickImg
257 customerList() 257 customerList()
258 getDetail() 258 getDetail()
259 259
260 getActivityTypeVoById({ 260 getActivityTypeVoById({
261 id: route.params.latstId 261 id: route.params.latstId
262 }).then((res) => { 262 }).then((res) => {
...@@ -292,12 +292,12 @@ function changeGroup(e) { ...@@ -292,12 +292,12 @@ function changeGroup(e) {
292 }).then(res => { 292 }).then(res => {
293 if (res.data.length > 0) { 293 if (res.data.length > 0) {
294 const names = _.map(res.data, (d) => d.name).join(',') 294 const names = _.map(res.data, (d) => d.name).join(',')
295 295
296 ElMessage({ 296 ElMessage({
297 message: language.value == 0 ? `${names} 已购买该票` : 'The user has purchased the ticket', 297 message: language.value == 0 ? `${names} 已购买该票` : 'The user has purchased the ticket',
298 type: 'error' 298 type: 'error'
299 }) 299 })
300 300
301 _.each(res.data, (d) => { 301 _.each(res.data, (d) => {
302 _.remove(orderForm.value.customerIds, (c) => c == d.id) 302 _.remove(orderForm.value.customerIds, (c) => c == d.id)
303 _.find(personnelList.value, (p) => p.id == d.id).disabled = true 303 _.find(personnelList.value, (p) => p.id == d.id).disabled = true
...@@ -319,7 +319,7 @@ async function paymentHandle() { ...@@ -319,7 +319,7 @@ async function paymentHandle() {
319 useStore.setVisitor() 319 useStore.setVisitor()
320 return 320 return
321 } 321 }
322 322
323 if (TickForm2.value.ticketType == '1') { 323 if (TickForm2.value.ticketType == '1') {
324 if (currSeat.value.length == 0) { 324 if (currSeat.value.length == 0) {
325 ElMessage({ 325 ElMessage({
...@@ -336,9 +336,9 @@ async function paymentHandle() { ...@@ -336,9 +336,9 @@ async function paymentHandle() {
336 return 336 return
337 } 337 }
338 } 338 }
339 339
340 await formRef.value.validate() 340 await formRef.value.validate()
341 341
342 await ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', { 342 await ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
343 confirmButtonText: language.value == 0 ? '确定' : 'Confirm', 343 confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
344 cancelButtonText: language.value == 0 ? '取消' : 'Cancel', 344 cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
...@@ -359,7 +359,7 @@ async function paymentHandle() { ...@@ -359,7 +359,7 @@ async function paymentHandle() {
359 seatNo: tempSeat.seatNo 359 seatNo: tempSeat.seatNo
360 }) 360 })
361 }) 361 })
362 362
363 const res = await submitOrderTicket({ 363 const res = await submitOrderTicket({
364 activeId: orderForm.value.activeId, 364 activeId: orderForm.value.activeId,
365 orderName: TickForm2.value.ticketTypeName, 365 orderName: TickForm2.value.ticketTypeName,
...@@ -406,7 +406,7 @@ async function paymentHandle() { ...@@ -406,7 +406,7 @@ async function paymentHandle() {
406 } catch (e) { 406 } catch (e) {
407 ElMessage.error(language.value == 0 ? '下单失败,' : 'Order failure') 407 ElMessage.error(language.value == 0 ? '下单失败,' : 'Order failure')
408 } finally { 408 } finally {
409 409
410 } 410 }
411 }) 411 })
412 } 412 }
...@@ -450,7 +450,7 @@ div { ...@@ -450,7 +450,7 @@ div {
450 //padding: 20px 0; 450 //padding: 20px 0;
451 width: 1200px; 451 width: 1200px;
452 margin: 20px auto; 452 margin: 20px auto;
453 453
454 .tag_t { 454 .tag_t {
455 padding: 1px 10px; 455 padding: 1px 10px;
456 font-weight: 400; 456 font-weight: 400;
...@@ -460,7 +460,7 @@ div { ...@@ -460,7 +460,7 @@ div {
460 border: 1px solid #453dea; 460 border: 1px solid #453dea;
461 margin-left: 5px; 461 margin-left: 5px;
462 } 462 }
463 463
464 .title { 464 .title {
465 padding: 11px; 465 padding: 11px;
466 text-align: center; 466 text-align: center;
...@@ -468,18 +468,18 @@ div { ...@@ -468,18 +468,18 @@ div {
468 font-size: 18px; 468 font-size: 18px;
469 color: #ffffff; 469 color: #ffffff;
470 } 470 }
471 471
472 .content { 472 .content {
473 background-color: #fff; 473 background-color: #fff;
474 } 474 }
475 475
476 .line { 476 .line {
477 width: 4px; 477 width: 4px;
478 height: 18px; 478 height: 18px;
479 background: linear-gradient(180deg, #493ceb 0%, #8623fc 100%); 479 background: linear-gradient(180deg, #493ceb 0%, #8623fc 100%);
480 border-radius: 4px; 480 border-radius: 4px;
481 } 481 }
482 482
483 .left { 483 .left {
484 .info { 484 .info {
485 background: rgba(69, 61, 234, 0.04); 485 background: rgba(69, 61, 234, 0.04);
...@@ -487,54 +487,54 @@ div { ...@@ -487,54 +487,54 @@ div {
487 border: 1px solid #d3d1f6; 487 border: 1px solid #d3d1f6;
488 padding: 20px 0 28px 33px; 488 padding: 20px 0 28px 33px;
489 margin-bottom: 20px; 489 margin-bottom: 20px;
490 490
491 .name { 491 .name {
492 font-weight: 500; 492 font-weight: 500;
493 font-size: 18px; 493 font-size: 18px;
494 color: #000000; 494 color: #000000;
495 margin-bottom: 20px; 495 margin-bottom: 20px;
496 } 496 }
497 497
498 .address { 498 .address {
499 font-weight: 400; 499 font-weight: 400;
500 font-size: 14px; 500 font-size: 14px;
501 color: #929aa0; 501 color: #929aa0;
502 } 502 }
503 } 503 }
504 504
505 .ticket_info { 505 .ticket_info {
506 .tit_box { 506 .tit_box {
507 display: flex; 507 display: flex;
508 align-items: center; 508 align-items: center;
509 gap: 10px; 509 gap: 10px;
510 margin-bottom: 14px; 510 margin-bottom: 14px;
511 511
512 .txt { 512 .txt {
513 font-weight: bold; 513 font-weight: bold;
514 font-size: 16px; 514 font-size: 16px;
515 color: #493ceb; 515 color: #493ceb;
516 } 516 }
517 } 517 }
518 518
519 .form { 519 .form {
520 min-height: 464px; 520 min-height: 464px;
521 padding: 20px 60px; 521 padding: 20px 60px;
522 border-radius: 5px; 522 border-radius: 5px;
523 border: 1px solid #dcdfe6; 523 border: 1px solid #dcdfe6;
524 524
525 .p_box { 525 .p_box {
526 display: flex; 526 display: flex;
527 width: 100%; 527 width: 100%;
528 gap: 10px; 528 gap: 10px;
529 max-width: 400px; 529 max-width: 400px;
530 530
531 .people { 531 .people {
532 width: 100%; 532 width: 100%;
533 background: #fbfcfd; 533 background: #fbfcfd;
534 border-radius: 2px; 534 border-radius: 2px;
535 border: 1px solid #dcdfe6; 535 border: 1px solid #dcdfe6;
536 padding: 0 14px; 536 padding: 0 14px;
537 537
538 .prople_item { 538 .prople_item {
539 display: flex; 539 display: flex;
540 justify-content: space-between; 540 justify-content: space-between;
...@@ -543,30 +543,30 @@ div { ...@@ -543,30 +543,30 @@ div {
543 border-bottom: 1px solid #dcdfe6; 543 border-bottom: 1px solid #dcdfe6;
544 width: 100%; 544 width: 100%;
545 position: relative; 545 position: relative;
546 546
547 &:last-child { 547 &:last-child {
548 border: none; 548 border: none;
549 } 549 }
550 550
551 .name { 551 .name {
552 font-size: 16px; 552 font-size: 16px;
553 //color: #929aa0; 553 //color: #929aa0;
554 margin-bottom: 20px; 554 margin-bottom: 20px;
555 555
556 .tag_t { 556 .tag_t {
557 position: absolute; 557 position: absolute;
558 right: 30px; 558 right: 30px;
559 padding: 8px; 559 padding: 8px;
560 } 560 }
561 } 561 }
562 562
563 .idcard { 563 .idcard {
564 font-size: 10px; 564 font-size: 10px;
565 color: #929aa0; 565 color: #929aa0;
566 } 566 }
567 } 567 }
568 } 568 }
569 569
570 .btn { 570 .btn {
571 width: 90px; 571 width: 90px;
572 height: 40px; 572 height: 40px;
...@@ -585,30 +585,30 @@ div { ...@@ -585,30 +585,30 @@ div {
585 } 585 }
586 } 586 }
587 } 587 }
588 588
589 .right { 589 .right {
590 .tit_box { 590 .tit_box {
591 display: flex; 591 display: flex;
592 align-items: center; 592 align-items: center;
593 gap: 10px; 593 gap: 10px;
594 margin-bottom: 20px; 594 margin-bottom: 20px;
595 595
596 .txt { 596 .txt {
597 font-weight: bold; 597 font-weight: bold;
598 font-size: 16px; 598 font-size: 16px;
599 color: #493ceb; 599 color: #493ceb;
600 } 600 }
601 } 601 }
602 602
603 .detail { 603 .detail {
604 padding: 15px 26px; 604 padding: 15px 26px;
605 border-radius: 5px; 605 border-radius: 5px;
606 border: 1px solid #dcdfe6; 606 border: 1px solid #dcdfe6;
607 607
608 .detail_top { 608 .detail_top {
609 padding-bottom: 13px; 609 padding-bottom: 13px;
610 border-bottom: 1px solid #dcdfe6; 610 border-bottom: 1px solid #dcdfe6;
611 611
612 .time { 612 .time {
613 font-weight: 500; 613 font-weight: 500;
614 font-size: 20px; 614 font-size: 20px;
...@@ -616,13 +616,13 @@ div { ...@@ -616,13 +616,13 @@ div {
616 line-height: 25px; 616 line-height: 25px;
617 margin-bottom: 8px; 617 margin-bottom: 8px;
618 } 618 }
619 619
620 .ticket { 620 .ticket {
621 font-size: 16px; 621 font-size: 16px;
622 color: #2d373f; 622 color: #2d373f;
623 } 623 }
624 } 624 }
625 625
626 .detail_center { 626 .detail_center {
627 margin-top: 14px; 627 margin-top: 14px;
628 display: flex; 628 display: flex;
...@@ -630,26 +630,26 @@ div { ...@@ -630,26 +630,26 @@ div {
630 padding-bottom: 13px; 630 padding-bottom: 13px;
631 border-bottom: 1px solid #dcdfe6; 631 border-bottom: 1px solid #dcdfe6;
632 gap: 8px; 632 gap: 8px;
633 633
634 .ticket { 634 .ticket {
635 font-size: 16px; 635 font-size: 16px;
636 color: #2d373f; 636 color: #2d373f;
637 } 637 }
638 } 638 }
639 639
640 .detail_b { 640 .detail_b {
641 display: flex; 641 display: flex;
642 justify-content: space-between; 642 justify-content: space-between;
643 align-items: center; 643 align-items: center;
644 margin-top: 16px; 644 margin-top: 16px;
645 645
646 .sum_txt { 646 .sum_txt {
647 font-weight: 600; 647 font-weight: 600;
648 font-size: 18px; 648 font-size: 18px;
649 color: #2d373f; 649 color: #2d373f;
650 line-height: 25px; 650 line-height: 25px;
651 } 651 }
652 652
653 .price_num { 653 .price_num {
654 font-weight: 600; 654 font-weight: 600;
655 font-size: 36px; 655 font-size: 36px;
...@@ -659,7 +659,7 @@ div { ...@@ -659,7 +659,7 @@ div {
659 } 659 }
660 } 660 }
661 } 661 }
662 662
663 .footer { 663 .footer {
664 display: flex; 664 display: flex;
665 justify-content: space-between; 665 justify-content: space-between;
...@@ -669,20 +669,20 @@ div { ...@@ -669,20 +669,20 @@ div {
669 box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08); 669 box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
670 margin-top: 9px; 670 margin-top: 9px;
671 padding: 0 30px; 671 padding: 0 30px;
672 672
673 .label { 673 .label {
674 font-size: 16px; 674 font-size: 16px;
675 color: #7b7f83; 675 color: #7b7f83;
676 line-height: 22px; 676 line-height: 22px;
677 } 677 }
678 678
679 .value { 679 .value {
680 font-size: 22px; 680 font-size: 22px;
681 color: #ff8124; 681 color: #ff8124;
682 line-height: 30px; 682 line-height: 30px;
683 font-weight: 600; 683 font-weight: 600;
684 } 684 }
685 685
686 .pay { 686 .pay {
687 width: 200px; 687 width: 200px;
688 height: 40px; 688 height: 40px;
...@@ -696,7 +696,7 @@ div { ...@@ -696,7 +696,7 @@ div {
696 cursor: pointer; 696 cursor: pointer;
697 user-select: none; 697 user-select: none;
698 } 698 }
699 699
700 .goBack { 700 .goBack {
701 width: 200px; 701 width: 200px;
702 height: 40px; 702 height: 40px;
...@@ -725,12 +725,6 @@ div { ...@@ -725,12 +725,6 @@ div {
725 cursor: pointer 725 cursor: pointer
726 } 726 }
727 727
728 @media screen and (max-width: 768px) {
729 .container {
730 width: 100%;
731 }
732 }
733
734 .rightBox { 728 .rightBox {
735 .info { 729 .info {
736 background: rgba(69, 61, 234, 0.04); 730 background: rgba(69, 61, 234, 0.04);
...@@ -741,4 +735,49 @@ div { ...@@ -741,4 +735,49 @@ div {
741 margin-top: 30px; 735 margin-top: 30px;
742 } 736 }
743 } 737 }
738
739 @media screen and (max-width: 768px) {
740 .container {
741 width: 100%;
742
743 :deep(.form) {
744 padding: 30px 0 !important;
745
746 form {
747 padding: 10px;
748 }
749 }
750
751 .footer {
752 display: block;
753 width: 100%;
754 height: auto;
755 padding: 20px;
756
757 div {
758 width: 100%;
759 }
760
761 .goBack {
762 width: 140px;
763 position: relative;
764 height: 40px;
765 top: 0;
766 left: 0%;
767 margin: 10px 0;
768 }
769
770 .pay {
771 width: 140px;
772 position: relative;
773 height: 40px;
774 top: -50px;
775 left: 55%;
776 }
777 }
778
779 }
780
781
782 }
744 </style> 783 </style>
......
src/viewsPc/booking/ticket/index.vue
...@@ -2,237 +2,245 @@ ...@@ -2,237 +2,245 @@
2 <div> 2 <div>
3 <!-- top --> 3 <!-- top -->
4 <div class="container top "> 4 <div class="container top ">
5 <img :src="fillImgUrl(matchForm.ticketImg)" alt="" class="cover_img"> 5 <el-row :gutter="20" style="width: 100%">
6 <div class="info"> 6 <el-col :lg="12" :md="12" :sm="24" :xs="24">
7 <div class="title">{{ matchForm.name }}</div> 7 <img :src="fillImgUrl(matchForm.ticketImg)" alt="" class="cover_img">
8 <div class="time"> 8 </el-col>
9 {{ triggerLanguage(language, "时间", "Event Date & Time") }}：{{ 9 <el-col :lg="12" :md="12" :sm="24" :xs="24">
10 matchForm.beginTime 10 <div class="info">
11 ? dayjs(matchForm.beginTime).format("YYYY.MM.DD") 11 <div class="title">{{ matchForm.name }}</div>
12 : "" 12 <div class="time">
13 }} 13 {{ triggerLanguage(language, "时间", "Event Date & Time") }}：{{
14 {{ 14 matchForm.beginTime
15 matchForm.beginTime 15 ? dayjs(matchForm.beginTime).format("YYYY.MM.DD")
16 ? getDayName( 16 : ""
17 new Date(matchForm.beginTime), 17 }}
18 language == 1 ? "en-US" : "zh-CN" 18 {{
19 ) 19 matchForm.beginTime
20 : "" 20 ? getDayName(
21 }} 21 new Date(matchForm.beginTime),
22 — 22 language == 1 ? "en-US" : "zh-CN"
23 {{ 23 )
24 matchForm.endTime 24 : ""
25 ? dayjs(matchForm.endTime).format("YYYY.MM.DD") 25 }}
26 : "" 26 —
27 }} 27 {{
28 {{ 28 matchForm.endTime
29 matchForm.endTime 29 ? dayjs(matchForm.endTime).format("YYYY.MM.DD")
30 ? getDayName( 30 : ""
31 new Date(matchForm.endTime), 31 }}
32 language == 1 ? "en-US" : "zh-CN" 32 {{
33 ) 33 matchForm.endTime
34 : "" 34 ? getDayName(
35 }} 35 new Date(matchForm.endTime),
36 </div> 36 language == 1 ? "en-US" : "zh-CN"
37 <div class="address"> 37 )
38 {{ triggerLanguage(language, "地址", "Location") }}：{{ matchForm.address }} 38 : ""
39 </div> 39 }}
40
41
42 <div v-if="timeData>0">
43 <!-- 倒计时-->
44
45 <p class="countDownTitle">
46 <span v-if="language==0">售票倒计时</span>
47 <span v-else>TICKET COUNTDOWN</span>
48 </p>
49 <van-count-down :time="timeData" format="DD 天 HH 时 mm 分 ss 秒">
50 <template #default="timeData">
51 <span class="block">{{ timeData.days }}</span>
52 <span class="colon">{{ language == 0 ? '天' : 'Days' }}</span>
53 <span class="block">{{ timeData.hours }}</span>
54 <span class="colon">{{ language == 0 ? '时' : 'Hrs' }}</span>
55 <span class="block">{{ timeData.minutes }}</span>
56 <span class="colon">{{ language == 0 ? '分' : 'Min' }}</span>
57 <span class="block">{{ timeData.seconds }}</span>
58 <span class="colon">{{ language == 0 ? '秒' : 'Sec' }}</span>
59 </template>
60 </van-count-down>
61 </div>
62 <div v-else>
63
64 <!-- 票档 -->
65 <div class="select_item_box">
66 <div class="label">
67 {{ triggerLanguage(language, "票档", "Tickets") }} :
68 </div>
69 </div>
70 <div class="select_item_box">
71 <div class="select_item">
72 <div
73 v-for="(it, index) in tickClass"
74 :key="index"
75 :class="[
76 it.id == selectForm.latId ? 'tagActive' : 'tag',
77 it.overdueView=='0' ? 'forbid' : '',
78 (it.ticketPackage==1 && overdueView=='0') ?'forbid':''
79 ]"
80 @click="select(it)"
81 >
82 {{ it.ticketTypeName }}<span v-if="it.ticketPackage==1" class="tao">{{
83 language == 0 ? '套票' : 'Package ticket'
84 }}</span>
85 </div>
86 </div> 40 </div>
87 </div> 41 <div class="address">
88 42 {{ triggerLanguage(language, "地址", "Location") }}：{{ matchForm.address }}
89 <!-- 场馆 -->
90 <div class="select_item_box">
91 <div class="label">
92 {{ triggerLanguage(language, "场馆", "Venues") }} :
93 </div> 43 </div>
94 <div> 44
95 <span 45
96 v-if="currVenue?.images" 46 <div v-if="timeData>0">
97 style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px" 47 <!-- 倒计时-->
98 @click="handleImage" 48
99 > <span style="color: red;font-size: 18px">*</span> 49 <p class="countDownTitle">
100 {{ 50 <span v-if="language==0">售票倒计时</span>
101 language == 0 ? '点击查看场馆布局' : 'View Venue Layout' 51 <span v-else>TICKET COUNTDOWN</span>
102 }} 52 </p>
103 </span> 53 <van-count-down :time="timeData" format="DD 天 HH 时 mm 分 ss 秒">
54 <template #default="timeData">
55 <span class="block">{{ timeData.days }}</span>
56 <span class="colon">{{ language == 0 ? '天' : 'Days' }}</span>
57 <span class="block">{{ timeData.hours }}</span>
58 <span class="colon">{{ language == 0 ? '时' : 'Hrs' }}</span>
59 <span class="block">{{ timeData.minutes }}</span>
60 <span class="colon">{{ language == 0 ? '分' : 'Min' }}</span>
61 <span class="block">{{ timeData.seconds }}</span>
62 <span class="colon">{{ language == 0 ? '秒' : 'Sec' }}</span>
63 </template>
64 </van-count-down>
104 </div> 65 </div>
105 </div> 66 <div v-else>
106 <div class="select_item_box"> 67
107 <div class="select_item"> 68 <!-- 票档 -->
108 <div 69 <div class="select_item_box">
109 v-for="(it, index) in venueList" 70 <div class="label">
110 :key="index" 71 {{ triggerLanguage(language, "票档", "Tickets") }} :
111 :class="[ 72 </div>
112 it.id == selectForm.latsId ? 'tagActive' : 'tag',
113 it.isView==0?'forbid':''
114 ]"
115 @click="selectVenue(it)"
116 >
117 {{ it.name }}
118 </div> 73 </div>
119 <div v-if="remarks" class="remarks">{{ remarks }}</div> 74 <div class="select_item_box">
120 </div> 75 <div class="select_item">
121 </div> 76 <div
122 77 v-for="(it, index) in tickClass"
123 <!-- 场次 --> 78 :key="index"
124 <div class="select_item_box"> 79 :class="[
125 <div class="label"> 80 it.id == selectForm.latId ? 'tagActive' : 'tag',
126 {{ triggerLanguage(language, "场次", "Session") }} : 81 it.overdueView=='0' ? 'forbid' : '',
127 </div> 82 (it.ticketPackage==1 && overdueView=='0') ?'forbid':''
128 </div> 83 ]"
129 <div class="select_item_box"> 84 @click="select(it)"
130 <div class="select_item"> 85 >
131 <div 86 {{ it.ticketTypeName }}<span v-if="it.ticketPackage==1" class="tao">{{
132 v-for="(it, key) in tickList" 87 language == 0 ? '套票' : 'Package ticket'
133 :key="key" 88 }}</span>
134 :class="[ 89 </div>
135 key == selectForm.sessionType ? 'tagActive' : 'tag', 90 </div>
136 it.isView==0?'forbid':''
137 ]"
138 @click="selectSessionType(key)"
139 >
140 <span v-if="key=='1000'">{{
141 language == 0 ? '日间场' : 'Day'
142 }}</span>
143 <span v-else>{{
144 language == 0 ? '夜间场' : 'Night'
145 }}</span>
146 <!-- {{ key=='1000'?'日间场':'夜间场' }}-->
147 </div> 91 </div>
148 </div> 92
149 </div> 93 <!-- 场馆 -->
150 94 <div class="select_item_box">
151 <!-- 票型 --> 95 <div class="label">
152 <div class="select_item_box"> 96 {{ triggerLanguage(language, "场馆", "Venues") }} :
153 <div class="label"> 97 </div>
154 {{ triggerLanguage(language, "票型", "Ticket Type") }} : 98 <div>
155 </div> 99 <span
156 </div> 100 v-if="currVenue?.images"
157 <div class="select_item_box"> 101 style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px"
158 <div class="select_item"> 102 @click="handleImage"
159 <div 103 > <span style="color: red;font-size: 18px">*</span>
160 v-for="it in tickList[selectForm.sessionType]" 104 {{
161 :key="it.id" 105 language == 0 ? '点击查看场馆布局' : 'View Venue Layout'
162 :class="[ 106 }}
163 it.id == selectForm.latstId ? 'tagActive' : 'tag', 107 </span>
164 it.isView==0?'forbid':'' 108 </div>
165 ]"
166 @click="selectTick(it)"
167 >
168 {{ it.name }}
169 </div> 109 </div>
170 <div class="father"> 110 <div class="select_item_box">
171 <el-image 111 <div class="select_item">
172 v-if="currTick?.images" 112 <div
173 :src="fillImgUrl(currTick?.images) " 113 v-for="(it, index) in venueList"
174 class="son" 114 :key="index"
175 fit="cover" 115 :class="[
176 preview-teleported 116 it.id == selectForm.latsId ? 'tagActive' : 'tag',
177 style="width:190px;height: 135px" 117 it.isView==0?'forbid':''
178 /> 118 ]"
119 @click="selectVenue(it)"
120 >
121 {{ it.name }}
122 </div>
123 <div v-if="remarks" class="remarks">{{ remarks }}</div>
124 </div>
179 </div> 125 </div>
180 </div> 126
181 127 <!-- 场次 -->
182 </div> 128 <div class="select_item_box">
183 129 <div class="label">
184 130 {{ triggerLanguage(language, "场次", "Session") }} :
185 <!-- 价格 --> 131 </div>
186 <div class="select_item_box">
187 <div class="label">
188 {{ triggerLanguage(language, '价格', "Price") }} :
189 </div>
190 </div>
191 <div class="select_item_box">
192 <div class="select_item">
193 <div class="tagActive" style="min-width: 80px">
194 {{ language == 0 ? '￥' : '€' }} {{ language == 0 ? selectForm.price : selectForm.priceEn }}
195 </div> 132 </div>
133 <div class="select_item_box">
134 <div class="select_item">
135 <div
136 v-for="(it, key) in tickList"
137 :key="key"
138 :class="[
139 key == selectForm.sessionType ? 'tagActive' : 'tag',
140 it.isView==0?'forbid':''
141 ]"
142 @click="selectSessionType(key)"
143 >
144 <span v-if="key=='1000'">{{
145 language == 0 ? '日间场' : 'Day'
146 }}</span>
147 <span v-else>{{
148 language == 0 ? '夜间场' : 'Night'
149 }}</span>
150 <!-- {{ key=='1000'?'日间场':'夜间场' }}-->
151 </div>
152 </div>
153 </div>
154
155 <!-- 票型 -->
156 <div class="select_item_box">
157 <div class="label">
158 {{ triggerLanguage(language, "票型", "Ticket Type") }} :
159 </div>
160 </div>
161 <div class="select_item_box">
162 <div class="select_item">
163 <div
164 v-for="it in tickList[selectForm.sessionType]"
165 :key="it.id"
166 :class="[
167 it.id == selectForm.latstId ? 'tagActive' : 'tag',
168 it.isView==0?'forbid':''
169 ]"
170 @click="selectTick(it)"
171 >
172 {{ it.name }}
173 </div>
174 <div class="father">
175 <el-image
176 v-if="currTick?.images"
177 :src="fillImgUrl(currTick?.images) "
178 class="son"
179 fit="cover"
180 preview-teleported
181 style="width:190px;height: 135px"
182 />
183 </div>
184 </div>
185
186 </div>
187
188
189 <!-- 价格 -->
190 <div class="select_item_box">
191 <div class="label">
192 {{ triggerLanguage(language, '价格', "Price") }} :
193 </div>
194 </div>
195 <div class="select_item_box">
196 <div class="select_item">
197 <div class="tagActive" style="min-width: 80px">
198 {{ language == 0 ? '￥' : '€' }} {{ language == 0 ? selectForm.price : selectForm.priceEn }}
199 </div>
200 </div>
201 </div>
202 <!-- 购票备注-->
203 <div v-if="matchForm.ticketRemark" class="select_item_box">
204 <div class="label">
205 {{
206 triggerLanguage(language, '购票备注', "Ticket Purchase Note")
207 }} :
208 </div>
209 </div>
210 <div v-if="matchForm.ticketRemark" class="select_item_box">
211 <div class="select_item">
212 {{ matchForm.ticketRemark }}
213 </div>
214 </div>
215
216 <div
217 v-if="isOver" class="btn"
218 style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
219 >
220 {{
221 triggerLanguage(language, "售票结束", "Sale closed")
222 }}
223 </div>
224 <template v-else>
225 <div v-if="leftCount<=0 && leftCount!=-999" class="btn" style="margin-left: 40px;margin-top: 10px">
226 {{
227 triggerLanguage(language, "票已售罄", "Sale out")
228 }}
229 </div>
230 <div v-else class="btn" style="margin-left: 40px;margin-top: 10px" @click="toSelectSeat()">
231 {{
232 triggerLanguage(language, "立即购票", "Buy tickets now")
233 }}
234 </div>
235 </template>
196 </div> 236 </div>
197 </div> 237 </div>
198 <!-- 购票备注--> 238 </el-col>
199 <div v-if="matchForm.ticketRemark" class="select_item_box"> 239 </el-row>
200 <div class="label"> 240
201 {{ 241
202 triggerLanguage(language, '购票备注', "Ticket Purchase Note")
203 }} :
204 </div>
205 </div>
206 <div v-if="matchForm.ticketRemark" class="select_item_box">
207 <div class="select_item">
208 {{ matchForm.ticketRemark }}
209 </div>
210 </div>
211
212 <div
213 v-if="isOver" class="btn"
214 style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
215 >
216 {{
217 triggerLanguage(language, "售票结束", "Sale closed")
218 }}
219 </div>
220 <template v-else>
221 <div v-if="leftCount<=0 && leftCount!=-999" class="btn" style="margin-left: 40px;margin-top: 10px">
222 {{
223 triggerLanguage(language, "票已售罄", "Sale out")
224 }}
225 </div>
226 <div v-else class="btn" style="margin-left: 40px;margin-top: 10px" @click="toSelectSeat()">
227 {{
228 triggerLanguage(language, "立即购票", "Buy tickets now")
229 }}
230 </div>
231 </template>
232 </div>
233 </div>
234 </div> 242 </div>
235 243
236 <div class="container bottom"> 244 <div class="container bottom">
237 <div style="display: flex"> 245 <div style="display: flex">
238 <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language == 0 ? '购票说明' : 'Notice' }}</div> 246 <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language == 0 ? '购票说明' : 'Notice' }}</div>
...@@ -243,7 +251,7 @@ ...@@ -243,7 +251,7 @@
243 </div> 251 </div>
244 <div v-show="active==1" class="rich_content" v-html="matchForm.ticketDes" /> 252 <div v-show="active==1" class="rich_content" v-html="matchForm.ticketDes" />
245 <div v-show="active==2" class="rich_content" v-html="matchForm.ticketNotice" /> 253 <div v-show="active==2" class="rich_content" v-html="matchForm.ticketNotice" />
246 254
247 <el-dialog v-model="show" align-center title="" width="1000px"> 255 <el-dialog v-model="show" align-center title="" width="1000px">
248 <div style="padding: 20px"> 256 <div style="padding: 20px">
249 <img :src="fillImgUrl(showUrl)" alt="" style="width: 100%"> 257 <img :src="fillImgUrl(showUrl)" alt="" style="width: 100%">
...@@ -339,12 +347,12 @@ async function getTicketList() { ...@@ -339,12 +347,12 @@ async function getTicketList() {
339 activityId: activeId.value, status: 1 347 activityId: activeId.value, status: 1
340 }) 348 })
341 tickClass.value = res.rows 349 tickClass.value = res.rows
342 350
343 if (_.some(tickClass.value, (item) => item.overdueView == '0') 351 if (_.some(tickClass.value, (item) => item.overdueView == '0')
344 ) { 352 ) {
345 overdueView.value = '0' 353 overdueView.value = '0'
346 } 354 }
347 355
348 const item = _.find(tickClass.value, (item) => item.overdueView == '1') 356 const item = _.find(tickClass.value, (item) => item.overdueView == '1')
349 if (item) { 357 if (item) {
350 selectForm.value.latId = item.id 358 selectForm.value.latId = item.id
...@@ -375,7 +383,7 @@ function select(v) { ...@@ -375,7 +383,7 @@ function select(v) {
375 if (v.id == selectForm.value.latId) { 383 if (v.id == selectForm.value.latId) {
376 return 384 return
377 } 385 }
378 386
379 selectForm.value.latId = v.id 387 selectForm.value.latId = v.id
380 selectForm.value.latsId = null 388 selectForm.value.latsId = null
381 selectForm.value.sessionType = null 389 selectForm.value.sessionType = null
...@@ -384,7 +392,7 @@ function select(v) { ...@@ -384,7 +392,7 @@ function select(v) {
384 selectForm.value.price = '--' 392 selectForm.value.price = '--'
385 selectForm.value.priceEn = '--' 393 selectForm.value.priceEn = '--'
386 currTick.value = null 394 currTick.value = null
387 395
388 getVenueList() 396 getVenueList()
389 } 397 }
390 398
...@@ -392,7 +400,7 @@ function selectVenue(v) { ...@@ -392,7 +400,7 @@ function selectVenue(v) {
392 if (v.id == selectForm.value.latsId) { 400 if (v.id == selectForm.value.latsId) {
393 return 401 return
394 } 402 }
395 403
396 currVenue.value = v 404 currVenue.value = v
397 selectForm.value.latsId = v.id 405 selectForm.value.latsId = v.id
398 selectForm.value.sessionType = null 406 selectForm.value.sessionType = null
...@@ -402,7 +410,7 @@ function selectVenue(v) { ...@@ -402,7 +410,7 @@ function selectVenue(v) {
402 selectForm.value.priceEn = '--' 410 selectForm.value.priceEn = '--'
403 remarks.value = v.remarks 411 remarks.value = v.remarks
404 currTick.value = null 412 currTick.value = null
405 413
406 getTicketListType() 414 getTicketListType()
407 } 415 }
408 416
...@@ -410,9 +418,9 @@ function selectSessionType(key) { ...@@ -410,9 +418,9 @@ function selectSessionType(key) {
410 if (key == selectForm.value.sessionType) { 418 if (key == selectForm.value.sessionType) {
411 return 419 return
412 } 420 }
413 421
414 selectForm.value.sessionType = key 422 selectForm.value.sessionType = key
415 423
416 // currTick.value = tickList.value[selectForm.value.sessionType][0] 424 // currTick.value = tickList.value[selectForm.value.sessionType][0]
417 selectForm.value.latstId = currTick.value?.id 425 selectForm.value.latstId = currTick.value?.id
418 selectForm.value.price = currTick.value?.price 426 selectForm.value.price = currTick.value?.price
...@@ -425,12 +433,11 @@ function selectTick(v) { ...@@ -425,12 +433,11 @@ function selectTick(v) {
425 if (v.id == selectForm.value.latstId) { 433 if (v.id == selectForm.value.latstId) {
426 return 434 return
427 } 435 }
428 436
429 currTick.value = v 437 currTick.value = v
430 selectForm.value.latstId = v.id 438 selectForm.value.latstId = v.id
431 selectForm.value.price = v.price 439 selectForm.value.price = v.price
432 selectForm.value.priceEn = v.priceEn 440 selectForm.value.priceEn = v.priceEn
433
434 // vip票 441 // vip票
435 if (currTick.value.ticketType == '1') { 442 if (currTick.value.ticketType == '1') {
436 showUrl.value = v.images 443 showUrl.value = v.images
...@@ -438,10 +445,12 @@ function selectTick(v) { ...@@ -438,10 +445,12 @@ function selectTick(v) {
438 leftCount.value = -999 445 leftCount.value = -999
439 } else { 446 } else {
440 checkNonPayment().then(res => { 447 checkNonPayment().then(res => {
448 // debugger
441 if (res.data) { 449 if (res.data) {
442 getListByAtstId({ 450 getListByAtstId({
443 atstId: selectForm.value.latstId 451 atstId: selectForm.value.latstId
444 }).then(res => { 452 }).then(res => {
453 console.log(res.data)
445 leftCount.value = res.data 454 leftCount.value = res.data
446 if (leftCount.value > 0) { 455 if (leftCount.value > 0) {
447 showUrl.value = v.images 456 showUrl.value = v.images
...@@ -539,18 +548,18 @@ getmatchData() ...@@ -539,18 +548,18 @@ getmatchData()
539 display: flex; 548 display: flex;
540 padding: 19px; 549 padding: 19px;
541 margin-top: 26px; 550 margin-top: 26px;
542 551
543 .cover_img { 552 .cover_img {
544 width: 500px; 553 width: 500px;
545 height: 667px; 554 height: 667px;
546 object-fit: fill; 555 object-fit: fill;
547 margin-right: 36px; 556 //margin-right: 36px;
548 } 557 }
549 558
550 .info { 559 .info {
551 padding-top: 12px; 560 padding-top: 12px;
552 width: 100%; 561 width: 100%;
553 562
554 .title { 563 .title {
555 font-weight: bold; 564 font-weight: bold;
556 font-size: 28px; 565 font-size: 28px;
...@@ -558,7 +567,7 @@ getmatchData() ...@@ -558,7 +567,7 @@ getmatchData()
558 line-height: 1.6; 567 line-height: 1.6;
559 margin-bottom: 15px; 568 margin-bottom: 15px;
560 } 569 }
561 570
562 .time { 571 .time {
563 font-weight: 600; 572 font-weight: 600;
564 font-size: 16px; 573 font-size: 16px;
...@@ -566,7 +575,7 @@ getmatchData() ...@@ -566,7 +575,7 @@ getmatchData()
566 line-height: 24px; 575 line-height: 24px;
567 margin-bottom: 16px; 576 margin-bottom: 16px;
568 } 577 }
569 578
570 .address { 579 .address {
571 font-weight: 600; 580 font-weight: 600;
572 font-size: 16px; 581 font-size: 16px;
...@@ -574,15 +583,15 @@ getmatchData() ...@@ -574,15 +583,15 @@ getmatchData()
574 line-height: 24px; 583 line-height: 24px;
575 margin-bottom: 15px; 584 margin-bottom: 15px;
576 } 585 }
577 586
578 .select_item_box { 587 .select_item_box {
579 display: flex; 588 display: flex;
580 margin-bottom: 10px; 589 margin-bottom: 10px;
581 590
582 &:last-child { 591 &:last-child {
583 margin-bottom: 0; 592 margin-bottom: 0;
584 } 593 }
585 594
586 .label { 595 .label {
587 font-weight: 600; 596 font-weight: 600;
588 font-size: 16px; 597 font-size: 16px;
...@@ -591,19 +600,19 @@ getmatchData() ...@@ -591,19 +600,19 @@ getmatchData()
591 margin-right: 12px; 600 margin-right: 12px;
592 flex-shrink: 0; 601 flex-shrink: 0;
593 } 602 }
594 603
595 .forbid { 604 .forbid {
596 pointer-events: none; 605 pointer-events: none;
597 opacity: 0.5 !important; 606 opacity: 0.5 !important;
598 cursor: not-allowed !important; 607 cursor: not-allowed !important;
599 } 608 }
600 609
601 .select_item { 610 .select_item {
602 display: flex; 611 display: flex;
603 flex-wrap: wrap; 612 flex-wrap: wrap;
604 gap: 10px; 613 gap: 10px;
605 user-select: none; 614 user-select: none;
606 615
607 .tag_t { 616 .tag_t {
608 padding: 1px 15px; 617 padding: 1px 15px;
609 font-weight: 400; 618 font-weight: 400;
...@@ -613,7 +622,7 @@ getmatchData() ...@@ -613,7 +622,7 @@ getmatchData()
613 border: 1px solid #453dea; 622 border: 1px solid #453dea;
614 margin-left: 5px; 623 margin-left: 5px;
615 } 624 }
616 625
617 .tag { 626 .tag {
618 display: flex; 627 display: flex;
619 padding: 12px 18px; 628 padding: 12px 18px;
...@@ -624,7 +633,7 @@ getmatchData() ...@@ -624,7 +633,7 @@ getmatchData()
624 color: #4a4a4a; 633 color: #4a4a4a;
625 cursor: pointer; 634 cursor: pointer;
626 } 635 }
627 636
628 .tagActive { 637 .tagActive {
629 display: flex; 638 display: flex;
630 padding: 12px 18px; 639 padding: 12px 18px;
...@@ -635,14 +644,14 @@ getmatchData() ...@@ -635,14 +644,14 @@ getmatchData()
635 color: #493ceb; 644 color: #493ceb;
636 cursor: pointer; 645 cursor: pointer;
637 } 646 }
638 647
639 .tao { 648 .tao {
640 border: 1px solid #493ceb; 649 border: 1px solid #493ceb;
641 font-size: 14px; 650 font-size: 14px;
642 color: #493ceb; 651 color: #493ceb;
643 margin-left: 10px; 652 margin-left: 10px;
644 } 653 }
645 654
646 .tagDisabled { 655 .tagDisabled {
647 padding: 12px 18px; 656 padding: 12px 18px;
648 background: #878787; 657 background: #878787;
...@@ -654,7 +663,7 @@ getmatchData() ...@@ -654,7 +663,7 @@ getmatchData()
654 } 663 }
655 } 664 }
656 } 665 }
657 666
658 .btn { 667 .btn {
659 width: 175px; 668 width: 175px;
660 height: 40px; 669 height: 40px;
...@@ -674,7 +683,7 @@ getmatchData() ...@@ -674,7 +683,7 @@ getmatchData()
674 padding: 50px; 683 padding: 50px;
675 margin-top: 30px; 684 margin-top: 30px;
676 margin-bottom: 30px; 685 margin-bottom: 30px;
677 686
678 .title { 687 .title {
679 padding: 20px 30px; 688 padding: 20px 30px;
680 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%); 689 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
...@@ -684,90 +693,18 @@ getmatchData() ...@@ -684,90 +693,18 @@ getmatchData()
684 line-height: 30px; 693 line-height: 30px;
685 margin-bottom: 30px; 694 margin-bottom: 30px;
686 } 695 }
687 696
688 .rich_content { 697 .rich_content {
689 margin-top: 30px; 698 margin-top: 30px;
690 699
691 :deep(img) { 700 :deep(img) {
692 width: 100% !important; 701 width: 100% !important;
693 height: auto !important; 702 height: auto !important;
694 } 703 }
695 704
696 } 705 }
697 } 706 }
698 707
699 @media screen and (max-width: 768px) {
700 .container {
701 width: 100%;
702 }
703 .forWei {
704 display: block
705 }
706 .top {
707 //transform: scale(0.5);transform-origin: left top;
708 .cover_img {
709 width: 120px;
710 height: 160px;
711 margin-right: 15px;
712 }
713
714 .info {
715 padding: 0;
716
717 .title {
718 font-size: 14px;
719 margin: 0;
720 }
721
722 .time, .address, .label, .tip {
723 font-size: 12px;
724 }
725
726 .title, .time, .address, .tip, .select_item_box {
727 margin-bottom: 3px;
728 }
729
730 .select_item_box {
731 .label {
732 font-size: 12px;
733 }
734
735 .select_item .tag {
736 padding: 2px 10px;
737 font-size: 12px;
738 }
739
740 .select_item .tagActive {
741 padding: 2px 10px;
742 font-size: 12px;
743 }
744
745 .select_item .tagDisabled {
746 padding: 2px 10px;
747 font-size: 12px;
748 }
749 }
750
751 .btn {
752 display: inline-block;
753 margin: 10px 0 0;
754 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
755 border-radius: 20px;
756 line-height: 40px;
757 text-align: center;
758 font-weight: 500;
759 font-size: 16px;
760 color: #ffffff;
761 cursor: pointer;
762 }
763 }
764 }
765 .bottom {
766 padding: 0
767 }
768
769
770 }
771 708
772 .countDownTitle { 709 .countDownTitle {
773 text-align: center; 710 text-align: center;
...@@ -850,4 +787,85 @@ getmatchData() ...@@ -850,4 +787,85 @@ getmatchData()
850 color: #4a4a4a !important; 787 color: #4a4a4a !important;
851 cursor: no-drop !important; 788 cursor: no-drop !important;
852 } 789 }
790
791
792 @media screen and (max-width: 768px) {
793 .container {
794 width: 100%;
795 }
796 .forWei {
797 display: block
798 }
799 .top {
800 //transform: scale(0.5);transform-origin: left top;
801 .cover_img {
802 width: 120px;
803 height: 160px;
804 margin-right: 15px;
805 }
806
807 .info {
808 padding: 0;
809
810 .title {
811 font-size: 14px;
812 margin: 0;
813 }
814
815 .time, .address, .label, .tip {
816 font-size: 12px;
817 }
818
819 .title, .time, .address, .tip, .select_item_box {
820 margin-bottom: 3px;
821 }
822
823 .select_item_box {
824 .label {
825 font-size: 12px;
826 }
827
828 .select_item .tag {
829 padding: 2px 10px;
830 font-size: 12px;
831 }
832
833 .select_item .tagActive {
834 padding: 2px 10px;
835 font-size: 12px;
836 }
837
838 .select_item .tagDisabled {
839 padding: 2px 10px;
840 font-size: 12px;
841 }
842 }
843
844 .btn {
845 display: inline-block;
846 margin: 10px 0 0;
847 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
848 border-radius: 20px;
849 line-height: 40px;
850 text-align: center;
851 font-weight: 500;
852 font-size: 16px;
853 color: #ffffff;
854 cursor: pointer;
855 }
856 }
857 }
858 .bottom {
859 padding: 0
860 }
861
862 .father {
863 .son {
864 width: 85px !important;
865 height: 67.5px !important;
866 left: 50px;
867 top: 10px;
868 }
869 }
870 }
853 </style> 871 </style>
......
src/viewsPc/booking/ticket/peopleManage.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 <span> 7 <span>
8 {{ languageFormat(language, "观影人管理", "Viewers") }} 8 {{ languageFormat(language, "观影人管理", "Viewers") }}
9 </span> 9 </span>
10 10
11 <span class="fr" style="cursor: pointer" @click="$router.go(-1)"> 11 <span class="fr" style="cursor: pointer" @click="$router.go(-1)">
12 {{ language == 0 ? '返回' : 'Back' }} 12 {{ language == 0 ? '返回' : 'Back' }}
13 </span> 13 </span>
...@@ -25,12 +25,12 @@ ...@@ -25,12 +25,12 @@
25 </div> 25 </div>
26 </div> 26 </div>
27 </div> 27 </div>
28 28
29 <el-dialog 29 <el-dialog
30 v-model="show" 30 v-model="show"
31 :title="language==0?'新增观影人':'New moviegoers'" 31 :title="language==0?'新增观影人':'New moviegoers'"
32 center 32 center
33 width="700" 33 style="max-width: 700px;min-width: 350px;"
34 > 34 >
35 <el-form 35 <el-form
36 ref="formRef" :model="form" :rules="rules" label-width="100px" size="large" 36 ref="formRef" :model="form" :rules="rules" label-width="100px" size="large"
...@@ -50,13 +50,20 @@ ...@@ -50,13 +50,20 @@
50 <el-input v-model="form.idCard" :placeholder="language==0?'请输入证件号':'Please enter the ID after ah'" /> 50 <el-input v-model="form.idCard" :placeholder="language==0?'请输入证件号':'Please enter the ID after ah'" />
51 </el-form-item> 51 </el-form-item>
52 </el-form> 52 </el-form>
53 53
54 <span class="dialog-footer"> 54 <div class="dialog-footer">
55 <div style="text-align: center"> 55 <div style="text-align: center">
56 <el-button class="can_pay" @click="show = false">{{ language == 0 ? '取 消' : 'cancel' }}</el-button> 56 <el-button class="can_pay marginBtn" @click="show = false">{{
57 <el-button class="pay" type="primary" @click="submit">{{ language == 0 ? '确 定' : 'confirm' }}</el-button> 57 language == 0 ? '取 消' : 'cancel'
58 }}
59 </el-button>
60 <el-button class="pay marginBtn" type="primary" @click="submit">{{
61 language == 0 ? '确 定' : 'confirm'
62 }}
63 </el-button>
58 </div> 64 </div>
59 </span> 65 </div>
66 <br>
60 </el-dialog> 67 </el-dialog>
61 </el-card> 68 </el-card>
62 69
...@@ -114,7 +121,7 @@ function submit() { ...@@ -114,7 +121,7 @@ function submit() {
114 useStore().setVisitor() 121 useStore().setVisitor()
115 return 122 return
116 } 123 }
117 124
118 formRef.value.validate((valid) => { 125 formRef.value.validate((valid) => {
119 if (valid) { 126 if (valid) {
120 aadCustomer(form.value).then(res => { 127 aadCustomer(form.value).then(res => {
...@@ -173,12 +180,12 @@ div { ...@@ -173,12 +180,12 @@ div {
173 180
174 :deep(.el-dialog) { 181 :deep(.el-dialog) {
175 padding: 0; 182 padding: 0;
176 183
177 .el-dialog__header { 184 .el-dialog__header {
178 height: 50px; 185 height: 50px;
179 line-height: 50px; 186 line-height: 50px;
180 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%); 187 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
181 188
182 .el-dialog__title { 189 .el-dialog__title {
183 color: #fff; 190 color: #fff;
184 } 191 }
...@@ -219,7 +226,7 @@ div { ...@@ -219,7 +226,7 @@ div {
219 //} 226 //}
220 width: 1200px; 227 width: 1200px;
221 margin: 20px auto; 228 margin: 20px auto;
222 229
223 .title { 230 .title {
224 position: relative; 231 position: relative;
225 padding: 11px; 232 padding: 11px;
...@@ -227,7 +234,7 @@ div { ...@@ -227,7 +234,7 @@ div {
227 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%); 234 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
228 font-size: 18px; 235 font-size: 18px;
229 color: #ffffff; 236 color: #ffffff;
230 237
231 .add_btn { 238 .add_btn {
232 position: absolute; 239 position: absolute;
233 left: 20px; 240 left: 20px;
...@@ -247,32 +254,32 @@ div { ...@@ -247,32 +254,32 @@ div {
247 cursor: pointer; 254 cursor: pointer;
248 } 255 }
249 } 256 }
250 257
251 .content { 258 .content {
252 min-height: 590px; 259 min-height: 590px;
253 background-color: #fff; 260 background-color: #fff;
254 box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08); 261 box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
255 padding: 20px; 262 padding: 20px;
256 263
257 .people_box { 264 .people_box {
258 display: flex; 265 display: flex;
259 flex-wrap: wrap; 266 flex-wrap: wrap;
260 gap: 20px; 267 gap: 20px;
261 268
262 .people_item { 269 .people_item {
263 width: 275px; 270 width: 275px;
264 height: 137px; 271 height: 137px;
265 background: #ffffff; 272 background: #ffffff;
266 border: 1px solid #dcdfe6; 273 border: 1px solid #dcdfe6;
267 padding: 16px; 274 padding: 16px;
268 275
269 .name { 276 .name {
270 font-weight: 600; 277 font-weight: 600;
271 font-size: 16px; 278 font-size: 16px;
272 color: #2d373f; 279 color: #2d373f;
273 line-height: 22px; 280 line-height: 22px;
274 } 281 }
275 282
276 .idcard { 283 .idcard {
277 font-size: 16px; 284 font-size: 16px;
278 color: #95a1a6; 285 color: #95a1a6;
...@@ -280,7 +287,7 @@ div { ...@@ -280,7 +287,7 @@ div {
280 margin-top: 12px; 287 margin-top: 12px;
281 margin-bottom: 17px; 288 margin-bottom: 17px;
282 } 289 }
283 290
284 .btn { 291 .btn {
285 width: 69px; 292 width: 69px;
286 height: 32px; 293 height: 32px;
...@@ -302,5 +309,12 @@ div { ...@@ -302,5 +309,12 @@ div {
302 .container { 309 .container {
303 width: 100%; 310 width: 100%;
304 } 311 }
312 form {
313 margin: 20px 20px 0 0 !important;
314 }
315 }
316
317 .marginBtn {
318 margin: 5px
305 } 319 }
306 </style> 320 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!