uniapp 倒计时获取短信验证码
·
uniapp 倒计时获取短信验证码


代码片.
<template>
<view>
<view class="item">
<view class="item-input-text">
<image class="phone-icon" lazy-load="true" src="static/image/mobile-icon.png"</image>
<input class="input" placeholder-style="color:#C5CBCE;" v-model="mobil placeholder="请输入手机号" />
</view>
</view>
<view class="item">
<view class="item-input-text item-input-code">
<image class="phone-icon" lazy-load="true" src="static/image/code-icon.png"></image>
<input class="input" placeholder-style="color:#C5CBCE;" v-model="code" placeholder="请输入验证码" />
</view>
<view class="item-input-text item-input-codeImg" @tap="getCodeBtn">
<text v-if="codeTime>0">{{(codeTime<10&&codeTime>0 )?'0'+codeTime:codeTime }}s后重新获取</text>
<text v-else>获取验证码</text>
</view>
</view>
</view>
</template
<script>
export default {
data() {
return {
codeTime: 0,//初始化倒计时
mobile: "", //手机号
code: "", //输入验证码
}
},
onShow() {},
onLoad() {},
methods: {
getCodeBtn() {
if (this.codeTime > 0) {
return false;
} else {
this.codeTime = 60
let timer = setInterval(() => {
this.codeTime--;
if (this.codeTime < 1) {
clearInterval(timer);
this.codeTime = 0
}
}, 1000)
}
}
}
}
</script>
更多推荐
所有评论(0)