登录页面完结

登录页面完结

app.js

@@ -5,35 +5,10 @@ App({
     var logs = wx.getStorageSync('logs') || []
     logs.unshift(Date.now())
     wx.setStorageSync('logs', logs)
-
-    // 登录
-    wx.login({
-      success: res => {
-        // 发送 res.code 到后台换取 openId, sessionKey, unionId
-      }
-    })
-    // 获取用户信息
-    wx.getSetting({
-      success: res => {
-        if (res.authSetting['scope.userInfo']) {
-          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
-          wx.getUserInfo({
-            success: res => {
-              // 可以将 res 发送给后台解码出 unionId
-              this.globalData.userInfo = res.userInfo
-
-              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-              // 所以此处加入 callback 以防止这种情况
-              if (this.userInfoReadyCallback) {
-                this.userInfoReadyCallback(res)
-              }
-            }
-          })
-        }
-      }
-    })
   },
   globalData: {
-    userInfo: null
+    userInfo: null,
+    version: "1.0.6.20200310",
+    BASE_URL: "https://hhms.miyapay.com/",
   }
 })
\ No newline at end of file

app.wxss

@@ -4,6 +4,9 @@
 /* 公共全局属性 */
 page{
   --main-color: #FF7700;
+  --disable-main-color: #72FF7700;
+  /* 公共系数px rpx的比值 */
+  --common-ratio: 0.7;
 }
 
 .container {

const/apiurl.js

+//登陆
+export const API_LOGIN = "verify/auth/token";

pages/login/login.js

 // pages/login/login.js
+import { API_LOGIN } from '../../const/apiurl'
+var app = getApp();
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+<<<<<<< Updated upstream
     
+=======
+    account:'',
+    password:'',
+    errMsg:'',
+    loginDisabled:true
+  },
+  /**
+   *  账号输入
+   * @param {}} e 
+   */
+  bindAccountInput: function (e) {
+    this.setData({
+      account : e.detail.value,
+      errMsg:''
+    })
+    this.updateSubmitState();
+  },
+  /**
+   *  密码输入
+   * @param {*} e 
+   */
+  bindPasswordInput: function (e) {
+    this.setData({
+      password: e.detail.value,
+      errMsg:''
+    })
+    this.updateSubmitState();
+  },
+  
+  /**
+   * 登录
+   */
+  formSubmit(e) {
+    if(this.data.account == '' || this.data.password == ''){
+      this.setData({
+        errMsg:"账号或密码为空"
+      })
+      return
+    }
+    this.login(e.detail.value);
   },
 
+  /**
+   * 刷新submit按钮 
+   * @param {} params 
+   */
+   updateSubmitState(){
+    if(this.data.account == '' || this.data.password == ''){
+      this.setData({
+        loginDisabled:true
+      })
+    }else{
+      this.setData({
+        loginDisabled:false
+      })
+    }
+   },
+
+   /**
+    * 清除账号
+    * @param {*} params 
+    */
+   clearAccount(){
+    this.setData({
+      account:""
+    })
+   },
+
+    /**
+    * 清除密码
+    * @param {*} params 
+    */
+   clearPassword(){
+    this.setData({
+      password:""
+    })
+  },
+
+  /**
+   * 登录
+   * @param {}} options 
+   */
+  login(params){
+    wx.showLoading({
+      title: '请稍后...',
+    })
+    wx.request({
+      url: app.globalData.BASE_URL+API_LOGIN,
+      data: {
+        username: params.username,
+        password: params.password
+      },
+      method: 'POST',
+      header: {
+        'content-type': 'application/json' // 默认值
+      },
+      success (res) {
+        console.log(res)
+        wx.hideLoading({
+          success: (res) => {},
+        })
+        if (res.data.code == 200) {
+          wx.showToast({
+            title: '登录成功',
+            icon: 'success',
+            duration: 2000
+          })
+          wx.setStorageSync('accountInfo', params)
+        }else{
+          wx.showToast({
+            title: res.data.msg,
+            icon: 'none',
+            duration: 2000
+          })
+        }
+      },
+      fail(e){
+        wx.hideLoading({
+          success: (res) => {},
+        })
+        wx.showToast({
+          title: e,
+          icon: 'none',
+          duration: 2000
+        })
+        console.log(e)
+      }
+    })
+>>>>>>> Stashed changes
+  },
+
+
   /**
    * 生命周期函数--监听页面加载
    */
