lilishop-uniapp/pages/passport/wechatMPLogin.vue

<template>
	<view class="container">
		<u-modal v-model="phoneAuthPopup" :title="projectName+'商城'" :show-confirm-button="false">
			<div class="tips">
				为了更好地用户体验，需要您授权手机号
			</div>
			<button class="register" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				去授权
			</button>
		</u-modal>
		<view class="wx-auth-container">
			<div class="box">
				<view class="logo-info">
					<text class="title">欢迎进入{{ projectName }}商城</text>
				</view>
				<view class="small-tips">
					<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
					<view>您的公开信息（昵称、头像）</view>
				</view>
				<view class="btns">
					<button type="primary" bindtap="getUserProfile" @click="getUserProfile()"
						class="btn-auth">确认微信授权</button>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		mpAutoLogin
	} from "@/api/connect.js";

	import {
		getUserInfo
	} from "@/api/members";
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
				phoneAuthPopup: false,
				// 授权信息展示，商城名称
				projectName: "LiLi",
				//微信返回信息，用于揭秘信息，获取sessionkey
				code: '',
				//微信昵称
				nickName: '',
				//微信头像
				image: '',
			};
		},
		//微信小程序进入页面，先获取code，否则几率出现code和后续交互数据不对应情况
		mounted() {
			let that = this;
			//获取code
			uni.login({
				success: (res) => {
					that.code = res.code;
				},
			});
		},
		methods: {
			//获取用户信息
			getUserProfile(e) {
				let that = this;
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						that.nickName = res.userInfo.nickName;
						that.image = res.userInfo.avatarUrl;
						//展示手机号获取授权
						this.phoneAuthPopup = true;
					},
					fail: (res) => {
						that.nickName = "微信用户";
						that.image =
							"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132";
						//展示手机号获取授权
						this.phoneAuthPopup = true;
					}
				})
			},
			//获取手机号授权
			getPhoneNumber(e) {

				let that = this;
				let iv = e.detail.iv;
				let encryptedData = e.detail.encryptedData;
				if (!e.detail.encryptedData) {
					uni.showToast({
						title: "请授予手机号码权限，手机号码会和会员系统用户绑定！",
						icon: "none",
					});
					return;
				}

				let code = this.code;
				let image = this.image;
				let nickName = this.nickName;
				mpAutoLogin({
					encryptedData,
					iv,
					code,
					image,
					nickName,
				}).then((res) => {
					storage.setAccessToken(res.data.result.accessToken);
					storage.setRefreshToken(res.data.result.refreshToken);
					// 登录成功
					uni.showToast({
						title: "登录成功!",
						icon: "none",
					});
					//获取用户信息
					getUserInfo().then((user) => {
						storage.setUserInfo(user.data.result);
						storage.setHasLogin(true);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 500);
					});

				});

			},
		},
	};
</script>
<style>
	/*微信授权*/
	page {
		background-color: #ffffff;
	}

	.wx-auth-container {
		width: 100%;
		margin-top: 20%;
	}

	.logo-info {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		flex-direction: row;
		align-items: flex-start;
		padding: 20rpx;

		flex-direction: column;
		font-weight: bold;
	}

	image {
		width: 100px;
		height: 100px;
		text-align: center;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}

	.logo-info-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: none;
	}

	text.title,
	text.shop {
		display: inline-block;
		font-size: 60rpx;
		color: #333;
	}

	text.shop {
		display: inline-block;
		font-size: 55rpx;
		color: #333;
	}

	.box {
		margin: 0 32rpx;
	}

	/* 文字提示*/
	.small-tips {
		width: 94%;
		padding: 20rpx;
		font-size: 24rpx;
		margin: 0 0 20rpx;
		color: #999;
	}

	.auth-button {
		padding: 10px 20px;
		width: calc(100% - 20 * 4rpx);
	}

	.tips {
		width: 80%;
		text-align: left;
		margin: 6% 10%;
		margin-top: 48rpx;
		line-height: 1.75;
	}

	.register {
		color: #00a327 !important;
		border: none !important;
		background: #fff !important;
	}

	.btn {
		width: 100%;
		text-align: center;
	}

	.btn-auth {
		width: 92%;
		margin: 0 auto 100rpx;

		border-radius: 100px;
	}

	.btns {
		margin-top: 100rpx;
		display: flex;
		width: 100%;
		justify-content: center;
	}
</style>