倒计时组件2

 

<template>
	<view>
		<view class="TimeDate" :style="'font-size:'+fontSize+'rpx'">
			<view v-if="dateTime.day" class="day">{{dateTime.day || ''}}天</view>
			<view class="hours"><span class="redBox">{{dateTime.hours=='0'?'00':dateTime.hours}}</span>时</view>
			<view class="minute"><span class="redBox">{{dateTime.minute=='0'?'00':dateTime.minute}}</span>分</view>
			<view class="Second"><span class="redBox">{{countdown>-1?countdown:'00'}}</span>秒</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			StartDateTime: {
				type: String,
				default: ""
			},
			fontSize: {
				type: String,
				default: 30
			}
		},
		data() {
			return {
				dateTime :{
					day : 0,
					hours: 0,
					minute: 0,
					Second: 0
				},
				DateNow: new Date(),
				activityId: 0,
				countdown: 0
			}
		},
		watch: {
			StartDateTime: {
				handler(nVal,oVal) {
					this.StartDateTime = nVal
					this.getdate(this.StartDateTime);
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		mounted() {
			// 组件挂载后调用
			this.getdate(this.StartDateTime);
			console.log("执行", this.StartDateTime)
		},
		methods: {
			//开始倒计时
			timeFn() {
				this.timer = setInterval(() => {
					if (this.countdown > -1) {
						this.countdown--;
						if (this.countdown ==0 && this.dateTime.day == 0 && this.dateTime.hours==0 && this.dateTime.minute ==0 ) {
							this.countdown = -1;
						} else if (this.countdown == 0 ) {
							if (this.dateTime.minute > 0) {
								this.dateTime.minute = this.dateTime.minute -1;
								this.countdown = 59;
							} else if (this.dateTime.hours > 0) {
								if (this.dateTime.minute == 0) {
									this.dateTime.hours = this.dateTime.hours -1;
									this.dateTime.minute = 59;
									this.countdown = 59;
								} else {
									this.dateTime.minute = this.dateTime.minute -1;
									this.countdown = 59;
								}
							}else if (this.dateTime.day >0 ) {
								if (this.dateTime.minute == 0 && this.dateTime.hours == 0) {
									this.dateTime.day = this.dateTime.day -1;
									this.dateTime.hours = 23;
									this.dateTime.minute = 59;
									this.countdown = 59;
								}
							}
						}
					} else {
						clearInterval(this.timer);
						// 倒计时结束后需要执行的操作
					}
				}, 1000);
			},
				//date-picker改变的时候 选取时间值
			getdate(dateTime) {
				// this.form.duration = ''
				this.difference(dateTime);
			},
			localTime(DateObject) {
				let offset = new Date().getTimezoneOffset() * 1000; // 转换为毫秒
				// if (offset < 0) {
				// 	offset = 0 - offset;
				// } else {
				// 	offset = 0 + offset;
				// }
				// return new Date(DateObject.getTime() + offset); // 转换为本地时间
				return new Date(DateObject.getTime() ); // 转换为本地时间
			},
			// 时间计算
			difference(endTime) {
				var dateBejin = new Date();
				var dateEnd = new Date(endTime);
				dateEnd = this.localTime(dateEnd); // 计算本地时间
				console.log(dateEnd, dateBejin);
				var dateDiff = dateEnd.getTime() - dateBejin.getTime(); //时间差的毫秒数
				var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
				var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				console.log(
				  "相差" +
				  dayDiff +
				  "天" +
				  hours +
				  "小时" +
				  minutes +
				  "分钟" +
				  seconds +
				  "秒"
				);
				// this.DateTime = dayDiff + '天' + hours + '时'
				this.dateTime = {
					day : dayDiff,
					hours: hours,
					minute: minutes,
					Second: seconds
				}
				this.countdown = seconds;
				this.timeFn();
			}
		}
	}
</script>

<style lang="scss">
	.TimeDate {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 23rpx;
		.redBox {
			display: inline-block;
			width: 34rpx;
			height: 34rpx;
			background-color: #FB3737;
			color: white;
			border-radius: 5rpx;
			text-align: center;
			margin: 0 auto;
			letter-spacing: 0px;
			padding-right: 5rpx;
		}
	}
</style>

<TimeDate :StartDateTime="item.endTime" :fontSize="'30'"></TimeDate>