139 lines
4.1 KiB
Plaintext
139 lines
4.1 KiB
Plaintext
<template>
|
|
<a-form ref="formRef" size="large" :model="formInline" :rules="rules">
|
|
<a-form-item name="username">
|
|
<a-input v-model:value="formInline.username" size="large" placeholder="请输入用户名">
|
|
<template #prefix>
|
|
<UserOutlined type="user" style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="password">
|
|
<a-input-password
|
|
v-model:value="formInline.password"
|
|
size="large"
|
|
type="password"
|
|
showPasswordOn="click"
|
|
placeholder="请输入密码"
|
|
@keyup.enter="handleSubmit"
|
|
>
|
|
<template #prefix>
|
|
<LockOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
<div class="mb-6 default-color">
|
|
<div class="flex justify-between">
|
|
<div class="flex-initial">
|
|
<a-checkbox v-model:checked="autoLogin">自动登录 </a-checkbox>
|
|
</div>
|
|
<div class="flex-initial order-last">
|
|
<a href="javascript:">忘记密码</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a-form-item :show-label="false">
|
|
<a-button type="primary" @click="handleSubmit" size="large" :loading="loading" block>
|
|
登录
|
|
</a-button>
|
|
</a-form-item>
|
|
<div class="mb-4 default-color">
|
|
<div class="flex view-account-other">
|
|
<div class="flex-initial">
|
|
<span>其它登录方式</span>
|
|
</div>
|
|
<div class="flex-initial mx-2">
|
|
<a href="javascript:">
|
|
<GithubOutlined style="color: #2d8cf0; font-size: 24px" />
|
|
</a>
|
|
</div>
|
|
<div class="flex-initial mx-2">
|
|
<a href="javascript:">
|
|
<AlipayCircleOutlined style="color: #2d8cf0; font-size: 24px" />
|
|
</a>
|
|
</div>
|
|
<div class="flex-initial" style="margin-left: auto">
|
|
<a href="javascript:" @click="goRegister">注册账号</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useUserStore } from '@/store/modules/user';
|
|
import { message } from 'ant-design-vue';
|
|
import { ResultEnum } from '@/enums/httpEnum';
|
|
import {
|
|
UserOutlined,
|
|
LockOutlined,
|
|
GithubOutlined,
|
|
AlipayCircleOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
import { PageEnum } from '@/enums/pageEnum';
|
|
|
|
interface FormState {
|
|
username: string;
|
|
password: string;
|
|
}
|
|
|
|
const formRef = ref();
|
|
const loading = ref(false);
|
|
const autoLogin = ref(true);
|
|
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
|
|
|
|
const formInline = reactive({
|
|
username: 'admin',
|
|
password: '123456',
|
|
});
|
|
|
|
const rules = {
|
|
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
|
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
|
};
|
|
const emit = defineEmits(['goRegister']);
|
|
const userStore = useUserStore();
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
function handleSubmit() {
|
|
formRef.value
|
|
.validate()
|
|
.then(async () => {
|
|
const { username, password } = formInline;
|
|
message.loading('登录中...');
|
|
loading.value = true;
|
|
|
|
const params: FormState = {
|
|
username,
|
|
password,
|
|
};
|
|
try {
|
|
const { code, message: msg } = await userStore.login(params);
|
|
message.destroy();
|
|
if (code == ResultEnum.SUCCESS) {
|
|
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
|
|
message.success('登录成功，即将进入系统');
|
|
if (route.name === LOGIN_NAME) {
|
|
router.replace('/');
|
|
} else router.replace(toPath);
|
|
} else {
|
|
message.info(msg || '登录失败');
|
|
}
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log('error', error);
|
|
message.error('请填写完整信息');
|
|
});
|
|
}
|
|
|
|
function goRegister() {
|
|
emit('goRegister');
|
|
}
|
|
</script>
|