uni-app u-view验证码倒计时

最新推荐文章于 2024-07-20 17:10:33 发布

Cirosty

最新推荐文章于 2024-07-20 17:10:33 发布

阅读量1.8k

点赞数 1

分类专栏： web 前端 uni-app u-view 文章标签：前端

本文链接：https://blog.csdn.net/zhangluludeCSDN/article/details/115112166

版权

web 前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

uni-app

15 篇文章 1 订阅

订阅专栏

u-view

4 篇文章 0 订阅

订阅专栏

该段代码展示了在移动端如何实现验证码的显示、输入、倒计时及发送功能。通过`u-verification-code`组件进行倒计时和验证码输入，`u-toast`用于提示用户，点击按钮触发`getCode`方法获取验证码，此方法先校验手机号格式，然后调用后台接口发送验证码，成功后启动倒计时。

摘要由CSDN通过智能技术生成

<view class="list">
			<text class="tit">验证码</text>
			<u-input v-model="code" placeholder='请输入验证码'/>
			<u-toast ref="uToast"></u-toast>
			<u-verification-code :seconds="seconds"  ref="uCode" @change="codeChange" start-text="获取验证码"></u-verification-code>
			<view style="color: #5FC484;" @tap="getCode">{{tips}}</view>
</view>

code:'',
tips:'',
seconds:60,


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