web-africa-h5/components/countdown/countdown-aa.vue

<template>
	<!--倒计时-->
	<view class="countdown d-c-c d-c">
		<view class="d-a-c ww100 mb30">
			<view class="d-c-c d-c time-box">
				<text class="box">{{ day || '00' }}</text>
				<text class="f24 white">{{$t('S_L_6')}}</text>
			</view>
			<view class="d-c-c d-c time-box">
				<text class="box">{{ hour || '00' }}</text>
				<text class="f24 white">{{$t('S_L_7')}}</text>
			</view>
			<view class="d-c-c d-c time-box">
				<text class="box">{{ minute || '00' }}</text>
				<text class="f24 white">{{$t('S_L_8')}}</text>
			</view>
			<view class="d-c-c d-c time-box">
				<text class="box">{{ second || '00' }}</text>
				<text class="f24 white">{{$t('S_L_9')}}</text>
			</view>
		</view>
		<view class="f24 white">{{$t('CK_KS_1')}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*状态*/
				status: 0,
				/*天*/
				day: '0',
				/*时*/
				hour: '0',
				/*分*/
				minute: '0',
				/*秒*/
				second: '0',
				/*定时器*/
				timer: null,
				/*剩余秒*/
				totalSeconds: 0
				/*标题*/
			};
		},
		props: {
			config: {
				type: Object,
				default: null
			}
		},
		created() {},
		watch: {
			config: {
				deep: true,
				handler: function(n, o) {
					if (n != o && n.endstamp != 0) {
						this.setTime();
					}
				},
				immediate: true
			}
		},
		methods: {
			/*轮循*/
			setTime() {
				let self = this;
				self.timer = setInterval(function() {
					self.init();
				}, 1000);
			},

			/*初始化*/
			init() {
				let nowseconds = Date.now() / 1000;
				if (nowseconds < this.config.startstamp) {
					//活动时间还没到
					this.status = 1;
					this.totalSeconds = parseInt(this.config.startstamp - nowseconds);
					this.countDown();
				} else if (nowseconds > this.config.endstamp) {
					//活动已过期
					this.status = 2;
				} else {
					//活动进行中
					this.totalSeconds = parseInt(this.config.endstamp - nowseconds);
					this.status = 0;
					this.countDown();
				}
				this.$emit('returnVal', this.status);
			},

			/*计算时分秒*/
			countDown() {
				let totalSeconds = this.totalSeconds;
				//天数
				let day = Math.floor(totalSeconds / (60 * 60 * 24));
				//取模（余数）
				let modulo = totalSeconds % (60 * 60 * 24);
				//小时数
				let hour = Math.floor(modulo / (60 * 60));
				modulo = modulo % (60 * 60);
				//分钟
				let minute = Math.floor(modulo / 60);
				//秒
				let second = modulo % 60;
				this.day = this.convertTwo(day);
				this.hour = this.convertTwo(hour);
				this.minute = this.convertTwo(minute);
				this.second = this.convertTwo(second);
				this.totalSeconds--;
			},

			/*转两位数*/
			convertTwo(n) {
				let str = '';
				if (n < 10) {
					str = '0' + n;
				} else {
					str = n;
				}
				return str;
			},

			/*把时间戳转普通时间*/
			getLocalTime(nS) {
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
			},
			clear() {
				console.log(1);
				clearInterval(this.timer);
				this.timer = null;
			}
		},

		destroyed() {
			clearInterval(this.timer);
		}
	};
</script>

<style>
	.countdown {
		width: 750rpx;
		height: 256rpx;
		background: linear-gradient(180deg, #fe5541, #f65c1a);
	}

	.time-box {
		width: 112rpx;
		height: 112rpx;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.3) 48%, rgba(255, 255, 255, 0.25) 100%);
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(255, 255, 255, 0.35);
		border-radius: 8rpx;
	}

	.time-box .box {
		font-size: 68rpx;
		line-height: 68rpx;
		color: #fff;
		font-weight: bold;
	}
</style>