【微信小程序】login

【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{
  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{
 500rpx;
 height:500rpx;
  display: flex;
   align-items: center;
   justify-content:center;
   margin-top: 50rpx;
}
.login-img{
  200rpx;
 height: 200rpx;
}
  
/*表单内容*/
.login-from {
 flex: auto;
 90%;
 margin: 0 auto;
}
  
.inputView {
 background-color: #fff;
 line-height: 44px;
 100%;
 margin-top: 30rpx;
 display: flex;
 align-items: center;
}
/*输入框*/
.nameImage, .keyImage {
  2.5vh;
 height: 2.5vh;
 padding-right: 20rpx;
 padding-top: 10rpx;
 padding-left: 20rpx;
}
  
.loginLab {
 color: #545454;
 font-size: 14px;
 margin-top: 15rpx;
 80rpx;
}
.inputText {
 flex: block;
 float: right;

 margin-left: 30px;
 margin-top: 6px;
 color: #000;
 font-size: 14px
}
  
.line {
  100%;
 height: 1px;
 background-color: #cccccc;
 margin-top: 1px;
}
/*按钮*/
.loginBtnView {
  100%;
 height: auto;
 background-color: #778899;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-bottom: 0px;
  border-radius: 30rpx;
}
  
.loginBtn {
  100%;
 margin-top: 35px;
 background-color: #778899;
 color:#fff;

}
.loginic{
  100%;
 margin-top: 18px;
 border-radius: 10rpx;
 border: 1rpx #778899 solid;
}
.loginp{
   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;
    100%;
    text-align:right;
    margin-top: 20rpx;
    margin-bottom: 100rpx;
  }
  .naviga{
  background-color:white; 
  opacity:0.9;
}

.userinfo {  
  position: relative;  
   750rpx;  
  height: 320rpx;  
  color: #fff;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
.userinfo-avatar {  
  overflow:hidden;  
  display: block;  
   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%;  
}