card-wx-user/pages/login.vue

<template>
	<view>
		<view class="login-main">
			<image class="user" src="/static/images/userimg.png"></image>
			<view class="name">你好 </view>
			<view class="tip">为了您的最佳体验，请登录</view>
		</view>

		<button class="lgin-btn" open-type="getUserInfo" lang="zh_CN" withCredentials="true" @getuserinfo="mpWxLogin">
			<image src="/static/images/wxa.png"></image>
			<view class="text">微信一键登录</view>
		</button>
	</view>
</template>

<script>
	import {
		request
	} from '@/common/js/request'
	export default {
		name: "",
		data() {
			return {
				logged: uni.getStorageSync("logged"),
			}
		},
		onLoad() {

		},
		methods: {
			async mpWxLogin(userInfoData) {
				console.log("登陆")
				await this.mpWxGetUserInfo(userInfoData)
				this.$util.msg('登陆成功');
				this.logged = true;
				await uni.setStorageSync("logged", true)
				uni.navigateTo({
					url: "/pages/index"
				})
			},
			// 获取用户信息
			async mpWxGetUserInfo(userInfoData) {
				return new Promise((resolve, reject) => {
					if (!userInfoData.detail.userInfo) {
						reject(new Error('未拿到用户信息'))
					}
					this.$util.throttle(async () => {
						const [loginErr, loginData] = await uni.login({
							provider: 'weixin'
						})
						const [err, userData] = await uni.getUserInfo();
						const res = await request('uni-card', 'loginByWx', {
							code: loginData.code,
							encryptedData: userData.encryptedData,
							iv: userData.iv
						}, {
							showLoading: true
						});
						console.log("res", res)
						resolve(res)
					})
				}).then(async userInfo => {
					console.log("mpWxGetUserInfo", userInfo)
					this.$store.dispatch('setUserData', userInfo);
					await uni.setStorageSync("userInfo", userInfo);
					return userInfo
				})
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped>
	.login-main {
		width: 100%;
		padding-top: 200rpx;
	}

	.login-main .user {
		width: 180rpx;
		height: 180rpx;
		margin: 0 auto;
		display: block;
	}

	.login-main .name {
		text-align: center;
		font-size: 40rpx;
	}

	.login-main .name text {
		padding: 0 0 0 20rpx;
	}

	.login-main .tip {
		color: #999;
		padding: .9em 0;
		text-align: center;
		padding-bottom: 50rpx;
	}

	.lgin-btn {
		width: 80%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #DBA871;
		border-radius: 10rpx;
		padding: 15rpx 0;
	}

	.lgin-btn image {
		width: 50rpx;
		height: 50rpx;
		display: block;
	}

	.lgin-btn .text {
		color: #fff;
		font-size: 32rpx;
		padding-left: 10rpx;
	}

	.lgin-tip {
		color: #DBA871;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
	}
</style>