Uni-app 小程序APP 获取验证码

Uni-app 小程序APP 获取验证码

点击 获取验证码 自动倒计时，执行自定义逻辑

<template>
	<view class="content">
		<view >
			<view class="inp">
				<input type="number" v-model="phone" placeholder="请输入手机号">
			</view>
			<view class="inp">
				<input type="safe-password" v-model="code" placeholder="请输入验证码" placeholder-style="color: #8CADF0">
				<label @click="getCode()">{{btnText}}</label>
			</view>
			<view class="inp">
				<input type="safe-password" v-model="pwd" placeholder="请输入密码">
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '', //手机号
				code: '', //验证码
				btnText: '发送验证码',
				codeNum: 60,
				is_none: '',
			}
		},
		onLoad() {

		},
		methods: {
			//获取验证码
			getCode() {
				let that = this
				let rules = /^1(3|4|5|6|7|8|9)\d{9}$/;
				if (!rules.test(that.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else if (that.codeNum < 60 && that.codeNum != 0) {
					uni.showToast({
						icon: 'none',
						title: '请稍后点击'
					})
				} else if (that.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
					return
				}
				let coden = 60
					let codeV = setInterval(function() {
						that.codeNum = coden
						that.codeNum--
						that.btnText = (--coden) + 's'
						that.is_none = 'none'
						if (coden == 0) {
							that.btnText = '获取验证码'
							that.is_none = ''
							clearInterval(codeV)
						}
					}, 1000)
			},


		}
	}
</script>