uniapp倒计时按钮,点击发送短信和倒计时
个人开发时所需用到的,记录下来,便于下次快速使用
<template>
<view class="box">
<view class="flex-box">
<view>
<text>新手机号码:</text>
</view>
<view>
<input value="" v-model="newPhone" placeholder="输入手机号码" />
</view>
</view>
<view class="flex-box">
<view>
<input class="passwordInput" type="text" value="" v-model="code" placeholder="输入验证码"/>
</view>
<view class="codeBtn" @click="getCaptcha">
<text>{{time==0? captchaText:time + 's重新获取'}}</text>
</view>
</view>
<view style=" margin-top: 50px;">
<u-button text="立即更改" type="primary" @click="submit"></u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
sendAuthCode:true,
newPhone:'',
code:'',
time:0,
captchaText:'获取验证码'
}
},
computed: {
},
methods: {
getCaptcha() {
if(!this.newPhone) {
return this.$u.toast('请输入手机号码')
}
console.log('this.newPhone',this.newPhone)
if (this.time != 0) {
uni.showToast({
title: '请'+this.time+'s后再重新获取',
icon: 'none'
})
return false
}
text(this.newPhone).then((res) => {
if(res) {
this.$u.toast('验证码已发送')
}
})
const that = this
that.captchaText = '重新获取'
that.time = 60
const fn = setInterval(function() {
that.time--
if (that.time==0) {
clearInterval(fn)
}
}, 1000);
},
submit() {
if(!this.newPhone || !this.code) {
return this.$u.toast('请输入手机号码和验证码')
}
let data = {
phone:this.newPhone,
verifyCode:this.code
}
submitPhone(data).then((res) => {
if(res) {
this.$u.toast('更改成功')
}
})
}
}
}
</script>