用uniapp写一个好看的登录页面
更新时间：2024年03月26日 14:56:45 作者：code袁
随着移动互联网的发展,移动端app的使用越来越普及,而对于开发者来说如何设计一款简单易用的app是一项不容忽视的工作,其中登录页面是app使用过程中最基础的组成部分之一,这篇文章主要给大家介绍了关于用uniapp写一个好看的登录页面的相关资料,需要的朋友可以参考下
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登录页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Ganttastic是一个小型的Vue.js组件，用于在Web应用程序上呈现一个可配置的、可拖动的甘特图。本文就将用它来实现简单可扩展的甘特图，感兴趣的可以尝试一下2022-11-11
这篇文章主要为大家详细介绍了Vue组件之间的通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要为大家详细介绍了Vue实现web分页组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码
本文主要介绍了vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
Vue中scoped样式的作用是通过在DOM结构和CSS样式上添加唯一标记来实现样式私有化和模块化,这一功能是通过PostCSS转译实现的,总结了三条渲染规则：1. 为HTML DOM节点添加不重复的data属性；2. 在每个CSS选择器末尾添加当前组件的data属性选择器2025-01-01
这篇文章主要介绍了Vue在自定义指令绑定的处理函数中传递参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue中如何实时监听本地存储，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue如何使用mpegts.js实现播放flv的直播视频流,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2024-01-01
这篇文章主要为大家详细介绍了Vue自定义可以选择日期区间段的日历插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue组件挂载到全局方法的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论