caimei-applets-caimei/pages/authorization/authorization.vue

<template>
	<view class="container login" :style="{paddingTop:CustomBar+'px'}">
		<cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
		<view class="login-main">
			<image class="logo" src="https://static.caimei365.com/app/img/icon/login-logo@3x.png" mode=""></image>
			<text class="logo-text">生美/医美采购服务平台</text>
		</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{
				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:200rpx 0 0 0;
			.logo{
				width: 200rpx;
				height: 170rpx;
				display: block;
			}
			.logo-text{
				font-size: $font-size-40;
				line-height: 40rpx;
				color:$color-system;
				margin-top: 40rpx;
			}
		}
		.login-content{
			width: 580rpx;
			margin: 95rpx auto;
			line-height: 40rpx;
			font-size: $font-size-24;
			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: 630rpx;
				height: 80rpx;
				border-radius: 40rpx;
				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: 76rpx;
					background: #FFFFFF;
					border: 1px solid #08A267;
					color: #08A267;
					margin-top: 30rpx;
				}
			}
		}
	}
</style>