PunchSettle-MiniProgram/pages/login/login.vue

<template>
	<main-layout :showHome="true">
		<template>
			<view class="login-container">
				<view class="login-avator">
					<uni-icons type="person" size="60"></uni-icons>
				</view>
				<view class="login-nickname">
					<input placeholder="请输入昵称" v-model="nickname"/>
				</view>
				
				<view class="login-btn" @click="login">登录</view>
			</view>
		</template>
	</main-layout>
</template>

<script setup>
	import { ref } from 'vue';
	import { loginApi } from '@/service/apis.js';

	/**
	 * 头像
	 */
	const avatar = ref("");
	
	/**
	 * 昵称
	 */
	const nickname = ref("");
	
	
	const login = async () => {
		// 获取供应商
		let providerResult = await uni.getProvider({
			service: 'oauth'
		});
		const provider = providerResult.provider[0];
		
		// 获取登录的code
		let loginResult = await uni.login({
			provider
		});
		
		// 获取用户的头像和昵称
		let userInfoResult = await uni.getUserInfo({
			 provider
		});
		
		// 获取后端token
		let token = await loginApi.login({
			"code": loginResult.code,
			"avatar": userInfoResult.userInfo.avatarUrl,
			"nickname": userInfoResult.userInfo.nickName
		});
		
		// 保存token
		uni.setStorageSync('token', token);
		// 保存用户信息
		uni.setStorageSync('userInfo', {
			"avatar": userInfoResult.userInfo.avatarUrl,
			"nickname": userInfoResult.userInfo.nickName
		});
		
		// 登录结束返回主页
		uni.navigateTo({
			url: "/pages/index/index"
		})
		
	}
</script>

<style lang="scss" scoped>
	.login-container {
		margin-top: 150rpx;
		
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		.login-avator {
			width: 200rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 50%;
			
			// 阴影
			border: 0.5px solid #E4E4E4;
			box-shadow: 0px 1px 6px  #D8D8D8;
			
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.login-nickname {
			margin-top: 50rpx;
			
			width: 599rpx;
			height: 100rpx;
			border-radius: 8px;
			background: #FFFFFF;
			
			// 阴影
			border: 0.5px solid #E4E4E4;
			box-shadow: 0px 1px 6px  #D8D8D8;
			
			input {
				width: 100%;
				height: 100%;
				font-size: 36rpx;
				font-weight: 700;
				letter-spacing: 0rpx;
				line-height: 52.13rpx;
				color: #000000;
				text-align: left;
				border-radius: 24rpx;
				text-align: center;
			}
		}
		
		.login-btn {
			margin-top: 150rpx;
			
			width: 599rpx;
			height: 100rpx;
			border-radius: 24rpx;
			background: #406CE7;
		
			font-size: 36rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 52.13rpx;
			color: #FFFFFF;
			
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>