uniapp好看的登录页面

最新推荐文章于 2024-09-10 16:22:46 发布
最新推荐文章于 2024-09-10 16:22:46 发布
阅读量4.8k 收藏 26
点赞数 8
分类专栏： uni-app 文章标签： uni-app javascript 前端 登录页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48164590/article/details/130391496
版权
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>
code袁
关注
专栏目录
uni-app 移动端登录页面
weixin_35757531的博客
12-22 575
uni-app 是一款跨平台的移动端开发框架，可以使用 Vue.js 语法开发支持 Android、iOS、H5、小程序、快应用等多种平台的应用。 在 uni-app 中，可以使用 Vue 组件来开发登录页面。下面是一个简单的登录页面示例： <template> <view class="container"> <view class="logo">...
uniapp--登录和注册页面-- login
weixin_54721820的博客
04-16 2706
直接使用即可，可以根据自己的需求修改样式！
uni-app 微信小程序之好看的ui登录页面（二）
@必意玲
12-07 6157
文章目录1. 页面效果2. 页面样式代码 1. 页面效果 2. 页面样式代码 <!-- 蓝色登录页面2 --> <template> <view style="height:100vh;background: #fff;"> <view class="img-a"> <view class="t-b"> 您好， <br /> 欢迎使用，XXX小程序 </view> </v
uniapp登录页面（ 适配：pc、小程序、h5）
最新发布
一个努力不被优化的程序员
09-10 1074
uniapp登录页面（ 适配：pc、小程序、h5）
用uniapp写一个好看的登录页面
菜鸟教程
05-06 2557
到此这篇关于用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/
精美uniapp登录页模板合集(一源团队,vue2版本,多端兼容,持续更新)
m0_72289898的博客
01-24 1340
效果展示好看就完事！！！！！已更新效果图后续更新,敬请期待 好看就完事！！！！！ 已更新效果图 后续更新,敬请期待
uniapp简单UI界面设计《登录界面 音乐界面，粉丝列表 我的好友 设置页面等》全部源码
06-01
uniapp简单UI界面设计《音乐模块 播放界面 搜索模块 登录界面 音乐界面，粉丝列表 我的好友 设置页面等》全部源码资料详情如下： （1）音乐播放的基本控制需求 控制组件（包含六个部分）如下： ①随机播放/列表循环/...
基于uni-app框架的登录模板
02-21
这个模板为开发者提供了标准化的登录页面设计和交互逻辑，大大减少了开发时间。 一、uni-app框架介绍 1. uni-app框架的核心特点：基于Vue.js，语法简洁，学习成本低；跨平台能力强，一次编写，多处运行；丰富的组件...
uniapp开发金融app程序/界面漂亮
03-27
前端 UNIAPP 服务端java sprintboot 真正三端分离 site(后台网页) dk(java服务器) nginx(ng配置示例).conf p2p(app) web(分发网页) 数据库脚本 初始脚本和数据脚本
uni-app登录实例的实现
10-29
使用HBuilderX开发登录实例。我的博客主页：https://blog.csdn.net/k571039838k?orderby=UpdateTime
uniapp好看简易登录页面
05-11
Uniapp提供了很多UI组件，可以用来构建漂亮的登录页面。你可以使用uni-ui组件库中的登录页模板或者自己设计一个。 以下是一个简单的登录页面示例： ```html <view class="logo"></view> 用户名" v-model=...
Uniapp好看登录注册页面
code袁的博客
05-02 1189
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
学习笔记：uniapp-登录页面
m0_51334709的博客
11-04 3687
uniapp的登录，有/无后台接口
uniapp简单的登录页实现
Sue_sy的博客
06-16 1334
uni-app是一个使用开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app，腾讯课堂官方为uni-app录制培训课程，开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，uni-app。
uni-app 微信小程序之好看的ui登录页面（一）
@必意玲
12-07 8575
文章目录1. 页面效果2. 页面样式代码 1. 页面效果 2. 页面样式代码 <!-- 蓝色简洁登录页面 --> <template> <view class="t-login"> <!-- 页面装饰图片 --> <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image> <image class="img-b" src
uni-app登录页面实例
weixin_63643304的博客
08-18 1532
uni-app登录页面
uni-app的登录页面
Lu_menglin的博客
06-21 514
接下来就是在 uniCloud中的cloudfunctions函数集里创建登录的login函数。注明这个登录功能需要用到阿里云的云数据库空间和创建云函数来简单实现的登陆效果。然在输入前面弄得login表里面得账号和密码，点击立即登录就可以了。然后再去阿里云的云数据库里创建login表储存账号和密码。然后在创建一个新的login的页面。第一步，我们先创建一个项目。uniapp的登录功能介绍。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

code袁

你的支持是我莫大的幸运

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

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

打赏作者

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

抵扣说明：

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

余额充值