|
|
@ -1,68 +1,22 @@ |
|
|
<template> |
|
|
<template> |
|
|
<PlateInput :list="plate" :search-method="searchMethod" :space-length="inputLength" @confirm="onConfirm" @handle-energy="handleEnergy"> |
|
|
<PlateInput :list="plate" :search-method="searchMethod" :space-length="inputLength" @confirm="onConfirm" @handle-energy="handleEnergy"> |
|
|
<Loading v-if="loading" class="find-car-loading" fill="#fff" :size="20" /> |
|
|
|
|
|
|
|
|
<Loading v-if="loading" fill="#fff" :size="20" /> |
|
|
</PlateInput> |
|
|
</PlateInput> |
|
|
<PlateKeyboard @del="del" @handle-keyboard="handleKeyboard" /> |
|
|
<PlateKeyboard @del="del" @handle-keyboard="handleKeyboard" /> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { ref, computed } from 'vue' |
|
|
|
|
|
import { useFindCar } from '@/composables/useFindCar' |
|
|
import { useFindCar } from '@/composables/useFindCar' |
|
|
import { isZhWord, isUppercaseWord } from '@/utils/utils' |
|
|
|
|
|
|
|
|
import { useParkingKeyboard } from '@/composables/useParkingKeyboard' |
|
|
import PlateInput from '@/components/PlateInput/PlateInput.vue' |
|
|
import PlateInput from '@/components/PlateInput/PlateInput.vue' |
|
|
import PlateKeyboard from '@/components/PlateKeyboard/PlateKeyboard.vue' |
|
|
import PlateKeyboard from '@/components/PlateKeyboard/PlateKeyboard.vue' |
|
|
import Loading from '@/base/Loading/Loading.vue' |
|
|
import Loading from '@/base/Loading/Loading.vue' |
|
|
|
|
|
|
|
|
const NOT_ENERGY_PLATE = 7 //非能源车牌长度 |
|
|
|
|
|
const ENERGY_PLATE = 8 //能源车牌长度 |
|
|
|
|
|
const SPACE_MAX_LENGTH = 6 //车位最大允许长度 |
|
|
|
|
|
const LICENSE = ['苏', 'A'] //默认车牌前缀 |
|
|
|
|
|
|
|
|
|
|
|
const plate = ref(LICENSE.slice()) |
|
|
|
|
|
const plateToString = computed(() => plate.value.join('')) |
|
|
|
|
|
const searchMethod = ref<'车牌' | '车位'>('车牌') |
|
|
|
|
|
const inputLength = computed(() => (searchMethod.value === '车牌' ? ENERGY_PLATE : SPACE_MAX_LENGTH)) |
|
|
|
|
|
const isEnergy = ref(false) |
|
|
|
|
|
function handleEnergy(energy: boolean) { |
|
|
|
|
|
isEnergy.value = energy |
|
|
|
|
|
if (!energy && plate.value.length === ENERGY_PLATE) { |
|
|
|
|
|
plate.value.pop() |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
function handleKeyboard(value: string) { |
|
|
|
|
|
if (searchMethod.value === '车牌') { |
|
|
|
|
|
if (plate.value.length === 1 && isZhWord(value)) { |
|
|
|
|
|
plate.value[0] = value |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
if ( |
|
|
|
|
|
(!isEnergy.value && plate.value.length >= NOT_ENERGY_PLATE) || |
|
|
|
|
|
(isEnergy.value && plate.value.length >= ENERGY_PLATE) || |
|
|
|
|
|
(plate.value.length === 0 && !isZhWord(value)) || |
|
|
|
|
|
(plate.value.length === 1 && !isUppercaseWord(value)) || |
|
|
|
|
|
(plate.value.length >= 2 && plate.value.length < 6 && isZhWord(value)) |
|
|
|
|
|
) { |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
} else if (plate.value.length >= SPACE_MAX_LENGTH) { |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
plate.value.push(value) |
|
|
|
|
|
} |
|
|
|
|
|
function del() { |
|
|
|
|
|
plate.value.pop() |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, searchMethod, LICENSE } = useParkingKeyboard() |
|
|
const { confirm, loading, showCarDetail, result } = useFindCar() |
|
|
const { confirm, loading, showCarDetail, result } = useFindCar() |
|
|
|
|
|
|
|
|
function onConfirm() { |
|
|
function onConfirm() { |
|
|
plate.value = LICENSE |
|
|
plate.value = LICENSE |
|
|
confirm(plateToString.value) |
|
|
confirm(plateToString.value) |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
.find-car-loading { |
|
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
|