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="../../static/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: '微信授权', // 导航栏 中间的标题
				},
				CustomBar:this.CustomBar,// 顶部导航栏高度
				authorizeType:''
			}
		},
		onLoad(e) {
			this.authorizeType = e.type
			console.log(e)
		},
		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/home')
						break;
					default:
						uni.navigateBack({delta: 1})
				}
			},
			wxGetUserInfo(){
				authorize.getCode('weixin').then(wechatcode =>{
					wx.getUserInfo({
						success: res => {
							wxLogin.wxLoginAuthorize()
							setTimeout(()=>{
								uni.navigateBack({delta: 1});
							},2000)
						}
					});	
				})
			},
		},
		onHide(){
			this.$api.switchTabTo('/pages/tabBar/home/home')
		}
	}
</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: 14rpx;
				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>