refactor: 车牌验证修改

4 years ago · 620c20ac53
7 changed files with 62 additions and 25 deletions
--- a/src/components/MovieDetail/MovieDetail.vue
+++ b/src/components/MovieDetail/MovieDetail.vue
@ -51,12 +51,10 @@
              v-for="(item, index) of dateList"
              :key="item.week"
            >
-              <div class="flex">
              <span class="date">{{ item.customDate }}</span>
              <span class="week">{{ item.week }}</span>
            </div>
          </div>
-          </div>
        </ScrollView>
        <ScrollView class="list-scroll">
          <div class="list-content">
@ -212,7 +210,6 @@ function close() {
    .remark {
      font-weight: 700;
      color: rgba(0, 0, 0, 0.6);
-      padding-bottom: 10px;
      margin-left: 24px;
      font-family: 'font_bold';
      font-size: 14px;
@ -237,18 +234,20 @@ function close() {
    height: 128px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
-    padding: 6px;
+    padding: 6px 0;
    margin-bottom: 24px;

    .date-content {
      display: inline-block;
      white-space: nowrap;
+      padding: 0 6px;
+
      &::before {
        position: absolute;
        content: '';
        left: 6px;
        background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
-        box-shadow: 0px 20px 30px rgba(221, 152, 55, 0.2);
+        box-shadow: 0 20px 30px rgba(221, 152, 55, 0.2);
        border-radius: 8px;
        border: 1px solid rgba(255, 189, 53, 1);
        width: 134px;
@ -259,17 +258,13 @@ function close() {
      }

      .date-item {
-        position: relative;
-        display: inline-block;
-        margin-right: 12px;
-      }
-      .flex {
-        width: 134px;
-        height: 116px;
-        display: flex;
+        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
+        margin-right: 12px;
+        width: 134px;
+        height: 116px;
      }
      .date {
        position: relative;
--- a/src/components/PlateInput/PlateInput.vue
+++ b/src/components/PlateInput/PlateInput.vue
@ -2,7 +2,7 @@
  <TransitionGroup name="width" mode="out-in" tag="div" class="plateinput-wrapper" :class="[searchMethods === '车位' ? 'active' : '']">
    <div
      class="input"
-      v-for="(item, index) of renderInputLengh"
+      v-for="(item, index) of renderInputLength"
      :key="item"
      :class="[index === license.length - 1 ? 'active' : '', searchMethods === '车位' ? 'space' : '']"
    >
@ -18,7 +18,7 @@
      <span class="text" v-if="!_isEnergy">新能源</span>
      <span class="text" v-else>{{ _isEnergy ? (license.length === ENERGY_PLATE && license[license.length - 1]) || '' : '' }}</span>
    </div>
-    <div key="btn" class="btn">
+    <div key="btn" class="btn" @click="confirm">
      <img src="../../assets/images/parking/search-parking.png" class="icon" alt="" />
    </div>
  </TransitionGroup>
@ -49,9 +49,9 @@ const props = defineProps({
  }
 })

-const renderInputLengh = computed(() => (props.searchMethods === '车牌' ? NOT_ENERGY_PLATE : props.spaceMaxLength))
+const renderInputLength = computed(() => (props.searchMethods === '车牌' ? NOT_ENERGY_PLATE : props.spaceMaxLength))

-const emits = defineEmits(['handle-energy'])
+const emits = defineEmits(['handle-energy', 'confirm'])
 const _isEnergy = ref(false)
 emits('handle-energy', _isEnergy.value)

@ -59,6 +59,10 @@ function handleEnergy() {
  _isEnergy.value = !_isEnergy.value
  emits('handle-energy', _isEnergy.value)
 }
+
+function confirm() {
+  emits('confirm')
+}
 </script>

 <style lang="scss" scoped>
--- a/src/components/PublicComponent/PublicComponent.vue
+++ b/src/components/PublicComponent/PublicComponent.vue
@ -1,4 +1,5 @@
 <template>
+  <div class="box" @click="addTotalClick"></div>
  <!-- 地图容器 -->
  <Map v-show="$route.meta.showMap" @handle-GO="handleGO" @handle-Detail="handleDetail" />

@ -43,7 +44,7 @@ const route = useRoute()
 const store = useStore()
 const { shop, showDetail, showSearch, sidebarList, language, showVoice } = storeToRefs(store)

-const { logoutRef, resetClickNumber, setLogoutRef } = useLogout()
+const { logoutRef, resetClickNumber, setLogoutRef, addTotalClick } = useLogout()
 const { title, countDownGif, isWall, countDownToWall, countDownNum, send, checkHandleScreen } = useHandleScreen(handleScreen)

 function handleGO() {
@ -87,3 +88,13 @@ watch(route, to => {
  }
 })
 </script>
+<style>
+.box {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 200px;
+  height: 200px;
+  z-index: 100;
+}
+</style>
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@ -212,6 +212,7 @@ onBeforeUnmount(() => {
  width: 432px;
  display: flex;
  flex-wrap: wrap;
+  align-items: flex-start;
  padding-left: 64px;
  .margin {
    margin-right: 40px;
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@ -23,7 +23,7 @@ export const checkPhoneNumber = phone => {
 * @returns {boolean}
 */
 export const isLicensePlate = str => {
-  return /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]{1}[A-HJ-NP-Z]{1}(?:(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))|[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/.test(
+  return /^(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(?:(?:[0-9]{5}[DF])|(?:[DF](?:[A-HJ-NP-Z0-9])[0-9]{4})))|(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 挂学警港澳]{1})$/.test(
    str
  )
 }
--- a/src/views/Guide/Guide.vue
+++ b/src/views/Guide/Guide.vue
@ -324,6 +324,7 @@ watch(
 }
 .facility-list {
  display: flex;
+  align-items: flex-start;
 }
 .margin {
  margin-right: 16px;
--- a/src/views/Parking/Parking.vue
+++ b/src/views/Parking/Parking.vue
@ -10,7 +10,7 @@
        </template>
      </EffectFade>
    </div>
-    <PlateInput @handle-energy="handleEnergy" :search-methods="searchMethods" :license="license" :needsEnergy="needsEnergy" />
+    <PlateInput @confirm="confirm" @handle-energy="handleEnergy" :search-methods="searchMethods" :license="license" :needsEnergy="needsEnergy" />
    <PlateKeyboard @del="del" @handle-keyboard="handleKeyboard" :search-methods="searchMethods" />
    <div class="parking-info">
      <h1 class="title">{{ switchLanguage(parkingInfo, 'title') }}</h1>
@ -38,17 +38,20 @@ import { isLicensePlate, isUppercaseWord, isZhWord } from '@/utils/utils'
 import { storeToRefs } from 'pinia'
 import { computed, defineAsyncComponent, ref, watch } from 'vue'
 import { list } from './tabs'
+import Shop from '@/utils/Class/Shop'
+import { useRouter } from 'vue-router'
 const CarInfo = defineAsyncComponent(() => import('@/components/CarInfo/CarInfo.vue'))

 const NOT_ENERGY_PLATE = 7 //非能源车牌长度
 const ENERGY_PLATE = 8 //能源车牌长度
 const SPACE_MAX_LENGTH = 5 //车位最大允许长度

+const router = useRouter()
 const store = useStore()
-const { config } = storeToRefs(store)
+const { config, currentBuildingFloorsList } = storeToRefs(store)

 const tabIdx = ref(0)
-const needsEnergy = computed(() => (tabIdx.value === 0 ? true : false))
+const needsEnergy = computed(() => tabIdx.value === 0)
 const searchMethods = computed(() => (tabIdx.value === 0 ? '车牌' : '车位'))
 function handleTab(index) {
  tabIdx.value = index
@ -69,7 +72,9 @@ function handleKeyboard(item) {
      (!isEnergy.value && license.value.length >= NOT_ENERGY_PLATE) ||
      (isEnergy.value && license.value.length >= ENERGY_PLATE) ||
      (license.value.length === 0 && !isZhWord(item)) ||
-      (license.value.length === 1 && !isUppercaseWord(item))
+      (license.value.length === 1 && !isUppercaseWord(item)) ||
+      (license.value.length > 1 && license.value.length <= 8 && isZhWord(item)) ||
+      (license.value.length >= 7 && (isZhWord(item) || isUppercaseWord(item)))
    ) {
      return
    }
@ -89,6 +94,26 @@ function handleEnergy(flag) {
  license.value.length >= ENERGY_PLATE && license.value.pop()
 }

+//找车
+function confirm() {
+  if (tabIdx.value === 0) {
+    //TODO
+    Message({ text: '抱歉暂时无法使用车牌找车', type: 'success' })
+  } else {
+    //车位
+    const info = window.Map_QM.pathPark({ shopNum: license.value })
+    if (info?.node?.length) {
+      const floorName = currentBuildingFloorsList.value.filter(item => item.order === info.floor)?.[0]?.name
+      const shop = new Shop({ name: license.value, floorOrder: info.floor, floorName, logoPath: '/static/img/tcc/png', yaxis: info.node })
+      store.SET_SHOP(shop)
+      router.push('/nav')
+    } else {
+      Message({ text: `暂未查到车位信息`, type: 'success' })
+      license.value = []
+    }
+  }
+}
+
 watch(
  license,
  newVal => {