feat: 🚀 新增地图导览筛选店铺/停车模块hook

src/composables/useDay.ts

@@ -6,7 +6,7 @@ export const useDay = () => {
     zh: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
     en: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
     tw: ['星期日', '星期壹', '星期二', '星期三', '星期四', '星期五', '星期六']
-  }
+  } as const
 
   const date = ref(new Date())
   const store = useStore()

src/composables/useGuideFilterShop.ts

@@ -0,0 +1,22 @@
+import { ref, shallowRef, toRefs } from 'vue'
+import { useStore } from '@/store/root'
+
+export const useGuideFilterShop = () => {
+  const store = useStore()
+  const { shopList, currentBuildingFloorsList, currentFloor } = toRefs(store)
+
+  const floorIdx = ref(-1) //楼层选中索引
+  const selectedShopList = shallowRef<Shop[]>([]) //选中楼层的店铺列表
+
+  function filterShopByFloorName(floorName: string) {
+    selectedShopList.value = shopList.value.filter(item => item.floor === floorName)
+  }
+
+  // //筛选当前楼层所需数据
+  function filterAboutCurrentInfo() {
+    floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floor === currentFloor.value.floor)
+    selectedShopList.value = shopList.value.filter(item => item.floor === currentFloor.value.floor)
+  }
+
+  return { floorIdx, selectedShopList, filterShopByFloorName, filterAboutCurrentInfo }
+}

src/composables/useInitConfigAndMallInfo.ts

@@ -21,6 +21,6 @@ export const useInitConfigAndMallInfo = async () => {
     store.SET_BUILDING_LIST(buildingList)
     store.SET_FACILITY_LIST(_facilityList.data)
   } catch (error) {
-    Message({ text: '初始化数据失败', type: 'success' })
+    Message({ text: '获取数据失败', type: 'success' })
   }
 }

src/composables/useParkingKeyboard.ts

@@ -0,0 +1,47 @@
+import { ref, computed } from 'vue'
+import { isZhWord, isUppercaseWord } from '@/utils/utils'
+
+export const useParkingKeyboard = () => {
+  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()
+  }
+
+  return { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, LICENSE, searchMethod }
+}

src/enums/index.ts

@@ -6,7 +6,7 @@ export enum ACTIVITY_TYPE {
 }
 
 export enum DEVICE {
-  WINDOW = 'windows',
+  WINDOWS = 'windows',
   ANDROID = 'android'
 }
 

src/http/http.ts

@@ -13,7 +13,7 @@ class Request {
 
   constructor(config: CreateRequestConfig) {
     this.instance = axios.create(config)
-    // * 初始化存放取消请求控制器Map
+    //取消请求控制器Map
     this.abortControllerMap = new Map()
     this.interceptorsObj = config.interceptors
     // 拦截器执行顺序 接口请求 -> 实例请求 -> 全局请求 -> 实例响应 -> 全局响应 -> 接口响应

src/views/Guide/Guide.vue

@@ -3,23 +3,14 @@
 </template>
 
 <script setup lang="ts">
-// import { shallowRef, toRefs } from 'vue'
-// import { useStore } from '@/store/root'
-// import { useGuideMapOperation } from '@/composables/useGuideMapOperation'
-// import { useFacilityNav } from '@/composables/useFacilityNav'
+import { useStore } from '@/store/root'
+import { useGuideMapOperation } from '@/composables/useGuideMapOperation'
+import { useFacilityNav } from '@/composables/useFacilityNav'
+import { useGuideFilterShop } from '@/composables/useGuideFilterShop'
 
-// const store = useStore()
-// const { currentBuildingFloorsList, shopList, currentFloor } = toRefs(store)
+const store = useStore()
 
-// const { switchFloor, handleMapIcon, list } = useGuideMapOperation()
-// const { handleFacility } = useFacilityNav()
-
-// const floorIdx = ref(-1) //楼层选中索引
-// const selectedShopList = shallowRef([]) //选中楼层的店铺列表
-
-// //筛选当前楼层所需数据
-// function filterAboutCurrentInfo() {
-//   floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.name === currentFloor.value.floorName)
-//   selectedShopList.value = shopList.value.filter(item => item.floorName === currentFloor.value.floorName)
-// }
+const { floorIdx, selectedShopList, filterShopByFloorName, filterAboutCurrentInfo } = useGuideFilterShop() //筛选楼层
+const { switchFloor, handleMapIcon, list, mapIdx } = useGuideMapOperation() //复位 位置等操作
+const { handleFacility } = useFacilityNav() //公共设施导航
 </script>

src/views/Parking/Parking.vue

@@ -1,68 +1,22 @@
 <template>
   <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>
   <PlateKeyboard @del="del" @handle-keyboard="handleKeyboard" />
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
 import { useFindCar } from '@/composables/useFindCar'
-import { isZhWord, isUppercaseWord } from '@/utils/utils'
+import { useParkingKeyboard } from '@/composables/useParkingKeyboard'
 import PlateInput from '@/components/PlateInput/PlateInput.vue'
 import PlateKeyboard from '@/components/PlateKeyboard/PlateKeyboard.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()
+
 function onConfirm() {
   plate.value = LICENSE
   confirm(plateToString.value)
 }
 </script>
-
-<style lang="scss" scoped>
-.find-car-loading {
-  margin-right: 20px;
-}
-</style>