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

<template>
	<view class="container login">
		<view class="login-main">
			<image class="logo" src="../../static/login-logo@3x.png" mode=""></image>
			<text class="logo-text">生美/医美采购服务平台</text>
		</view>
		<button class="login-btn" type="primary" size="small" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getuserinfo">微信授权</button>
	</view>
</template>

<script>
	import {mapState,mapMutations } from 'vuex';
	import authorize from '@/common/config/authorize.js' 
	export default{
		data() {
			return{
				
			}
		},
		onLoad() {

		},
		methods:{
			...mapMutations(['wxLogin']),
			//授权登录 
			getuserinfo: function (e) {
			    if (e.detail.userInfo) {
					this.wxGetUserInfo()
			    }else{
					this.$util.msg('授权失败',2000)
			    }
			 },
			wxGetUserInfo(){
				authorize.getCode('weixin').then(wechatcode =>{
					wx.getUserInfo({
						success: res => {
							uni.switchTab({
								url:'/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: 276rpx;
				height: 236rpx;
				display: block;
			}
			.logo-text{
				font-size: $font-size-44;
				line-height: 44rpx;
				color: $color-system;
				margin-top: 44rpx;
			}
		}
		.login-input{
			width: 654rpx;
			height: 40rpx;
			padding: 24rpx;
			margin: 0 auto;
			margin-bottom: 60rpx;
			background: #F7F7F7;
			border-radius: 14rpx;
			.input{
				width: 100%;
				height: 100%;
				background: #F7F7F7;
				font-size: $font-size-28;
				line-height: 40rpx;
				color: #333333;
				border-radius: 14rpx;
			}
		}
		.login-btn{
			width: 702rpx;
			height: 88rpx;
			border-radius: 14rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #FFFFFF;
			text-align: center;
			background: linear-gradient(135deg,rgba(8,162,103,1) 0%,rgba(5,183,115,1) 100%);
			margin: 0 auto;
			margin-top: 400rpx;
		}
	}
</style>