uni-app实现获取验证码的倒计时

实现的效果

 

页面部分是一个三目运算,codeTime是倒计时的时间。

<template>
	<view>
		<view class="three">
			<view class="get" @tap="getCheckNum()">
				<text>{{!codeTime?'获取验证码':codeTime+'s'}}</text>
			</view>
			<view class="all">
				<view class="left">验证码</view>
				<input v-model="mydata.checkNum" placeholder="请输入验证码"/>
			</view>
			<button class="btn" @tap='sure'>确认</button>
		</view>
	</view>
</template>

具体思路:

三目运算,判断codeTime的值,当为0的时候显示文字“获取验证码”,大于0的时候显示验证码的倒计时。codeTime默认为0.

这里有个问题就是,怎么阻止用户在倒计时还没结束的时候一直点击,影响倒计时。

解决办法是写个判断,当codeTime大于60的时候,弹窗提示用户不能重复获取验证码。当倒计时运行完了之后要清除倒计时。

代码:

<script>
	export default {
		data() {
			return {
			    codeTime:0,
			}
		},
        methods: {
            getCheckNum(){
				if(this.codeTime>0){
					uni.showToast({
						title: '不能重复获取',
						icon:"none"
					});
				    return;
				}else{
					this.codeTime = 60
					let timer = setInterval(()=>{
						this.codeTime--;
						if(this.codeTime<1){
							clearInterval(timer);
							this.codeTime = 0
						}
					},1000)
                }
           }
     }
}

css样式:

.all{
	margin: 30rpx;
	border-bottom: 2rpx solid #EEEEEE;
	display: flex;
	flex-wrap: nowrap;
}
.left{
	margin-bottom: 30rpx;
	margin-right: 40rpx;
	width: 150rpx;
}
.three{
	background-color: white;
	width: 92%;
	border-radius: 10rpx;
	padding: 20rpx 0;
	margin: 20rpx auto;
	position: relative;
}
.btn{
	background-color: orange;
	font-size: 28rpx;
	width: 160rpx;
	height: 70rpx;
	line-height: 70rpx;
	margin-top: 40rpx;
	color: white;
	font-weight: 600;
}
.get{
	position: absolute;
	top: 40rpx;
	right: 30rpx;
	background-color: orange;
	height: 70rpx;
	line-height: 70rpx;
	color: white;
	border-radius: 10rpx;
	padding: 0 20rpx;
}

 

  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Uni-app是一款跨平台开发框架,而Uni-Cloud则是一个为开发者提供云端服务的平台。实现图形验证码可以使用Uni-Cloud的云函数功能,具体步骤如下: 1. 在Uni-Cloud中创建一个云函数,命名为`getVerificationCode`; 2. 在云函数中引入`jimp`模块,用于生成验证码图片。 ```javascript const jimp = require('jimp'); ``` 3. 定义生成验证码的函数`generateCode`,该函数接受两个参数,分别是验证码长度和验证码图片的宽度和高度。 ```javascript async function generateCode(length, width, height) { const code = [...Array(length)].map(() => (~~(Math.random() * 36)).toString(36)).join(''); const image = new jimp(width, height, '#fff'); const font = await jimp.loadFont(jimp.FONT_SANS_64_BLACK); image.print(font, 0, 0, code); return { code, buffer: await image.getBufferAsync(jimp.MIME_PNG) }; } ``` 4. 在云函数的主函数中,调用`generateCode`函数生成验证码,并将验证码的`code`和图片的`buffer`返回给前端。 ```javascript exports.main = async (event) => { const { length = 4, width = 200, height = 100 } = event.queryStringParameters || {}; const { code, buffer } = await generateCode(length, width, height); return { code: 0, message: 'success', data: { code, buffer: buffer.toString('base64') } }; }; ``` 5. 在前端页面中,通过Uni-Cloud的API调用云函数,获取验证码图片的`base64`编码,并将其显示在页面上。 ```javascript uniCloud.callFunction({ name: 'getVerificationCode', data: { length: 4, width: 200, height: 100 }, success(res) { const { code, buffer } = res.result.data; if (code === 0) { const base64ImgUrl = `data:image/png;base64,${buffer}`; // 将base64编码转换成图片并显示在页面上 } }, fail(err) { console.error(err); } }); ``` 以上就是使用Uni-Cloud实现图形验证码的步骤。需要注意的是,本示例仅供参考,实际使用时还需要进行适当的修改和优化。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值