Skip to content

jijin / dance-pc

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

H5适配

1 parent 514607a8
Inline Side-by-side
Showing 5 changed files with 515 additions and 421 deletions
src/viewsPc/booking/pay.vue
......@@ -469,11 +469,11 @@
<div v-if="payType == '2'&&wePayCodeUrl">
<div class="payImgbox flexCenter">
<div>
<img :src="wePayCodeUrl" class="border" width="260">
<img class="mt20" src="@/assets/img/sm.png">
<img :src="wePayCodeUrl" class="border payImg1" width="260">
<img class="mt20 payImg2" src="@/assets/img/sm.png">
</div>
<div class="ml20">
<img height="360" src="@/assets/img/rr.jpg">
<img class="payImg3" height="360" src="@/assets/img/rr.jpg">
</div>
</div>
<div v-if="language==0" class="tip text-center text-danger">
......@@ -1161,4 +1161,24 @@ const showSJ = () => {
.price {
color: orange;
}
@media screen and (max-width: 768px) {
.payImgbox {
width: 100%;
.payImg1 {
width: 40vw;
}
.payImg2 {
width: 40vw;
}
.payImg3 {
width: 40vw;
height: auto;
}
}
}
</style>
......
src/viewsPc/booking/ticket/addInvoice.vue
......@@ -22,7 +22,7 @@
<div>
<p>票档：{{ ticketForm.extJson?.atName }}</p>
<p>场馆：{{ ticketForm.extJson?.atsName }}</p>
<p>场次：{{ ticketForm.extJson?.sessionType =='1000'? '日间场' : '夜间场' }}</p>
<p>场次：{{ ticketForm.extJson?.sessionType == '1000' ? '日间场' : '夜间场' }}</p>
<p>票型：{{ ticketForm.extJson?.atstName }}</p>
</div>
<div>
......@@ -34,14 +34,14 @@
<el-col :lg="8" :md="12" :sm="12" :xs="24">联系方式：{{ ticketForm.phone }}
</el-col>
<el-col :lg="8" :md="12" :sm="12" :xs="24">
共计:{{ (totalMoney*1).toFixed(2) }}{{
共计:{{ (totalMoney * 1).toFixed(2) }}{{
paymentType == 1 ? '￥' : '€'
}}
</el-col>
</el-row>
</div>
</div>
<div class="leftboderTT">
{{ paymentType != 3 ? '开票信息' : 'Invoice information' }}
</div>
......@@ -51,15 +51,17 @@
class="mw500"
>
<el-form-item :label="language==0 ?'开票金额':'Amount'">
<span class="bigprice">{{ paymentType != 3 ? '¥' : '€' }}{{ paymentType != 3?ticketForm.total:ticketForm.totalEn }}</span>
<span class="bigprice">{{
paymentType != 3 ? '¥' : '€'
}}{{ paymentType != 3 ? ticketForm.total : ticketForm.totalEn }}</span>
</el-form-item>
<el-form-item :label="language==0 ?`发票形式`:'Invoice Form'" prop="invoiceForm" required>
<el-radio-group v-model="form.invoiceForm">
<el-radio value="1">{{ language == 0 ? '电子发票' : 'E-invoice' }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="language==0 ?`发票类型`:'Invoice Type'" prop="invoiceType" required>
<el-radio-group v-model="form.invoiceType">
<el-radio value="0">{{ language == 0 ? '企业' : 'Company' }}</el-radio>
......@@ -101,7 +103,7 @@
</el-form-item>
</div>
</el-form>
<div v-if="remark" class="tip">
<label>{{ paymentType != 3 ? '开票须知' : 'Invoice Notice' }}:</label>
<div v-html="remark" />
......@@ -109,7 +111,7 @@
</div>
</el-col>
</el-row>
<el-row align="middle" class="pd20" justify="center">
<el-col :span="12" class="text-center">
<el-button class="btn-lineG w200px" round size="large" type="primary" @click="submit">
......@@ -119,7 +121,7 @@
</el-row>
</el-card>
<div style="height: 60px;" />
</div>
</div>
<address-list-dialog ref="dialogAddressListRef" @submit="getAddress" />
......@@ -224,13 +226,13 @@ async function getTickInfo() {
// message.value = JSON.parse(ticketForm.value.extJson.message)
// console.log(message.value)
paymentType.value = ticketForm.value.paymentType
await getDetail(ticketForm.value.activeId)
// console.log(ticketForm.value)
} catch (e) {
console.log(e)
} finally {
}
}
......@@ -339,7 +341,7 @@ function goBack() {
.border-info {
position: relative;
& > label {
position: absolute;
right: 0;
......@@ -349,7 +351,7 @@ function goBack() {
padding: 5px 15px;
font-size: 14px;
}
.poPrice {
position: absolute;
bottom: 0px;
......@@ -404,12 +406,12 @@ function goBack() {
.ccitemBox {
overflow: auto;
label {
margin: 10px 0;
display: block;
min-height: 30px;
span {
color: #FF8124;
font-family: DIN Alternate;
......@@ -424,12 +426,12 @@ function goBack() {
font-size: 15px;
color: #666;
margin: 5px 0 10px;
label {
font-size: 16px;
color: #000;
}
span {
font-size: 13px;
}
......@@ -475,4 +477,5 @@ function goBack() {
line-height: 1;
font-family: "DIN Alternate";
}
</style>
......
src/viewsPc/booking/ticket/confirmOrder.vue
......@@ -12,8 +12,8 @@
<div class="name">{{ TickForm.name }}</div>
<div class="address">{{ TickForm.address }}</div>
</div>
<div class="ticket_info mb20">
<div class="tit_box">
<div class="line" />
......@@ -21,12 +21,12 @@
{{ languageFormat(language, "订票信息", "Ticket Info") }}
</div>
</div>
<div class="form">
<el-form ref="formRef" :model="orderForm" :rules="rules" label-width="140px">
<el-form ref="formRef" :model="orderForm" :rules="rules" label-position="top" label-width="130px">
<div v-if="TickForm2.ticketType == '1'">
<el-form-item :label="language == 0 ? '桌号' : 'Table'">
<!-- <el-popover :width="400" placement="right" trigger="hover">-->
<!-- <template #reference>-->
<!-- <div class="text-primary underline pointer" @click="showImg">-->
......@@ -39,7 +39,7 @@
<!-- />-->
<!-- </el-popover>-->
<!-- -->
<el-radio-group v-model="currDesk">
<el-radio-button
v-for="(it, index) in deskList" :key="index" :disabled="it.status!=0" :label="it.deskNo"
......@@ -105,7 +105,7 @@
</div>
</div>
</el-col>
<el-col :lg="8" class="right">
<div class="tit_box">
<div class="line" />
......@@ -113,7 +113,7 @@
{{ languageFormat(language, "订单明细", "Order summary") }}
</div>
</div>
<div class="detail">
<div class="detail_top">
<div class="time">
......@@ -148,14 +148,14 @@
<span v-else>{{ language == 0 ? '夜间场' : 'Night' }}</span>
｜ {{ TickForm2.ticketName }}
</div>
<div v-if="TickForm2.ticketType=='0'" class="address">{{
language == 0 ? '剩余数量' : 'Remaining Quantity'
}}： {{ leftCount }}
</div>
</div>
</div>
<!-- 场馆布局图-->
<div style="margin-top: 30px">
<el-image
......@@ -256,7 +256,7 @@ onMounted(() => {
tickImg.value = route.query.tickImg
customerList()
getDetail()
getActivityTypeVoById({
id: route.params.latstId
}).then((res) => {
......@@ -292,12 +292,12 @@ function changeGroup(e) {
}).then(res => {
if (res.data.length > 0) {
const names = _.map(res.data, (d) => d.name).join(',')
ElMessage({
message: language.value == 0 ? `${names} 已购买该票` : 'The user has purchased the ticket',
type: 'error'
})
_.each(res.data, (d) => {
_.remove(orderForm.value.customerIds, (c) => c == d.id)
_.find(personnelList.value, (p) => p.id == d.id).disabled = true
......@@ -319,7 +319,7 @@ async function paymentHandle() {
useStore.setVisitor()
return
}
if (TickForm2.value.ticketType == '1') {
if (currSeat.value.length == 0) {
ElMessage({
......@@ -336,9 +336,9 @@ async function paymentHandle() {
return
}
}
await formRef.value.validate()
await ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
......@@ -359,7 +359,7 @@ async function paymentHandle() {
seatNo: tempSeat.seatNo
})
})
const res = await submitOrderTicket({
activeId: orderForm.value.activeId,
orderName: TickForm2.value.ticketTypeName,
......@@ -406,7 +406,7 @@ async function paymentHandle() {
} catch (e) {
ElMessage.error(language.value == 0 ? '下单失败,' : 'Order failure')
} finally {
}
})
}
......@@ -450,7 +450,7 @@ div {
//padding: 20px 0;
width: 1200px;
margin: 20px auto;
.tag_t {
padding: 1px 10px;
font-weight: 400;
......@@ -460,7 +460,7 @@ div {
border: 1px solid #453dea;
margin-left: 5px;
}
.title {
padding: 11px;
text-align: center;
......@@ -468,18 +468,18 @@ div {
font-size: 18px;
color: #ffffff;
}
.content {
background-color: #fff;
}
.line {
width: 4px;
height: 18px;
background: linear-gradient(180deg, #493ceb 0%, #8623fc 100%);
border-radius: 4px;
}
.left {
.info {
background: rgba(69, 61, 234, 0.04);
......@@ -487,54 +487,54 @@ div {
border: 1px solid #d3d1f6;
padding: 20px 0 28px 33px;
margin-bottom: 20px;
.name {
font-weight: 500;
font-size: 18px;
color: #000000;
margin-bottom: 20px;
}
.address {
font-weight: 400;
font-size: 14px;
color: #929aa0;
}
}
.ticket_info {
.tit_box {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
.txt {
font-weight: bold;
font-size: 16px;
color: #493ceb;
}
}
.form {
min-height: 464px;
padding: 20px 60px;
border-radius: 5px;
border: 1px solid #dcdfe6;
.p_box {
display: flex;
width: 100%;
gap: 10px;
max-width: 400px;
.people {
width: 100%;
background: #fbfcfd;
border-radius: 2px;
border: 1px solid #dcdfe6;
padding: 0 14px;
.prople_item {
display: flex;
justify-content: space-between;
......@@ -543,30 +543,30 @@ div {
border-bottom: 1px solid #dcdfe6;
width: 100%;
position: relative;
&:last-child {
border: none;
}
.name {
font-size: 16px;
//color: #929aa0;
margin-bottom: 20px;
.tag_t {
position: absolute;
right: 30px;
padding: 8px;
}
}
.idcard {
font-size: 10px;
color: #929aa0;
}
}
}
.btn {
width: 90px;
height: 40px;
......@@ -585,30 +585,30 @@ div {
}
}
}
.right {
.tit_box {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
.txt {
font-weight: bold;
font-size: 16px;
color: #493ceb;
}
}
.detail {
padding: 15px 26px;
border-radius: 5px;
border: 1px solid #dcdfe6;
.detail_top {
padding-bottom: 13px;
border-bottom: 1px solid #dcdfe6;
.time {
font-weight: 500;
font-size: 20px;
......@@ -616,13 +616,13 @@ div {
line-height: 25px;
margin-bottom: 8px;
}
.ticket {
font-size: 16px;
color: #2d373f;
}
}
.detail_center {
margin-top: 14px;
display: flex;
......@@ -630,26 +630,26 @@ div {
padding-bottom: 13px;
border-bottom: 1px solid #dcdfe6;
gap: 8px;
.ticket {
font-size: 16px;
color: #2d373f;
}
}
.detail_b {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
.sum_txt {
font-weight: 600;
font-size: 18px;
color: #2d373f;
line-height: 25px;
}
.price_num {
font-weight: 600;
font-size: 36px;
......@@ -659,7 +659,7 @@ div {
}
}
}
.footer {
display: flex;
justify-content: space-between;
......@@ -669,20 +669,20 @@ div {
box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
margin-top: 9px;
padding: 0 30px;
.label {
font-size: 16px;
color: #7b7f83;
line-height: 22px;
}
.value {
font-size: 22px;
color: #ff8124;
line-height: 30px;
font-weight: 600;
}
.pay {
width: 200px;
height: 40px;
......@@ -696,7 +696,7 @@ div {
cursor: pointer;
user-select: none;
}
.goBack {
width: 200px;
height: 40px;
......@@ -725,12 +725,6 @@ div {
cursor: pointer
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
.rightBox {
.info {
background: rgba(69, 61, 234, 0.04);
......@@ -741,4 +735,49 @@ div {
margin-top: 30px;
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
:deep(.form) {
padding: 30px 0 !important;
form {
padding: 10px;
}
}
.footer {
display: block;
width: 100%;
height: auto;
padding: 20px;
div {
width: 100%;
}
.goBack {
width: 140px;
position: relative;
height: 40px;
top: 0;
left: 0%;
margin: 10px 0;
}
.pay {
width: 140px;
position: relative;
height: 40px;
top: -50px;
left: 55%;
}
}
}
}
</style>
......
src/viewsPc/booking/ticket/index.vue
......@@ -2,237 +2,245 @@
<div>
<!-- top -->
<div class="container top ">
<img :src="fillImgUrl(matchForm.ticketImg)" alt="" class="cover_img">
<div class="info">
<div class="title">{{ matchForm.name }}</div>
<div class="time">
{{ triggerLanguage(language, "时间", "Event Date & Time") }}：{{
matchForm.beginTime
? dayjs(matchForm.beginTime).format("YYYY.MM.DD")
: ""
}}
{{
matchForm.beginTime
? getDayName(
new Date(matchForm.beginTime),
language == 1 ? "en-US" : "zh-CN"
)
: ""
}}
—
{{
matchForm.endTime
? dayjs(matchForm.endTime).format("YYYY.MM.DD")
: ""
}}
{{
matchForm.endTime
? getDayName(
new Date(matchForm.endTime),
language == 1 ? "en-US" : "zh-CN"
)
: ""
}}
</div>
<div class="address">
{{ triggerLanguage(language, "地址", "Location") }}：{{ matchForm.address }}
</div>
<div v-if="timeData>0">
<!-- 倒计时-->
<p class="countDownTitle">
<span v-if="language==0">售票倒计时</span>
<span v-else>TICKET COUNTDOWN</span>
</p>
<van-count-down :time="timeData" format="DD 天 HH 时 mm 分 ss 秒">
<template #default="timeData">
<span class="block">{{ timeData.days }}</span>
<span class="colon">{{ language == 0 ? '天' : 'Days' }}</span>
<span class="block">{{ timeData.hours }}</span>
<span class="colon">{{ language == 0 ? '时' : 'Hrs' }}</span>
<span class="block">{{ timeData.minutes }}</span>
<span class="colon">{{ language == 0 ? '分' : 'Min' }}</span>
<span class="block">{{ timeData.seconds }}</span>
<span class="colon">{{ language == 0 ? '秒' : 'Sec' }}</span>
</template>
</van-count-down>
</div>
<div v-else>
<!-- 票档 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, "票档", "Tickets") }} :
</div>
</div>
<div class="select_item_box">
<div class="select_item">
<div
v-for="(it, index) in tickClass"
:key="index"
:class="[
it.id == selectForm.latId ? 'tagActive' : 'tag',
it.overdueView=='0' ? 'forbid' : '',
(it.ticketPackage==1 && overdueView=='0') ?'forbid':''
]"
@click="select(it)"
>
{{ it.ticketTypeName }}<span v-if="it.ticketPackage==1" class="tao">{{
language == 0 ? '套票' : 'Package ticket'
}}</span>
</div>
<el-row :gutter="20" style="width: 100%">
<el-col :lg="12" :md="12" :sm="24" :xs="24">
<img :src="fillImgUrl(matchForm.ticketImg)" alt="" class="cover_img">
</el-col>
<el-col :lg="12" :md="12" :sm="24" :xs="24">
<div class="info">
<div class="title">{{ matchForm.name }}</div>
<div class="time">
{{ triggerLanguage(language, "时间", "Event Date & Time") }}：{{
matchForm.beginTime
? dayjs(matchForm.beginTime).format("YYYY.MM.DD")
: ""
}}
{{
matchForm.beginTime
? getDayName(
new Date(matchForm.beginTime),
language == 1 ? "en-US" : "zh-CN"
)
: ""
}}
—
{{
matchForm.endTime
? dayjs(matchForm.endTime).format("YYYY.MM.DD")
: ""
}}
{{
matchForm.endTime
? getDayName(
new Date(matchForm.endTime),
language == 1 ? "en-US" : "zh-CN"
)
: ""
}}
</div>
</div>
<!-- 场馆 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, "场馆", "Venues") }} :
<div class="address">
{{ triggerLanguage(language, "地址", "Location") }}：{{ matchForm.address }}
</div>
<div>
<span
v-if="currVenue?.images"
style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px"
@click="handleImage"
> <span style="color: red;font-size: 18px">*</span>
{{
language == 0 ? '点击查看场馆布局' : 'View Venue Layout'
}}
</span>
<div v-if="timeData>0">
<!-- 倒计时-->
<p class="countDownTitle">
<span v-if="language==0">售票倒计时</span>
<span v-else>TICKET COUNTDOWN</span>
</p>
<van-count-down :time="timeData" format="DD 天 HH 时 mm 分 ss 秒">
<template #default="timeData">
<span class="block">{{ timeData.days }}</span>
<span class="colon">{{ language == 0 ? '天' : 'Days' }}</span>
<span class="block">{{ timeData.hours }}</span>
<span class="colon">{{ language == 0 ? '时' : 'Hrs' }}</span>
<span class="block">{{ timeData.minutes }}</span>
<span class="colon">{{ language == 0 ? '分' : 'Min' }}</span>
<span class="block">{{ timeData.seconds }}</span>
<span class="colon">{{ language == 0 ? '秒' : 'Sec' }}</span>
</template>
</van-count-down>
</div>
</div>
<div class="select_item_box">
<div class="select_item">
<div
v-for="(it, index) in venueList"
:key="index"
:class="[
it.id == selectForm.latsId ? 'tagActive' : 'tag',
it.isView==0?'forbid':''
]"
@click="selectVenue(it)"
>
{{ it.name }}
<div v-else>
<!-- 票档 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, "票档", "Tickets") }} :
</div>
</div>
<div v-if="remarks" class="remarks">{{ remarks }}</div>
</div>
</div>
<!-- 场次 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, "场次", "Session") }} :
</div>
</div>
<div class="select_item_box">
<div class="select_item">
<div
v-for="(it, key) in tickList"
:key="key"
:class="[
key == selectForm.sessionType ? 'tagActive' : 'tag',
it.isView==0?'forbid':''
]"
@click="selectSessionType(key)"
>
<span v-if="key=='1000'">{{
language == 0 ? '日间场' : 'Day'
}}</span>
<span v-else>{{
language == 0 ? '夜间场' : 'Night'
}}</span>
<!-- {{ key=='1000'?'日间场':'夜间场' }}-->
<div class="select_item_box">
<div class="select_item">
<div
v-for="(it, index) in tickClass"
:key="index"
:class="[
it.id == selectForm.latId ? 'tagActive' : 'tag',
it.overdueView=='0' ? 'forbid' : '',
(it.ticketPackage==1 && overdueView=='0') ?'forbid':''
]"
@click="select(it)"
>
{{ it.ticketTypeName }}<span v-if="it.ticketPackage==1" class="tao">{{
language == 0 ? '套票' : 'Package ticket'
}}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 票型 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, "票型", "Ticket Type") }} :
</div>
</div>
<div class="select_item_box">
<div class="select_item">
<div
v-for="it in tickList[selectForm.sessionType]"
:key="it.id"
:class="[
it.id == selectForm.latstId ? 'tagActive' : 'tag',
it.isView==0?'forbid':''
]"
@click="selectTick(it)"
>
{{ it.name }}
<!-- 场馆 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, "场馆", "Venues") }} :
</div>
<div>
<span
v-if="currVenue?.images"
style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px"
@click="handleImage"
> <span style="color: red;font-size: 18px">*</span>
{{
language == 0 ? '点击查看场馆布局' : 'View Venue Layout'
}}
</span>
</div>
</div>
<div class="father">
<el-image
v-if="currTick?.images"
:src="fillImgUrl(currTick?.images) "
class="son"
fit="cover"
preview-teleported
style="width:190px;height: 135px"
/>
<div class="select_item_box">
<div class="select_item">
<div
v-for="(it, index) in venueList"
:key="index"
:class="[
it.id == selectForm.latsId ? 'tagActive' : 'tag',
it.isView==0?'forbid':''
]"
@click="selectVenue(it)"
>
{{ it.name }}
</div>
<div v-if="remarks" class="remarks">{{ remarks }}</div>
</div>
</div>
</div>
</div>
<!-- 价格 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, '价格', "Price") }} :
</div>
</div>
<div class="select_item_box">
<div class="select_item">
<div class="tagActive" style="min-width: 80px">
{{ language == 0 ? '￥' : '€' }} {{ language == 0 ? selectForm.price : selectForm.priceEn }}
<!-- 场次 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, "场次", "Session") }} :
</div>
</div>
<div class="select_item_box">
<div class="select_item">
<div
v-for="(it, key) in tickList"
:key="key"
:class="[
key == selectForm.sessionType ? 'tagActive' : 'tag',
it.isView==0?'forbid':''
]"
@click="selectSessionType(key)"
>
<span v-if="key=='1000'">{{
language == 0 ? '日间场' : 'Day'
}}</span>
<span v-else>{{
language == 0 ? '夜间场' : 'Night'
}}</span>
<!-- {{ key=='1000'?'日间场':'夜间场' }}-->
</div>
</div>
</div>
<!-- 票型 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, "票型", "Ticket Type") }} :
</div>
</div>
<div class="select_item_box">
<div class="select_item">
<div
v-for="it in tickList[selectForm.sessionType]"
:key="it.id"
:class="[
it.id == selectForm.latstId ? 'tagActive' : 'tag',
it.isView==0?'forbid':''
]"
@click="selectTick(it)"
>
{{ it.name }}
</div>
<div class="father">
<el-image
v-if="currTick?.images"
:src="fillImgUrl(currTick?.images) "
class="son"
fit="cover"
preview-teleported
style="width:190px;height: 135px"
/>
</div>
</div>
</div>
<!-- 价格 -->
<div class="select_item_box">
<div class="label">
{{ triggerLanguage(language, '价格', "Price") }} :
</div>
</div>
<div class="select_item_box">
<div class="select_item">
<div class="tagActive" style="min-width: 80px">
{{ language == 0 ? '￥' : '€' }} {{ language == 0 ? selectForm.price : selectForm.priceEn }}
</div>
</div>
</div>
<!-- 购票备注-->
<div v-if="matchForm.ticketRemark" class="select_item_box">
<div class="label">
{{
triggerLanguage(language, '购票备注', "Ticket Purchase Note")
}} :
</div>
</div>
<div v-if="matchForm.ticketRemark" class="select_item_box">
<div class="select_item">
{{ matchForm.ticketRemark }}
</div>
</div>
<div
v-if="isOver" class="btn"
style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
>
{{
triggerLanguage(language, "售票结束", "Sale closed")
}}
</div>
<template v-else>
<div v-if="leftCount<=0 && leftCount!=-999" class="btn" style="margin-left: 40px;margin-top: 10px">
{{
triggerLanguage(language, "票已售罄", "Sale out")
}}
</div>
<div v-else class="btn" style="margin-left: 40px;margin-top: 10px" @click="toSelectSeat()">
{{
triggerLanguage(language, "立即购票", "Buy tickets now")
}}
</div>
</template>
</div>
</div>
<!-- 购票备注-->
<div v-if="matchForm.ticketRemark" class="select_item_box">
<div class="label">
{{
triggerLanguage(language, '购票备注', "Ticket Purchase Note")
}} :
</div>
</div>
<div v-if="matchForm.ticketRemark" class="select_item_box">
<div class="select_item">
{{ matchForm.ticketRemark }}
</div>
</div>
<div
v-if="isOver" class="btn"
style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
>
{{
triggerLanguage(language, "售票结束", "Sale closed")
}}
</div>
<template v-else>
<div v-if="leftCount<=0 && leftCount!=-999" class="btn" style="margin-left: 40px;margin-top: 10px">
{{
triggerLanguage(language, "票已售罄", "Sale out")
}}
</div>
<div v-else class="btn" style="margin-left: 40px;margin-top: 10px" @click="toSelectSeat()">
{{
triggerLanguage(language, "立即购票", "Buy tickets now")
}}
</div>
</template>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="container bottom">
<div style="display: flex">
<div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language == 0 ? '购票说明' : 'Notice' }}</div>
......@@ -243,7 +251,7 @@
</div>
<div v-show="active==1" class="rich_content" v-html="matchForm.ticketDes" />
<div v-show="active==2" class="rich_content" v-html="matchForm.ticketNotice" />
<el-dialog v-model="show" align-center title="" width="1000px">
<div style="padding: 20px">
<img :src="fillImgUrl(showUrl)" alt="" style="width: 100%">
......@@ -339,12 +347,12 @@ async function getTicketList() {
activityId: activeId.value, status: 1
})
tickClass.value = res.rows
if (_.some(tickClass.value, (item) => item.overdueView == '0')
) {
overdueView.value = '0'
}
const item = _.find(tickClass.value, (item) => item.overdueView == '1')
if (item) {
selectForm.value.latId = item.id
......@@ -375,7 +383,7 @@ function select(v) {
if (v.id == selectForm.value.latId) {
return
}
selectForm.value.latId = v.id
selectForm.value.latsId = null
selectForm.value.sessionType = null
......@@ -384,7 +392,7 @@ function select(v) {
selectForm.value.price = '--'
selectForm.value.priceEn = '--'
currTick.value = null
getVenueList()
}
......@@ -392,7 +400,7 @@ function selectVenue(v) {
if (v.id == selectForm.value.latsId) {
return
}
currVenue.value = v
selectForm.value.latsId = v.id
selectForm.value.sessionType = null
......@@ -402,7 +410,7 @@ function selectVenue(v) {
selectForm.value.priceEn = '--'
remarks.value = v.remarks
currTick.value = null
getTicketListType()
}
......@@ -410,9 +418,9 @@ function selectSessionType(key) {
if (key == selectForm.value.sessionType) {
return
}
selectForm.value.sessionType = key
// currTick.value = tickList.value[selectForm.value.sessionType][0]
selectForm.value.latstId = currTick.value?.id
selectForm.value.price = currTick.value?.price
......@@ -425,12 +433,11 @@ function selectTick(v) {
if (v.id == selectForm.value.latstId) {
return
}
currTick.value = v
selectForm.value.latstId = v.id
selectForm.value.price = v.price
selectForm.value.priceEn = v.priceEn
// vip票
if (currTick.value.ticketType == '1') {
showUrl.value = v.images
......@@ -438,10 +445,12 @@ function selectTick(v) {
leftCount.value = -999
} else {
checkNonPayment().then(res => {
// debugger
if (res.data) {
getListByAtstId({
atstId: selectForm.value.latstId
}).then(res => {
console.log(res.data)
leftCount.value = res.data
if (leftCount.value > 0) {
showUrl.value = v.images
......@@ -539,18 +548,18 @@ getmatchData()
display: flex;
padding: 19px;
margin-top: 26px;
.cover_img {
width: 500px;
height: 667px;
object-fit: fill;
margin-right: 36px;
//margin-right: 36px;
}
.info {
padding-top: 12px;
width: 100%;
.title {
font-weight: bold;
font-size: 28px;
......@@ -558,7 +567,7 @@ getmatchData()
line-height: 1.6;
margin-bottom: 15px;
}
.time {
font-weight: 600;
font-size: 16px;
......@@ -566,7 +575,7 @@ getmatchData()
line-height: 24px;
margin-bottom: 16px;
}
.address {
font-weight: 600;
font-size: 16px;
......@@ -574,15 +583,15 @@ getmatchData()
line-height: 24px;
margin-bottom: 15px;
}
.select_item_box {
display: flex;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
.label {
font-weight: 600;
font-size: 16px;
......@@ -591,19 +600,19 @@ getmatchData()
margin-right: 12px;
flex-shrink: 0;
}
.forbid {
pointer-events: none;
opacity: 0.5 !important;
cursor: not-allowed !important;
}
.select_item {
display: flex;
flex-wrap: wrap;
gap: 10px;
user-select: none;
.tag_t {
padding: 1px 15px;
font-weight: 400;
......@@ -613,7 +622,7 @@ getmatchData()
border: 1px solid #453dea;
margin-left: 5px;
}
.tag {
display: flex;
padding: 12px 18px;
......@@ -624,7 +633,7 @@ getmatchData()
color: #4a4a4a;
cursor: pointer;
}
.tagActive {
display: flex;
padding: 12px 18px;
......@@ -635,14 +644,14 @@ getmatchData()
color: #493ceb;
cursor: pointer;
}
.tao {
border: 1px solid #493ceb;
font-size: 14px;
color: #493ceb;
margin-left: 10px;
}
.tagDisabled {
padding: 12px 18px;
background: #878787;
......@@ -654,7 +663,7 @@ getmatchData()
}
}
}
.btn {
width: 175px;
height: 40px;
......@@ -674,7 +683,7 @@ getmatchData()
padding: 50px;
margin-top: 30px;
margin-bottom: 30px;
.title {
padding: 20px 30px;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
......@@ -684,90 +693,18 @@ getmatchData()
line-height: 30px;
margin-bottom: 30px;
}
.rich_content {
margin-top: 30px;
:deep(img) {
width: 100% !important;
height: auto !important;
}
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.forWei {
display: block
}
.top {
//transform: scale(0.5);transform-origin: left top;
.cover_img {
width: 120px;
height: 160px;
margin-right: 15px;
}
.info {
padding: 0;
.title {
font-size: 14px;
margin: 0;
}
.time, .address, .label, .tip {
font-size: 12px;
}
.title, .time, .address, .tip, .select_item_box {
margin-bottom: 3px;
}
.select_item_box {
.label {
font-size: 12px;
}
.select_item .tag {
padding: 2px 10px;
font-size: 12px;
}
.select_item .tagActive {
padding: 2px 10px;
font-size: 12px;
}
.select_item .tagDisabled {
padding: 2px 10px;
font-size: 12px;
}
}
.btn {
display: inline-block;
margin: 10px 0 0;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
border-radius: 20px;
line-height: 40px;
text-align: center;
font-weight: 500;
font-size: 16px;
color: #ffffff;
cursor: pointer;
}
}
}
.bottom {
padding: 0
}
}
.countDownTitle {
text-align: center;
......@@ -850,4 +787,85 @@ getmatchData()
color: #4a4a4a !important;
cursor: no-drop !important;
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.forWei {
display: block
}
.top {
//transform: scale(0.5);transform-origin: left top;
.cover_img {
width: 120px;
height: 160px;
margin-right: 15px;
}
.info {
padding: 0;
.title {
font-size: 14px;
margin: 0;
}
.time, .address, .label, .tip {
font-size: 12px;
}
.title, .time, .address, .tip, .select_item_box {
margin-bottom: 3px;
}
.select_item_box {
.label {
font-size: 12px;
}
.select_item .tag {
padding: 2px 10px;
font-size: 12px;
}
.select_item .tagActive {
padding: 2px 10px;
font-size: 12px;
}
.select_item .tagDisabled {
padding: 2px 10px;
font-size: 12px;
}
}
.btn {
display: inline-block;
margin: 10px 0 0;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
border-radius: 20px;
line-height: 40px;
text-align: center;
font-weight: 500;
font-size: 16px;
color: #ffffff;
cursor: pointer;
}
}
}
.bottom {
padding: 0
}
.father {
.son {
width: 85px !important;
height: 67.5px !important;
left: 50px;
top: 10px;
}
}
}
</style>
......
src/viewsPc/booking/ticket/peopleManage.vue
......@@ -7,7 +7,7 @@
<span>
{{ languageFormat(language, "观影人管理", "Viewers") }}
</span>
<span class="fr" style="cursor: pointer" @click="$router.go(-1)">
{{ language == 0 ? '返回' : 'Back' }}
</span>
......@@ -25,12 +25,12 @@
</div>
</div>
</div>
<el-dialog
v-model="show"
:title="language==0?'新增观影人':'New moviegoers'"
center
width="700"
style="max-width: 700px;min-width: 350px;"
>
<el-form
ref="formRef" :model="form" :rules="rules" label-width="100px" size="large"
......@@ -50,13 +50,20 @@
<el-input v-model="form.idCard" :placeholder="language==0?'请输入证件号':'Please enter the ID after ah'" />
</el-form-item>
</el-form>
<span class="dialog-footer">
<div class="dialog-footer">
<div style="text-align: center">
<el-button class="can_pay" @click="show = false">{{ language == 0 ? '取 消' : 'cancel' }}</el-button>
<el-button class="pay" type="primary" @click="submit">{{ language == 0 ? '确 定' : 'confirm' }}</el-button>
<el-button class="can_pay marginBtn" @click="show = false">{{
language == 0 ? '取 消' : 'cancel'
}}
</el-button>
<el-button class="pay marginBtn" type="primary" @click="submit">{{
language == 0 ? '确 定' : 'confirm'
}}
</el-button>
</div>
</span>
</div>
<br>
</el-dialog>
</el-card>
......@@ -114,7 +121,7 @@ function submit() {
useStore().setVisitor()
return
}
formRef.value.validate((valid) => {
if (valid) {
aadCustomer(form.value).then(res => {
......@@ -173,12 +180,12 @@ div {
:deep(.el-dialog) {
padding: 0;
.el-dialog__header {
height: 50px;
line-height: 50px;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
.el-dialog__title {
color: #fff;
}
......@@ -219,7 +226,7 @@ div {
//}
width: 1200px;
margin: 20px auto;
.title {
position: relative;
padding: 11px;
......@@ -227,7 +234,7 @@ div {
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
font-size: 18px;
color: #ffffff;
.add_btn {
position: absolute;
left: 20px;
......@@ -247,32 +254,32 @@ div {
cursor: pointer;
}
}
.content {
min-height: 590px;
background-color: #fff;
box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
padding: 20px;
.people_box {
display: flex;
flex-wrap: wrap;
gap: 20px;
.people_item {
width: 275px;
height: 137px;
background: #ffffff;
border: 1px solid #dcdfe6;
padding: 16px;
.name {
font-weight: 600;
font-size: 16px;
color: #2d373f;
line-height: 22px;
}
.idcard {
font-size: 16px;
color: #95a1a6;
......@@ -280,7 +287,7 @@ div {
margin-top: 12px;
margin-bottom: 17px;
}
.btn {
width: 69px;
height: 32px;
......@@ -302,5 +309,12 @@ div {
.container {
width: 100%;
}
form {
margin: 20px 20px 0 0 !important;
}
}
.marginBtn {
margin: 5px
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!