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="../../static/ws/logo.png" mode="widthFix"></image>
		</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: 80rpx 0 0 0;
		.logo {
			width: 152rpx;
			height: 152rpx;
			display: block;
			border-radius: 50%;
		}
		.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: 600rpx;
			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: 76rpx;
				background: #ffffff;
				border: 1px solid #666;
				color: #666;
				margin-top: 30rpx;
			}
		}
	}
}
</style>