113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
Vue
<template>
|
|
<div class="login-container">
|
|
<div class="login-box">
|
|
<h2 class="login-title">泊云经销商管理系统</h2>
|
|
<el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-form">
|
|
<el-form-item prop="username">
|
|
<el-input
|
|
v-model="loginForm.username"
|
|
placeholder="请输入用户名"
|
|
prefix-icon="User"
|
|
size="large"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
v-model="loginForm.password"
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
prefix-icon="Lock"
|
|
size="large"
|
|
@keyup.enter="handleLogin"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="large" :loading="loading" @click="handleLogin" class="login-btn">
|
|
登录
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { hashPassword } from '@/utils/crypto'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
const loginFormRef = ref<FormInstance>()
|
|
const loading = ref(false)
|
|
|
|
const loginForm = reactive({
|
|
username: '',
|
|
password: ''
|
|
})
|
|
|
|
const rules: FormRules = {
|
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
|
}
|
|
|
|
const handleLogin = async () => {
|
|
if (!loginFormRef.value) return
|
|
await loginFormRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
loading.value = true
|
|
try {
|
|
// 对密码进行 SHA-256 哈希后再传输
|
|
const hashedPassword = await hashPassword(loginForm.password)
|
|
await userStore.login({
|
|
username: loginForm.username,
|
|
password: hashedPassword
|
|
})
|
|
ElMessage.success('登录成功')
|
|
router.push('/')
|
|
} catch (error) {
|
|
console.error('登录失败', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: linear-gradient(135deg, #FFFFFF 0%, #409EFF 100%);
|
|
}
|
|
|
|
.login-box {
|
|
width: 400px;
|
|
padding: 40px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.login-title {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
color: #333;
|
|
}
|
|
|
|
.login-form {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
}
|
|
</style>
|