小程序简介好看的登录页面(附源码)
看效果
2.代码
2.1wxml
<view class="main">
<view class="login">
<view class="kuang shadow">
<view class="hint">后台管理</view>
<open-data class="avatar-open" type="userAvatarUrl"></open-data>
<view class="form-group">
<view class="title">账号:</view>
<input placeholder="管理员账号" maxlength="30" bindinput="content" placeholder-class="phc" model:value="{{username}}"></input>
</view>
<view class="form-group">
<view class="title">密码:</view>
<input placeholder="管理员密码" maxlength="30" bindinput="password" type="password" placeholder-class="phc" model:value="{{password}}"></input>
</view>
<button class="btn" bindtap="bindGetPhoneNumber">点击登录</button>
<view bindtap="url" data-url="../me/me" class="return">返回</view>
</view>
</view>
<view class="bottom">
</view>
</view>
2.4 wxss
@import "../style/skin.wxss";
.main {
width: 100%;
height: 100vh;
background-color: #0E9489;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.main .login {
margin-top: 150rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex: 1;
}
.main .login .kuang {
width: 600rpx;
background-color: #fff;
height: 750rpx;
margin-top: 0rpx;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 50rpx 20rpx;
}
.main .login .kuang button {
width: 85%;
background-color: #0E9489;
color: #fff;
font-size:32rpx;
}
.main .login .kuang .hint {
width: 100%;
color: #aaa;
font-size:30rpx;
text-align: center;
}
.main .login .kuang .return {
width: 100%;
color: #0E9489;
font-size:30rpx;
text-align: center;
font-size:26rpx;
}
.main .avatar-open {
width: 180rpx;
height: 180rpx;
clip-path: circle(90rpx at center);
}
.main .bottom {
width: 100%;
align-self: flex-end;
font-size: 26rpx;
height: 70rpx;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
}
.form-group .title {
font-weight: normal;
}
3.js
//index.js
//获取应用实例
const app = getApp()
let username=''
let password=''
Page({
data: {
username: '',
password: '',
clientHeight:'',
list:''
},
onLoad(){
var that=this
wx.getSystemInfo({
success: function (res) {
console.log(res.windowHeight)
that.setData({
clientHeight:res.windowHeight
});
}
})
},
//获取输入款内容
content(e){
username=e.detail.value
},
password(e){
password=e.detail.value
},
//登录事件
bindGetPhoneNumber(){
console.log(username,password)
let flag = false //表示账户是否存在,false为初始值
if(username=='')
{
wx.showToast({
icon:'none',
title: '账号不能为空',
})
}else if(password==''){
wx.showToast({
icon:'none',
title: '密码不能为空',
})
}else{
wx.cloud.database().collection('admin')
.get({
success:(res)=>{
console.log(res.data)
this.setData({
list:res.data
})
for (let i = 0; i <this.data.list.length; i++) { //遍历数据库对象集合
if (username === this.data.list[i].username) { //账户已存在
flag=true;
if (password == this.data.list[i].password) {
wx.showToast({ //显示登录成功信息
title: '登陆成功!!',
icon: 'success',
duration: 2500
})
flag=true;
wx.setStorageSync('admin', username)
wx.navigateTo({
url: '../admin_me/admin_me',
})
break;
}else{
wx.showToast({
icon:'error',
title: '密码错误',
})
}
}
};
if(flag==false)//遍历完数据后发现没有该账户
{
wx.showToast({
title: '该用户不存在',
icon: 'error',
duration: 2500
})
}
}
})
}
},
})
3.联系作者
vx:jlm264796
记得点赞哦!