<template>
<view>
<LotusLoading :lotusLoadingData="lotusLoadingData" style="width: 100%;height: 100vh;position: absolute;z-index: 99;"></LotusLoading>
<view class="login" v-if="show">
<image src='../../static/login-bg(1).png'></image>
<view class='content'>
<view class="text">尊贵的会员,请您先登录</view>
<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo" class="button font-36 font-blod">微信授权登录</button>
<view class="bottom">
<view class="agree">登录即表示同意</view>
<view class="deal">《服务协议及隐私条款》</view>
</view>
</view>
</view>
<view class="login" v-if="callshow">
<image src='../../static/login-bg(1).png'></image>
<view class="content">
<view class="info">
<view class="top">
<image style="width: 64rpx;height: 64rpx;" src="../../static/iconsuccess.png"></image>
<text class="logo">微信授权成功!</text>
</view>
<view class="middle">为了更好的为您提供服务,请绑定手机</view>
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" lang="zh_CN" class="button" withCredentials="true">
授权绑定手机
</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
callshow:false,
lotusLoadingData: {
isShow: false //设置显示加载中组件true显示false隐藏
},
userInfo: {}
};
},
onLoad(options) {
// Loading
// wx.login
// >> code -> 服务器 /auth/wx-codes
// >> >> 判断是否需要授权 > 不需要授权的话直接登录成功 > 跳转回登录成功页面
// >> >> 判断是否需要授权 > 需要授权 > 取消Loading
if (uni.getStorageSync('token') && uni.getStorageSync('authtoken')) {
uni.switchTab({
url: '../index/index'
}) //如果存在token 和authtoken 就是出于登录状态,直接进入首页
}else{
this.lotusLoadingData.isShow = true
this.submit()
}
},
methods: {
submit() {
const that = this
uni.getProvider({
// 授权
service: 'oauth', //服务商 微信qq等默认的是oauth
success: function(res) {
if (~res.provider.indexOf('weixin')) { // 判断是否微信授权
uni.login({
provider: 'weixin',
success: res => {
const code = res.code;
const data = {
code: code
}
that.$myRequest({
method: 'POST',
url: '/auth/wx-codes',
data: data
}).then(res => {
if(res.statusCode == 200){
uni.setStorageSync('openid', res.data.open_id);
uni.setStorageSync('token', res.data.token)
that.show = false
if (!res.data.is_authorized) { //通过is_authorized来判断是否需要获取authtoken
that.lotusLoadingData.isShow = false
that.show = true
} else {
uni.setStorageSync('authtoken', res.data.auth_token)
that.show = false
that.callshow = false
that.lotusLoadingData.isShow = false
setTimeout(function(){
// uni.switchTab({
// url: '../index/index'
// })
uni.navigateBack({
delta:1
})
},500)
}
}
});
},
fail: () => {
uni.showToast({
title: '微信登录授权失败',
icon: 'none'
});
}
});
} else {
uni.showToast({
title: '请先安装微信或升级版本1',
icon: 'none'
});
}
}
});
},
// 获取手机号 把encryptedData 和iv 存入storage 之后判断用户登录状态要用
getUserInfo(e) {
uni.getUserInfo({
provider: 'weixin',
success: info => {
this.userInfo = info;
uni.setStorageSync('this.userInfo', info)
this.show = false;
this.lotusLoadingData.isShow = false //这个是自己做的自定义组件的loading 加载中你不做也没关系
this.callshow = true
},
fail: () => {
uni.showToast({
title: '微信登录授权失败',
icon: 'none'
});
}
});
},
getPhoneNumber(e) {
uni.getStorageSync('this.userInfo')
if (e.detail.errMsg == 'getPhoneNumber:ok') {
var data = {
token: uni.getStorageSync('token'),
user_info: { //需要传给后台的值
encrypted_data: this.userInfo.encryptedData,
iv: this.userInfo.iv,
cloud_id: "",
},
"phone_number": { //需要传给后台的值
"encrypted_data": e.detail.encryptedData,
"iv": e.detail.iv,
"cloud_id": ""
}
};
this.$myRequest({
method: 'POST',
url: '/auth/wx-authentications',
data: data
}).then(res => {
uni.setStorageSync('authtoken', res.data.auth_token)
if(res.statusCode == 200){
// uni.switchTab({
// url: '../index/index'
// })
uni.navigateBack({
delta:1
})
}else{
this.$api.msg(res.data.message); //这个是自己自己封装的提示,你可以用uni.showtoast
}
});
} else {}
},
}
}
</script>
<style lang="scss">
.login {
height: 100vh;
image {
width: 100%;
height: 100%;
}
.content {
position: absolute;
bottom: 0;
z-index: 999;
background: #ECECEC;
height: 490rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
.bottom{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30rpx;
.agree{
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
line-height: 20px;
color: #000000;
}
.deal{
margin-top: 10rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
line-height: 20px;
color: #0655EA;
}
}
.info{
background-color: #FFFFFF;
margin: 20rpx;
width: 90%;
height: 100%;
border-radius: 20rpx;
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
.top{
display: flex;
margin-top: 20rpx;
align-items: center;
.logo{
font-size: 50rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
margin-left: 20rpx;
}
}
.middle{
font-size: 36rpx;
font-family: PingFang SC;
font-weight: 400;
margin-top: 50rpx;
color: #000000;
}
}
}
}
.text {
margin-top: 50rpx;
font-size: 36rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
button {
width: 380rpx;
height: 88rpx;
background: linear-gradient(180deg, #EACDA3 0%, #E6B980 100%);
border-radius: 66rpx;
margin-top: 80rpx;
}
button::after {
border: none;
}
</style>
uniapp微信小程序授权登录
最新推荐文章于 2024-07-13 15:50:51 发布