获取验证码 60秒倒计时

获取验证码 60秒倒计时

html部分代码

<view>
		<view class="mobile verification">
			<input v-model="inviteeCode" style="flex: 1;" type="text" value=""  placeholder="请输入验证码"/>
			<button :class="btnText=='获取验证码' ? 'buggetyaz' : 'getyaz'" size="mini" :type="type" shape="circle" :plain="true" :disabled="disabled" @click="btnSend">{{btnText}}</button>
		</view>
	</view>

js部分代码

export default {
		data() {
			return {
				disabled: false,
				inviteeCode:'',//验证码
				btnText: "获取验证码",

			}
		},
		methods: {
			doLoop: function(seconds) {
				this.btnText = seconds + "s后获取";
				let countdown = setInterval(() => {
					if (seconds > 0) {
						this.btnText = seconds + "s后获取"
							--seconds;
					} else {
						this.btnText = "获取验证码";
						this.disabled = false;
						this.type = "primary";
						clearInterval(countdown);
					}
				}, 1000);
			},
			btnSend: function() {//获取验证码
				this.disabled = true;
				this.btnText = "请稍候...";
				this.type = "gray"
				setTimeout(() => {
					this.doLoop(60)
				}, 500)
				console.log(res)
			},
		}
	}

css样式

.mobile{
		padding: 32rpx;
		border-bottom: 1px solid rgba(238,238,238,1);
	}
	.verification-btn{
		width:170rpx;
		height:48rpx;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 5rpx 0rpx rgba(204,204,204,1);
		border-radius:6rpx;
		color:rgba(51,51,51,1);
		text-align: center;
		line-height: 48rpx;
		display: inline-block;
	}
	.verification{
		display: flex;
	}
	.getyaz{
		padding:5rpx 15rpx;
		font-size:22rpx;
		line-height:30rpx;
		border-radius: 8rpx;
		color: #CCCCCC !important;
		border: 1px solid #CCCCCC;
	}
	.buggetyaz{
		padding:5rpx 15rpx;
		font-size:22rpx;
		line-height:30rpx;
		border-radius: 8rpx;
		border: 1px solid #F27F31 !important;
		color: #F27F31 !important;
	}
	.circle{
		width: 25rpx;
		height: 25rpx;
		border: 1px solid #CCCCCC;
		border-radius: 50%;
		margin-top: 6rpx;
	}