微信小程序登录界面_小程序端登录界面

 1、样式图

2、实现功能

（1）分角色登录。

（2）用户名和密码输入后才可点击“登录”按钮。

（3）登录验证。

3、代码

（1）js代码

const app = getApp();
Page({
  data: {
    loginBtnState:true,//登录按钮
    username:"",
    password:"",
    loginRole:"",
  },
  //------用户名
  usernameInput:function(e){
    var username = e.detail.value;
    if(username !=""){
      this.setData({
        username:username
      });
      if(this.data.password !=""){
        this.setData({
          loginBtnState:false
        })
      }
    }else{
      this.setData({              
        loginBtnState:true
      })
    }
  },
  passwordInput:function(e){
    var password = e.detail.value;//从页面获取到用户输入的密码
    if(password !=""){
      this.setData({
        password:password
      });//把获取到的密码赋值给全局变量Date中的password
      if(this.data.username !=""){
        this.setData({
          loginBtnState:false
        })
      }
    }else{
      this.setData({
        loginBtnState:true
      })
    }
  },
  //登录角色
  RoleChange(e){
    //console.log('用户登录角色：',e.detail.value)
    wx.setStorageSync('loginRole', e.detail.value);
    this.setData({
      loginRole:e.detail.value
    })
  },
  login:function(){
    if(!this.data.loginRole){
      wx.showToast({
        title: '未选择登录角色',
        icon: 'error',
        duration: 2000
      })
    }else if(this.data.loginRole=="Corp"){
      wx.request({
        url: 'https://......',
        data:{
          username:this.data.username,
          password:this.data.password
        },
        method:"GET",
        header:{
          'content-type':'application/json'
        },
        success:(res=>{
          console.log("我的登录结果",res.data),
          app.globalData.userInfo = res.data.data;//将登录信息保存到全局，方便后期页面调用
          if(res.data.state=='success'){
            wx.showToast({
              title: '登录成功',
              icon:'success',
              duration:2000,
              success:function(){
                wx.redirectTo({
                  url: '../User_HOME/index',
                })                       
              }
            })
          }else{
            wx.showToast({
              title:res.data.message,
              icon:"error",
              duration:3000
            })
          }
        })
      })
    }else if(this.data.loginRole=="Admin"){
      wx.request({
        url: 'https://......',
        data:{
          username:this.data.username,
          password:this.data.password
        },
        method:"GET",
        header:{
          'content-type':'application/json'
        },
        success:(res=>{
          console.log("我的登录结果",res.data),
          app.globalData.userInfo = res.data.data;//将登录信息保存到全局，方便后期页面调用
          if(res.data.state=='success'){
            wx.showToast({
              title: '登录成功',
              icon:'success',
              duration:2000,
              success:function(){
                wx.redirectTo({
                  url: '../Admin_Home/index',
                })                       
              }
            })
          }else{
            wx.showToast({
              title:res.data.message,
              icon:"error",
              duration:3000
            })
          }
        })
      }) 
    }       
  },
})