112 lines
2.8 KiB
Vue
112 lines
2.8 KiB
Vue
<template>
|
||
<a-form
|
||
:model="formState"
|
||
name="normal_login"
|
||
class="login-form"
|
||
@finish="onFinish"
|
||
@finish-failed="onFinishFailed"
|
||
ref="formRef"
|
||
>
|
||
<a-form-item
|
||
label="账号"
|
||
name="username"
|
||
:rules="[{ required: true, message: '请输入用户名！' }]"
|
||
>
|
||
<a-input v-model:value="formState.username">
|
||
<template #prefix>
|
||
<UserOutlined class="site-form-item-icon" />
|
||
</template>
|
||
</a-input>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="密码"
|
||
name="password"
|
||
:rules="[{ required: true, message: '请输入密码！' }]"
|
||
>
|
||
<a-input-password v-model:value="formState.password">
|
||
<template #prefix>
|
||
<LockOutlined class="site-form-item-icon" />
|
||
</template>
|
||
</a-input-password>
|
||
</a-form-item>
|
||
|
||
<!-- 可选：记住我 -->
|
||
<!--
|
||
<a-form-item name="remember" no-style>
|
||
<a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
|
||
</a-form-item>
|
||
-->
|
||
|
||
<a-form-item>
|
||
<a-button type="primary" html-type="submit" block class="login-form-button">
|
||
登 录
|
||
</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive, ref } from 'vue';
|
||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
||
import { useRouter } from 'vue-router';
|
||
import apis from '../../../apis/login.js';
|
||
// 如果需要 md5，请确保已安装并导入，例如：import md5 from 'md5';
|
||
// import md5 from 'md5'; // 按需使用
|
||
|
||
const router = useRouter();
|
||
const formRef = ref();
|
||
|
||
interface FormState {
|
||
username: string;
|
||
password: string;
|
||
remember: boolean;
|
||
}
|
||
|
||
const formState = reactive<FormState>({
|
||
username: '',
|
||
password: '',
|
||
remember: true,
|
||
});
|
||
|
||
// 表单验证通过后自动调用
|
||
const onFinish = async (values: FormState) => {
|
||
// 可选：对密码进行加密（根据后端要求）
|
||
// const loginData = { ...values, password: md5(values.password) };
|
||
|
||
try {
|
||
const { success } = await apis.login(values); // 假设 apis.login 返回 { success: boolean }
|
||
|
||
if (success) {
|
||
// 登录成功
|
||
router.push('/platform');
|
||
} else {
|
||
// 后端返回登录失败（如密码错误）
|
||
formRef.value?.setFields([
|
||
{ name: 'password', errors: ['用户名或密码错误'] }
|
||
]);
|
||
}
|
||
} catch (error) {
|
||
console.error('登录请求失败:', error);
|
||
// 网络错误或服务器异常
|
||
formRef.value?.setFields([
|
||
{ name: 'password', errors: ['网络错误，请稍后重试'] }
|
||
]);
|
||
}
|
||
};
|
||
|
||
const onFinishFailed = (errorInfo: any) => {
|
||
console.log('表单验证失败:', errorInfo);
|
||
// Ant Design Vue 会自动显示校验错误，无需额外处理
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.login-form {
|
||
max-width: 300px;
|
||
}
|
||
|
||
.login-form-button {
|
||
width: 100%;
|
||
}
|
||
</style> |