sx/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: #637bef !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: #637bef;
		}
	}
</style>