mui 手机验证码

html

<div class="middle">
	<form class="mui-input-group" name="myform">
		<div class="mui-input-row flex-row">
			<input id="phone" type="phone" placeholder="请输入手机号" autocomplete="off">
		</div>
		<div class="mui-input-row flex-row">
			<input id="code" placeholder="请输入验证码">
			<span class="getCode" id="getCode">获取验证码</span>
		</div>
	</form>
</div>

js

var vercode = 0;
var time = 60;
var flag = true; // 设置点击标记,防止60秒内再次点击
// 获取验证码操作  
var getCodes = document.getElementById('getCode')
getCodes.addEventListener('tap', function() {
	// 进行页面跳转
	getCodes.setAttribute('disables',true)
	if(document.querySelector('#phone').value != ''){
		if(flag){
			var timer = setInterval(function(){
				if(time == 60 && flag){
					flag = false;
					get(
						url = 'VUE_APP_API_BASE_URL',{
							phone:document.querySelector('#phone').value
						}
					).then(res => {
						if(res.code == 200){
							vercode = res.data.data
							getCodes.innerText = '已发送'
						}else{
							alert(res.data.message);
							flag = true;
							time = 60;
							clearInterval(timer)
						} 
					}).catch(err => {
						mui.toast('网络繁忙，请稍后重试',{ duration:'long'})
					})
				}else if(time == 0){
					getCodes.removeAttribute('disables',true)
					getCodes.innerText = '获取验证码'
					clearInterval(timer);
					time = 60;
					flag = true;
				}else{
					getCodes.innerHTML = time + 's 重新发送';
					time--
				}
			},1000)
		}
	}else{
		mui.toast('手机号不能为空',{ duration:'long'})
	}
	
});