client_iot-daoshi-template-v/src/views/Parking/Parking.vue

<template>
  <View class="bef" title="泊车缴费" sub-title="parking payment">
    <Tabs class="width" @click="handleTab" :list="list" />
    <div class="carousel">
      <EffectFade :list="banners">
        <template v-slot="{ item }">
          <div class="banner-wrapper">
            <img :src="config.sourceUrl + item" class="banner" alt="" />
          </div>
        </template>
      </EffectFade>
    </div>
    <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>
      <ScrollView class="intro-scroll" scrollbar :list="parkingInfo.content">
        <p class="intro">{{ switchLanguage(parkingInfo, 'content') }}</p>
      </ScrollView>
    </div>
  </View>
  <Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
    <CarInfo v-if="showCarInfo" @close="showCarInfo = false" />
  </Transition>
</template>

<script setup>
import Message from '@/base/Message/Message'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
import EffectFade from '@/components/EffectFade/EffectFade.vue'
import PlateInput from '@/components/PlateInput/PlateInput.vue'
import PlateKeyboard from '@/components/PlateKeyboard/PlateKeyboard.vue'
import Tabs from '@/components/Tabs/Tabs.vue'
import { getParkingList } from '@/http/api'
import View from '@/layouts/View.vue'
import { useStore } from '@/store/root'
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, currentBuildingFloorsList } = storeToRefs(store)

const tabIdx = ref(0)
const needsEnergy = computed(() => tabIdx.value === 0)
const searchMethods = computed(() => (tabIdx.value === 0 ? '车牌' : '车位'))
function handleTab(index) {
  tabIdx.value = index
  license.value = index === 0 ? ['苏', 'A'] : []
}

const isEnergy = ref(false)
const license = ref(['苏', 'A'])
const licenseToString = computed(() => license.value.join(''))
function handleKeyboard(item) {
  if (license.value.length === 1 && isZhWord(item)) {
    license.value[0] = item
    return
  }

  if (tabIdx.value === 0) {
    if (
      (!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 && license.value.length <= 8 && isZhWord(item)) ||
      (license.value.length >= 7 && (isZhWord(item) || isUppercaseWord(item)))
    ) {
      return
    }
  } else {
    if (license.value.length >= SPACE_MAX_LENGTH) return
  }

  license.value.push(item)
}
function del() {
  license.value.pop()
}

//点击能源输入框
function handleEnergy(flag) {
  isEnergy.value = 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 => {
    newVal.length === (isEnergy.value ? ENERGY_PLATE : NOT_ENERGY_PLATE) && !isLicensePlate(licenseToString.value) && Message({ text: '车牌错误', type: 'success' })
  },
  {
    deep: true
  }
)

const parkingInfo = ref({})
const banners = computed(() => parkingInfo.value.fileList ?? [])
getParkingList().then(({ data }) => {
  parkingInfo.value = data ?? {}
})

const showCarInfo = ref(false)
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.width {
  position: absolute !important;
  top: 214px !important;
  left: 170px !important;
  width: 468px !important;
  height: 88px !important;
}
.carousel {
  position: relative;
  width: 870px;
  height: 490px;
  margin-left: 170px;
  margin-top: 58px;
  margin-bottom: 80px;
  :deep(.swiper) {
    overflow: visible !important;
    z-index: auto;
  }
  :deep(.swiper-pagination) {
    bottom: -24px;
  }
  :deep(.swiper-pagination-bullet) {
    width: 16px !important;
    height: 3px !important;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px !important;
    opacity: inherit !important;
    &.swiper-pagination-bullet-active {
      background: #f1b33e;
      border-radius: 3px !important;
    }
  }
}
.banner-wrapper {
  width: 870px;
  height: 490px;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  .banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.parking-info {
  margin-left: 170px;
  margin-right: 40px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  height: 532px;

  .title {
    padding: 48px 0 32px 56px;
    font-weight: 700;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'font_bold';
  }

  .intro-scroll {
    position: relative;
    margin: 0 34px 0 56px;
    overflow: hidden;
    height: 372px;
    :deep(.bscroll-vertical-scrollbar) {
      width: 6px !important;
      background: rgba(0, 0, 0, 0.02) !important;
      border-radius: 6px !important;
      opacity: 1 !important;
      .bscroll-indicator {
        width: 6px !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 6px !important;
        border: none !important;
      }
    }
    .intro {
      font-weight: 400;
      font-size: 14px;
      line-height: 200%;
      text-align: justify;
      color: rgba(0, 0, 0, 0.6);
    }
  }
}
</style>