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">
					<uni-forms ref="loginForm" :modelValue="loginFormData" :rules="loginFormRules">
						<uni-forms-item name="nickname">
							<uni-easyinput type="text" 
								v-model="loginFormData.nickname" 
								placeholder="请输入昵称" 
								:inputBorder="false" 
								:styles="nicknameInputStyle"/>
						</uni-forms-item>
					</uni-forms>
				</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';
	import router from '@/common/constants/router.js';
	import { useUserInfoStore } from '@/stores/userInfo.js';
	
	// 组件
	/**
	 * 登录表单
	 */
	const loginForm = ref(null);
	
	// 属性
	/**
	 * 用户信息
	 */
	const userInfoStore = useUserInfoStore();
	
	/**
	 * 登录表单数据
	 */
	const loginFormData = ref({
		nickname: "蜗牛"
	});
	
	/**
	 * 登录表单校验规则
	 */
	const loginFormRules = ref({
		nickname: {
			rules: [{
				required: true,
				errorMessage: '昵称不能为空'
			}, {
				maxLength: 30,
				errorMessage: '昵称不能超过{maxLength}个字符'
			}]
		}
	});
	
	/**
	 * 昵称输入框样式
	 */
	const nicknameInputStyle = {
		width: 100+'%',
		height: 100+'%',
		fontSize: 36+'rpx',
		fontWeight: 700,
		letterSpacing: 0+'rpx',
		lineHeight: 52.13+'rpx',
		color: '#000000',
		borderRadius: 24+'rpx',
		textAlign: 'center'
	};
	
	// 方法
	const login = async () => {
		try {
			let formData = await loginForm.value.validate();
			uni.showLoading({
				title: '登录中...'
			});
			// 获取供应商
			let providerResult = await uni.getProvider({ service: 'oauth' });
			// 获取登录code
			let loginResult = await uni.login({ provider: providerResult.provider[0] });
			// 登录
			let token = await loginApi.login({
				"code": loginResult.code,
				"nickname": formData.nickname
			});
			
			// 保存用户信息(token)
			userInfoStore.$patch({
				token,
				nickname: formData.nickname
			});
			
			uni.showToast({
				title: '登录成功',
				icon: 'success',
				duration: 1000
			});
			
			// 登录结束返回主页
			setTimeout(() => {
				uni.navigateTo({
					url: router.INDEX_URL
				});
			}, 1000);
		} finally {
			uni.hideLoading();
		}
	}
</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;
		}
		
		.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>