yunshengtai-uniapp/pages/login/index.vue

<template>
  <view class="authorization">
      <open-data class="user-avatar" type="userAvatarUrl"></open-data>
      <open-data class="user-name" type="userNickName"></open-data>
      <view class="login-notice">为了提供更优质的服务，需要您授权基本信息</view>
      <button class="wx-btn" @click='getUserProfile' v-if="!login && canIUseGetUserProfile">
        <text>微信授权登录</text>
      </button>
      <button open-type="getPhoneNumber" class="wx-btn" bindgetphonenumber="getPhoneNumber" v-if="login">
        <text>绑定手机号</text>	
      </button> 
      <view class="login-notice" v-if="!login && !canIUseGetUserProfile">请升级微信版本后再授权</view>
      <button class="wx-btn btn" @click="back">
        <text>暂不授权</text>
      </button>
  </view> 
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { wxappAuth, getUser } from '@/api/user'
import dayjs from 'dayjs'
import cookie from '@/utils/store/cookie'
import { login, authorize } from '@/utils'
const app = getApp();
export default {
  data() {
    return {
      authorize: false,
      canIUseGetUserProfile: false,
    }
  },
  computed: {
    ...mapState(['isAuthorization', '$deviceType', 'token']),
  },
  onLoad() {
    let userInfo = wx.getStorageSync('userInfo')
		if (wx.getUserProfile) {
			this.setData({
				canIUseGetUserProfile: true
			})
		}
		wx.login({
			success: res => {
				// 发送 res.code 到后台换取 openId, sessionKey, unionId
				this.setData({
					code: res.code
				})
			}
		})
  },
 
  methods: {
    getUserProfile(e) {
        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
          desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (response) => {
            wx.showLoading({
              title: '登陆中...',
            })
            let data = {
              code: this.code,
              iv: response.iv,
              encryptedData:response.encryptedData,
              spread: 0,
              login_type: 0
            }
            app.http('POST','wxapp/auth',data).then(
              result =>{
                if(result.data.success){
                  wx.hideLoading()
                  wx.setStorageSync('token', 'Bearer '+ result.data.data.token)
                  wx.setStorageSync('userInfo', result.data.data.user)
                  wx.showToast({
                    title: '授权成功！',
                    duration: 1500
                  })
                  if(!result.data.data.user.phone){
                    this.setData({
                      login: true
                    })
                  } else{
                    setTimeout(()=>{
                      wx.navigateBack({
                        delta: 1,
                      })
                    },1500)
                  }
                 
                } else{
                  wx.showToast({
                    title: result.data.msg,
                    icon : 'none'
                  })
                }
              } 
            )
          }
        })
      },
      getPhoneNumber(e) {
        if(e.detail.errMsg == 'getPhoneNumber:ok'){
          app.http('post','wxapp/binding',
          {encryptedData: e.detail.encryptedData,
            iv: e.detail.iv
          }).then((res)=>{
            if(res.data.success){
              app.getInfo();
              wx.showToast({
                title: res.data.msg,
                duration: 1500
              })
              setTimeout(()=>{
                wx.navigateBack({
                  delta: 1,
                })
              },1500)
            } else{
              wx.showToast({
                title: res.data.msg,
                icon: 'none',
                duration: 2000
              })
              setTimeout(()=>{
                wx.navigateBack({
                  delta: 1,
                })
              },2000)
            }
          })
        }
      },
      back(){
        wx.navigateBack({
          delta: 1,
        })
      },
  },
  mounted() {
  },
}
</script>

<style lang="less">
.authorization {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-top: 190rpx;
}

.user-avatar {
  width: 192rpx;
  height: 192rpx;
  border-radius: 50%;
  overflow: hidden;
}
.user-name{
  margin: 40rpx 0;
}
.login-notice{
  font-size: 28rpx;
	font-weight: 500;
	line-height: 40rpx;
	color: #000;
	padding-bottom: 90rpx;
}

.authorization .wx-btn {
	width: 640rpx !important;
	height: 86rpx!important;
  background: linear-gradient(144deg, #FFA782 0%, #FF5100 100%) !important;
	border-radius: 60rpx!important;
	text-align: center!important;
	line-height: 86rpx!important;
	margin-bottom: 36rpx!important;
	display: flex!important;
	align-items: center!important;
  justify-content: center!important;
  color: #fff;
  font-weight: 500 !important;
}
.authorization .btn{
  background: #fff !important;
  border: 4rpx solid #FFA782;
  color: #FFA782 !important;
}
</style>