feat: 🚀 停车优化

src/components/CarInfo/CarInfo.vue

@@ -2,19 +2,19 @@
   <div class="car-info-wrapper">
     <div class="masker" @click="close"></div>
     <div class="car-content">
-      <img src="" class="car-img" alt="" />
+      <img :src="carInfo.carImage" class="car-img" alt="" />
       <div class="car">
         <div class="car-group mr120">
           <span class="tip">车牌号</span>
-          <span class="text">辽A88888</span>
+          <span class="text">{{ carInfo.carCode }}</span>
         </div>
         <div class="car-group mr120">
           <span class="tip">车位号</span>
-          <span class="text">E-666</span>
+          <span class="text">{{ carInfo.spaceNo }}</span>
         </div>
         <div class="car-group">
           <span class="tip">停车时长</span>
-          <span class="text">1小时</span>
+          <span class="text">{{ carInfo.parkingTime }}</span>
         </div>
       </div>
       <div class="go" @click="go">
@@ -39,19 +39,40 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
+import Message from '@/base/Message/Message'
+import { useRootStore } from '@/store/root'
+import { useRouter } from 'vue-router'
+const store = useRootStore()
+const router = useRouter()
+const props = defineProps({
   carInfo: {
     type: Object,
     default: () => ({})
   }
 })
 
-const emits = defineEmits(['close', 'go'])
+const emits = defineEmits(['close'])
 function close() {
   emits('close')
 }
 function go() {
-  emits('go')
+  const info = window.Map_QM.pathPark({ shopNum: props.carInfo.spaceNo })
+
+  if (info?.node?.length) {
+    const floor: any = store.buildingList[0].floorList.find(item => item.floorOrder === info.floor)?.floor
+    const shop = {
+      shopCode: '',
+      shopName: props.carInfo.spaceNo,
+      floorOrder: info.floor,
+      floor,
+      logoUrl: props.carInfo.carImage,
+      yaxis: info.node
+    }
+    store.SET_SHOP(shop)
+    router.push('/nav')
+  } else {
+    Message({ text: `暂未查到相关信息`, type: 'success' })
+  }
 }
 </script>
 

src/components/PlateInput/PlateInput.vue

@@ -17,7 +17,15 @@
         </transition>
       </div>
     </TransitionGroup>
-    <div class="btn disabled" @click="confirm">
+    <div
+      class="btn"
+      :class="
+        ((searchMethod === '车牌' && ((isEnergy && list.length === 8) || (!isEnergy && list.length === 7))) ||
+          (searchMethod === '车位' && list.length === 6)) &&
+        'ac'
+      "
+      @click="confirm"
+    >
       <slot></slot>
       <span>查找车辆</span>
     </div>
