【login.js】
//var config = require('../../config.js'); Page({ data: { userName: '', userPassword: '', entityno: '', roleno: '', userno: '' }, formSubmit: function (e) { console.log(e.detail.value);//格式 Object {userName: "user", userPassword: "password"} //获得表单数据 var username = e.detail.value.userName; var password = e.detail.value.userPassword; var validflag=0; if (username == "" || password == "") { wx.showModal({ title: '提示', content: '请输入完整信息!', success: function (res) { if (res.confirm) { console.log('用户点击确定') } } }) } else { console.log(e.detail.value) // detail } if (username && password) { // 同步方式存储表单数据 wx.setStorage({ key: 'username', data: username }); wx.setStorage({ key: 'password', data: password }); // 同步方式存储表单数据 //wx.setStorageSync('userName', objData.userName); //wx.setStorageSync('userPassword', objData.userPassword); //跳转到成功页面 //wx.redirectTo({ url: "../index/index" }) //wx.navigateTo({ url: '../index/index'}); wx.request({ //url: 'http://192.168.1.21:8080/scon/app/login', //url: config.loginUrl, data: { username: username, password: password, }, method: 'GET', header: { //'content-type': 'application/json' 'content-type': 'json' }, success: function (res) { var date = res.data; var entityno = date[0].entityNo; var roleno = date[0].roleNo; var userno = date[0].userNo; var entitytype = date[0].entityType; if (res.data.length == 1) { var result = date[0].result;//用户名密码有误 } else { var result = date[1].result;//查询到该用户 wx.setStorage({ key: 'entityno', data: entityno }); wx.setStorage({ key: 'roleno', data: roleno }); wx.setStorage({ key: 'userno', data: userno }); wx.setStorage({ key: 'entitytype', data: entitytype }); } wx.showLoading({ title: '玩命加载中...', mask: true }) if (result == 1) { wx.setStorage({ key: 'validflag', data: 1 }); wx.switchTab({ url: '../menuTest/menuTest' }); } else { wx.showModal({ title: '提示', content: '您的用户名或密码有误,请确认!', success: function (res) { if (res.confirm) { console.log('用户点击确定') } } }); } }, fail: function (res) { console.log("--------fail--------"); wx.showModal({ title: '提示', content: '服务器错误!', success: function (res) { if (res.confirm) { console.log('用户点击确定') } } }) } }) } }, //加载完后,处理事件 // 如果有本地数据,则直接显示 onLoad: function (options) { var that = this; //获取本地数据 var userName = wx.getStorageSync('userName'); var userPassword = wx.getStorageSync('userPassword'); console.log(userName); console.log(userPassword); if (userName) { this.setData({ userName: userName }); } if (userPassword) { this.setData({ userPassword: userPassword }); } // wx.getStorage({ // key: 'userName', // success: function (res) { // console.log(res.data); // that.setData({ userName: res.data }); // } // }); // wx.getStorage({ // key: 'userPassword', // success: function (res) { // console.log(res.data); // that.setData({ userPassword: res.data }); // } // }); // wx.getStorage({ // key: 'entityno', // success: function (res) { // console.log(res.data); // that.setData({ entityno: res.data }); // } // }); // wx.getStorage({ // key: 'roleno', // success: function (res) { // console.log(res.data); // that.setData({ roleno: res.data }); // } // }); // wx.getStorage({ // key: 'userno', // success: function (res) { // console.log(res.data); // that.setData({ userno: res.data }); // } // }); }, doRegedit: function () { wx.navigateTo({ url: "../register/register" }) }, onReady: function () { // 页面渲染完成 }, onShow: function () { // 页面显示 }, onHide: function () { // 页面隐藏 }, onUnload: function () { // 页面关闭 } })
【login.json】
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#778899",
"navigationBarTitleText": "登录注册",
"navigationBarTextStyle": "#778899"
}
【login.wxml】
<view class="container">
<view class="login-icon">
<!-- <image class="login-img" src="../images/sanwu.png"></image> -->
<view class="userinfo">
<view class="userinfo-avatar">
<open-data type="userAvatarUrl"></open-data>
</view>
</view>
</view>
<view class="login-from">
<form bindsubmit="formSubmit">
<!--账号-->
<view class="inputView">
<image class="nameImage" src="账号.png"></image>
<label class="loginLab">账号</label>
<input class="inputText" name="userName" value="{{userName}}" type='number' placeholder="请输入账号" bindinput="userNameInput" />
</view>
<view class="line"></view>
<!--密码-->
<view class="inputView">
<image class="keyImage" src="密码.png"></image>
<label class="loginLab">密码</label>
<input class="inputText" name="userPassword" password="true" value="{{userPassword}}" placeholder="请输入密码" bindinput="userPassInput" />
</view>
<!--按钮-->
<view class="loginBtnView">
<button class="loginBtn" form-type="submit">登陆</button>
</view>
</form>
<view class="loginp">
<button class="loginic" bindtap="doRegedit" loading="{{loading}}" >注册</button>
</view>
<view class='wjma' bindtap="doForgetPwd">忘记密码?</view>
</view>
</view>
【login.wxss】
page{
height: 100%;
}
.font{
width:100%;
height:200rpx;
display: flex;
align-items: center;
justify-content:center;
background-color: #778899;
color:#fff;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
background-color: #f2f2f2
}
/*登录图片*/
.login-icon{
width:500rpx;
height:500rpx;
display: flex;
align-items: center;
justify-content:center;
margin-top: 50rpx;
}
.login-img{
width: 200rpx;
height: 200rpx;
}
/*表单内容*/
.login-from {
flex: auto;
width:90%;
margin: 0 auto;
}
.inputView {
background-color: #fff;
line-height: 44px;
width:100%;
margin-top: 30rpx;
display: flex;
align-items: center;
}
/*输入框*/
.nameImage, .keyImage {
width: 2.5vh;
height: 2.5vh;
padding-right: 20rpx;
padding-top: 10rpx;
padding-left: 20rpx;
}
.loginLab {
color: #545454;
font-size: 14px;
margin-top: 15rpx;
width:80rpx;
}
.inputText {
flex: block;
float: right;
margin-left: 30px;
margin-top: 6px;
color: #000;
font-size: 14px
}
.line {
width: 100%;
height: 1px;
background-color: #cccccc;
margin-top: 1px;
}
/*按钮*/
.loginBtnView {
width: 100%;
height: auto;
background-color: #778899;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
border-radius: 30rpx;
}
.loginBtn {
width: 100%;
margin-top: 35px;
background-color: #778899;
color:#fff;
}
.loginic{
width: 100%;
margin-top: 18px;
border-radius: 10rpx;
border: 1rpx #778899 solid;
}
.loginp{
width: 100%;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
border-radius: 10rpx;
}
.loginic:hover{
background-color: #778899;
color:#fff;
}
.wjma{
font-size:2.5vh;
width:100%;
text-align:right;
margin-top: 20rpx;
margin-bottom: 100rpx;
}
.naviga{
background-color:white;
opacity:0.9;
}
.userinfo {
position: relative;
width: 750rpx;
height: 320rpx;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
overflow:hidden;
display: block;
width: 200rpx;
height: 200rpx;
margin: 20rpx;
margin-top: 50rpx;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.userinfo text {
/* color: #fff; */
font-size: 14px;
background-color: #c0c0c0;
border-radius:40%;
}