132 lines
2.7 KiB
Vue
132 lines
2.7 KiB
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>
|