84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
|
import { defineComponent, reactive, ref } from 'vue';
|
||
|
|
import { Button, Card, Form, FormItem, Input, message } from 'ant-design-vue';
|
||
|
|
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
||
|
|
import { useRouter } from 'vue-router';
|
||
|
|
import { auth } from '@/hooks/useAuth';
|
||
|
|
import styles from './index.module.less';
|
||
|
|
|
||
|
|
interface LoginForm {
|
||
|
|
username: string;
|
||
|
|
password: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 登录页
|
||
|
|
*/
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'LoginPage',
|
||
|
|
setup() {
|
||
|
|
const router = useRouter();
|
||
|
|
const loading = ref(false);
|
||
|
|
|
||
|
|
const form = reactive<LoginForm>({
|
||
|
|
username: 'admin',
|
||
|
|
password: '123456',
|
||
|
|
});
|
||
|
|
|
||
|
|
const rules = {
|
||
|
|
username: [{ required: true, message: '请输入用户名' }],
|
||
|
|
password: [{ required: true, message: '请输入密码' }],
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSubmit = async () => {
|
||
|
|
if (!form.username || !form.password) {
|
||
|
|
message.warning('请输入用户名和密码');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
loading.value = true;
|
||
|
|
|
||
|
|
// TODO: 替换为真实登录接口
|
||
|
|
// const res = await post<LoginResult>('/login', { ...form });
|
||
|
|
// auth.login(res.token);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
auth.login('mock_token_' + Date.now());
|
||
|
|
message.success('登录成功');
|
||
|
|
loading.value = false;
|
||
|
|
router.push('/dashboard');
|
||
|
|
}, 600);
|
||
|
|
};
|
||
|
|
|
||
|
|
return () => (
|
||
|
|
<div class={styles.container}>
|
||
|
|
<Card class={styles.card} title="CPMS 运营平台">
|
||
|
|
<Form model={form} rules={rules} layout="vertical" onFinish={handleSubmit}>
|
||
|
|
<FormItem name="username">
|
||
|
|
<Input
|
||
|
|
v-model={[form.username, 'value']}
|
||
|
|
placeholder="用户名"
|
||
|
|
size="large"
|
||
|
|
v-slots={{ prefix: () => <UserOutlined /> }}
|
||
|
|
/>
|
||
|
|
</FormItem>
|
||
|
|
<FormItem name="password">
|
||
|
|
<Input
|
||
|
|
v-model={[form.password, 'value']}
|
||
|
|
type="password"
|
||
|
|
placeholder="密码"
|
||
|
|
size="large"
|
||
|
|
v-slots={{ prefix: () => <LockOutlined /> }}
|
||
|
|
/>
|
||
|
|
</FormItem>
|
||
|
|
<FormItem>
|
||
|
|
<Button type="primary" html-type="submit" size="large" block loading={loading.value}>
|
||
|
|
登录
|
||
|
|
</Button>
|
||
|
|
</FormItem>
|
||
|
|
</Form>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|