crm-uni/components/Countdown/Countdown.vue

<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>