Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
01c8ae36 by zhangmeng
Options

票务

1 parent 0de836b9
Expand all
Inline Side-by-side
Showing 3 changed files with 77 additions and 59 deletions
src/viewsPc/booking/ticket/index.vue
......@@ -2,7 +2,7 @@
<div>
<!-- top -->
<div class="container top">
<img :src="fillImgUrl(matchForm.ticketImg)" class="cover_img">
<img :src="fillImgUrl(matchForm.ticketImg)" alt="" class="cover_img">
<div class="info">
<div class="title">{{ matchForm.name }}</div>
<div class="time">
......@@ -37,11 +37,11 @@
<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>
......@@ -60,7 +60,7 @@
</van-count-down>
</div>
<div v-else>
<!-- 票档 -->
<div class="select_item_box">
<div class="label">
......@@ -83,7 +83,7 @@
</div>
</div>
</div>
<!-- 场馆 -->
<div class="select_item_box">
<div class="label">
......@@ -93,7 +93,7 @@
<span
v-if="currVenue?.images"
style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px"
@click="showUrl=currVenue.images; show=true"
@click="handleImage"
> <span style="color: red;font-size: 18px">*</span>
{{
language == 0 ? '点击查看场馆布局' : 'View Venue Layout'
......@@ -116,7 +116,7 @@
</div>
</div>
</div>
<!-- 场次 -->
<div class="select_item_box">
<div class="label">
......@@ -140,11 +140,11 @@
<span v-else>{{
language == 0 ? '夜间场' : 'Night'
}}</span>
<!-- {{ key=='1000'?'日间场':'夜间场' }}-->
<!-- {{ key=='1000'?'日间场':'夜间场' }}-->
</div>
</div>
</div>
<!-- 票型 -->
<div class="select_item_box">
<div class="label">
......@@ -177,8 +177,8 @@
</div>
</div>
</div>
<!-- 价格 -->
<div class="select_item_box">
<div class="label">
......@@ -205,7 +205,7 @@
{{ matchForm.ticketRemark }}
</div>
</div>
<div
v-if="endTime<=0" class="btn" style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
@click="toSelectClosed"
......@@ -219,20 +219,23 @@
triggerLanguage(language, "立即购票", "Buy tickets now")
}}
</div>
</div>
</div>
</div>
<div class="container bottom">
<div style="display: flex">
<div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language==0?'购票说明':'Notice' }}</div>
<div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{ language==0?'购票须知':'Instructions' }}</div>
<div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language == 0 ? '购票说明' : 'Notice' }}</div>
<div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{
language == 0 ? '购票须知' : 'Instructions'
}}
</div>
</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" title="" width="1000px">
<div>
<img :src="fillImgUrl(showUrl)" alt="" style="width: 100%">
......@@ -250,7 +253,8 @@ import {
getTicketListApi,
checkNonPayment,
getStadiumList,
getActivityTypeVoListByLatsId
getActivityTypeVoListByLatsId,
getBaseInfoByActiveId
} from '@/apiPc/booking'
import { dayjs } from 'element-plus'
......@@ -290,6 +294,7 @@ const venueList = ref([])
const tickList = ref([])
const currVenue = ref(null)
const currTick = ref(null)
const matchData = ref({})
watch(show, (val) => {
if (!val) {
......@@ -339,7 +344,7 @@ async function getTicketListType() {
const res = await getActivityTypeVoListByLatsId({ latsId: selectForm.value.latsId })
tickList.value = res.data
selectForm.value.sessionType = Object.keys(res.data)[0]
currTick.value = tickList.value[selectForm.value.sessionType][0]
selectForm.value.latstId = currTick.value?.id
selectForm.value.price = currTick.value?.price
......@@ -354,7 +359,7 @@ function select(v) {
selectForm.value.id = null
selectForm.value.price = '--'
selectForm.value.priceEn = '--'
getVenueList()
}
......@@ -366,13 +371,13 @@ function selectVenue(v) {
selectForm.value.id = null
selectForm.value.price = '--'
selectForm.value.priceEn = '--'
getTicketListType()
}
function selectSessionType(key) {
selectForm.value.sessionType = key
currTick.value = tickList.value[selectForm.value.sessionType][0]
selectForm.value.latstId = currTick.value?.id
selectForm.value.price = currTick.value?.price
......@@ -418,6 +423,20 @@ function toSelectClosed() {
type: 'warning'
})
}
async function getmatchData() {
const res = await getBaseInfoByActiveId(route.params.activeId)
matchData.value = res.data
console.log(res)
}
function handleImage() {
// ticketImg
showUrl.value = matchData.value.ticketLayout
show.value = true
}
getmatchData()
</script>
<style lang="scss" scoped>
......@@ -453,18 +472,17 @@ function toSelectClosed() {
display: flex;
padding: 19px;
margin-top: 26px;
.cover_img {
width: 390px;
height: 517px;
width: 500px;
object-fit: fill;
margin-right: 36px;
}
.info {
padding-top: 12px;
width: 100%;
.title {
font-weight: bold;
font-size: 28px;
......@@ -472,7 +490,7 @@ function toSelectClosed() {
line-height: 1.6;
margin-bottom: 15px;
}
.time {
font-weight: 600;
font-size: 16px;
......@@ -480,7 +498,7 @@ function toSelectClosed() {
line-height: 24px;
margin-bottom: 16px;
}
.address {
font-weight: 600;
font-size: 16px;
......@@ -488,15 +506,15 @@ function toSelectClosed() {
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;
......@@ -505,18 +523,18 @@ function toSelectClosed() {
margin-right: 12px;
flex-shrink: 0;
}
.forbid {
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;
......@@ -526,7 +544,7 @@ function toSelectClosed() {
border: 1px solid #453dea;
margin-left: 5px;
}
.tag {
display: flex;
padding: 12px 18px;
......@@ -537,7 +555,7 @@ function toSelectClosed() {
color: #4a4a4a;
cursor: pointer;
}
.tagActive {
display: flex;
padding: 12px 18px;
......@@ -548,14 +566,14 @@ function toSelectClosed() {
color: #493ceb;
cursor: pointer;
}
.tao {
border: 1px solid #493ceb;
font-size: 14px;
color: #493ceb;
margin-left: 10px;
}
.tagDisabled {
padding: 12px 18px;
background: #878787;
......@@ -567,7 +585,7 @@ function toSelectClosed() {
}
}
}
.btn {
width: 175px;
height: 40px;
......@@ -587,7 +605,7 @@ function toSelectClosed() {
padding: 50px;
margin-top: 30px;
margin-bottom: 30px;
.title {
padding: 20px 30px;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
......@@ -597,15 +615,15 @@ function toSelectClosed() {
line-height: 30px;
margin-bottom: 30px;
}
.rich_content {
margin-top: 30px;
:deep(img) {
width: 100% !important;
height: auto !important;
}
}
}
......@@ -623,44 +641,44 @@ function toSelectClosed() {
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;
......@@ -678,8 +696,8 @@ function toSelectClosed() {
.bottom {
padding: 0
}
}
.countDownTitle {
......
vite.config.js
......@@ -81,8 +81,8 @@ export default defineConfig(({ mode, command }) => {
rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
},
'/dev-api': {
target: 'http://192.168.1.118:8081/',
// target: 'http://192.168.1.130:8081',
// target: 'http://192.168.1.118:8081/',
target: 'http://192.168.1.118:8081',
// target: 'https://jijin.wtwuxicenter.com/stage-api',
// target: 'https://wdsfwuxicenter.com/stage-api/',
changeOrigin: true,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!