Merge remote-tracking branch 'origin/main'

src/main/resources/views/platform/zhghh5/activity/culture/signUp.html

@@ -114,6 +114,10 @@ layout("/layouts/platform_h5.html"){
         height: 100%;
     }
 
+    .footer .van-count-down {
+        color: #ffffff;
+    }
+
     .form-create-h5 {
         background-color: #ffffff;
         margin-top: 10px;
@@ -330,6 +334,12 @@ layout("/layouts/platform_h5.html"){
     </div>
 
     <div class="footer">
+        <div class="bottom-button" style="background: var(--color-primary)" v-if="signUpNotStarted && !activityEnded">
+            <span>距离报名开始</span>
+            <van-count-down :time="applyStartCountdownTime" format="DD 天 HH 时 mm 分 ss 秒"
+                            @finish="refreshNowTime"></van-count-down>
+        </div>
+
         <div class="bottom-button" style="background: var(--color-primary)" v-if="!isSignUp && inApplyTime"
              @click="onConfirm">
             <span>立即报名</span>
@@ -347,7 +357,7 @@ layout("/layouts/platform_h5.html"){
             <span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
         </div>
 
-        <div class="bottom-button" v-if="$moment(viewData.endTime).valueOf() < $moment().valueOf()">活动已结束</div>
+        <div class="bottom-button" v-if="activityEnded">活动已结束</div>
     </div>
 </div>
 
@@ -373,7 +383,9 @@ layout("/layouts/platform_h5.html"){
                 //表格用户
                 teamUsers: [],
                 //是否报名
-                isSignUp: false
+                isSignUp: false,
+                nowTime: new Date().getTime(),
+                countdownTimer: null
             }
         },
 
@@ -392,16 +404,51 @@ layout("/layouts/platform_h5.html"){
             //是否在活动报名时间内
             inApplyTime() {
                 if (this.viewData) {
-                    const now = new Date().getTime()
                     const start = this.$moment(this.viewData.applyStartTime).valueOf()
                     const end = this.$moment(this.viewData.applyEndTime).valueOf()
-                    return now >= start && now <= end
+                    return this.nowTime >= start && this.nowTime <= end
+                }
+                return false
+            },
+            //报名未开始时显示倒计时，避免底部操作区空白
+            signUpNotStarted() {
+                if (this.viewData && this.viewData.applyStartTime) {
+                    return this.nowTime < this.$moment(this.viewData.applyStartTime).valueOf()
+                }
+                return false
+            },
+            applyStartCountdownTime() {
+                if (this.viewData && this.viewData.applyStartTime) {
+                    const start = this.$moment(this.viewData.applyStartTime).valueOf()
+                    return Math.max(start - this.nowTime, 0)
+                }
+                return 0
+            },
+            activityEnded() {
+                if (this.viewData && this.viewData.endTime) {
+                    return this.$moment(this.viewData.endTime).valueOf() < this.nowTime
                 }
                 return false
             }
         },
 
         methods: {
+            //统一刷新当前时间，保证报名开始或结束时按钮状态能自动切换
+            refreshNowTime() {
+                this.$set(this, "nowTime", new Date().getTime())
+            },
+            startCountdownTimer() {
+                this.stopCountdownTimer()
+                this.$set(this, "countdownTimer", setInterval(() => {
+                    this.refreshNowTime()
+                }, 1000))
+            },
+            stopCountdownTimer() {
+                if (this.countdownTimer) {
+                    clearInterval(this.countdownTimer)
+                    this.$set(this, "countdownTimer", null)
+                }
+            },
             init() {
                 if (this.id) {
                     this.$axios.post("/platform/activity/culture/infoManage/activityInfo", {id: this.id}).then((res) => {
@@ -768,6 +815,12 @@ layout("/layouts/platform_h5.html"){
         },
         created() {
             this.init()
+        },
+        mounted() {
+            this.startCountdownTimer()
+        },
+        beforeDestroy() {
+            this.stopCountdownTimer()
         }
     })
 </script>