<template>
	<view>
		<button @click="countdown(1800000 - 1)">开始倒计时</button>
		<text>{{rocallTime}}</text>
		<button @click="end">结束倒计时</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rocallTime: '',
				timer: null, // 计时器
			}
		},
		onShow() {
			if(this.rocallTime == '') return this.rocallTime = '30:00'
		},
		methods: {
			// 结束倒计时
			end() {
				this.rocallTime = '已结束'
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
			},
			countdown(val) {
				if (val > 0) {
					val > 60000 ? (this.rocallTime = (new Date(val).getMinutes() < 10 ? "0" + new Date(val).getMinutes() : new Date(val).getMinutes()) + ":" + (new Date(val).getSeconds() < 10 ? "0" + new Date(val).getSeconds() : new Date(val).getSeconds())) : (this.rocallTime = "00:" + (new Date(val).getSeconds() < 10 ? "0" + new Date(val).getSeconds() : new Date(val).getSeconds()));

					let res = this;
					this.timer = setTimeout(() => {
						val -= 1000;
						res.countdown(val);
					}, 1000);
				} else {
					this.rocallTime = '已结束'
					if (this.timer) {
						clearTimeout(this.timer);
						this.timer = null;
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	view {
		display: flex;
	}

	button {
		display: inline-block;
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background-color: rebeccapurple;
	}

	text {
		height: 80rpx;
		line-height: 80rpx;
		display: inline-block;
	}
</style>