票务

@@ -38,49 +38,72 @@
           {{ triggerLanguage(language, "地址", "Location") }}：{{ matchForm.address }}
         </div>
 
-        <!-- 时间 -->
-        <div class="select_item_box">
-          <div class="label">
-            {{ triggerLanguage(language, "时间", "Event Date & Time") }}
-          </div>
-          <div class="select_item">
-            <div
-              v-for="(it, index) in tickList"
-              :key="index"
-              :class="[
+
+        <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">
+              {{ triggerLanguage(language, "时间", "Event Date & Time") }}
+            </div>
+            <div class="select_item">
+              <div
+                v-for="(it, index) in tickList"
+                :key="index"
+                :class="[
                 it.id == selectForm.id ? 'tagActive' : 'tag',
                 it.isView==0?'forbid':''
               ]"
-              @click="selectTick(it)"
-            >
-              {{ it.name }} <span v-if="it.ticketType==1" class="tao">{{
-                language == 0 ? '套票' : 'Package ticket'
-              }}</span>
+                @click="selectTick(it)"
+              >
+                {{ it.name }} <span v-if="it.ticketType==1" class="tao">{{
+                  language == 0 ? '套票' : 'Package ticket'
+                }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <!-- 票档 -->
-        <div class="select_item_box">
-          <div class="label">
-            {{ triggerLanguage(language, "票档", "Tickets") }}
-          </div>
-          <div class="select_item">
-            <div
-              v-for="(it, index) in tickClass"
-              :key="index"
-              :class="[
+          <!-- 票档 -->
+          <div class="select_item_box">
+            <div class="label">
+              {{ triggerLanguage(language, "票档", "Tickets") }}
+            </div>
+            <div class="select_item">
+              <div
+                v-for="(it, index) in tickClass"
+                :key="index"
+                :class="[
                 it.id == selectForm.latId ? 'tagActive' : 'tag',
               ]"
-              @click="select(it)"
-            >
-              {{ it.name }}
+                @click="select(it)"
+              >
+                {{ it.name }}
+              </div>
             </div>
           </div>
+          <!-- button -->
+          <div class="btn forPc" style="margin-left: 40px" @click="toSelectSeat()">
+            {{ triggerLanguage(language, "添加观影人", "Add Moviegoers") }}
+          </div>
         </div>
-        <!-- button -->
-        <div class="btn forPc" style="margin-left: 40px" @click="toSelectSeat()">
-          {{ triggerLanguage(language, "添加观影人", "Add Moviegoers") }}
-        </div>
+
       </div>
     </div>
 
@@ -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>