pz/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/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> -->
			<!-- 获取手机号登录 -->
			<template v-if="!hasphone">
				<button class="userInfo" type="warn" :class="{ nocaction: isclick }" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<text class="iconfont iconweixin"></text>
					<text>微信授权登录</text>
				</button>
			</template>
			<template v-if="hasphone">
				<button class="userInfo" type="warn" :class="{ nocaction: isclick }" @click="isclick ? '' : userInfoData()">
					<text class="iconfont iconweixin"></text>
					<text>微信授权登录</text>
				</button>
			</template>

			<!-- 550*450 -->
			<uni-popup ref="popupsq" type="center">
				<view class="popupsq-wrap">
					<view class="" style="text-align: center;font-size: 32rpx;font-weight: bold;padding: 40rpx 0;color: #000;">陪诊</view>
					<view class="" style="font-size: 26rpx;padding-bottom: 35rpx;color: #000;">该程序获取以下授权:</view>
					<view class="" style="font-size: 26rpx;color:#b7b7b7;">获取您的公开信息（昵称，头像），以便于个性话头像和昵称</view>
					<view class="flex" style="padding-top: 40rpx;">
						<view class="btn qx" style="" @click="close()">取消</view>
						<view class="btn qr" style="" @click="isclick ? '' : userInfoData()">确认授权</view>
					</view>
				</view>
			</uni-popup>
		</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
		};
	},
	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 (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();
			} else {
				obj.isclick = 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,
				iv1: obj.iv1,
				encryptedData1: obj.encryptedData1,
				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/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: #24a17d !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: #24a17d;
	}
}
</style>