<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<view v-if="isCanUse">
<view>
<view class='header'>
<image src='../../static/images/logins.png'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>第一步:获得你的公开信息(昵称,头像、地区等)</text>
</view>
<button class="bottom" hover-class="none" type='primary' @click="getUserProfile">
登录授权
</button>
</view>
</view>
<view v-if="isCanUse2">
<view>
<view class='header'>
<image :src='avatar'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>第二步:获得你的手机号用于绑定登录</text>
</view>
<button class='bottom' hover-class="none" type='primary' open-type="getPhoneNumber"
@getphonenumber="PhoneNumber">
授权手机登录
</button>
</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
import {wechatSession,decodePhone,wechatLogin} from "@/api/user"
export default {
data() {
return {
code: "",
SessionKey: '',
OpenId: '',
avatar: '',
nick_name: "",
avatarUrl: null,
isCanUse: false, //默认为true
isCanUse2: false, //默认为true
session_key: '',
openid: ''
}
},
methods: {
getUserProfile() {
var that = this
// #ifdef MP-WEIXIN
uni.getProvider({
service: 'oauth',
success: function(res) {
if (~res.provider.indexOf('weixin')) {
wx.login({
success: (res) => {
that.code = res.code
that.wechatSession(res.code)
console.log('获取信息code', res)
}
})
uni.getUserProfile({
desc: '登录',
success: async (res) => {
uni.setStorageSync('isCanUse', false)
that.isCanUse = false
that.isCanUse2 = true
that.avatar = res.userInfo.avatarUrl
that.nick_name = res.userInfo.nickName
// uni.setStorageSync('user', res)
},
fail: (res) => {
console.log(res)
}
})
} else {
uni.showToast({
title: '请先安装微信或升级版本',
icon: "none"
})
}
}
})
//#endif
},
//登录
login() {
let _this = this;
uni.showLoading({
title: '登录中...'
})
},
//获取session_key
async wechatSession(code) {
let that = this
let data = await that.$http.post(`${wechatSession}`, {
js_code: code,
hotel_group_id: 1,
})
if (data) {
console.log(data)
that.session_key = data.data.session_key
that.openid = data.data.openid
}
},
//解析手机号
PhoneNumber(e) {
let that = this
if (e.detail.errMsg == "getPhoneNumber:ok") {
that.decodePhone(e.detail.encryptedData, e.detail.iv)
} else {
console.log("用户点击了拒绝")
}
},
//解密手机号码
async decodePhone(encryptedData, iv) {
let that = this
let session_key = that.session_key
let data = await that.$http.post(`${decodePhone}`, {
iv: iv,
encrypted: encryptedData,
session_key: session_key
})
uni.showLoading({
title: '请稍后...',
mask: false
})
if (data.code == 0) {
uni.hideLoading()
that.wechatLogin(data.data.phone)
that.phone = data.data.phone
try {
uni.setStorageSync("phone", that.phone)
} catch {}
} else {
uni.showToast({
title: '网路异常',
icon: 'none'
})
}
},
async wechatLogin(phone) {
let that = this;
let data = await this.$http.post(`${wechatLogin}`, {
avator: that.avatar,
hotel_group_id: 1,
nickname: that.nick_name,
openid: that.openid,
phone: phone,
})
// console.log('-----wechatLogin-------', data)
if(data){
uni.showToast({
title:'授权成功',
duration:1500
})
let loginData = data.data
// console.log(loginData)
uni.setStorageSync("loginUserInfo", loginData)
uni.reLaunch({
url:'/pages/my/index'
})
}else{
uni.showToast({
title:'授权失败',
icon:'none',
})
}
},
},
onLoad() { //默认加载
// console.log(this.isCanUse)
// console.log(uni.getStorageSync('isCanUse'))
if (uni.getStorageSync('access_token') != "") {
uni.reLaunch({ //信息更新成功后跳转到小程序首页
url: '/pages/index/index'
})
} else {
this.isCanUse = true
}
}
}
</script>
<style lang="scss" scoped>
button[type=primary] {
background: linear-gradient(90deg, #ff406d 17%, #ff7273 100%);
color: #fff;
}
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}
.header image {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
</style>