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

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

<script>
	export default{
		props:{
			startTime: {
				type: String,
			},
			endTime:{
				type: String,
			},
			fontSize:{
				type:Number,
				default:10 
			},
			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 lang="scss" scoped>
	.countdown{
		display: flex;align-items: center;font-size: 20rpx;color: #fff;
		.time{padding: 4rpx;background-color: #606060;border-radius: 4rpx;box-sizing: border-box;}
		.text{font-size: 36rpx;font-weight: bolder;margin: 0 4rpx;color: #606060;}
	}
	.countdown.while{
		font-size: 10px;color: #FFFFFF;
		.time{background: #db292b;border-radius: 4px;color: #fff;text-align :center;}
		.text{font-size: 10px;font-weight: bolder;margin: 0 4rpx;}
	}
</style>