153 lines
4.5 KiB
Vue
153 lines
4.5 KiB
Vue
<script setup lang='ts'>
|
||
import { ElMessage } from 'element-plus';
|
||
import { onMounted, reactive, ref } from 'vue';
|
||
import RotationVerification from '@/components/Common/RotationVerification.vue';
|
||
import { request, type BaseResponseData } from '@/lib/request';
|
||
|
||
const containerHeight = ref('800px');
|
||
const isCaptchaShow = ref(false);
|
||
const loginStatus = ref(false);
|
||
const formData = reactive({
|
||
username: '',
|
||
password: ''
|
||
})
|
||
const loginHandle = () => {
|
||
if (!formData.username || !formData.password) {
|
||
return ElMessage.warning('请填写账户名和密码')
|
||
}
|
||
isCaptchaShow.value = true;
|
||
}
|
||
const login = async () => {
|
||
loginStatus.value = true;
|
||
try {
|
||
let loginRes: BaseResponseData = await request.post('/console/login', {
|
||
username: formData.username,
|
||
password: formData.password,
|
||
session: localStorage.getItem('captcha-session')
|
||
})
|
||
loginStatus.value = false;
|
||
switch (loginRes.code) {
|
||
case 0:
|
||
// 成功
|
||
localStorage.setItem('jwtToken', loginRes.data.token);
|
||
ElMessage.success('登录成功');
|
||
return setTimeout(() => {
|
||
window.location.reload();
|
||
}, 1000);
|
||
case -1:
|
||
// 参数缺失
|
||
return ElMessage.error('参数缺失');
|
||
case -3:
|
||
// 服务器错误
|
||
return ElMessage.error('服务器错误');
|
||
case -6000:
|
||
// 用户不存在
|
||
return ElMessage.error('用户不存在');
|
||
case -6001:
|
||
// 账户名或密码错误
|
||
return ElMessage.error('账户名或密码错误');
|
||
default:
|
||
return ElMessage.error(`未知错误 ${loginRes.message}`)
|
||
}
|
||
} catch (error) {
|
||
loginStatus.value = false;
|
||
return ElMessage.error(`未知错误 ${error}`)
|
||
}
|
||
}
|
||
onMounted(async() => {
|
||
containerHeight.value = window.innerHeight > 500 ? window.innerHeight - 90 + 'px' : '390px';
|
||
})
|
||
</script>
|
||
<template>
|
||
<div class="bcc"></div>
|
||
<div class="main-container">
|
||
<h1>登录到控制台</h1>
|
||
<el-popover placement="bottom" :width="300" trigger="click">
|
||
<p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;"
|
||
@click="">《特恩(TONE)控制台使用协议》</strong></p>
|
||
<template #reference>
|
||
<h3>控制台是什么？</h3>
|
||
</template>
|
||
</el-popover>
|
||
<div class="form-container">
|
||
<el-input v-model="formData.username" class="input" placeholder="请输入账户名" clearable>
|
||
</el-input>
|
||
<el-input v-model="formData.password" show-password class="input" placeholder="密码" @keyup.enter="loginHandle">
|
||
</el-input>
|
||
<el-button class="login-botton" @click="loginHandle" :loading="loginStatus">登录</el-button>
|
||
</div>
|
||
</div>
|
||
<RotationVerification v-if="isCaptchaShow" @fail="() => { isCaptchaShow = false; ElMessage.warning('验证失败') }"
|
||
@success="() => { isCaptchaShow = false; login() }" />
|
||
</template>
|
||
<style scoped>
|
||
.bcc {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
background-color: #f6f8f9;
|
||
}
|
||
|
||
.main-container {
|
||
height: v-bind(containerHeight);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.main-container>h1 {
|
||
text-align: center;
|
||
font-size: 36px;
|
||
font-weight: 400;
|
||
cursor: default;
|
||
margin: 0 0;
|
||
}
|
||
|
||
.main-container>h3 {
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.main-container .form-container {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.form-container .input {
|
||
width: 260px;
|
||
height: 35px;
|
||
font-size: 16px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.login-botton {
|
||
margin: 10px 0 120px 0;
|
||
width: 260px;
|
||
height: 35px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.login-botton:hover {
|
||
background-color: #fff;
|
||
border-color: rgb(220, 223, 230);
|
||
color: #222;
|
||
}
|
||
|
||
.login-botton:focus {
|
||
background-color: #fff;
|
||
border-color: rgb(220, 223, 230);
|
||
color: #606266;
|
||
}
|
||
@media screen and (max-width: 800px){
|
||
/* 因为屏幕宽度小于800时，head的高度会减少15px */
|
||
.main-container{
|
||
height: calc(v-bind(containerHeight) + 15px);
|
||
}
|
||
}
|
||
</style> |