59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue';
|
|
import { useAuthStore } from '@/store/modules/auth';
|
|
|
|
defineOptions({
|
|
name: 'PwdLogin'
|
|
});
|
|
|
|
const authStore = useAuthStore();
|
|
|
|
interface FormModel {
|
|
username: string;
|
|
password: string;
|
|
}
|
|
|
|
const model: FormModel = reactive({
|
|
username: 'admin',
|
|
password: 'Admin@123'
|
|
});
|
|
const btnLoading = ref(false);
|
|
|
|
async function handleSubmit() {
|
|
if(!model.username){
|
|
return window.$message?.warning('用户名不能为空')
|
|
}
|
|
if(!model.password){
|
|
return window.$message?.warning('密码不能为空')
|
|
}
|
|
btnLoading.value = true;
|
|
try {
|
|
await authStore.login(model.username, model.password);
|
|
} finally {
|
|
btnLoading.value = false;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<NForm ref="formRef" :model="model" size="large" :show-label="false" @keyup.enter="handleSubmit">
|
|
<NFormItem>
|
|
<NInput v-model:value="model.username" placeholder="请输入用户名" />
|
|
</NFormItem>
|
|
<NFormItem>
|
|
<NInput
|
|
v-model:value="model.password"
|
|
type="password"
|
|
show-password-on="click"
|
|
placeholder="请输入密码"
|
|
/>
|
|
</NFormItem>
|
|
<NSpace vertical :size="24">
|
|
<NButton type="primary" size="large" round block :loading="btnLoading" @click="handleSubmit">
|
|
登录
|
|
</NButton>
|
|
</NSpace>
|
|
</NForm>
|
|
</template>
|