@@ -19,14 +152,22 @@ Page({
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-
+    var accountInfo = wx.getStorageSync('accountInfo') || []
+    if(accountInfo != null){
+      this.setData({
+        account:accountInfo.username,
+        password:accountInfo.password,
+        loginDisabled:false
+      })
+      this.login(accountInfo)
+    } 
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+      
   },
 
   /**
@@ -43,24 +184,6 @@ Page({
 
   },
 
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
+ 
+ 
 })
\ No newline at end of file

pages/login/login.wxml

@@ -9,8 +9,9 @@
 
       <view class="v-input-container">
         <view class="v-input-container-top">
-          <input class="input-area" placeholder-class="input-placeholder-style" placeholder="输入账号" />
-          <image mode="aspectFill" src="http://hh-oss-picture.miyapay.com/box/ab93973d2d0c01f4f23c18f99e39d05d.png" class="input-clear"></image>
+          <input name="username" class="input-area" placeholder-class="input-placeholder-style" 
+           placeholder="输入账号" confirm-type="next" bindinput="bindAccountInput" value="{{account}}"/>
+          <image wx:if="{{account != ''}}" mode="aspectFill" src="http://hh-oss-picture.miyapay.com/box/ab93973d2d0c01f4f23c18f99e39d05d.png" class="input-clear" bindtap="clearAccount"></image>
         </view>
         <view class="v-input-container-bottom">
            <view class="v-input-container-bottom-space"/>
@@ -20,8 +21,8 @@
 
       <view class="v-input-container">
         <view class="v-input-container-top">
-          <input class="input-area" placeholder-class="input-placeholder-style" placeholder="输入密码" />
-          <image mode="aspectFill" src="http://hh-oss-picture.miyapay.com/box/ab93973d2d0c01f4f23c18f99e39d05d.png" class="input-clear"></image>
+          <input name="password" password type="text" class="input-area"   value='{{password}}'placeholder-class="input-placeholder-style" confirm-type="next" placeholder="输入密码" bindinput="bindPasswordInput" />
+          <image wx:if="{{password != ''}}" mode="aspectFill" src="http://hh-oss-picture.miyapay.com/box/ab93973d2d0c01f4f23c18f99e39d05d.png" class="input-clear" bindtap="clearPassword"></image>
         </view>
         <view class="v-input-container-bottom">
            <view class="v-input-container-bottom-space"/>
@@ -29,7 +30,8 @@
         </view>  
       </view>
 
-      <button class="btn-submit"  formType="submit">登录</button>
+     <view wx:if="{{errMsg != ''}}" class="text-errmsg">{{errMsg}}</view> 
+      <button  class="btn-submit" disabled="{{loginDisabled}}"  formType="submit">登录</button>
     </form>
   </view>
 </view>
\ No newline at end of file

pages/login/login.wxss

@@ -5,7 +5,7 @@
   height: 100%;
   flex-direction: column;
   align-content: space-between;
-  background-image: url('http://hh-oss-picture.miyapay.com/box/2d2d11d61622580249ff542c26f589d9.png');
+  background-color: var(--main-color);
 }
 
 .header{
@@ -13,43 +13,42 @@
   height: 25%;
   display: flex;
   flex-direction: column;
+  padding-left: 16%;
+  padding-right: 16%;
 }
 
 .body{
-  width: 100%;
+  flex: 1;
   height: 75%;
   background-color: white;
   border-radius: 1rem 1rem 0 0;
   display: flex;
   flex-direction: column;
+  padding-left: 16%;
+  padding-right: 16%;
 }
 
 .header-title1{
   color: white;
-  font-size: 48rpx;
-  margin-top: 100rpx;
-  margin-left: 75rpx;
+  font-size: 64rpx;
+  margin-top: 8.5%;
 }
 
 .header-title2{
   color: white;
-  font-size: 50rpx;
-  margin-left: 75rpx;
+  font-size: 64rpx;
 }
 
 .account-login{
-  font-size: 33rpx;
-  margin-top: 40rpx;
-  margin-left: 75rpx;
+  font-size: 44rpx;
+  margin-top: 60rpx;
 }
 
 .v-input-container{
    height: 60rpx;
    flex: 1;
    display: flex;
-   margin-left: 75rpx;
    margin-top: 60rpx;
-   margin-right: 75rpx;
    display: flex;
    flex-direction: column;
 }
@@ -66,10 +65,12 @@
   flex: 1;
   height: 90%;
   margin-right: 20rpx;
+  font-size: 32rpx;
  }
 
 .input-placeholder-style{
     color: #BCC3CE;
+    font-size: 32rpx;
 }
 
 .input-clear{
@@ -96,11 +97,24 @@
 }
 
 .btn-submit{
-   height: 80rpx;
+  display: flex;
+   height: 114rpx;
    flex: 1;
-   margin-left: 75rpx;
-   margin-right: 75rpx;
-   margin-top: 75rpx;
+   margin-top: 100rpx;
    background-color: var(--main-color);
    color: white;
+   font-size: 40rpx;
+   align-items: center;
+   justify-content: center;
+ }
+
+button[disabled] {
+  color: white !important;
+  background: #FF77003f !important;
+}
+
+.text-errmsg{
+   color: tomato;
+   margin-top: 20rpx;
+   font-size: 28rpx;
 }