caimei-applets-weisha/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" size="small" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getuserinfo">微信授权</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:{
			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
				authorize.getCode('weixin').then(wechatcode =>{
					wx.getUserInfo({
						success: res => {
							console.log(self.authorizeType)
							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>