136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<template>
|
||
<a-form
|
||
ref="formRef"
|
||
:model="form"
|
||
:rules="rules"
|
||
:label-col-style="{ display: 'none' }"
|
||
:wrapper-col-style="{ flex: 1 }"
|
||
size="large"
|
||
@submit="handleLogin"
|
||
>
|
||
<a-form-item field="cardNumber" hide-label>
|
||
<a-input v-model="form.cardNumber" placeholder="请刷卡" allow-clear @keyup.enter="handleLogin" />
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-space direction="vertical" fill class="w-full">
|
||
<a-button type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
|
||
</a-space>
|
||
</a-form-item>
|
||
</a-form>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||
import { type FormInstance, Message } from '@arco-design/web-vue'
|
||
import { useTabsStore, useUserStore } from '@/stores'
|
||
|
||
const formRef = ref<FormInstance>()
|
||
const form = reactive({
|
||
cardNumber: '',
|
||
})
|
||
|
||
const rules: FormInstance['rules'] = {
|
||
cardNumber: [
|
||
{ required: true, message: '请刷卡或输入卡号' },
|
||
],
|
||
}
|
||
|
||
const userStore = useUserStore()
|
||
const tabsStore = useTabsStore()
|
||
const router = useRouter()
|
||
const loading = ref(false)
|
||
|
||
// 登录
|
||
const handleLogin = async () => {
|
||
// 检查用户是否已经登录
|
||
if (userStore.token) {
|
||
return
|
||
}
|
||
|
||
const isInvalid = await formRef.value?.validate()
|
||
if (isInvalid) return
|
||
try {
|
||
loading.value = true
|
||
// 调用后端接口校验卡号
|
||
await userStore.cardLogin(form)
|
||
|
||
// 登录成功后移除事件监听器
|
||
if (keyDownListener) {
|
||
document.removeEventListener('keydown', keyDownListener)
|
||
keyDownListener = null
|
||
}
|
||
|
||
tabsStore.reset()
|
||
const { redirect, ...othersQuery } = router.currentRoute.value.query
|
||
await router.push({
|
||
path: (redirect as string) || '/',
|
||
query: {
|
||
...othersQuery,
|
||
},
|
||
})
|
||
Message.success('欢迎使用')
|
||
} catch (error) {
|
||
// 登录失败处理
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 键盘事件监听器引用
|
||
let keyDownListener: ((e: KeyboardEvent) => void) | null = null
|
||
|
||
// 监听键盘输入，实现自动识别卡号
|
||
onMounted(() => {
|
||
// 只监听Enter键，用于自动登录
|
||
keyDownListener = (e) => {
|
||
// 刷卡器通常会快速输入卡号并以Enter键结束
|
||
if (e.key === 'Enter') {
|
||
// 遇到Enter键，尝试登录
|
||
if (form.cardNumber.trim()) {
|
||
handleLogin()
|
||
}
|
||
}
|
||
}
|
||
|
||
document.addEventListener('keydown', keyDownListener)
|
||
})
|
||
|
||
// 组件卸载时移除事件监听器
|
||
onUnmounted(() => {
|
||
if (keyDownListener) {
|
||
document.removeEventListener('keydown', keyDownListener)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.arco-input-wrapper,
|
||
:deep(.arco-select-view-single) {
|
||
height: 40px;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.arco-input-wrapper.arco-input-error {
|
||
background-color: rgb(var(--danger-1));
|
||
border-color: rgb(var(--danger-3));
|
||
}
|
||
.arco-input-wrapper.arco-input-error:hover {
|
||
background-color: rgb(var(--danger-1));
|
||
border-color: rgb(var(--danger-6));
|
||
}
|
||
|
||
.arco-input-wrapper :deep(.arco-input) {
|
||
font-size: 13px;
|
||
color: var(--color-text-1);
|
||
}
|
||
.arco-input-wrapper:hover {
|
||
border-color: rgb(var(--arcoblue-6));
|
||
}
|
||
|
||
|
||
|
||
.btn {
|
||
height: 40px;
|
||
}
|
||
</style> |