You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
5.2 KiB
192 lines
5.2 KiB
3 years ago
|
<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>
|