Browse Source

feat: add login pages

wangyuan 2 years ago
parent
commit
6f205e11ad
4 changed files with 232 additions and 0 deletions
  1. 169 0
      pages/login/login.js
  2. 4 0
      pages/login/login.json
  3. 17 0
      pages/login/login.wxml
  4. 42 0
      pages/login/login.wxss

+ 169 - 0
pages/login/login.js

@@ -0,0 +1,169 @@
+// pages/login/login.js
+import { pwdLogin, workerLogin, bindWecaht } from '../../api/login'
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    username: '',
+    userPwd: '',
+    loginCode: '',
+    showAccountPwd: false , // 是否使用账号密码登录
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    this.handleWXLogin()
+  },
+  // 触达微信登录
+  handleWXLogin () {
+    var that = this
+    wx.login({
+      success (res) {
+        console.log(res, 'wx.login');
+        if (res.code) {
+          //发起网络请求
+          wx.showLoading({
+            title: '加载中...',
+            mask: true
+          })
+          that.setData({
+            loginCode: res.code
+          })
+          workerLogin({code: res.code}).then(res => {
+            // 登录成功 进入首页 todo
+            console.log(res, 'workerLogin');
+            wx.hideLoading()
+            that.setAppGlobalData(res.data)
+          }).catch(e => {
+            // e.code == 403 未绑定微信 进入账户密码登录页面
+            wx.hideLoading()
+            console.log(e,'errot');
+            if (e.code == '403') {
+              that.setData({
+                showAccountPwd: true
+              })
+            } else {
+              wx.showModal({
+                content: e.msg,
+                confirmColor: '#333',
+                showCancel: false
+              })
+            }
+          })
+        } else {
+          wx.hideLoading()
+          wx.showModal({
+            content: '登录失败!' + res.errMsg,
+            confirmColor: '#333',
+            showCancel: false
+          })
+        }
+      }
+    })
+  },
+  bindusername(e) {
+    this.setData({
+      username: e.detail.value
+    })
+  },
+
+  bindUserPwd(e) {
+    this.setData({
+      userPwd: e.detail.value
+    })
+  },
+
+  // 设置小程序app数据
+  setAppGlobalData (data) {
+    app.globalData.accessToken = data.accessToken
+    app.globalData.userName = data.userName
+    app.globalData.headImg = data.headImg
+    app.globalData.isBindWechat = data.isBindWechat
+    app.globalData.workerId = data.workerId
+  },
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  handleLogin() {
+    var that = this
+    if (this.data.username == '') {
+      wx.showModal({
+        content: '请输入账号',
+        confirmColor: '#333',
+        showCancel: false
+      })
+    } else if (this.data.userPwd == '') {
+      wx.showModal({
+        content: '请输入密码',
+        confirmColor: '#333',
+        showCancel: false
+      })
+    } else {
+      var data = {
+        username: this.data.username,
+        userPwd: this.data.userPwd
+      }
+      wx.showLoading({
+        title: '登录中...',
+        mask: true
+      })
+      pwdLogin(data).then(res => {
+        wx.hideLoading()
+        that.setAppGlobalData(res.data)
+        if (!res.isBindWechat) { // 界面加一个微信绑定的按钮
+          wx.showModal({
+            content: '请绑定微信',
+            confirmColor: '#333',
+            showCancel: false,
+            success (res) {
+              if (res.confirm) {
+                that.bindWecahtFn()
+              }
+            }
+          })
+        }
+      }).catch(e => {
+        wx.hideLoading()
+        wx.showModal({
+          content: e.msg,
+          confirmColor: '#333',
+          showCancel: false
+        })
+      })
+    }
+  },
+  // 绑定微信
+  bindWecahtFn () {
+    wx.login({
+      success (res) {
+        if (res.code) {
+          wx.showLoading({
+            title: '绑定中...',
+            mask: true
+          })
+          bindWecaht({code: res.code}).then(res => {
+            wx.hideLoading()
+            wx.showToast({
+              title: '绑定成功',
+              icon: 'success'
+            })
+            app.globalData.isBindWechat = true
+            // 进入首页 todo
+          }).catch(e => {
+            wx.hideLoading()
+            wx.showModal({
+              content: e.msg,
+              confirmColor: '#333',
+              showCancel: false
+            })
+          })
+        }
+      }
+    })
+  }
+})

+ 4 - 0
pages/login/login.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "登录"
+}

+ 17 - 0
pages/login/login.wxml

@@ -0,0 +1,17 @@
+<!--pages/login/login.wxml-->
+<view class="login">
+  <view class="ap-login" wx:if="{{showAccountPwd}}">
+    <view class="itt_bg">
+      <image class="wh" src="../../images/login_bg.png"></image>
+    </view>
+    <view class="form">
+      <view class="form-item account ittflex">
+        <input bindinput="bindusername" class="input wh" type="text" placeholder="请输入账号" placeholder-class="	placeholder-class"/>
+      </view>
+      <view class="form-item password ittflex">
+        <input bindinput="bindUserPwd" class="input wh" type="text" password placeholder="请输入密码" placeholder-class="	placeholder-class"/>
+      </view>
+    </view>
+    <view class="submit itt-btn" bindtap="handleLogin">登录</view>
+  </view>
+</view>

+ 42 - 0
pages/login/login.wxss

@@ -0,0 +1,42 @@
+/* pages/login/login.wxss */
+.login {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+.itt_bg {
+  width: 440rpx;
+  height: 120rpx;
+  margin: 120rpx auto 0;
+}
+.form {
+  width: 590rpx;
+  min-height: 80rpx;
+  margin: 0 auto;
+}
+.form-item {
+  width: 100%;
+  height: 82rpx;
+  border-bottom: 1rpx solid #DDDDDD;
+}
+.account {
+  margin-top: 150rpx;
+}
+.password {
+  margin-top: 60rpx;
+}
+.input {
+  font-size: 30rpx;
+  font-weight: 400;
+  color: #999999;
+}
+.submit {
+  width: 590rpx;
+  height: 80rpx;
+  margin: 80rpx auto 0;
+  background: #45A6B5;
+  border-radius: 10rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #FFFFFF;
+}