vue-拼团秒杀倒计时组件封装

前段时间做了一个web小程序项目，业务上有倒计时 xx天xx时xx分xx秒需求，所以咱就开始动手拆分-封装。

父组件：

<template>
   <view>
      <countDown :endTime="goodsList[0].endTime" :endText="goodsList[0].endText "  class="timer-text"/>			
   </view>
	
</template>

<script>
	import countDown from "../../components/countDown/countDown.vue"
	export default {
		components:{
			countDown,
		},
		
		data() {
		   return {
			goodsList:[{ // type:0 是拼团商品，1是普通商品， tips:true特惠标识
				type:0,
				url:require('../../../../static//images/4.jpg'),
				title:'青少年【标准】商品套餐',
				tips:true,
				old_price:199,
				new_price:155,
				last_price:'',
				people_buy:'291',
				endTime:new Date("2023/04/18 11:00:00").getTime() / 1000 +  ' ', //---后台给毫秒更方便
				// //  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法
				endText:'',
			}]
			}
		},
		methods: {
		
		},
		created(){
						// console.log(this.goodsList)
		},
		onLoad(param) {
			
		}
	}

</script>

子组件上：

<template>
	<!--endTime:传入毫秒， endText:时间结束后：本次活动已结束。endTip:string 传入1，样式为 仅剩xx天:xx时:xx分，默认为空 xx天:xx时:xx分， -->
	<p :endTime="endTime" :endText="endText" :endTip="endTip">
		<slot>{{content}}</slot>
	</p>
</template>

<script>
	export default {
		data(){
			return {
				content: '',
			}
		},
		props:{//接收父组件的数据
			endTime:{type:String,default:''},
			endText:{type:String,default:'活动已结束'},
			endTip:{type:String,default:''}
		},
		watch: {//监听时间的变化
			endTime() {
				this.countdowm(this.endTime)
			}
		},
		mounted () {
			this.initCountDown(this.endTime)
			this.countdowm(this.endTime)
		},
		methods: {
			countdowm(timestamp){
				let self = this;
				let timer = setInterval(function(){
					let nowTime = new Date();
					let endTime = new Date(timestamp * 1000);
					let t = endTime.getTime() - nowTime.getTime();
					if(t>0){
						let day = Math.floor(t/86400000);
						let hour=Math.floor((t/3600000)%24);
						let min=Math.floor((t/60000)%60);
						let sec=Math.floor((t/1000)%60);
						hour = hour < 10 ? "0" + hour : hour;
						min = min < 10 ? "0" + min : min;
						sec = sec < 10 ? "0" + sec : sec;
						let format = '';
						if(day > 0){
							// format = `${day}天${hour}小时${min}分${sec}秒`;
							format = `${day}天${hour}小时${min}分`;
						}
						if(day <= 0 && hour > 0 ){
							// format = `00天${hour}小时${min}分${sec}秒`;
							format = `00天${hour}小时${min}分`;
						}
						if(day <= 0 && hour <= 0){
							// format =`00天00小时${min}分${sec}秒`;
								format =`00天00小时${min}分`;
						}
						// self.content = format;
						if(self.endTip === '1'){
							self.content = '仅剩 '+format;
						}else{
							self.content = format;
						}
					}else{
						clearInterval(timer);
						self.content = self.endText;
					}
				},1000);
			},
			initCountDown(timestamp){
				let self = this;
					let nowTime = new Date();
					let endTime = new Date(timestamp * 1000);
					let t = endTime.getTime() - nowTime.getTime();
					if(t>0){
						let day = Math.floor(t/86400000);
						let hour=Math.floor((t/3600000)%24);
						let min=Math.floor((t/60000)%60);
						let sec=Math.floor((t/1000)%60);
						hour = hour < 10 ? "0" + hour : hour;
						min = min < 10 ? "0" + min : min;
						sec = sec < 10 ? "0" + sec : sec;
						let format = '';
						if(day > 0){
							// format = `${day}天${hour}小时${min}分${sec}秒`;
							format = `${day}天${hour}小时${min}分`;
						}
						if(day <= 0 && hour > 0 ){
							// format = `00天${hour}小时${min}分${sec}秒`;
							format = `00天${hour}小时${min}分`;
						}
						if(day <= 0 && hour <= 0){
							// format =`00天00小时${min}分${sec}秒`;
								format =`00天00小时${min}分`;
						}
						if(self.endTip === '1'){
							self.content = '仅剩 '+format;
						}else{
							self.content = format;
						}
					}else{
						self.content = self.endText;
					}
			},
			
		}
	}
</script>

结束，