newXLSC/pages/public/wxLogin.vue

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

<script>
	import {
		getUserInfo
	} from '@/api/login.js';
	// #ifdef H5
	import {
		loginWinxin
	} from '@/utils/wxAuthorized';
	// #endif
	// #ifdef MP-WEIXIN
	import {
		loginWinxinMp
	} from '@/utils/wxMinProgram';
	import {
		wechatMpAuth
	} from '@/api/wx';
	// #endif
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userInfo: {}, //授权用户信息
				code: '', //授权code
				isclick: false, //是否点击了
			};
		},
		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
				loginWinxinMp().then(() => {
					wx.login({
						success(e) {
							console.log(e, 'loginWinxinMp');
							obj.code = e.code;
						},
						fill: function(e) {
							console.log(e)
						}
					})
				});
				// #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 => {
						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

				wechatMpAuth({
					code: obj.code,
					iv: user.iv,
					encryptedData: user.encryptedData,
					spread_spid: spread_spid,
					// #ifdef MP
					spread_code: spread_code,
					// #endif
				}).then(({
					data
				}) => {
					obj.wchatAuth(data);
					console.log(data, 'wechatMpAuth++++++++++++++++++++++++++')

				}).catch(err => {
					// obj.loding = false;
					// uni.hideLoading();
				});
			},
			// #endif
			wchatAuth(data) {
				let obj = this;
				// 保存token
				uni.setStorageSync('token', data.token);
				console.log(data.token, 'token++++++++++++++')
				// 获取用户基础信息
				getUserInfo({}).then(e => {
					console.log('userInfo+++++++++++', e)
					obj.login();
					uni.hideLoading();
					// 保存返回用户数据
					obj.setUserInfo(e.data);
					let ur = uni.getStorageSync('present') || '/pages/index/index';
					// 用于处理缓存bug
					if (ur == 'pages/product/product' || ur == '/pages/public/wxLogin') {
						ur = '/pages/index/index'
					}
					uni.switchTab({
						url: ur,
						fail(e) {
							uni.navigateTo({
								url: ur,
								fail(e) {
									uni.navigateTo({
										url: '/pages/index/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 {
		margin-top: 20vh;
		margin-left: 176rpx;
		width: 385rpx;
		height: 394rpx;
	}

	.userInfo {
		margin: 0 100rpx;
		margin-top: 50rpx;
		color: #FFFFFF;
		border-radius: 99rpx;
		background-color: $base-color !important;
	}

	.nocaction {
		background-color: #999;
	}
</style>