uni-app 获取验证码倒计时

先上效果图给大家展示看看

直接上代码

布局

<text class="valid_code" :class="{activeCode:codeFlag}" @click="getValidCode">{{codeTxt}}</text>

css样式

.valid_code {
		border-radius: 20rpx;
		height: 40rpx;
		background-color: #a2a2a2;
		color: #FFFFFF;
		font-size: 22rpx;
		padding-left: 16rpx;
		padding-right: 16rpx;
		position: fixed;
		right: 32rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.valid_code.activeCode {
		background-color: #9433ff;
		color: #FFFFFF;
	}

js

data() {
			return {
				codeTxt: '获取验证码',
				codeFlag: true, // 控制按钮是否可点击

			}
		},

getValidCode() {
				let msg
				if (this.phone == null) {
					msg = '请输入手机号'
				} else if (!(/^1[3456789][0-9]{9}$/.test(this.phone))) {
					msg = '手机号有误，请检查'
				} else {
					if (this.codeFlag == false) {
						return
					}
					this.codeFlag = false;
					var time = 60
					this.codeTxt = '重新获取' + time
					var timer = setInterval(() => {
						this.codeTxt = '获取验证码'
						if (time == 1) {
							this.codeFlag = true;
							clearInterval(timer)
						} else {
							time--
							this.codeTxt = '重新获取' + time
						}

					}, 1000)
					//发送验证码
					let dataP = {
						'phone': this.phone
					}
					myrequest({
						url: '/api/member/member/judgePhoneForgetMini',
						data: dataP,
						method: 'GET',
						tokenType: 'user', //选用用户的token
					}).then(response => {
						var [error, res] = response;
						msg = res.data.msg;

					});
				}
				uni.showToast({
					icon: 'none',
					title: msg
				})
			},