weapp-v2/pages/countdown/countdown.vue

<template>
	<view class="countdown">
		<custom-nav :title="pageTitle"></custom-nav>
		<view class="content" v-if="countdown > 0">
			<view class="text">尊敬的 {{ userServerInfo.name || nickName }}，您好，您参加的大卫博士学位争霸赛还未开赛,请耐心等待。 距离开赛时间还剩：</view>
			<image src="../../static/icon/countdown.png" mode=""></image>
			<view class="countdownnum">
				<text class="days">{{ days }}</text>
				<text>{{ hours }}</text>
				<text>{{ minutes }}</text>
				<text>{{ seconds }}</text>
			</view>
		</view>
		<view v-else style="text-align: center;" class="started">已开赛</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '开赛倒计时',
				countdown: 0,
				days: '',
				hours: '',
				minutes: '',
				seconds: '',
				nickName: ''
			};
		},
		computed: {
			userServerInfo () {  //用户服务器信息
				return this.$store.state.userServerInfo
			},
			userWeixinInfo () {  //用户服务器信息
				return this.$store.state.userWeixinInfo
			}
		},
		onShow() {
			this.nickName = this.userServerInfo.name
		},
		methods: {
			computCountdown () {
				this.countdown = +this.userServerInfo.start_time - +new Date
				this.days = (parseInt(this.countdown / (1000 * 60 * 60 * 24)) + '')
				this.hours = (parseInt(this.countdown % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)) + '').length === 1 ? 
				'0' + parseInt(this.countdown % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)) : 
				parseInt(this.countdown % (1000 * 60 * 60 * 24) / (1000 * 60 * 60))
				this.minutes = (parseInt(this.countdown % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) / (1000 * 60)) + '').length === 1 ? 
				'0' + parseInt(this.countdown % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) / (1000 * 60)) : 
				parseInt(this.countdown % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) / (1000 * 60))
				this.seconds = (parseInt(this.countdown % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) % (1000 * 60) / 1000) + '').length === 1 ? 
				'0' + parseInt(this.countdown % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) % (1000 * 60) / 1000) : 
				parseInt(this.countdown % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) % (1000 * 60) / 1000)
			}
		},
		created() {
			if (this.userServerInfo.status === 1 || this.userServerInfo.status === 4) {
				this.computCountdown()
			}
			this.timer = setInterval(() => {
				if (this.userServerInfo.status === 1 || this.userServerInfo.status === 4) {
					this.computCountdown()
				} else {
					clearInterval(this.timer)
				}
			}, 1000)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
	.countdown {
		@include page();
		.content {
			box-sizing: border-box;
			padding: 180rpx 110rpx 0;
			position: relative;
			font-size: 32rpx;
			font-weight:400;
			color: rgba(75,75,75,1);
			line-height: 48rpx;
			image {
				margin-top: 90rpx;
				width: 100%;
				height: 361rpx;
			}
			.countdownnum {
				position: absolute;
				width: 486rpx;
				height: 52rpx;
				top: 684rpx;
				left: 50%;
				transform: translateX(-50%);
				color: #FFFFFF;
				text {
					&.days {
						width: 42rpx;
					}
					float: left;
					width: 80rpx;
					margin-left: 40rpx;
					font-size: 60rpx;
				}
			}
		}
	}
</style>