前端发送发送验证码倒计时 uni-app u-view

<u-input v-model="code" type="number" placeholder='请输入验证码'/><u-toast ref="uToast"></u-toast><u-verification-code seconds="60"ref="uCode" @change="codeChange" start-text="获取验证码"&gt

張lu

648人浏览 · 2021-06-08 09:59:15

張lu · 2021-06-08 09:59:15 发布

<u-input v-model="code" type="number" placeholder='请输入验证码'/>
<u-toast ref="uToast"></u-toast>
<u-verification-code seconds="60"  ref="uCode" @change="codeChange" start-text="获取验证码"></u-verification-code>
<view class="getCode" @tap="getCode">{{tips}}</view>

data:{
	code:'',
	tips:'',
}

codeChange(text) {
	this.tips = text;
},
	// 发送验证码
	getCode() {
		if( !this.$u.test.mobile(this.phone) ) return this.$u.toast('请输入正确的手机号')
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				let data ={
					mobile: this.phone,
					type:'mobilelogin'
				}
				this.$u.api.send(data).then(res => {
					console.log(res)
					if(res.code == 1){
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
					}else{
						this.$u.toast(res.msg);
					}
				})
					
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},