uniapp 小程序授权登录并获取手机号

<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>