小程序简介好看的登录页面（附源码）

小程序简介好看的登录页面（附源码）

看效果

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
记得点赞哦！