43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
|
const { createApp, ref, reactive } = Vue;
|
||
|
|
|
||
|
|
createApp({
|
||
|
|
setup() {
|
||
|
|
const form = reactive({
|
||
|
|
username: '',
|
||
|
|
password: '',
|
||
|
|
rememberMe: false
|
||
|
|
});
|
||
|
|
|
||
|
|
const loading = ref(false);
|
||
|
|
const errorMessage = ref('');
|
||
|
|
|
||
|
|
const handleLogin = async () => {
|
||
|
|
loading.value = true;
|
||
|
|
errorMessage.value = '';
|
||
|
|
|
||
|
|
try {
|
||
|
|
// 模拟登录请求
|
||
|
|
await new Promise(resolve => setTimeout(resolve, 1500));
|
||
|
|
|
||
|
|
if (form.username === 'admin' && form.password === '123456') {
|
||
|
|
alert('登录成功！');
|
||
|
|
// 这里可以跳转到首页
|
||
|
|
console.log('登录成功', form);
|
||
|
|
} else {
|
||
|
|
errorMessage.value = '用户名或密码错误';
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
errorMessage.value = '登录失败，请稍后重试';
|
||
|
|
} finally {
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return {
|
||
|
|
form,
|
||
|
|
loading,
|
||
|
|
errorMessage,
|
||
|
|
handleLogin
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}).mount('#app');
|