Login.vue
2.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<template>
<div class="login-wrap">
<a-card title="外卖管理系统" style="width:400px">
<a-form :model="form" @finish="onSubmit" layout="vertical">
<a-form-item name="role" label="登录身份">
<a-radio-group v-model:value="form.role" button-style="solid">
<a-radio-button value="substation">分站管理员</a-radio-button>
<a-radio-button value="admin">超级管理员</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
<a-input v-model:value="form.account" placeholder="登录账号" size="large">
<template #prefix><user-outlined /></template>
</a-input>
</a-form-item>
<a-form-item name="pass" :rules="[{ required: true, message: '请输入密码' }]">
<a-input-password v-model:value="form.pass" placeholder="密码" size="large">
<template #prefix><lock-outlined /></template>
</a-input-password>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" block size="large" :loading="loading">
登录
</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 { useAuthStore } from '@/stores/auth'
import request from '@/utils/request'
const router = useRouter()
const auth = useAuthStore()
const loading = ref(false)
const form = reactive({ account: '', pass: '', role: 'substation' })
async function onSubmit() {
loading.value = true
try {
const res: any = await request.post('/api/admin/auth/login', form)
auth.setToken(res.data.token)
auth.setUserInfo(res.data)
router.push('/')
} catch {
// 错误已由 request 拦截器处理
} finally {
loading.value = false
}
}
</script>
<style scoped>
.login-wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f0f2f5;
}
</style>