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
})
}
})
})
}
},
})