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

教程下载地址： 网赚博客https://www.piaodoo.com/创业项目排行榜前十名https://www.piaodoo.com/

目录

• 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}KaTeX parse error: Expected 'EOF', got '}' at position 4: /' }̲], password…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}KaTeX parse error: Expected 'EOF', got '}' at position 29: … '手机的格式不对' }̲ } }; }, …/;
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登录页面内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！

                        友情连接：  

茂名一技http://www.szsyby.net/

茂名一技http://www.enechn.com/

美文集http://www.tpyjn.cn/

手游排行前十名http://www.bjkhrx.com/

蔚来汽车http://www.weilaiqiche.cn/