uniapp点击倒计时获取验证码

grtjh203

已于 2023-12-05 10:14:00 修改

阅读量172

点赞数

文章标签： java 前端服务器

于 2023-10-26 14:01:46 首次发布

本文链接：https://blog.csdn.net/qq_59297167/article/details/134054602

版权

<uni-forms-item required name="code">
<view class="inp">
<uni-row class="demo-uni-row" >
<uni-col :span="12">
<uni-easyinput :styles="{color: 'black'}" :inputBorder="false" v-model="formData.captcha" placeholder="请输入验证码" />
</uni-col>
		<uni-col :offset="2" :span="10">
		<view v-if="loginCode" class="code" @click="getTime">获取验证码</view>
		<view v-else class="phone">{{setTime}}(s)后重新获取</view>
</uni-col>
</uni-row>
</view>
</uni-forms-item>

getTime() {
				
				 if(!this.formData.phone){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				this.loginCode = false
				this.getRegister()
				let time=setInterval(()=>{
					if(this.setTime>0){
						this.setTime-=1
					}else{
						this.loginCode = true
						this.setTime=59
						clearInterval(time)
					}
				},1000)
				
			},