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 { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/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: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['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)
				}
			})
		},
		Getuserinfo: function (e) {//微信授权（暂时弃用）
		    if (e.detail.userInfo) {
				this.WxGetUserInfo()
		    }else{
				this.$util.msg('授权失败',2000)
		    }
		 },
		undGetuserinfo(){
			this.hanldBackFn()
		},
		hanldNavigateBack(){
			this.hanldBackFn()
		},
		hanldBackFn(){
			switch(this.authorizeType){
				case '0':
					this.$api.switchTabTo('/pages/tabBar/home/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/home/index')
							break;
						case '1':
							self.$api.navigateTo('/pages/login/login')
							break;
						case '2':
							self.$api.navigateTo('/pages/login/register')
							break;
						case '3':
							self.$api.navigateTo('/pages/login/logincode')
							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>