112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
<!-- src/views/Login.vue -->
|
|
<template>
|
|
<div class="login-container">
|
|
<div class="login-form">
|
|
<h2>用户登录</h2>
|
|
<a-form :model="formState" :rules="rules" @finish="handleLogin">
|
|
<a-form-item name="username">
|
|
<a-input v-model:value="formState.username" placeholder="请输入用户名" size="large">
|
|
<template #prefix>
|
|
<UserOutlined />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item name="password">
|
|
<a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large">
|
|
<template #prefix>
|
|
<LockOutlined />
|
|
</template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
|
|
<a-form-item>
|
|
<a-button type="primary" html-type="submit" size="large" block :loading="loading">
|
|
登录
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { message } from 'ant-design-vue'
|
|
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { http } from '@/utils/axios';
|
|
|
|
interface FormState {
|
|
username: string
|
|
password: string
|
|
}
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
const formState = ref<FormState>({
|
|
username: '',
|
|
password: ''
|
|
})
|
|
|
|
const loading = ref(false)
|
|
|
|
const rules = {
|
|
username: [{ required: true, message: '请输入用户名' }],
|
|
password: [{ required: true, message: '请输入密码' }]
|
|
}
|
|
|
|
const handleLogin = async (values: FormState) => {
|
|
loading.value = true
|
|
const params = { data: values.username, pwd: values.password };
|
|
http.post('/perm/login', params).then(res => {
|
|
console.log(res.data);
|
|
if (res.data.code === '0') {
|
|
message.success('登录成功')
|
|
window.sessionStorage.setItem('token', res.data.data.token);
|
|
console.log(res.data.data.token, 'hahah', window.sessionStorage.getItem('token'));
|
|
router.push('/admin')//跳转到管理端首页
|
|
} else {
|
|
message.error(res.data.message)
|
|
}
|
|
})
|
|
// try {
|
|
// await userStore.login({
|
|
// username: values.username,
|
|
// password: values.password
|
|
// })
|
|
// message.success('登录成功')
|
|
// router.push('/admin')//跳转到管理端首页
|
|
// } catch (error) {
|
|
// message.error('登录失败，请检查用户名和密码')
|
|
// } finally {
|
|
// loading.value = false
|
|
// }
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
background: #f0f2f5;
|
|
}
|
|
|
|
.login-form {
|
|
width: 360px;
|
|
padding: 36px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.login-form h2 {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
color: #1890ff;
|
|
}
|
|
</style> |