发送验证码——uniapp

1.实现效果

2.代码实现

<view class="getCode" :class="{activeCode:codeFlag}" @click="getCode">
			{{codeTxt}}
</view>

data() {
			return {
				codeTxt: '获取验证码',
				codeFlag: true, // 控制按钮是否可点击
			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		methods: {
			getCode() {
				if (this.codeFlag == false) {
					return
				}
				this.codeFlag = false;
				var time = 60
				this.codeTxt = time + 'S'+ '重新获取'
				var timer = setInterval(() => {
					this.codeTxt = '获取验证码'
					if (time == 1) {
						this.codeFlag = true;
						clearInterval(timer)
					} else {
						time--
						this.codeTxt = time + 'S'+ '重新获取'
					}

				}, 1000)
			}
		}

<style scoped>
	.getCode {
		height: 60rpx;
		width: 180rpx;
		background: #f7f7f7;
		color: #666666;
		line-height: 60rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.getCode.activeCode {
		background: #2D99F5;
		color: #FFFFFF;
	}
</style>