uni-app 获取验证码倒计时

32 篇文章 0 订阅
15 篇文章 0 订阅

先上效果图给大家展示看看

直接上代码

布局

<text class="valid_code" :class="{activeCode:codeFlag}" @click="getValidCode">{{codeTxt}}</text>

css样式

.valid_code {
		border-radius: 20rpx;
		height: 40rpx;
		background-color: #a2a2a2;
		color: #FFFFFF;
		font-size: 22rpx;
		padding-left: 16rpx;
		padding-right: 16rpx;
		position: fixed;
		right: 32rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.valid_code.activeCode {
		background-color: #9433ff;
		color: #FFFFFF;
	}

js

data() {
			return {
				codeTxt: '获取验证码',
				codeFlag: true, // 控制按钮是否可点击

			}
		},
getValidCode() {
				let msg
				if (this.phone == null) {
					msg = '请输入手机号'
				} else if (!(/^1[3456789][0-9]{9}$/.test(this.phone))) {
					msg = '手机号有误,请检查'
				} else {
					if (this.codeFlag == false) {
						return
					}
					this.codeFlag = false;
					var time = 60
					this.codeTxt = '重新获取' + time
					var timer = setInterval(() => {
						this.codeTxt = '获取验证码'
						if (time == 1) {
							this.codeFlag = true;
							clearInterval(timer)
						} else {
							time--
							this.codeTxt = '重新获取' + time
						}

					}, 1000)
					//发送验证码
					let dataP = {
						'phone': this.phone
					}
					myrequest({
						url: '/api/member/member/judgePhoneForgetMini',
						data: dataP,
						method: 'GET',
						tokenType: 'user', //选用用户的token
					}).then(response => {
						var [error, res] = response;
						msg = res.data.msg;

					});
				}
				uni.showToast({
					icon: 'none',
					title: msg
				})
			},

 

 

 

 

 

 

 

 

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yzhSWJ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值