76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<template>
|
|
<div class="login">
|
|
<div class="panel login-card">
|
|
<h1>爱维宠物医院管理平台</h1>
|
|
<t-form :data="form" @submit="onSubmit">
|
|
<t-form-item label="账号">
|
|
<t-input v-model="form.account" placeholder="用户名/手机号/邮箱" />
|
|
</t-form-item>
|
|
<t-form-item label="密码">
|
|
<t-input v-model="form.password" type="password" placeholder="请输入密码" />
|
|
</t-form-item>
|
|
<t-form-item>
|
|
<t-button theme="primary" type="submit" block>登录</t-button>
|
|
</t-form-item>
|
|
</t-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { MessagePlugin } from 'tdesign-vue-next';
|
|
import { api } from '../api';
|
|
import { useAuthStore } from '../store/auth';
|
|
|
|
const router = useRouter();
|
|
const auth = useAuthStore();
|
|
|
|
const form = reactive({
|
|
account: '',
|
|
password: '',
|
|
});
|
|
|
|
const onSubmit = async () => {
|
|
if (!form.account || !form.password) {
|
|
MessagePlugin.warning('请输入账号与密码');
|
|
return;
|
|
}
|
|
try {
|
|
const res = await api.login(form);
|
|
if (res.code === 0) {
|
|
auth.setAuth(res.data.token, {
|
|
userId: res.data.userId,
|
|
username: res.data.username,
|
|
role: res.data.role,
|
|
});
|
|
router.push('/dashboard');
|
|
} else {
|
|
MessagePlugin.error(res.message || '登录失败');
|
|
}
|
|
} catch {
|
|
MessagePlugin.error('登录失败');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #e2e8f0, #f8fafc);
|
|
}
|
|
|
|
.login-card {
|
|
width: 360px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 16px;
|
|
font-size: 18px;
|
|
}
|
|
</style>
|