1--微信小程序 授权+登录页面

在这里插入图片描述
在这里插入图片描述

<!--pages/index.wxml-->
<view class="container">
  <!-- logo -->
  <view class="login-icon">
    <image class="login-img" src="/static/images/logo.png"></image>
  </view>
  <!-- 学生e考勤 -->
  <view>
    <text class="tui-center">学生e考勤</text>
  </view>
  <!--一键登录按钮 and-->
  <view class="login-btn">
    <button  class="tui-btn-blue" size="{{primarySize}}" form-type='submit' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="getUserInfo">一键登录</button>
  </view>
  <!-- 跳转的两个链接 -->
  <view class="tiao">
    <navigator url="../readme/readme">
      <view class="tui-left">阅读服务条款</view>
    </navigator>
    <navigator url="../register/signup">
      <view class="tui-right">注册账号</view>
    </navigator>
  </view>
  <!-- 底部qq -->
  <view class="footer">
      QQ:##########
  </view> 
</view>
//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function (){
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  login:function(e){
    if (app.globalData.userInfo==''){
      // console.log(app.globalData.userInfo)
      return false;
    }else{
      wx.login({
        success: res => {
          console.log(res.code)
          wx.showLoading({
            title: '正在登录中....',
          })
          wx.request({
            url: app.globalData.api_login,
            data: {
              code: res.code
            },
            success: res => {
              if (res.data.error == true) {
                wx.showToast({
                  title: res.data.message,
                  icon: 'none'
                })
                return
              } else {
                wx.showToast({
                  title: res.data.message,
                  icon: 'success'
                })
                console.log(res.data.role)
                var info = res.data.info
                app.globalData.info = res.data.info
                wx.setStorageSync('info', app.globalData.info)

                var role=res.data.role
                app.globalData.role = res.data.role
                wx.setStorageSync('role', app.globalData.role)

                var token = res.data.token
                app.globalData.token = res.data.token
                wx.setStorageSync('token', app.globalData.token)
                if(res.data.role == 'teacher'){
                  wx.redirectTo({
                      url: '/pages/teacher/index',
                    })
                }else{
                  wx.redirectTo({
                    url: '/pages/student/index',
                  })
                }
                return
              }
            }
          })
        }
      })
    }
  },
  
  /*微信授权登陆 */
  getUserInfo: function (e) {
    if (e.detail.userInfo !== ''){
      if (e.detail.userInfo) {
        console.log('授权通过')
        app.globalData.userInfo = e.detail.userInfo
        wx.setStorageSync('userInfo',app.globalData.userInfo)
        this.login()
      } 
      else {
        console.log('拒绝授权')
        wx.showToast({
          title: "拒绝授权",
          icon: "none"
        });
      }
    }  
  }  //结束

})

  /* pages/index.wxss */

  /*登录图片*/
  .login-icon {
    flex: none;
    margin: 0 auto;
    margin-top: 87rpx;
  }

  .login-img {
    width: 233rpx;
    height: 252rpx;
    border-radius: 110rpx;
  }

  /*按钮*/

  .login-btn {
    width: 100%;
  }

  .tui-btn-blue {
    background: #007aff !important;
    color: #fff;
    width: 91% !important;
    border: 0 !important;
    border-radius: 98rpx;
    padding-left: 0;
    padding-right: 0;
    margin-top: 105rpx;
    overflow: visible;
  }

  /* 跳转的两个链接 */

  .tiao {
    display: flex;
    justify-content: space-between;
    width: 85%;
    margin-top: 26rpx;
  }

  .tui-left {
    text-align: left;
    color: #5979DD;
  }

  .tui-right {
    text-align: right;
    color: #5979DD;
  }
  .footer{
    position:fixed;
    bottom: 0;
    color: #ccc;
    margin-bottom: 32rpx;
  }

猜你喜欢

转载自blog.csdn.net/xu_ze_qin/article/details/106885107
今日推荐