Merge branch '线上版本修复' into devmatch
Showing
10 changed files
with
263 additions
and
149 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> | ... | ... |
This diff is collapsed.
Click to expand it.
| ... | @@ -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