caimei-applets-hehe/pages/authorize/authorize.vue

<template>
    <view class="container login" :style="{ paddingTop: CustomBar + 'px' }">
        <view class="login-main">
            <image class="logo" :src="StaticUrl + 'icon-logo@2x.png'" mode="widthFix"></image>
        </view>
        <view class="login-content">
            <text
                >您暂未授权呵呵商城小程序获取你的信息，将无法正常使用小程序的功能。如需正常使用，请点击“授权”按钮，打开头像，昵称等信息的授权</text
            >
        </view>
        <view class="login-form">
            <button
                class="login-btn use"
                type="primary"
                open-type="getUserInfo"
                size="small"
                @click="getUserProfile"
                lang="zh_CN"
            >
                微信授权
            </button>
            <view class="login-btn back" @tap="undGetuserinfo">取消</view>
        </view>
    </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/services/wxLogin.js'

export default {
    data() {
        return {
            StaticUrl: this.$Static,
            nvabarData: {
                //顶部自定义导航
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                showSearch: 0,
                title: '微信授权', // 导航栏 中间的标题
                haveBack: true,
                haveHome: false,
                textLeft: this.$store.state.isIphone
            },
            CustomBar: this.CustomBar, // 顶部导航栏高度
            authorizeType: ''
        }
    },
    onLoad(e) {
        this.authorizeType = e.type
        if (this.authorizeType == '4') {
            this.nvabarData.haveBack = false
        }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    methods: {
        ...mapMutations('app', ['wxLogin']),
        getUserProfile() {
            const self = this
            // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
            wx.getUserProfile({
                desc: '采美采购商城小程序获取您的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                success(res) {
                    console.log('新API', res)
                    self.wxLogin(res.userInfo)
                    uni.login({
                        provider: 'weixin',
                        scopes: 'auth_user',
                        success(res) {
                            self.WxGetUserInfo()
                        },
                        fail(err) {
                            self.$util.msg(err, 2000)
                        }
                    })
                },
                fail() {
                    self.$util.msg('授权失败', 2000)
                }
            })
        },
        undGetuserinfo() {
            this.hanldBackFn()
        },
        hanldNavigateBack() {
            this.hanldBackFn()
        },
        hanldBackFn() {
            switch (this.authorizeType) {
                case '0':
                    this.$api.switchTabTo('/pages/tabBar/index/index')
                    break
                default:
                    uni.navigateBack({ delta: 1 })
            }
        },
        WxGetUserInfo() {
            let self = this
            wx.getUserInfo({
                success: res => {
                    wxLogin.wxLoginAuthorize()
                    switch (self.authorizeType) {
                        case '0':
                            self.$api.switchTabTo('/pages/tabBar/index/index')
                            break
                        case '1':
                            self.$api.navigateTo('/pages/login/login')
                            break
                        default:
                            setTimeout(() => {
                                uni.navigateBack({ delta: 1 })
                            }, 2000)
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss">
.login {
    width: 100%;
    height: auto;
    .model-warp.none {
        display: none;
    }
    .model-warp.show {
        display: block;
    }
    .login-main {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        padding: 80rpx 0 0 0;
        .logo {
            width: 200rpx;
            height: 200rpx;
            display: block;
        }
        .logo-text {
            font-size: $font-size-40;
            line-height: 40rpx;
            color: $color-system;
            margin-top: 40rpx;
        }
    }
    .login-content {
        width: 580rpx;
        margin: 70rpx auto;
        line-height: 48rpx;
        font-size: 26rpx;
        color: #666666;
        text-align: justify;
    }
    .login-form {
        width: 702rpx;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        .login-btn {
            width: 550rpx;
            height: 90rpx;
            border-radius: 45rpx;
            font-size: $font-size-32;
            line-height: 80rpx;
            color: #ffffff;
            text-align: center;
            background: linear-gradient(135deg, rgba(4, 190, 2, 1) 0%, rgba(4, 183, 2, 1) 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            &.back {
                height: 80rpx;
                background: #e1e1e1;
                border: 1px solid #ffffff;
                color: #ffffff;
                margin-top: 30rpx;
            }
        }
    }
}
</style>