Merge branch '线上版本修复' into devmatch
Showing
10 changed files
with
605 additions
and
473 deletions
| ... | @@ -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"> |
| ... | @@ -1186,4 +1186,24 @@ const showSJ = () => { | ... | @@ -1186,4 +1186,24 @@ const showSJ = () => { |
| 1186 | .price { | 1186 | .price { |
| 1187 | color: orange; | 1187 | color: orange; |
| 1188 | } | 1188 | } |
| 1189 | |||
| 1190 | |||
| 1191 | @media screen and (max-width: 768px) { | ||
| 1192 | .payImgbox { | ||
| 1193 | width: 100%; | ||
| 1194 | |||
| 1195 | .payImg1 { | ||
| 1196 | width: 40vw; | ||
| 1197 | } | ||
| 1198 | |||
| 1199 | .payImg2 { | ||
| 1200 | width: 40vw; | ||
| 1201 | } | ||
| 1202 | |||
| 1203 | .payImg3 { | ||
| 1204 | width: 40vw; | ||
| 1205 | height: auto; | ||
| 1206 | } | ||
| 1207 | } | ||
| 1208 | } | ||
| 1189 | </style> | 1209 | </style> | ... | ... |
| ... | @@ -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> | ... | ... |
| ... | @@ -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> | ... | ... |
| ... | @@ -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> | ... | ... |
| ... | @@ -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> | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <el-dialog v-model="show" :title="title" destroy-on-close width="400px" @close="close"> | 2 | <el-dialog |
| 3 | v-model="show" :title="title" destroy-on-close style="min-width: 350px;max-width: 450px" | ||
| 4 | @close="close" | ||
| 5 | > | ||
| 3 | <div> | 6 | <div> |
| 4 | <h2 v-if="cptName" class="text-warning text-center">{{ cptName }}</h2> | 7 | <h2 v-if="cptName" class="text-warning text-center">{{ cptName }}</h2> |
| 5 | 8 | ... | ... |
| ... | @@ -25,7 +25,7 @@ | ... | @@ -25,7 +25,7 @@ |
| 25 | </el-button> | 25 | </el-button> |
| 26 | </div> | 26 | </div> |
| 27 | 27 | ||
| 28 | <div v-if="list.length>0"> | 28 | <div v-if="list.length>0" class="rollY"> |
| 29 | <div v-for="(form, index) in list" :key="index" class="nowteamItem"> | 29 | <div v-for="(form, index) in list" :key="index" class="nowteamItem"> |
| 30 | <div class="info"> | 30 | <div class="info"> |
| 31 | <div class="nowName text-center"> | 31 | <div class="nowName text-center"> |
| ... | @@ -69,7 +69,7 @@ | ... | @@ -69,7 +69,7 @@ |
| 69 | <div v-if="showGroupList" class="text-danger text-center"> | 69 | <div v-if="showGroupList" class="text-danger text-center"> |
| 70 | {{ language == 0 ? '找到多个团体' : 'Found multiple teams' }} | 70 | {{ language == 0 ? '找到多个团体' : 'Found multiple teams' }} |
| 71 | </div> | 71 | </div> |
| 72 | <div v-if="showGroupList" class="groupList"> | 72 | <div v-if="showGroupList" class="groupList rollY"> |
| 73 | <ul> | 73 | <ul> |
| 74 | <li v-for="(item, index) in groupList" :key="index" @click="showDetail(item)">{{ item }} | 74 | <li v-for="(item, index) in groupList" :key="index" @click="showDetail(item)">{{ item }} |
| 75 | <el-icon class="fr"> | 75 | <el-icon class="fr"> |
| ... | @@ -83,6 +83,7 @@ | ... | @@ -83,6 +83,7 @@ |
| 83 | <el-collapse-item | 83 | <el-collapse-item |
| 84 | v-for="(team,index) in teamlist" :key="index" :name="index" | 84 | v-for="(team,index) in teamlist" :key="index" :name="index" |
| 85 | :title="team[0][0].groupName" | 85 | :title="team[0][0].groupName" |
| 86 | class="rollY" | ||
| 86 | > | 87 | > |
| 87 | <div v-for="(p,jndex) in team" :key="jndex" class="nowteamItem"> | 88 | <div v-for="(p,jndex) in team" :key="jndex" class="nowteamItem"> |
| 88 | <div class="fontSize14 text-bold">{{ p[0].zuInfo }}</div> | 89 | <div class="fontSize14 text-bold">{{ p[0].zuInfo }}</div> |
| ... | @@ -289,8 +290,13 @@ function showDetail(name) { | ... | @@ -289,8 +290,13 @@ function showDetail(name) { |
| 289 | } | 290 | } |
| 290 | 291 | ||
| 291 | .searchBox { | 292 | .searchBox { |
| 292 | height: 50vh; | 293 | //height: 50vh; |
| 293 | //overflow: hidden; | 294 | //overflow: hidden; |
| 294 | overflow-y: hidden; | 295 | overflow-y: hidden; |
| 295 | } | 296 | } |
| 297 | |||
| 298 | .rollY { | ||
| 299 | height: 45vh; | ||
| 300 | overflow-y: auto; | ||
| 301 | } | ||
| 296 | </style> | 302 | </style> | ... | ... |
| ... | @@ -26,7 +26,7 @@ | ... | @@ -26,7 +26,7 @@ |
| 26 | </el-button> | 26 | </el-button> |
| 27 | </div> | 27 | </div> |
| 28 | 28 | ||
| 29 | <div v-if="list.length>0" class="mt30"> | 29 | <div v-if="list.length>0" class="mt30 rollY"> |
| 30 | <el-timeline> | 30 | <el-timeline> |
| 31 | <el-timeline-item | 31 | <el-timeline-item |
| 32 | v-for="(form, index) in list" | 32 | v-for="(form, index) in list" |
| ... | @@ -66,7 +66,7 @@ | ... | @@ -66,7 +66,7 @@ |
| 66 | <div v-if="showGroupList" class="text-danger text-center"> | 66 | <div v-if="showGroupList" class="text-danger text-center"> |
| 67 | {{ language == 0 ? '找到多个团体' : 'Found multiple teams' }} | 67 | {{ language == 0 ? '找到多个团体' : 'Found multiple teams' }} |
| 68 | </div> | 68 | </div> |
| 69 | <div v-if="showGroupList" class="groupList"> | 69 | <div v-if="showGroupList" class="groupList rollY"> |
| 70 | <ul> | 70 | <ul> |
| 71 | <li v-for="(item, index) in groupList" :key="index" @click="showDetail(item)">{{ item }} | 71 | <li v-for="(item, index) in groupList" :key="index" @click="showDetail(item)">{{ item }} |
| 72 | <el-icon class="fr"> | 72 | <el-icon class="fr"> |
| ... | @@ -75,7 +75,7 @@ | ... | @@ -75,7 +75,7 @@ |
| 75 | </li> | 75 | </li> |
| 76 | </ul> | 76 | </ul> |
| 77 | </div> | 77 | </div> |
| 78 | <div v-if="teamlist.length>0" class="temell mt20"> | 78 | <div v-if="teamlist.length>0" class="temell mt20 rollY"> |
| 79 | <el-collapse accordion> | 79 | <el-collapse accordion> |
| 80 | <el-collapse-item v-for="(team,index) in teamlist" :key="index" :name="index" :title="team[0].title"> | 80 | <el-collapse-item v-for="(team,index) in teamlist" :key="index" :name="index" :title="team[0].title"> |
| 81 | <el-timeline> | 81 | <el-timeline> |
| ... | @@ -109,7 +109,7 @@ | ... | @@ -109,7 +109,7 @@ |
| 109 | }} | 109 | }} |
| 110 | </el-button> | 110 | </el-button> |
| 111 | </div> | 111 | </div> |
| 112 | <div v-if="list.length>0" class="temell mt20"> | 112 | <div v-if="list.length>0" class="temell mt20 rollY"> |
| 113 | <el-timeline> | 113 | <el-timeline> |
| 114 | <el-timeline-item v-for="(team,j) in list" :key="j" placement="top"> | 114 | <el-timeline-item v-for="(team,j) in list" :key="j" placement="top"> |
| 115 | <div v-for="(form, index) in team" v-show="index==0" :key="index"> | 115 | <div v-for="(form, index) in team" v-show="index==0" :key="index"> |
| ... | @@ -362,6 +362,11 @@ function showDetail(name) { | ... | @@ -362,6 +362,11 @@ function showDetail(name) { |
| 362 | 362 | ||
| 363 | .searchBox { | 363 | .searchBox { |
| 364 | height: 50vh; | 364 | height: 50vh; |
| 365 | //overflow-y: auto; | ||
| 366 | } | ||
| 367 | |||
| 368 | .rollY { | ||
| 369 | height: 45vh; | ||
| 365 | overflow-y: auto; | 370 | overflow-y: auto; |
| 366 | } | 371 | } |
| 367 | </style> | 372 | </style> | ... | ... |
| ... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
| 9 | class="pcloginpop" | 9 | class="pcloginpop" |
| 10 | close-icon="CircleClose" | 10 | close-icon="CircleClose" |
| 11 | destroy-on-close | 11 | destroy-on-close |
| 12 | width="450px" | 12 | style="max-width: 450px;min-width: 350px" |
| 13 | @close="close" | 13 | @close="close" |
| 14 | > | 14 | > |
| 15 | <div class="pd10" /> | 15 | <div class="pd10" /> |
| ... | @@ -589,7 +589,8 @@ const goPolicy = () => { | ... | @@ -589,7 +589,8 @@ const goPolicy = () => { |
| 589 | .rItem { | 589 | .rItem { |
| 590 | height: 130px; | 590 | height: 130px; |
| 591 | cursor: pointer; | 591 | cursor: pointer; |
| 592 | width: 350px; | 592 | max-width: 350px; |
| 593 | min-width: 300px; | ||
| 593 | padding: 1px; | 594 | padding: 1px; |
| 594 | margin: 20px auto; | 595 | margin: 20px auto; |
| 595 | 596 | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <el-dialog v-model="show" :title="language==0?'快捷注册':'Quick Login'" close-icon="CircleClose" | 2 | <el-dialog |
| 3 | width="480" :append-to-body="true" destroy-on-close @close="close"> | 3 | v-model="show" :append-to-body="true" :title="language==0?'快捷注册':'Quick Login'" |
| 4 | close-icon="CircleClose" destroy-on-close style="max-width: 480px;min-width: 350px" | ||
| 5 | @close="close" | ||
| 6 | > | ||
| 4 | <div> | 7 | <div> |
| 5 | <el-form class="d-form" size="large" :label-width="language==0?80:150" :label-position="language==0?'right':'top'" style="max-width: 500px;margin: auto"> | 8 | <el-form |
| 9 | :label-position="language==0?'right':'top'" :label-width="language==0?80:150" class="d-form" size="large" | ||
| 10 | style="max-width: 500px;margin: auto" | ||
| 11 | > | ||
| 6 | <el-form-item :label="language==0?'邮箱':'E-mail'" required> | 12 | <el-form-item :label="language==0?'邮箱':'E-mail'" required> |
| 7 | <el-input type="text" v-model="form.account" @change="resetCode" @blur="verifyCode" | 13 | <el-input v-model="form.account" type="text" @blur="verifyCode" @change="resetCode" /> |
| 8 | /> | 14 | <div v-if="language==0" class="tip"> |
| 9 | <div class="tip" v-if="language==0"> | ||
| 10 | (请填写正确的邮箱信息,邮箱信息在注册完成后无法修改。 | 15 | (请填写正确的邮箱信息,邮箱信息在注册完成后无法修改。 |
| 11 | 该邮箱后续会作为您登录的账户, | 16 | 该邮箱后续会作为您登录的账户, |
| 12 | 并接收报名审核结果、支付账单、签证邀请函等相关信息。) | 17 | 并接收报名审核结果、支付账单、签证邀请函等相关信息。) |
| 13 | </div> | 18 | </div> |
| 14 | <div v-else class="tip"> | 19 | <div v-else class="tip"> |
| 15 | Please fill in the correct email, which cannot be changed after the registration is completed. The email will be used as your login account and to receive relevant information including results of registration review, payment bills, visa invitation letters, etc. | 20 | Please fill in the correct email, which cannot be changed after the registration is completed. The email |
| 21 | will be used as your login account and to receive relevant information including results of registration | ||
| 22 | review, payment bills, visa invitation letters, etc. | ||
| 16 | </div> | 23 | </div> |
| 17 | </el-form-item> | 24 | </el-form-item> |
| 18 | <el-form-item :label="language==0?'验证码':'Code'" required> | 25 | <el-form-item :label="language==0?'验证码':'Code'" required> |
| 19 | <el-input v-model="form.code"> | 26 | <el-input v-model="form.code"> |
| 20 | <template #append> | 27 | <template #append> |
| 21 | <el-button type="primary" plain style="width: 110px" @click="sendsmsMsg"> | 28 | <el-button plain style="width: 110px" type="primary" @click="sendsmsMsg"> |
| 22 | <count-down v-if="counting" v-slot="{ totalSeconds }" :time="60000" @end="counting=false"> | 29 | <count-down v-if="counting" v-slot="{ totalSeconds }" :time="60000" @end="counting=false"> |
| 23 | {{ totalSeconds }} {{ language == 0 ? '秒' : 's' }} | 30 | {{ totalSeconds }} {{ language == 0 ? '秒' : 's' }} |
| 24 | </count-down> | 31 | </count-down> |
| ... | @@ -28,43 +35,53 @@ | ... | @@ -28,43 +35,53 @@ |
| 28 | </el-button> | 35 | </el-button> |
| 29 | </template> | 36 | </template> |
| 30 | </el-input> | 37 | </el-input> |
| 31 | <div class="vcodeBox" :style="isShow?'height:240px':'height:0'"> | 38 | <div :style="isShow?'height:240px':'height:0'" class="vcodeBox"> |
| 32 | <Vcode :show="isShow" :successText="successVcode" :failText="failVcode" :slider-text="sliderText" | 39 | <Vcode |
| 33 | type="inside" @success="codeSuccess"></Vcode> | 40 | :fail-text="failVcode" :show="isShow" :slider-text="sliderText" :success-text="successVcode" |
| 41 | type="inside" @success="codeSuccess" | ||
| 42 | /> | ||
| 34 | </div> | 43 | </div> |
| 35 | </el-form-item> | 44 | </el-form-item> |
| 36 | <el-form-item :label="language==0?'密码':'Password'" required> | 45 | <el-form-item :label="language==0?'密码':'Password'" required> |
| 37 | <el-input type="password" show-password v-model="form.password" | 46 | <el-input |
| 38 | :placeholder="language==0?'6-16位密码。区分大小写':''"/> | 47 | v-model="form.password" :placeholder="language==0?'6-16位密码。区分大小写':''" show-password |
| 48 | type="password" | ||
| 49 | /> | ||
| 39 | </el-form-item> | 50 | </el-form-item> |
| 40 | <el-form-item :label="language==0?'确认密码':'Confirm Password'" required> | 51 | <el-form-item :label="language==0?'确认密码':'Confirm Password'" required> |
| 41 | <el-input type="password" show-password v-model="form.password2" @blur="vconfirmPassword" | 52 | <el-input |
| 42 | :placeholder="language==0?'再次输入密码':''"/> | 53 | v-model="form.password2" :placeholder="language==0?'再次输入密码':''" show-password type="password" |
| 54 | @blur="vconfirmPassword" | ||
| 55 | /> | ||
| 43 | </el-form-item> | 56 | </el-form-item> |
| 44 | </el-form> | 57 | </el-form> |
| 45 | 58 | ||
| 46 | </div> | 59 | </div> |
| 47 | <template #footer> | 60 | <template #footer> |
| 48 | <div class="dialog-footer text-center"> | 61 | <div class="dialog-footer text-center"> |
| 49 | <el-button type="primary" class="btn-lineG w200px" round @click="register">{{language==0?'登录':'Confirm'}}</el-button> | 62 | <el-button class="btn-lineG w200px" round type="primary" @click="register"> |
| 50 | <div class="text-primary underline mt20 pointer" @click="goLogin">{{language==0?'已有账号去登录':'Already have an account? Login'}}</div> | 63 | {{ language == 0 ? '登录' : 'Confirm' }} |
| 51 | 64 | </el-button> | |
| 65 | <div class="text-primary underline mt20 pointer" @click="goLogin"> | ||
| 66 | {{ language == 0 ? '已有账号去登录' : 'Already have an account? Login' }} | ||
| 67 | </div> | ||
| 68 | |||
| 52 | </div> | 69 | </div> |
| 53 | </template> | 70 | </template> |
| 54 | </el-dialog> | 71 | </el-dialog> |
| 55 | </template> | 72 | </template> |
| 56 | 73 | ||
| 57 | <script setup> | 74 | <script setup> |
| 58 | import {reactive, toRefs} from 'vue' | 75 | import { reactive, toRefs } from 'vue' |
| 59 | import Vcode from "vue3-puzzle-vcode" | 76 | import Vcode from 'vue3-puzzle-vcode' |
| 60 | import {ElMessage} from 'element-plus' | 77 | import { ElMessage } from 'element-plus' |
| 61 | import CountDown from '@chenfengyuan/vue-countdown' | 78 | import CountDown from '@chenfengyuan/vue-countdown' |
| 62 | import {getCaptchaSms} from "@/apiPc/match"; | 79 | import { getCaptchaSms } from '@/apiPc/match' |
| 63 | import {onMounted} from "@vue/runtime-core"; | 80 | import { onMounted } from '@vue/runtime-core' |
| 64 | import {useStorage} from "@vueuse/core/index"; | 81 | import { useStorage } from '@vueuse/core/index' |
| 65 | import {vistorRegister} from "@/apiPc/common"; | 82 | import { vistorRegister } from '@/apiPc/common' |
| 66 | import {setToken} from "@/utils/auth"; | 83 | import { setToken } from '@/utils/auth' |
| 67 | import useUserStore from "@/store/modules/user"; | 84 | import useUserStore from '@/store/modules/user' |
| 68 | 85 | ||
| 69 | const language = useStorage('language', 0) | 86 | const language = useStorage('language', 0) |
| 70 | 87 | ||
| ... | @@ -77,9 +94,9 @@ const data = reactive({ | ... | @@ -77,9 +94,9 @@ const data = reactive({ |
| 77 | failVcode: '验证失败,请重试', | 94 | failVcode: '验证失败,请重试', |
| 78 | successVcode: '验证通过!', | 95 | successVcode: '验证通过!', |
| 79 | sliderText: '拖动滑块完成拼图', | 96 | sliderText: '拖动滑块完成拼图', |
| 80 | show:false | 97 | show: false |
| 81 | }) | 98 | }) |
| 82 | const {isShow, isCodeTrue, counting, form, activeStep, failVcode, successVcode, sliderText,show} = toRefs(data) | 99 | const { isShow, isCodeTrue, counting, form, activeStep, failVcode, successVcode, sliderText, show } = toRefs(data) |
| 83 | const emit = defineEmits(['submit']) | 100 | const emit = defineEmits(['submit']) |
| 84 | onMounted(() => { | 101 | onMounted(() => { |
| 85 | if (language.value == 1) { | 102 | if (language.value == 1) { |
| ... | @@ -113,7 +130,7 @@ function sendsmsMsg() { | ... | @@ -113,7 +130,7 @@ function sendsmsMsg() { |
| 113 | return | 130 | return |
| 114 | } | 131 | } |
| 115 | if (counting.value) { | 132 | if (counting.value) { |
| 116 | return | 133 | |
| 117 | } else { | 134 | } else { |
| 118 | isShow.value = true | 135 | isShow.value = true |
| 119 | } | 136 | } |
| ... | @@ -124,29 +141,31 @@ function verifyCode() { | ... | @@ -124,29 +141,31 @@ function verifyCode() { |
| 124 | return | 141 | return |
| 125 | } | 142 | } |
| 126 | if (form.value.account.indexOf('@') > -1) { | 143 | if (form.value.account.indexOf('@') > -1) { |
| 127 | //邮箱 | 144 | // 邮箱 |
| 128 | } | 145 | } |
| 129 | } | 146 | } |
| 130 | 147 | ||
| 131 | function codeSuccess(msg) { | 148 | function codeSuccess(msg) { |
| 132 | console.log('验证通过' + msg); | 149 | console.log('验证通过' + msg) |
| 133 | isShow.value = false | 150 | isShow.value = false |
| 134 | getCaptchaSms({account: form.value.account}).then(res => { | 151 | getCaptchaSms({ account: form.value.account }).then(res => { |
| 135 | counting.value = true | 152 | counting.value = true |
| 136 | isCodeTrue.value = true | 153 | isCodeTrue.value = true |
| 137 | ElMessage.success(language.value == 0 ? '发送成功,请关注邮箱邮件' :'Send success, please check your email') | 154 | ElMessage.success(language.value == 0 ? '发送成功,请关注邮箱邮件' : 'Send success, please check your email') |
| 138 | }) | 155 | }) |
| 139 | } | 156 | } |
| 140 | 157 | ||
| 141 | function resetCode() { | 158 | function resetCode() { |
| 142 | isCodeTrue.value = false | 159 | isCodeTrue.value = false |
| 143 | } | 160 | } |
| 161 | |||
| 144 | function goLogin() { | 162 | function goLogin() { |
| 145 | show.value = false | 163 | show.value = false |
| 146 | useUserStore().setReLogin() | 164 | useUserStore().setReLogin() |
| 147 | } | 165 | } |
| 166 | |||
| 148 | function register() { | 167 | function register() { |
| 149 | //游客注册 | 168 | // 游客注册 |
| 150 | if (!form.value.account) { | 169 | if (!form.value.account) { |
| 151 | if (language.value == 0) { | 170 | if (language.value == 0) { |
| 152 | ElMessage.warning('请填写邮箱') | 171 | ElMessage.warning('请填写邮箱') |
| ... | @@ -164,29 +183,33 @@ function register() { | ... | @@ -164,29 +183,33 @@ function register() { |
| 164 | return | 183 | return |
| 165 | } | 184 | } |
| 166 | if (!form.value.password) { | 185 | if (!form.value.password) { |
| 167 | ElMessage.warning(language.value == 0?'请输入密码':'Please enter password') | 186 | ElMessage.warning(language.value == 0 ? '请输入密码' : 'Please enter password') |
| 168 | return | 187 | return |
| 169 | } | 188 | } |
| 170 | if (!form.value.password2) { | 189 | if (!form.value.password2) { |
| 171 | ElMessage.warning(language.value == 0?'请再次输入密码':'Please enter password') | 190 | ElMessage.warning(language.value == 0 ? '请再次输入密码' : 'Please enter password') |
| 172 | return | 191 | return |
| 173 | } | 192 | } |
| 174 | delete form.value.password2 | 193 | delete form.value.password2 |
| 175 | vistorRegister(form.value).then(res=>{ | 194 | vistorRegister(form.value).then(res => { |
| 176 | setToken(res.data.token) | 195 | setToken(res.data.token) |
| 177 | emit('submitForm') | 196 | emit('submitForm') |
| 178 | }) | 197 | }) |
| 179 | } | 198 | } |
| 199 | |||
| 180 | const vconfirmPassword = () => { | 200 | const vconfirmPassword = () => { |
| 181 | if (form.value.password !== form.value.password2) { | 201 | if (form.value.password !== form.value.password2) { |
| 182 | ElMessage.warning(language.value == 0 ? '两次输入的密码不一致' :'The two passwords entered are inconsistent') | 202 | ElMessage.warning(language.value == 0 ? '两次输入的密码不一致' : 'The two passwords entered are inconsistent') |
| 183 | } | 203 | } |
| 184 | } | 204 | } |
| 205 | |||
| 185 | function close() { | 206 | function close() { |
| 186 | show.value = false | 207 | show.value = false |
| 187 | } | 208 | } |
| 188 | </script> | 209 | </script> |
| 189 | 210 | ||
| 190 | <style scoped lang="scss"> | 211 | <style lang="scss" scoped> |
| 191 | .tip{line-height: 1.6} | 212 | .tip { |
| 213 | line-height: 1.6 | ||
| 214 | } | ||
| 192 | </style> | 215 | </style> | ... | ... |
-
Please register or sign in to post a comment