欢迎来到3672js教程，我们关注js教程、js框架、js代码特效等。
> > 正文

用uniapp写一个好看的登录页面，

3672Js.Com2024-04-11 02:27 来源:未知 阅读:884 关注度3

用uniapp写一个好看的登录页面，


目录
  • uniapp好看的登录页面
  • 1.登录页面的代码
  • 2.注册页面
  • 总结 

uniapp好看的登录页面

本登录方式有两种
1.账号和密码登录
2.账号和验证码登录

1.登录页面的代码

<template>
	<view class="login">
		<view class="login-title">体育场馆预约</view>
		<view class="login-content">
			<view class="login-username">
				<i class="el-icon-user"></i>
				<input type="text" placeholder="请输入账号" v-model="phone">
			</view>
			<view class="login-password">
				<i class="el-icon-key"></i>
				<input type="safe-password" name="" id="" placeholder="请输入密码" v-model="password">
			</view>
		</view>
		<view class="button"><button @click="onsubmit">登录</button></view>
		<view class="login-botton">
			<view class="login-password" @click="findPassword">找回密码</view>
			<span>|</span>
			<view class="login-zhuce" @click="Registration">注册账号</view>
		</view>
		<!-- 其他的登录方式 -->
		<view class="login-other">
			<view class="login-top">
				其他的登录方式
			</view>
			<view class="login-icon">
				<image src="../../static/index/QQ.png" mode="widthFix"></image>
				<image src="../../static/index/weixin.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			phone:'',
			password:'',
			rules: {
				phone: [{ required: true, message: '请输入手机号', rule: '/^1[23456789]\d{9}$/' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
			}
		};
	},
	methods: {
		// ...mapMutations(['user_Login']),
		//登录
		onsubmit() {
			if(this.phone==''||this.password==''){
				uni.showToast({
					title:"内容不能为空哦！",
					icon:"none"
				})
			}else{
				let data={
					phone:this.phone,
					password:this.password
				}
				uni.request({
					url: '/api/login/loginUser',
					method: 'POST',
					data: data,
					success: res => {
						console.log(res.data.data.data);
						if (res.data.code == 200) {
							this.$store.commit("userLogin",res.data.data.data );
							localStorage.setItem('status',true)
						 //页面跳转
							this.$router.push('/pages/index/index');
			
							uni.showToast({
								title: res.data.data.msg,
								icon: 'none'
						 });
						} else {
							uni.showToast({
								title: res.data.data.msg,
								icon: 'none'
							});
						}
					}
				});
				}
		},
		Registration() {
			console.log('hah ');
			uni.navigateTo({
				url: '../../pages/login/registration'
			});
		},
		findPassword() {
			console.log('hah ');
			this.$router.push('/pages/login/findPassword');
		},
		loginOther(){
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 1,
				summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});

		}
	}
};
</script>

