倒计时组件

2025-03-25 17:23:40 +08:00
parent f88048b876
commit a5d5ce4e7c
2 changed files with 229 additions and 0 deletions
@@ -0,0 +1,104 @@
+<template>
+  <view class="countdown">
+	  <view class="time green" v-if="!isend">
+		  <image src="/static/image/gtime.png" mode=""></image>
+			<text v-if="showDays && timeObj.days > 0" >{{ timeObj.days }}{{$t('day')}} </text>
+			<text> {{ timeObj.hours | padZero }} : </text>
+			<text> {{ timeObj.minutes | padZero }} : </text>
+			<text> {{ timeObj.seconds | padZero }}</text>
+	  </view>
+	  <view class="time timered" v-else>
+		 <image src="/static/image/redtime.png" mode=""></image>
+	  	 <text>{{$t('timeout')}}</text>
+	  </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    // 倒计时总秒数
+    totalSeconds: {
+      type: Number,
+      required: true
+    },
+    // 是否显示天数
+    showDays: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      timeObj: {
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0
+      },
+	  isend:false,
+      timer: null,
+	  totalSeconds1:this.totalSeconds
+    }
+  },
+  filters: {
+    padZero(value) {
+      return value.toString().padStart(2, '0');
+    }
+  },
+  mounted() {
+	  if(this.totalSeconds>0){
+		  this.runCountdown();
+	  }else{
+		  this.isend=true
+	  }
+  },
+  methods: {
+    runCountdown() {
+      this.updateTime(this.totalSeconds1);
+      this.timer = setInterval(() => {
+        if (this.totalSeconds1 <= 0) {
+          clearInterval(this.timer);
+		  this.isend=true
+          this.$emit('end');
+          return;
+        }
+        this.totalSeconds1--;
+        this.updateTime(this.totalSeconds1);
+      }, 1000);
+    },
+    updateTime(seconds) {
+      this.timeObj.days = Math.floor(seconds / (24 * 3600));
+      const remaining = seconds % (24 * 3600);
+      this.timeObj.hours = Math.floor(remaining / 3600);
+      this.timeObj.minutes = Math.floor((remaining % 3600) / 60);
+      this.timeObj.seconds = remaining % 60;
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  }
+}
+</script>
+<style lang="scss">
+	.countdown{
+		.time{
+			display: flex;
+			align-items: center;
+			text{
+				margin: 0px 2px;
+			}
+		}
+		image{
+			width: 18px;
+			height: 18px;
+			margin-right: 5px;
+		}
+	}
+	.green{
+		color: #27C89C;
+	}
+	.timered{
+		color: #FF4040;
+	}
+</style>