900d42f9 by zhangmeng

票务

1 parent 8a5a4ea6
......@@ -38,6 +38,27 @@
{{ triggerLanguage(language, "地址", "Location") }}{{ matchForm.address }}
</div>
<div v-if="!countDown">
<!-- 倒计时-->
<p class="countDownTitle">
<span v-if="language==0">报名截止倒计时</span>
<span v-else>REGISTRATION 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">
......@@ -82,6 +103,8 @@
{{ triggerLanguage(language, "添加观影人", "Add Moviegoers") }}
</div>
</div>
</div>
</div>
<div class="container bottom">
......@@ -110,10 +133,12 @@ const route = useRoute();
const router = useRouter();
const activeId = ref(route.params.activeId)
const flag = ref(false)
const countDown = ref(false)
const props = defineProps({
activityId: [String, Number],
});
const timeData = ref({})
const nowData = ref(dayjs().valueOf())
const matchForm = ref({})
const tickClass = ref([])
const selectForm = ref({
......@@ -128,6 +153,8 @@ getDetail()
async function getDetail() {
const res = await getTicketInfoByActivityId({activityId: activeId.value})
matchForm.value = res.data
timeData.value = dayjs(res.data.ticketStart).valueOf()
if (timeData.value <= nowData.value) countDown.value = true
}
// 根据赛事ID获取票档
......@@ -190,7 +217,7 @@ function toSelectSeat() {
width: 1200px;
margin: 0 auto;
background-color: #fff;
box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
box-shadow: 0 0 46px 0 rgba(1, 16, 64, 0.08);
border-radius: 8px;
box-sizing: border-box;
font-family: SourceHanSansCN, SourceHanSansCN;
......@@ -404,4 +431,61 @@ function toSelectSeat() {
padding: 0
}
}
.countDownTitle {
text-align: center;
color: #000;
position: relative;
width: 100%;
left: 0;
font-size: 35px;
}
.countDownTitle span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
.countDownTitle::after {
position: absolute;
background: #ccc;
height: 1px;
content: '';
top: 0;
bottom: 0;
margin: auto;
width: 100%;
left: 0;
}
.van-count-down {
text-align: center;
margin: 20px 0;
display: flex;
justify-content: center;
}
.colon {
display: inline-block;
font-size: 20px;
margin: 0 8px;
color: #7B7F83;
}
.block {
display: inline-block;
opacity: 0.7;
width: 120px;
height: 120px;
line-height: 120px;
color: #fff;
font-size: 35px;
font-weight: bold;
border-radius: 10px;
background: url(@/assets/img/djs_bg.png) left;
background-size: 100% 100%;
text-align: center;
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!