<style lang="less">
.login {
	 // background-image: linear-gradient(120deg, #05ee28, #6a3dad);
	 background-color: #fff;
	width: 100%;
	background-position: center;
	background-size: cover;
	// background-color: #464646;
	margin:0px;
	background-size:100% 100%;
	background-attachment:fixed;
	height: 1535rpx;
	opacity: 0.8;
	.login-title {
		padding-top: 150rpx;
		display: flex;
		justify-content: flex-start;
		margin-left: 50rpx;
		font-weight: 700;
		font-size: 40rpx;
		color: #11cd6e;
		letter-spacing: 5rpx;
		margin-bottom: 50rpx;
	}
	.login-content{
		.login-username{
			display: flex;
			align-items: center;
		    margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			input{
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}
			i {
				color: #11c53e;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}
		.login-password{
			display: flex;
			align-items: center;
		    margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 50rpx;
			input{
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}
			i {
				color: #11c53e;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}
	}
	.button{
		margin-top: 120rpx;
		
		button{
			background-color:#11c53e;
			width: 90%;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			color: #fff;
		}
	}
	.login-botton{
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		.login-password{
			padding: 0 15rpx;
			color: #11c53e;
		}
		.login-zhuce{
			padding: 0 15rpx;
			color: #11c53e;
		}
	}
	.login-other{
		position: absolute;
		bottom: 100rpx;
	    left: 37%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.login-top{
			text-align:center;
		}
		.login-icon{
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;
			image{
				width: 80rpx;
			}
		}
	}
	
}
</style>

2.注册页面

<template>
	<view class="registration">
		<view class="registration-content">
			<view class="login-username">
				<i class="el-icon-mobile"></i>
				<input type="text" name="" id="" placeholder="请输入手机号" v-model="phone" />
			</view>
			<view class="login-code">
				<i class="el-icon-cpu"></i>
				<input type="text" placeholder="请输入验证码" v-model="userCode" />
				<button type="warning" :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
			</view>
		</view>
		<view class="login-button"><button @click="login">下一步</button></view>
		<view class="registration-botton"><view class="registration-password" @click="goBack">密码登陆</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '',
			userCode: '',
			disabled: false,
			codeNum: 10,
			codeMsg: '获取验证码',
			code: '',
			rules: {
				phone: {
					rule: '/^1[23456789]\d{9}$/',
					meg: '手机的格式不对'
				}
			}
		};
	},
	methods: {
		sendCode() {
			if (this.phone == '') {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			} else if (this.phone != '') {
				var reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.phone)) {
					uni.showToast({
						title: '输入有效的手机号',
						icon: 'none'
					});
				} else {
					//禁用按钮
					this.disabled = true;

					//发送请求
					uni.request({
						url: '/api/login/code',
						method: 'POST',
						data: {
							phone: this.phone
						},
						success: res => {
							console.log('11', res.data.data);
							if (res.data.data.success) {
								this.code = res.data.data.data;
							}
						}
					});
					//倒计时
					let timer = setInterval(() => {
						--this.codeNum;
						this.codeMsg = `重新发送 ${this.codeNum}`;
					}, 1000);
					//判断定时器停止
					setTimeout(() => {
						clearInterval(timer);
						(this.disabled = false), (this.codeMsg = '获取验证码'), (this.codeNum = 10);
					}, 10000);
				}
			}
		},
		//登录
		login() {
			if (this.code == '' || this.phone == '') {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			} else if (this.userCode == this.code) {
				//验证码正确
				uni.request({
					url: '/api/login/addUser',
					method: 'POST',
					data: {
						phone: this.phone
					},
					success: res => {
						//code 200 注册成功
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.data.msg,
								icon: 'none'
							});
							//给vuex添加数据
							this.$store.commit('userLogin', res.data.data.data);
							//路由跳转
							this.$router.push('/pages/index/index');
						} else {
							uni.showToast({
								title: res.data.data.msg,
								icon: 'none'
							});
						}
					}
				});
			}
		},
		//密码登录
		goBack() {
			this.$router.push('/pages/login/login');
		},
		validate(key) {
			let bool = true;
			if (!this.rules[key].rule.test(this[key])) {
				uni.showToast({
					title: this.rules[key].meg,
					icon: 'none'
				});
				bool = false;
				return false;
			}
			return bool;
		}
	}
};
</script>

<style lang="less">
.registration {
	width: 100%;
	background-position: center;
	background-size: cover;
	background-color: #fff;
	margin: 0px;
	background-size: 100% 100%;
	background-attachment: fixed;
	opacity: 0.8;
	// margin-top: 100rpx;
	.registration-content{
		display: flex;
		flex-direction: column;
		margin: 0 50rpx;
		input{
			padding: 10rpx;
			width:60%;
			height: 70rpx;
		}
		i {
			color: #11c53e;
			padding-right: 20rpx;
			font-size: 50rpx;
		}
		.login-username{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
		}
		.login-code{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
			button{
				width:250rpx;
				height: 85rpx;
				font-size: 30rpx;
				line-height: 85rpx;
				background-color: #11c53e;
				color: #fff;
			}
		}
	}
	.login-button{
		margin-top: 150rpx;
		width: 90%;
		margin-left: 5%;
		button{
			background-color: #11c53e;
			color: #fff;
		}
	}
}

.registration-botton {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-between;
	.registration-password {
		padding-left: 40rpx;
		color: #fff;
	}
	.registration-zhuce {
		padding-right: 40rpx;

		color: #fff;
	}
}
</style>

总结 

到此这篇关于用uniapp写一个好看的登录页面的文章就介绍到这了,更多相关uniapp登录页面内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:
  • 使用 UniApp 实现小程序的微信登录功能
  • uniapp如何编写含有后端的登录注册页面

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。
相关内容
评论已被关闭