@@ -51,7 +59,12 @@ function handleEnergy() {
   })
 }
 function confirm() {
-  emits('confirm')
+  if (
+    (props.searchMethod === '车牌' && ((isEnergy.value && props.list.length === 8) || (!isEnergy.value && props.list.length === 7))) ||
+    (props.searchMethod === '车位' && props.list.length === 6)
+  ) {
+    emits('confirm')
+  }
 }
 
 onMounted(() => {

src/composables/useFindCar.ts

@@ -2,35 +2,69 @@ import { ref } from 'vue'
 import { getFindCar } from '@/http/api/parking'
 import { HTTP_CODE } from '@/enums'
 import { isLicensePlate } from '@/utils/utils'
+import { useRootStore } from '@/store/root'
+import { useRouter } from 'vue-router'
 import Message from '@/base/Message/Message'
 
 export const useFindCar = () => {
   const showCarDetail = ref(false)
   const loading = ref(false)
   const result = ref<CarInfo>()
-  async function confirm(plate: string) {
-    if (!isLicensePlate(plate)) {
-      Message({ text: '车牌错误,请重新输入', type: 'success' })
-      return
-    }
-    if (loading.value) {
-      return
-    }
-    try {
-      loading.value = true
-      const { code, msg, data } = await getFindCar(plate)
-      if (code === HTTP_CODE.ERR_OK) {
-        result.value = data
-        showCarDetail.value = true
+  const store = useRootStore()
+  const router = useRouter()
+  async function confirm(plate: string, type: number) {
+    if (!type) {
+      if (!isLicensePlate(plate)) {
+        Message({ text: '车牌错误,请重新输入', type: 'success' })
+        return
+      }
+      if (loading.value) {
+        return
+      }
+      try {
+        loading.value = true
+        const { code, msg, data } = await getFindCar(plate)
+        if (code === HTTP_CODE.ERR_OK) {
+          result.value = { ...data, carCode: plate, parkingTime: toHoursAndMinutes(Number(data.parkingTime)) }
+          showCarDetail.value = true
+        } else {
+          Message({ text: msg, type: 'success' })
+        }
+      } catch (error) {
+        Message({ text: error as string, type: 'success' })
+      } finally {
+        loading.value = false
+      }
+    } else {
+      if (!plate.length) {
+        Message({ type: 'success', text: '请输入正确的车位号' })
+        return
+      }
+      const info = window.Map_QM.pathPark({ shopNum: plate })
+
+      if (info?.node?.length) {
+        const floor: any = store.buildingList[0].floorList.find(item => item.floorOrder === info.floor)?.floor
+        const shop = {
+          shopCode: '',
+          shopName: plate,
+          floorOrder: info.floor,
+          floor,
+          logoUrl: '/static/img/tcjf.png',
+          yaxis: info.node
+        }
+        store.SET_SHOP(shop)
+        router.push('/nav')
       } else {
-        Message({ text: msg, type: 'success' })
+        Message({ text: `暂未查到相关信息`, type: 'success' })
       }
-    } catch (error) {
-      Message({ text: error as string, type: 'success' })
-    } finally {
-      loading.value = false
     }
   }
 
+  // 格式化停车时间
+  function toHoursAndMinutes(totalMinutes: number) {
+    const hours = Math.floor(totalMinutes / 60)
+    const minutes = totalMinutes % 60
+    return `${hours > 0 ? `${hours}小时` : ''}${minutes > 0 ? ` ${minutes}分钟` : ''}`
+  }
   return { loading, result, showCarDetail, confirm }
 }

src/composables/useParkingKeyboard.ts

@@ -7,7 +7,7 @@ export const useParkingKeyboard = () => {
   const NOT_ENERGY_PLATE = 7 //非能源车牌长度
   const ENERGY_PLATE = 8 //能源车牌长度
   const SPACE_MAX_LENGTH = 4 //车位最大允许长度
-  const LICENSE = ['苏', 'A'] //默认车牌前缀
+  const LICENSE = ['辽', 'A'] //默认车牌前缀
 
   const plate = ref(LICENSE.slice())
   const plateToString = computed(() => plate.value.join(''))

src/types/car.d.ts

@@ -6,6 +6,6 @@ declare interface CarInfo {
   cost: number //费用
   enterTime: string //入场时间
   floor: string //楼层
-  parkingTime: number // 停车时长
-  placeCode: string //车位号
+  parkingTime: string // 停车时长
+  spaceNo: string //车位号
 }

src/types/map.d.ts

@@ -288,7 +288,7 @@ export declare global {
        */
       pathPark(obj: { shopNum: string }): {
         shopNum: string
-        node: string | number
+        node: string
         floor: number
         xaxis: number | string
         yaxis: number | string

src/views/Parking/Parking.vue

@@ -31,7 +31,7 @@
     </div>
     <Traffic v-else />
   </div>
-  <CarInfo v-if="showCarDetail" @close="showCarDetail = false" @go="onConfirm" />
+  <CarInfo v-if="showCarDetail" :car-info="result" @close="showCarDetail = false" />
 </template>
 
 <script setup lang="ts">
@@ -79,7 +79,7 @@ const { confirm, loading, showCarDetail, result } = useFindCar()
 
 function onConfirm() {
   plate.value = LICENSE
-  confirm(plateToString.value)
+  confirm(plateToString.value, tabIdx.value)
 }
 
 const parkingInfo = shallowRef<ParkingInfo>({} as ParkingInfo)