mh/pages/login/wxLogin.vue

<template>
	<view class="content">
		<!-- #ifndef H5 -->
		<!-- <image class="bg-img" :src="baseURL+urlFile+'/img/img09.png'" mode=" scaleToFill"></image> -->
		<view class="logo-img-box">
			<image class="logo-img" src="https://chaomd.liuniu946.com/image/logo.png" mode=" aspectFit"></image>
			<button class="userInfo" type="warn" @click="isclick ? '' : userInfoData()" :class="{ nocaction: isclick }">
				<text class="iconfont iconweixin"></text>
				<text>微信授权登录</text>
			</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
// #ifdef H5
// import { loginWinxin } from '@/utils/wxAuthorized';
// #endif
// #ifdef MP-WEIXIN
import { loginWinxinMp } from '@/utils/wxMinProgram';
// #endif
import { mapMutations, mapState } from 'vuex';
export default {
	data() {
		return {
			userInfo: {}, //授权用户信息
			isclick: false, //是否点击了
			openid: '',
			sessionKey: ''
		};
	},
	onLoad(option) {
		this.loadData();
	},
	computed: {
		// ...mapState(['baseURL','urlFile'])
	},
	methods: {
		...mapMutations(['login', 'setUserInfo']),
		// ...mapMutations('user', ['login', 'setUserInfo']),
		loadData() {
			let obj = this;
			// #ifdef H5
			loginWinxin();
			// #endif
			// #ifdef MP-WEIXIN
			wx.login({
				success(e) {
					console.log(obj.$api, '123456');
					obj.$api.wechatMpAuth({ code: e.code }).then(e => {
						obj.openid = e.data.openid;
						obj.sessionKey = e.data.session_key;
						console.log(e, '1111');
					});
				},
				fill: function(e) {
					console.log(e);
				}
			});
			// loginWinxinMp()
			// 	.then(e => {
			// 		console.log(e, '1111');
			// 	})
			// 	.then(err => {
			// 		console.log(err, '1111');
			// 	});
			// #endif
		},
		// 用户确认授权
		userInfoData() {
			let that = this;
			if (that.isclick) {
				return;
			}
			that.isclick = true;
			wx.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: res => {
					console.log(res, 'that.userInfo+++++++++++++++++++');
					that.userInfo = res;
					uni.showLoading({
						title: '授权中',
						mask: true
					});
					that.loadMp();
				},
				fail: err => {
					console.log(err);
					that.isclick = false;
					uni.showToast({
						title: '您拒绝了请求,不能正常使用小程序',
						icon: 'error',
						duration: 2000
					});
					return;
				}
			});
			// this.userInfo = e;
			// console.log(e,'用户确认授权')
			// this.loadMp()
		},
		// #ifdef MP-WEIXIN
		loadMp() {
			let obj = this;
			// 获取登录授权页数据
			let user = obj.userInfo;
			console.log(user);
			// 获取推广人id
			let spread_spid = uni.getStorageSync('spread') || '';
			// #ifdef MP
			let spread_code = uni.getStorageSync('spread_code') || '';
			// #endif
			this.$api
				.wechatMpAuthLogin({
					sessionKey: obj.sessionKey,
					openid: obj.openid,
					iv: user.iv,
					encryptedData: user.encryptedData
				})
				.then(({ data }) => {
					obj.wchatAuth(data);
					console.log(data, 'wechatMpAuth++++++++++++++++++++++++++');
				})
				.catch(err => {
					console.log(err);
					// obj.loding = false;
					// uni.hideLoading();
				});
		},
		// #endif
		wchatAuth(data) {
			let obj = this;
			// 保存token
			uni.setStorageSync('token', data.token);
			// 获取用户基础信息
			this.$api.userinfo().then(e => {
				uni.hideLoading();
				// 保存返回用户数据
				let ur = uni.getStorageSync('present') || '/pages/tabbar/index';
				// 用于处理缓存bug
				if (ur == 'pages/shop/product') {
					ur = '/pages/tabbar/index';
				}
				console.log(ur, '1111');
				uni.switchTab({
					url: ur,
					fail(e) {
						uni.navigateTo({
							url: ur,
							fail(e) {
								uni.navigateTo({
									url: '/pages/tabbar/index'
								});
							}
						});
					}
				});
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	background-color: #fff;
}
.bg-img,
.logo-img-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.logo-img {
	// background: #000;
	margin-top: 20vh;
	margin-left: 176rpx;
	width: 385rpx;
	height: 394rpx;
}
.userInfo {
	margin: 0 100rpx;
	margin-top: 50rpx;
	color: #3374ff;
	border-radius: 99rpx;
	background-color: #6bc6fe !important;
}
.nocaction {
	background-color: #999;
}
</style>