fengpingle/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="baseURL+'/static/img/logo.png'" mode=" aspectFit"></image>
			<!-- 获取头像登录 -->
			<!-- <button class="userInfo" type="warn" @click="isclick?'':userInfoData()" :class="{'nocaction': isclick}">
				<text class="iconfont iconweixin"></text>
				<text>
				微信授权登录
				</text>
			</button> -->
			<!-- 获取手机号登录 -->
			<button class="userInfo" type="warn" :class="{'nocaction': loding}" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">
				<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, //是否点击了
				iv1: '',
				encryptedData1: '',
				hasphone: false,
				loding: false
			};
		},
		onLoad() {
			this.loadData();
		},
		computed: {
			...mapState(['baseURL', 'urlFile'])
		},
		methods: {
			// ...mapMutations(['login', 'setUserInfo']),
			...mapMutations('user', ['login', 'setUserInfo']),
			close() {
				this.$refs.popupsq.close()
			},
			getPhoneNumber(e) {
				let obj = this
				console.log(e, 'e+++++++++++++++')
				if(obj.loding) {
					return
				}
				obj.loding = true
				// 用户同意授权
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log('chenggong++++++++++++++')
					// obj.hasphone = true
					obj.iv1 = e.detail.iv
					obj.encryptedData1 = e.detail.encryptedData
					// obj.$refs.popupsq.open()
					uni.showLoading({
						title: '授权中',
						mask: true
					});
					obj.loadMp();
				} else {
					obj.loding = false
					uni.showToast({
						title: '您拒绝了请求,不能正常使用小程序',
						icon: 'error',
						duration: 2000
					});
					return;
				}
			},
			loadData() {
				let obj = this;
				// #ifdef H5
				loginWinxin();
				// #endif
				// #ifdef MP-WEIXIN
				loginWinxinMp().then((e) => {
					console.log(e, 'ddddddddddddddddddddddd')
					// obj.code = e.code
					wx.login({
						success(e) {
							console.log(e, 'loginWinxinMp');
							obj.code = e.code;
							console.log(obj.code, 'wxlogin.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,
					iv: obj.iv1,
					encryptedData: obj.encryptedData1,
					// encryptedData: user.encryptedData,
					spread_spid: spread_spid,
					// #ifdef MP
					spread_code: spread_code,
					// #endif
				}).then(({
					data
				}) => {
					uni.hideLoading();
					obj.loding = false;
					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/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: #add86a !important;
	}

	.nocaction {
		background-color: #999;
	}

	.popupsq-wrap {
		width: 550rpx;
		height: 450rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 30rpx;

		.btn {
			width: 240rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			border-radius: 45rpx;
			font-weight: bold;
		}

		.qx {
			color: #000;
			border: #f0f0f0 1px solid;

		}

		.qr {
			color: #fff;
			background-color: #a8d561;
		}
	}
</style>