63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
<template>
|
|
<n-modal
|
|
preset="card"
|
|
title="登录"
|
|
style="width: 400px"
|
|
v-model:show="loginModal"
|
|
>
|
|
<n-form>
|
|
<n-form-item label="用户名">
|
|
<n-input v-model:value="name" name="username"></n-input>
|
|
</n-form-item>
|
|
<n-form-item label="密码">
|
|
<n-input
|
|
type="password"
|
|
v-model:value="password"
|
|
name="password"
|
|
@change="submit"
|
|
></n-input>
|
|
</n-form-item>
|
|
<n-alert
|
|
type="error"
|
|
v-if="showMeesage"
|
|
class="message"
|
|
title="登录失败，请检查用户名和密码"
|
|
></n-alert>
|
|
<n-flex>
|
|
<n-button block :loading="loading" @click="submit" type="primary">登录</n-button>
|
|
</n-flex>
|
|
</n-form>
|
|
</n-modal>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue"
|
|
import { Account } from "../api"
|
|
import { loginModal } from "../store/modal"
|
|
import { user } from "../store/user"
|
|
|
|
const name = ref("")
|
|
const password = ref("")
|
|
const loading = ref(false)
|
|
const showMeesage = ref(false)
|
|
|
|
async function submit() {
|
|
loading.value = true
|
|
try {
|
|
const data = await Account.login(name.value, password.value)
|
|
user.username = data.username
|
|
user.role = data.role
|
|
user.loaded = true
|
|
loginModal.value = false
|
|
loading.value = false
|
|
} catch (err) {
|
|
showMeesage.value = true
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.message {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|