129 lines
4.0 KiB
Vue
129 lines
4.0 KiB
Vue
<template>
|
||
<div class="login-wrapper">
|
||
<a-card class="login-card" :bordered="false">
|
||
<div class="login-header">
|
||
<img class="logo" src="@/assets/logo.png" alt="logo" />
|
||
<h1>cApi管理系统</h1>
|
||
<p>安全、高效的一站式管理解决方案，为您的业务保驾护航</p>
|
||
</div>
|
||
|
||
<a-form ref="formRef" :model="form" :rules="rules" size="large" @finish="handleSubmit">
|
||
<a-form-item name="account">
|
||
<a-input v-model:value="form.account" placeholder="请输入用户名" allow-clear>
|
||
<template #prefix><UserOutlined /></template>
|
||
</a-input>
|
||
</a-form-item>
|
||
|
||
<a-form-item name="password">
|
||
<a-input-password v-model:value="form.password" placeholder="请输入密码" allow-clear>
|
||
<template #prefix><LockOutlined /></template>
|
||
</a-input-password>
|
||
</a-form-item>
|
||
|
||
<a-form-item>
|
||
<a-button type="primary" html-type="submit" :loading="loading" block>
|
||
登录
|
||
</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { reactive, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { message } from 'ant-design-vue'
|
||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
||
|
||
import type { LoginParams, LoginResult } from '@/api/auth'
|
||
import { apiLogin } from '@/api/auth'
|
||
|
||
import { useAuthStore } from '@/store/index' // 引入状态管理
|
||
|
||
|
||
const router = useRouter()
|
||
const formRef = ref()
|
||
const loading = ref(false)
|
||
|
||
const form = reactive<LoginParams>({ account: '', password: '' })
|
||
|
||
const rules = {
|
||
account: [{ required: true, message: '请输入用户名' }],
|
||
password: [{ required: true, message: '请输入密码' }]
|
||
}
|
||
|
||
const handleSubmit = async () => {
|
||
// 防止重复提交
|
||
if (loading.value) return;
|
||
|
||
loading.value = true;
|
||
const authStore = useAuthStore(); // 提前获取store实例，避免多次调用
|
||
try {
|
||
// 更清晰的变量命名，API返回通常包含code、data、msg等字段
|
||
const response: LoginResult = await apiLogin(form);
|
||
// 检查请求是否成功（通常200为成功状态码）
|
||
if (response.code === 200 && response.data) {
|
||
const token = response.data.token;
|
||
localStorage.setItem('token', token );
|
||
localStorage.setItem('userInfo', response.data);
|
||
authStore.setAuthInfo(token, response.data);
|
||
message.success(response.msg || '登录成功');
|
||
// 延迟跳转提升用户体验
|
||
setTimeout(() => {
|
||
router.replace('/index/console');
|
||
}, 800);
|
||
return; // 成功后终止函数，避免执行后续错误提示
|
||
}
|
||
// 处理业务错误（如账号密码错误）
|
||
message.error(response.msg || '登录失败，请检查账号密码');
|
||
} catch (error) {
|
||
// 处理网络错误或异常情况
|
||
console.error('登录请求异常:', error);
|
||
message.error('网络异常，请检查网络连接后重试');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.login-wrapper {
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-right: 200px;
|
||
|
||
/* 渐变与背景图片融合设置 */
|
||
background:
|
||
linear-gradient(120deg, rgba(79, 172, 254, 0.7) 0%, rgba(0, 242, 254, 0.7) 50%, rgba(122, 90, 248, 0.7) 100%),
|
||
url('@/assets/imges/backImg.jpg') center center no-repeat;
|
||
|
||
/* 背景融合模式 - 使渐变与图片颜色叠加融合 */
|
||
background-blend-mode: overlay;
|
||
/* 确保背景完全覆盖容器 */
|
||
background-size: cover;
|
||
}
|
||
.login-text{
|
||
text-align: center;
|
||
color: white;
|
||
width: 800px;
|
||
padding: 32px 48px;
|
||
border-radius: 8px;
|
||
}
|
||
.login-card {
|
||
width: 520px;
|
||
padding: 32px 48px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||
}
|
||
.login-header {
|
||
text-align: center;
|
||
margin-bottom: 32px;
|
||
.logo { width: 64px; height: 64px; margin-bottom: 12px; }
|
||
h1 { font-size: 24px; font-weight: 600; margin: 0; }
|
||
p { font-size: 14px; color: #8c8c8c; margin: 8px 0 0; }
|
||
}
|
||
|
||
</style> |