book-web/src/views/book/login.vue

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { useLogin } from '@/api/book'
import { ElNotification } from 'element-plus'

const route = useRoute()
const router = useRouter()
const loginForm = ref({
	username: 'admin1',
	password: '123456',
	rePassword: '123456'
})
const handleLogin = () => {
	if (active.value == '0') {
		console.log('登录')
		useLogin(loginForm.value).then(res => {
			ElNotification({
				title: '登录成功！！',
				type: 'success'
			})
			if (route.query.returnUrl) {
				router.push(route.query.returnUrl as string)
			}
			window.document.cookie = 'book_user=' + res.data
		})
	} else if (active.value == '1') {
		active.value = '0'
	}
}

onMounted(() => {
	if (route.query.status) {
		active.value = route.query.status as string
	}
})
const active = ref('0')
</script>

<template>
	<div class="bg-color">
		<div class="login-main">
			<div class="login-c">
				<form id="login-form">
					<div class="login-choice">
						<div :class="{ active: active == '0' }" @click="active = '0'">用户登录</div>
						<div :class="{ active: active == '1' }" @click="active = '1'">用户注册</div>
					</div>
					<input v-model="loginForm.username" class="fm-text" placeholder="用户名" />
					<input v-model="loginForm.password" class="fm-text" placeholder="密码" type="password" />
					<input v-if="active == '1'" v-model="loginForm.rePassword" class="fm-text" placeholder="确认密码" type="password" />
					<button @click.prevent="handleLogin">{{ active == '0' ? '登录' : '注册' }}</button>
				</form>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.bg-color {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #f5f8fa;
	overflow-y: scroll;

	.login-main {
		display: flex;
		width: 100%;
		margin-top: 200px;
		justify-content: center;

		.login-c {
			width: 735px;
			height: 514px;
			border-radius: 18px;
			background: white;
			padding: 30px;
		}
	}
}

#login-form {
	display: flex;
	flex-direction: column;
	width: 100%;
	font-size: 25px;

	.login-choice {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 50px;
		font-weight: 900;
		div {
			width: 120px;
			cursor: pointer;
		}
	}

	button {
		width: 100%;
		height: 48px;
		background: #ff6200;
		font-size: 16px;
		color: #fff;
		border-radius: 8px;
		border: none;
		font-weight: 900;
	}

	.fm-text {
		padding-left: 20px;
		height: 48px;
		border-radius: 8px;
		opacity: 1;
		border: none;
		background: #f3f6f8;
		font-size: 16px;
		font-weight: 500;
		line-height: 18px;
		letter-spacing: 0;
		margin-bottom: 50px;
	}
}

.active {
	color: #ff5500;
	font-weight: 900;
}
</style>