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

<template>
	<view class="container login" :style="{ paddingTop: CustomBar + 'px' }">
		<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"
				lang="zh_CN"
				open-type="getUserInfo"
				@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: {
		...mapMutations(['wxLogin']),
		getUserProfile() {
			const _that = this
			// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
			wx.getUserProfile({
				desc: '用于完善会员资料',
				success(res) {
					console.log(res)
					console.log('新API', res)
					_that.wxLogin(res.userInfo)
					// _that.$store.commit('wxLogin',e.detail.userInfo)
					uni.login({
						provider: 'weixin',
						scopes: 'auth_user',
						success() {
							_that.checkedUser()
						},
						fail(err) {
							_that.$util.msg(err, 2000)
						}
					})
				},
				fail() {
					_that.$util.msg('授权失败', 2000)
				}
			})
		},
		getUserInfo(e) {
			const _that = this
			if (e.detail.userInfo) {
				// 缓存用户授权状态
				this.wxLogin(e.detail.userInfo)
				uni.login({
					provider: 'weixin',
					scopes: 'auth_user',
					success() {
						_that.checkedUser()
					},
					fail(err) {
						_that.$util.msg(err, 2000)
					}
				})
			} else {
				console.log('授权失败!')
			}
		},
		undGetuserinfo() {
			uni.navigateBack({ delta: 1 })
		},
		// 用户验证
		async checkedUser() {
			const wechatCode = await authorize.getCode('weixin')
			// 用户是否填写了邀请码
			this.UserService.userInfoLogin({ code: wechatCode })
				.then(res => {
					console.log('授权登录成功')
					uni.reLaunch({
						url: '/pages/index/index'
					})
				})
				.catch(error => {
					console.log('游客登录')
					// 缓存游客openid
					uni.setStorageSync('openid', error.data.openid)
					uni.reLaunch({
						url: '/pages/login/login'
					})
				})
		}
	}
}
</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>