短信验证码倒计时

<template>
	<view class="content">
		<view>输入验证码</view>
		<view>短信验证码已发送至<text>110110110</text></view>
		<view v-show="verification" @tap="getCode">获取验证码</view>
		<view v-show="!verification">{{timer}}s后重新获取</view>
		<input type="text" placeholder="输入验证码">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: 60,
				verification: true //控制显示获取还是倒计时

			}
		},
		methods: {
			getCode() {
				this.verification = false
				let codeTimer = setInterval(() => {
					this.timer--; //递减时间
					if (this.timer <= 0) {
						this.verification = true
						clearInterval(codeTimer)
					}
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		view:first-child {
			font-size: 25rpx;
			color: #AAAAAA;
			margin-top: 100rpx;
		}

		view:nth-child(2) {
			display: flex;
			align-items: center;
			font-size: 27rpx;
			margin-top: 35rpx;
			color: #AAAAAA;

			text {
				color: #2EC8F6;
				font-size: 30rpx;
			}
		}

		view:nth-child(4) {
			padding: 10rpx 25rpx;
			border: 1rpx solid #CCCCCC;
			font-size: 25rpx;
			margin: 25rpx 0;
			border-radius: 45rpx;
		}

		view:nth-child(3) {
			padding: 10rpx 25rpx;
			border: 1rpx solid #CCCCCC;
			font-size: 25rpx;
			margin: 25rpx 0;
			border-radius: 45rpx;
		}

		input {
			width: 680rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #C0C0C0;
			line-height: 60rpx;
			border-bottom: 2rpx solid #AAAAAA;
			margin-bottom: 35rpx;
			margin: 35rpx auto;
			text-indent: 1rem;
		}
	}
</style>