CBB3/components/cz-countdown/cz-countdown2.vue

<template>
	<view class="countdown fx-r fx-bc" :class="styleName == 'while' ? 'while' : ''">
		<view class="time" v-if="d!=0">{{d}}</view> 
		<text class="text" v-if="d!=0">天</text>
		<view class="time" style="margin-left: 9rpx;">{{h<10?'0'+h:h}}</view>
		<text class="text">小时</text>
		<view class="time">{{m<10?'0'+m:m}}</view>
		<text class="text">分</text>
		<view class="time">{{s<10?'0'+s:s}}</view>
		<text class="text">秒</text>
	</view>
</template>

<script>
	export default{
		props:{
			startTime: {
				type: String,
			},
			endTime:{
				type: String,
			},
			styleName:{
				type : String,
				default(){
					return "while"
				}
			}
		},
		data(){
			return{
				timer:null,
				d:0,
				h:0,
				m:0,
				s:0
			}
		},
		mounted() {
			this.time()
		},
		beforeDestroy(){
			clearInterval(this.timer);
			this.timer = null;
		},
		computed:{
			sTime(){return this.startTime},
			eTime(){return this.endTime}
		},
		watch:{
			endTime(){
				clearInterval(this.timer);
				this.time()
			}
		},
		methods:{ 
			time(){
				let leftTime = this.GetDateDiff(this.sTime,this.eTime)
				this.getCountdownTime(leftTime)
			},
			//计算两个时间差
			GetDateDiff(startTime, endTime) {
			    //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式
			    startTime = startTime.replace(/\-/g, "/");
			    endTime = endTime.replace(/\-/g, "/");
			    //将计算间隔类性字符转换为小写
			    var sTime = new Date(startTime); 
			    var eTime = new Date(endTime); 
			    return parseInt((eTime.getTime() - sTime.getTime()) / 1000);
			},
			//计算活动结束时间
			getCountdownTime(leftTime){
				let time = leftTime
				if (time>0) {
					this.timer = setInterval(() => {
						if(time == 0){
							clearInterval(this.timer)
							this.h = 0
							this.m = 0
							this.s = 0
						}else{
							this.d = parseInt(leftTime/3600/24);
							this.h = parseInt((time/3600)%24);
							this.m = parseInt((time/60)%60);
							this.s = parseInt(time%60);
							time --
						}
					},1000)
				}
			}
		}
	}
</script>
<style>
	.countdown{font-size: 14px;color: red;}
</style>