LuCodeUniapp/pages/main/login/login.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2022-04-20 09:02:17
	 */
	import {
		ref
	} from 'vue'
	import {
		userLoginAction
	} from '@/api/index.js'
	import {
		setToken
	} from '@/tool/member.js'
	import config from '@/config.js'
	const wxGetUserInfo = (res) => {
		if (!res.detail.iv) {
			uni.$lu.toast("您取消了授权,登录失败");
			return false;
		}
		uni.login({
			provider: 'weixin',
			success: (loginRes) => {
				userLoginAction(loginRes.code, (token) => {
					setToken(token)
					uni.switchTab({
						url: '/pages/main/user/user'
					})
				})
			},
		});
	}
</script>
<template>
	<view class="home_wrapper u-text-center">
		<view class="home_logo_wrapper">
			<u-image width="200rpx" height="200rpx" src="/static/logo.png"></u-image>
		</view>
		<view class="home_title_wrapper">{{ config.title }}</view>
		<button class="open_type_button_wrapper" open-type="getUserInfo" @getuserinfo="wxGetUserInfo"
			withCredentials="true">微信登录</button>
	</view>

</template>
<style scoped>
	.home_title_wrapper {
		margin: 10rpx 0;
	}

	.home_logo_wrapper {
		width: 200rpx;
		height: 200rpx;
		margin: 0 auto;
	}

	.home_wrapper {
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.open_type_button_wrapper {
		margin-top: 30rpx;
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
	}
</style>