<template>
|
<div class="login-container min-h-screen flex items-center justify-center" v-loading="loading">
|
<div class="login-background"></div>
|
<div class="login-content max-w-md w-full relative z-10">
|
<!-- 登录表单 -->
|
<div class="bg-white py-8 px-10 shadow-2xl rounded-lg">
|
<!-- Logo -->
|
<div class="flex items-center mb-3 justify-center">
|
<img src="@/assets/logo/header_logo.png" alt="Logo" class="w-[66%]" />
|
<!-- <span class="ml-2 text-xl">工业APP汇聚平台</span> -->
|
</div>
|
|
<el-form ref="formRef" :model="loginForm" :rules="rules" class="space-y-4">
|
<el-form-item prop="username">
|
<el-input v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="User" size="large" class="custom-input" />
|
</el-form-item>
|
|
<el-form-item prop="password">
|
<el-input
|
v-model="loginForm.password"
|
type="password"
|
placeholder="请输入密码"
|
:prefix-icon="Lock"
|
size="large"
|
class="custom-input"
|
/>
|
</el-form-item>
|
|
<!-- <el-form-item prop="captcha" class="flex space-x-4 mb-2">
|
<el-input
|
v-model="loginForm.captcha"
|
placeholder="请输入图片验证码"
|
:prefix-icon="Key"
|
size="large"
|
class="custom-input flex-1 mr-2"
|
/>
|
<img src="@/assets/login/captcha.png" alt="验证码" class="h-[40px] w-[100px] cursor-pointer" @click="refreshCaptcha" />
|
</el-form-item> -->
|
|
<div class="flex items-center justify-between mb-4">
|
<el-checkbox v-model="loginForm.remember">记住账号</el-checkbox>
|
<span class="text-primary cursor-pointer">忘记密码</span>
|
</div>
|
|
<el-button type="primary" class="w-full" size="large" @click="handleLogin">登 录</el-button>
|
|
<div class="mt-4 text-center space-x-2">
|
<!-- <router-link to="/register" class="text-[#40a9ff]">立即注册</router-link>
|
<span class="text-gray-300">·</span> -->
|
<router-link to="/" class="text-[#40a9ff]">返回首页</router-link>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Key, Lock, User } from '@element-plus/icons-vue';
|
import { ElMessage } from 'element-plus';
|
import { reactive, ref } from 'vue';
|
import { useLogin } from '@/stores/useLogin';
|
import { useRoute } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
import { login } from '@/api/login';
|
const router = useRouter();
|
const route = useRoute();
|
const formRef = ref();
|
const loginStore = useLogin();
|
const loginForm = reactive({
|
username: '',
|
password: '',
|
captcha: '',
|
remember: false,
|
});
|
|
const rules = {
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
// captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
|
};
|
const loading = ref(false);
|
|
const logingTipsEmun= {
|
"-1": "账户不存在",
|
"-2": "密码错误 ",
|
"-3": "账号封停",
|
"-4": "账号未绑定",
|
"1": "正常",
|
}
|
|
const handleLogin = () => {
|
formRef.value.validate((valid: boolean) => {
|
if (valid) {
|
submitLogin();
|
} else {
|
return false;
|
}
|
});
|
};
|
const submitLogin = () => {
|
let form_data = {
|
UserType: 0,
|
LoginName:'demo',
|
PassWord: '123456',
|
};
|
loading.value = true;
|
login(form_data)
|
.then((res) => {
|
loading.value = false;
|
let data = res.data.Data;
|
if (res.data.Code !== 0) {
|
ElMessage.error(res.data.Message);
|
return;
|
}
|
if(data.Status !== 1){
|
ElMessage.error(logingTipsEmun[data.Status]);
|
return;
|
}
|
let { redirectPath } = route.query;
|
let redirect = '/';
|
if (redirectPath != null) {
|
redirect = redirectPath;
|
}
|
//存储登录成功后的用户信息
|
loginStore.init(data.User);
|
ElMessage.success('登录成功');
|
router.replace(redirect);
|
})
|
.catch((err) => {
|
loading.value = false;
|
ElMessage.error(err);
|
});
|
};
|
|
const refreshCaptcha = () => {
|
// 刷新验证码的逻辑
|
};
|
</script>
|
|
<style scoped>
|
.login-container {
|
position: relative;
|
overflow: hidden;
|
background: linear-gradient(135deg, #a6d5e9, #96d3c3);
|
}
|
|
.login-background {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
/* background-image: url('@/assets/images/login-bg.png'); */
|
background-size: cover;
|
background-position: center;
|
opacity: 0.1;
|
}
|
|
.login-content {
|
width: 400px;
|
}
|
|
:deep(.custom-input .el-input__wrapper) {
|
background-color: #fff;
|
border: 1px solid #dcdfe6;
|
box-shadow: none;
|
}
|
|
:deep(.custom-input .el-input__wrapper:hover) {
|
border-color: #40a9ff;
|
}
|
|
:deep(.custom-input .el-input__wrapper.is-focus) {
|
border-color: #40a9ff;
|
box-shadow: 0 0 0 2px rgba(64, 169, 255, 0.2);
|
}
|
|
:deep(.el-button--primary) {
|
background-color: #40a9ff;
|
border-color: #40a9ff;
|
}
|
|
:deep(.el-button--primary:hover) {
|
background-color: #69b9ff;
|
border-color: #69b9ff;
|
}
|
|
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
background-color: #40a9ff;
|
border-color: #40a9ff;
|
}
|
|
:deep(.el-form-item) {
|
margin-bottom: 20px;
|
}
|
</style>
|
