Kubbo
af3a7c83e8
- 引入新的登录中间件模块 - 在应用中间件链中注册登录处理器 - 修改前端登录接口调用路径 - 添加服务器选择下拉组件 - 实现服务器ID状态管理 - 更新登录表单数据绑定结构
115 lines
3.2 KiB
Vue
115 lines
3.2 KiB
Vue
<script setup>
|
|
import {defineOptions, onMounted, ref} from "vue";
|
|
import request from "@/utils/request";
|
|
import {ElMessage} from "element-plus";
|
|
|
|
defineOptions({name: 'Login'});
|
|
|
|
const servers = ref([])
|
|
const account = ref('')
|
|
const password = ref('')
|
|
const agree = ref(false)
|
|
const srvId = ref('')
|
|
|
|
async function handleLogin() {
|
|
if (!agree.value) return ElMessage.error('请勾选同意用户协议')
|
|
const {data} = await request.post('/api/login', {
|
|
username: account,
|
|
password
|
|
})
|
|
sessionStorage.setItem("CQ-TOKEN", data.token)
|
|
}
|
|
|
|
async function getServers() {
|
|
const {data} = await request.get('/api/server/list')
|
|
servers.value = data
|
|
}
|
|
|
|
function protectProtocol() {
|
|
const agree = document.getElementById('agree')
|
|
const agreeBtn = document.querySelector('#agree .agree_btn')
|
|
agree.addEventListener('click', function () {
|
|
agreeBtn.classList.toggle('agree_btn_checked')
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getServers()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login wrapper pagebg">
|
|
<div class="loginBox flex column p-8 gap-8" id="account-login">
|
|
<b class="title mb-20">神临苍月</b>
|
|
<input class="w100" type="text" id="account" v-model="account" placeholder="请输入账号" @keyup="v=>account=v.replace(/[\W]/g, '')" autocomplete="off"/>
|
|
<input class="w100" type="password" id="password" v-model="password" placeholder="请输入密码"/>
|
|
<el-select id="serverId" v-model="srvId" style="border: none; display: none; margin-bottom: 10px;">
|
|
<option value="0">请选择区服</option>
|
|
<option v-for="item in servers" :value="item.id">{{ item.name }}区</option>
|
|
</el-select>
|
|
<div id="agree" class="agree flex gap-4">
|
|
<el-checkbox v-model="agree"/>
|
|
我已阅读并同意 <a @click="protectProtocol">用户协议及隐私协议</a>
|
|
</div>
|
|
<div class="button pointer w100 py-8" @click="handleLogin">登 录</div>
|
|
<div style="display:flex;justify-content:center;gap:8px;font-size:12px">
|
|
<div style="display:flex;align-items:center;flex-direction:column;gap:4px;cursor:pointer" id="linuxdoConnect">
|
|
<img src="/img/linuxdo_logo.png" style="width:60px;height:60px" alt="Linux.Do登录"/>
|
|
<div>Linux.do</div>
|
|
</div>
|
|
</div>
|
|
<div class="forget_password">
|
|
<a href="javascript:void(0);" id="forgetPassword" data-type="2">忘记密码?</a>
|
|
<a href="javascript:void(0);" class="pull-right" id="switchBtn" data-type="1">注册</a>
|
|
</div>
|
|
</div>
|
|
<div id="bg" class="gamebg"/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.login {
|
|
position: relative;
|
|
background-image: url("/img/login_bg.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
height: 100vh;
|
|
|
|
.loginBox {
|
|
position: absolute;
|
|
width: 300px;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
backdrop-filter: blur(4px);
|
|
|
|
& > .title {
|
|
font-size: 28px
|
|
}
|
|
|
|
.button {
|
|
background: rgb(245, 189, 16);
|
|
text-align: center;
|
|
letter-spacing: 8px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
opacity: .8
|
|
}
|
|
}
|
|
|
|
.agree_btn {
|
|
width: 16px;
|
|
}
|
|
|
|
& > input {
|
|
height: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|