jjpt/pages/public/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="../../static/icon/logo.jpg" 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>
	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((e) => {
				console.log(e,'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
				obj.code = e.code;
					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 = '/pages/applic/aed'
				// let ur = uni.getStorageSync('present') || '/pages/index/index';
				// 用于处理缓存bug
				// if (ur=='pages/shop/product') {
				// 	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: #cb131d !important;
}
.nocaction {
	background-color: #999;
}
</style>