2021-10-08 uniapp验证码登录

uniapp获取验证码登录

目标界面

页面代码

<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎登录刷题app</view>
			<view class="c_input">
				<input class="u-border-bottom" maxlength="11" type="text" v-model="tel" placeholder="请输入手机号" />
			</view>
				<view class="yzm">
					<input class="u-border-bottom" type="number" v-model="yzm" placeholder="请输入验证码" />
					<button @tap="getyzm" type="primary" v-bind:disabled="btndisabled" style="font-size: 20rpx;margin-right: 0rpx;">{{btnstr}}</button>
				</view>
				<view class="alternative">
					<button style="width: 100%;background-color: #007AFF;color: #FFFFFF;" @click="login">登录</button>
				</view>
		</view>
	</view>
</template>

最重要的是后台逻辑处理

点击获取验证码倒计时功能

timewait(t){
			var _this=this;
			setTimeout(function(){
				if(t>=0){
					_this.btnstr=t+'秒后点击';
					t--;
				    _this.timewait(t);
				}else{
					_this.btnstr='获取验证码';
					t=5;
					_this.btndisabled=false
				}
			},1000)
		}

_this.timewait(t)是递归调用
var _this=this------this对象在程序中随时会改变，而var _this = this之后，_this不会改变，仍然指向之前的this，这样就不会找不到原来的对象。
_this.btndisabled=false：倒计时完后，设置按钮可点击

点击获取验证码的处理事件

验证电话号码的规则后，向后台发起获取验证码的请求

getyzm(){

			//验证手机号码是否合法  正则
			if(!(/^1[13456789]\d{9}$/.test(this.tel))){
				uni.showToast({
					title:"手机号码不合法"
				});
				return;
			}
			if(this.tel==null){
				uni.showToast({
					title:"电话号码不能为空"
				});
				return ;
			}
			const _this=this
			//请求发送验证码
			uni.request({
				url:"需要请求的url",
				method:'POST',
				data:{
				},
				success: (res) => {
					console.log(res.data)
					this.uuid=res.data.data.uuid
				}
			})
			this.timewait(5)
			this.btndisabled=true//点击后设置按钮规定时间内不可点击
		}

获取到验证码后实现登录

获取验证码请求接口返回的uuid作为登录的参数，向登录接口发起请求，进行登录

login(){
			uni.request({
				url:'需要请求登录的接口',
				method:'POST',
				data:{
					"mobile":this.tel,
					"smsCode":this.yzm,
					"uuid":this.uuid
					},
				dataType:"Json",
				success: (res) => {
					var token=res.data.data.token
					//将登录成功后返回的token获取并设置在缓存中
					uni.setStorageSync('token',token)
					console.log(token)
					//重定向到登录成功后的界面
					uni.redirectTo({
						url:'../zongheQuestion/zongheQuestion'
					})
					
				}
			})
		}

---

完整代码：

<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎登录刷题app</view>
			<view class="c_input">
				<input class="u-border-bottom" maxlength="11" type="text" v-model="tel" placeholder="请输入手机号" />
			</view>
				<view class="yzm">
					<input class="u-border-bottom" type="number" v-model="yzm" placeholder="请输入验证码" />
					<button @tap="getyzm" type="primary" v-bind:disabled="btndisabled" style="font-size: 20rpx;margin-right: 0rpx;">{{btnstr}}</button>
				</view>
				<view class="alternative">
					<button style="width: 100%;background-color: #007AFF;color: #FFFFFF;" @click="login">登录</button>
				</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			tel: '',
			yzm:'',
			btnstr:"获取验证码",
			btndisabled:false,
			uuid:""
		}
	},	
	methods: {
		timewait(t){
			var _this=this;
			setTimeout(function(){
				if(t>=0){
					_this.btnstr=t+'秒后点击';
					t--;
				    _this.timewait(t);
				}else{
					_this.btnstr='获取验证码';
					t=60;
					_this.btndisabled=false
				}
			},1000)
		},
		getyzm(){
			//验证手机号码是否合法
			if(!(/^1[13456789]\d{9}$/.test(this.tel))){
				uni.showToast({
					title:"手机号码不合法"
				});
				return;
			}
			if(this.tel==null){
				uni.showToast({
					title:"电话号码不能为空"
				});
				return ;
			}
			const _this=this
			//请求发送验证码
			uni.request({
				url:"请求的url",
				method:'POST',
				success: (res) => {
					console.log(res.data)
					this.uuid=res.data.data.uuid
				}
			})
			this.timewait(60)
			this.btndisabled=true
		},
		login(){
			uni.request({
				url:'需要请求的接口',
				method:'POST',
				data:{
					"mobile":this.tel,
					"smsCode":this.yzm,
					"uuid":this.uuid
					},
				dataType:"Json",
				success: (res) => {
					var token=res.data.data.token
					uni.setStorageSync('token',token)
					uni.redirectTo({
						url:'../zongheQuestion/zongheQuestion'
					})
					
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.yzm{
		margin-top: 10rpx;
		border-style: solid;
		display: flex;
		flex-direction: row;
		border-width: 3rpx;
		border-radius: 10rpx;
	}
	.c_input{
		border-style: solid;
		border-width: 3rpx;
		border-radius: 10rpx;
	}
.wrap {
	font-size: 28rpx;
	.content {
		width: 600rpx;
		margin: 80rpx auto 0;

		.title {
			text-align: center;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}
		.tips {
			color: $u-type-info;
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}
		.getCaptcha {
			background-color: rgb(253, 243, 208);
			color: $u-tips-color;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			
			&::after {
				border: none;
			}
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
	.buttom {
		.loginType {
			display: flex;
			padding: 350rpx 150rpx 150rpx 150rpx;
			justify-content:space-between;
			
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}
		
		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;
			
			.link {
				color: $u-type-warning;
			}
		}
	}
	
}

</style>