nc.963.cn/components/countdown-timer/countdown-timer.vue

<template>
	<view><slot :time="time" :remain="timeData.remain" :day="timeData.day" :hour="timeData.hour" :minute="timeData.minute" :second="timeData.second" /></view>
</template>

<script>
export default {
	props: {
		// 倒计时时长（单位：毫秒）
		time: {
			type: Number,
			default: 0
		},
		
		// 是否自动
		'autoStart': {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			timer: null,
			timeData: {
				remain: 0,
				day: 0,
				hour: 0,
				minute: 0,
				second: 0
			}
		};
	},
	watch: {
		time() {
			this.reset()
		}
	},
	methods: {
		
		// 设置timeData
		updateTimeData() {
			let t = this.timeData.remain;
			this.timeData.day = Math.floor(t / 1000 / 60 / 60 / 24);
			this.timeData.hour = Math.floor((t / 1000 / 60 / 60) % 24);
			this.timeData.minute = Math.floor((t / 1000 / 60) % 60);
			this.timeData.second = Math.floor((t / 1000) % 60);
		},
		
		// 开启倒计时
		startTimer() {
			if (this.timer) {
				clearInterval(this.timer);
			}
			if(this.timeData.remain < 1000) {
				 return
			}
			this.timer = setInterval(() => {
				this.timeData.remain -= 1000;
				this.updateTimeData()
				if (this.timeData.remain < 1000) {
					this.pause()
					this.$emit('finish');
				}
			}, 1000);
		},
		
		// 重置倒计时
		reset() {
			this.timeData.remain = this.time;
			this.updateTimeData();
			if(this.autoStart) {
				this.start()
			}
			
		},
		
		// 暂停倒计时
		pause() {
			if(this.timer) {
				clearInterval(this.timer);
				this.timer = null
			}
		},
		
		// 开始倒计时
		start() {
			if(this.timer) {
				return
			}
			this.startTimer();		
		}
	},
	mounted() {
		this.reset();
	},
	beforeDestroy() {
		this.pause()
	}
};
</script>