feat: 🚀 添加车牌 车位导航增加周边交通组件

public/static/offline/JSON/getParkingInfo.json

@@ -1 +1,16 @@
-{"code":200,"msg":"操作成功","data":{"title":"泊车介绍","titleEn":"Parking information","content":"1月9日，中共中央总书记、国家主席、中央军委主席习近平在中国共产党第二十届中央纪律检查委员会第二次全体会议上发表重要讲话。李强、赵乐际、王沪宁、蔡奇、丁薛祥、李希出席会议。新华社记者 张领 摄\n二十届中央纪委二次全会公报强调，时刻保持解决大党独有难题的清醒和坚定，坚定不移推动健全全面从严治党体系我们党作为长期执政的马克思主义政党和世界上第一大政党，党的远大目标和历史使命，党的队伍的庞大规模和广泛分布，党面临的重大风险和严峻挑战，都决定了只有整体地而不是局部地、系统地而不是零碎地、持久地而不是短暂地、高标准地而不是一般化地全面从严治党，才能把我们党建设好。","contentEn":"Parking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking information","fileList":["/iotFile/2023/04/18/3EbfJy1GEkeIUtpK3AwWB.png"],"qrFileList":[{"name":"二维码","nameEn":"QR code","fileUrl":"/iotFile/2023/04/18/97JzNgLukcEbLdBDKhWj1.png"}]}}
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": {
+    "title": "泊车介绍",
+    "titleEn": "Parking information",
+    "content": "1月9日，中共中央总书记、国家主席、中央军委主席习近平在中国共产党第二十届中央纪律检查委员会第二次全体会议上发表重要讲话。李强、赵乐际、王沪宁、蔡奇、丁薛祥、李希出席会议。新华社记者 张领 摄\n二十届中央纪委二次全会公报强调，时刻保持解决大党独有难题的清醒和坚定，坚定不移推动健全全面从严治党体系我们党作为长期执政的马克思主义政党和世界上第一大政党，党的远大目标和历史使命，党的队伍的庞大规模和广泛分布，党面临的重大风险和严峻挑战，都决定了只有整体地而不是局部地、系统地而不是零碎地、持久地而不是短暂地、高标准地而不是一般化地全面从严治党，才能把我们党建设好。",
+    "contentEn": "Parking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking information",
+    "fileList": ["/iotFile/2023/04/18/3EbfJy1GEkeIUtpK3AwWB.png"],
+    "qrFileList": [{
+      "name": "二维码",
+      "nameEn": "QR code",
+      "fileUrl": "/iotFile/2023/04/18/97JzNgLukcEbLdBDKhWj1.png"
+    }]
+  }
+}

src/base/Message/Message.vue

@@ -59,15 +59,12 @@ onMounted(() => {
   top: 200px;
   left: 50%;
   z-index: 9999;
-  min-width: 300px;
-  height: 50px;
-  padding: 0 25px;
+  padding: 40px 80px;
   color: #999;
   background: #f5f5f5;
   border: 1px solid #e4e4e4;
   border-radius: 100px;
   transform: translate3d(-50%, 0, 0);
-  line-height: 50px;
 
   .text-tips {
     font-size: 24px;

src/components/CarInfo/CarInfo.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="car-info-wrapper">
+    <div class="masker" @click="close"></div>
+    <div class="car-content">
+      <img src="" class="car-img" alt="" />
+      <div class="car">
+        <div class="car-group mr120">
+          <span class="tip">车牌号</span>
+          <span class="text">辽A88888</span>
+        </div>
+        <div class="car-group mr120">
+          <span class="tip">车位号</span>
+          <span class="text">E-666</span>
+        </div>
+        <div class="car-group">
+          <span class="tip">停车时长</span>
+          <span class="text">1小时</span>
+        </div>
+      </div>
+      <div class="go" @click="go">
+        <svg class="go-icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M28.9853 7.64401L23.6663 26.259L19.1063 17.139L10.6508 13.7565L28.9853 7.64401ZM32.0843 3.45001L3.87533 12.852C3.72933 12.9004 3.60174 12.9925 3.50985 13.1159C3.41796 13.2392 3.36621 13.3878 3.36163 13.5416C3.35705 13.6953 3.39984 13.8467 3.48422 13.9754C3.5686 14.104 3.69047 14.2035 3.83333 14.2605L16.9328 19.5L23.5703 32.775C23.6379 32.9102 23.7447 33.0218 23.8767 33.0953C24.0088 33.1687 24.16 33.2005 24.3104 33.1866C24.4609 33.1726 24.6037 33.1136 24.72 33.0171C24.8363 32.9206 24.9208 32.7913 24.9623 32.646L33.0428 4.36651C33.0803 4.23513 33.0811 4.09603 33.0453 3.96421C33.0094 3.83239 32.9382 3.71286 32.8394 3.61853C32.7406 3.5242 32.6179 3.45865 32.4846 3.42895C32.3513 3.39925 32.2123 3.40653 32.0828 3.45001H32.0843Z"
+            fill="white"
+          />
+        </svg>
+        <div class="line"></div>
+        GO
+      </div>
+      <svg class="close-icon" width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" @click="close">
+        <rect width="100" height="100" rx="50" fill="#C7C2B7" />
+        <path
+          d="M50 47.172L59.9 37.272L62.728 40.1L52.828 50L62.728 59.9L59.9 62.728L50 52.828L40.1 62.728L37.272 59.9L47.172 50L37.272 40.1L40.1 37.272L50 47.172Z"
+          fill="white"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  carInfo: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emits = defineEmits(['close', 'go'])
+function close() {
+  emits('close')
+}
+function go() {
+  emits('go')
+}
+</script>
+
+<style scoped>
+.car-info-wrapper {
+  position: fixed;
+  z-index: 20;
+  background: rgb(0 0 0 / 50%);
+  inset: 0;
+  .masker {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+  }
+  .car-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 3;
+    width: 717px;
+    border-radius: 16px;
+    transform: translate3d(-50%, -50%, 0);
+  }
+  .close-icon {
+    position: absolute;
+    top: -50px;
+    right: -50px;
+    width: 100px;
+    height: 100px;
+  }
+  .car-img {
+    width: 717px;
+    height: 403px;
+  }
+  .car {
+    display: flex;
+    align-items: center;
+    padding: 48px 56px;
+    background: #fff;
+  }
+  .car-group {
+    display: flex;
+    flex-direction: column;
+    &.mr120 {
+      margin-right: 120px;
+    }
+    .tip {
+      padding-bottom: 16px;
+      font-size: 20px;
+      color: #736661;
+      line-height: 28px;
+    }
+    .text {
+      font-size: 28px;
+      font-family: 'font_bold';
+      color: #595447;
+      font-weight: 700;
+      line-height: 36px;
+    }
+  }
+  .go {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    font-size: 36px;
+    text-align: center;
+    color: #fff;
+    background: #d4a866;
+    border-radius: 0 0 16px 16px;
+    font-weight: 700;
+    line-height: 44px;
+    .go-icon {
+      width: 36px;
+      height: 36px;
+    }
+    .line {
+      width: 1px;
+      height: 20px;
+      margin: 0 24px;
+      border: 1px solid rgb(255 255 255 / 50%);
+    }
+  }
+}
+</style>

src/components/PlateInput/PlateInput.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="plate-container">
-    <div class="input-wrapper">
+  <div class="plate-container" :class="{ 'space-wrapper': searchMethod === '车位' }">
+    <TransitionGroup appear mode="out-in" tag="div" name="zoom" class="input-wrapper">
       <div
         v-for="(item, index) of renderInputLength"
         :key="item"
-        :class="{ active: index === list.length && list.length <= 7 }"
+        :class="{ active: index === list.length && list.length <= 7, space: searchMethod === '车位' }"
         class="input"
         @click="handleEnergy"
       >
@@ -16,8 +16,8 @@
           </div>
         </transition>
       </div>
-    </div>
-    <div class="btn" @click="confirm">
+    </TransitionGroup>
+    <div class="btn disabled" @click="confirm">
       <slot></slot>
       <span>{{ btnText }}</span>
     </div>
@@ -61,21 +61,40 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-$height: 90px;
-$width: 90px;
-$font-color: rgb(0 0 0 / 80%);
-$input-bg: rgb(0 0 0 / 10%);
-$input-radius: 8px;
+$height: 80px;
+$width: 64px;
+$font-color: #595447;
+$input-bg: #fff;
+$input-radius: 12px;
 $font-size: 32px;
-$font-energy-size: 12px;
-$btn-bg: #535d75;
+$font-energy-size: 14px;
+$btn-bg: #d4a866;
 $btn-color: #fff;
-$btn-font-size: 20px;
-$btn-width: 197px;
+$btn-font-size: 28px;
+$btn-width: 218px;
 
 .plate-container {
   position: relative;
   display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 158px;
+    width: 2px;
+    height: 24px;
+    background: rgb(0 0 0 / 20%);
+    border-radius: 1px;
+    transition: all 0.3s;
+    content: '';
+    transform: translateY(-50%);
+  }
+  &.space-wrapper {
+    &::before {
+      left: 100px;
+    }
+  }
   .input-wrapper {
     display: flex;
   }
@@ -86,6 +105,7 @@ $btn-width: 197px;
     align-items: center;
     width: $width;
     height: $height;
+    margin-right: 8px;
     font-size: $font-size;
     font-family: 'font_bold';
     text-align: center;
@@ -93,9 +113,20 @@ $btn-width: 197px;
     background: $input-bg;
     border-radius: $input-radius;
     font-weight: 700;
+    &:nth-child(2) {
+      margin-right: 42px;
+    }
     &.active {
-      border: 1px solid orange;
+      border: 2px solid #d4a866;
     }
+    &.space {
+      width: 80px;
+      margin-right: 10px;
+      &:nth-child(1) {
+        margin-right: 42px;
+      }
+    }
+
     .text {
       display: flex;
       flex-direction: column;
@@ -105,8 +136,14 @@ $btn-width: 197px;
       &.energy {
         animation-duration: 0.3s;
       }
+
+      i {
+        color: #7bb756;
+      }
       b {
         font-size: $font-energy-size;
+        color: #7bb756;
+        line-height: 22px;
       }
     }
   }
@@ -117,10 +154,15 @@ $btn-width: 197px;
     width: $btn-width;
     height: $height;
     padding: 0 58px;
+    margin-right: 14px;
     font-size: $btn-font-size;
     color: $btn-color;
     background: $btn-bg;
+    border-radius: 12px;
     box-shadow: 1px 16px 32px rgb(96 94 116 / 20%);
+    &.disabled {
+      opacity: 0.5;
+    }
     span {
       white-space: nowrap;
       transition: all 0.3s;

src/components/PlateKeyboard/PlateKeyboard.vue

@@ -49,7 +49,7 @@ const list = computed(() => (props.searchMethods === '车位' ? keyboard.filter(
 
 const emits = defineEmits(['handle-keyboard', 'del'])
 const keyboardIdx = ref(-1)
-const keyboardTimer = ref<any>()
+const keyboardTimer = ref()
 function handleKeyboard(item: string, index: number) {
   item === 'del' ? emits('del') : emits('handle-keyboard', item)
   clearTimeout(keyboardTimer.value)
@@ -70,45 +70,63 @@ onBeforeUnmount(() => {
 .keyboard-wrapper {
   display: flex;
   flex-wrap: wrap;
-  width: 1010px;
+  width: 880px;
   .keyboard-item {
-    width: 48px;
-    height: 48px;
+    width: 40px;
+    height: 44px;
     margin-right: 8px;
     margin-bottom: 8px;
     font-size: 18px;
     font-family: 'font_medium';
     text-align: center;
-    color: rgb(0 0 0 / 80%);
-    background: rgb(255 255 255 / 60%);
-    border-radius: 6px;
-    box-shadow: 0 4px 8px rgb(0 0 0 / 3%), inset 0 -1px 0 rgb(177 189 220 / 10%);
+    color: #595447;
+    background: #fff;
+    border-radius: 8px;
     line-height: 48px;
+    &:nth-child(9),
+    &:nth-child(15),
+    &:nth-child(27),
+    &:nth-child(33),
+    &:nth-child(45),
+    &:nth-child(51),
+    &:nth-child(69),
+    &:nth-child(63) {
+      margin-right: 16px;
+    }
     .parking-keyboard-del {
       width: 22px;
       height: 18px;
     }
     &.space {
-      width: 104px;
+      width: 88px;
+      &:nth-child(6),
+      &:nth-child(15),
+      &:nth-child(24),
+      &:nth-child(33) {
+        margin-right: 24px;
+      }
+      &:nth-child(9),
+      &:nth-child(27),
+      &:nth-child(45),
+      &:nth-child(51),
+      &:nth-child(69),
+      &:nth-child(63) {
+        margin-right: 8px;
+      }
       &.del {
-        width: 216px;
+        width: 184px;
       }
     }
-    &.uppercase {
-      background: #fff;
-    }
     &.del {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 104px;
-      background: rgb(0 0 0 / 5%);
+      width: 88px;
       line-height: initial;
     }
     &.active {
       color: #fff;
-      background: #f1b33e;
-      box-shadow: 0 4px 8px rgb(0 0 0 / 3%), inset 0 -1px 0 rgb(177 189 220 / 10%);
+      background: #d4a866;
     }
   }
 }

src/components/Traffic/Traffic.vue

@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>

src/composables/useParkingKeyboard.ts

@@ -1,15 +1,17 @@
 import { ref, computed } from 'vue'
 import { isZhWord, isUppercaseWord } from '@/utils/utils'
 
+type SearchMethods = '车牌' | '车位'
+
 export const useParkingKeyboard = () => {
   const NOT_ENERGY_PLATE = 7 //非能源车牌长度
   const ENERGY_PLATE = 8 //能源车牌长度
-  const SPACE_MAX_LENGTH = 6 //车位最大允许长度
+  const SPACE_MAX_LENGTH = 4 //车位最大允许长度
   const LICENSE = ['苏', 'A'] //默认车牌前缀
 
   const plate = ref(LICENSE.slice())
   const plateToString = computed(() => plate.value.join(''))
-  const searchMethod = ref<'车牌' | '车位'>('车牌')
+  const searchMethod = ref<SearchMethods>('车牌')
   const inputLength = computed(() => (searchMethod.value === '车牌' ? ENERGY_PLATE : SPACE_MAX_LENGTH))
   const isEnergy = ref(false)
   function handleEnergy(energy: boolean) {
@@ -42,6 +44,9 @@ export const useParkingKeyboard = () => {
   function del() {
     plate.value.pop()
   }
+  function changeSearchMethod(method: SearchMethods) {
+    searchMethod.value = method
+  }
 
-  return { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, LICENSE, searchMethod }
+  return { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, LICENSE, searchMethod, changeSearchMethod }
 }

src/http/api/parking/index.ts

@@ -1,3 +1,5 @@
 import { request } from '../../http'
 //找车
 export const getFindCar = (license: string) => request<CarInfo>({ url: `/ThirdPark/GetPlaceInfo?carCode=${license}` })
+
+export const getParkingInfo = () => request<ParkingInfo>({ url: `/JSON/getParkingInfo.json` })

src/types/parking.d.ts

@@ -0,0 +1,8 @@
+declare interface ParkingInfo {
+  title: string
+  titleEn: string
+  content: string
+  contentEn: string
+  fileList: string[]
+  qrFileList: Array<{ name: string; nameEn: string; fileUrl: string }>
+}

src/views/Parking/Parking.vue

@@ -1,22 +1,184 @@
 <template>
-  <PlateInput :list="plate" :search-method="searchMethod" :space-length="inputLength" @confirm="onConfirm" @handle-energy="handleEnergy">
-    <Loading v-if="loading" fill="#fff" :size="20" />
-  </PlateInput>
-  <PlateKeyboard @del="del" @handle-keyboard="handleKeyboard" />
+  <div class="parking-container">
+    <div class="tabs">
+      <div v-for="(item, index) of tabs" :key="item" class="tab-item" @click="handleTab(index)">
+        <span class="text" :class="{ active: tabIdx === index }">{{ item }}</span>
+        <div v-if="index !== tabs.length - 1" class="line"></div>
+      </div>
+    </div>
+    <div v-if="tabIdx !== 2" class="content">
+      <div class="content-left">
+        <PlateInput
+          :list="plate"
+          :search-method="searchMethod"
+          :space-length="inputLength"
+          @confirm="onConfirm"
+          @handle-energy="handleEnergy"
+        >
+          <Loading v-if="loading" fill="#fff" :size="20" />
+        </PlateInput>
+        <PlateKeyboard :search-methods="searchMethod" @del="del" @handle-keyboard="handleKeyboard" />
+      </div>
+      <div class="content-right">
+        <div class="parking-carousel">
+          <EffectFade></EffectFade>
+        </div>
+        <h1 class="title">{{ switchLanguage(parkingInfo, 'title') }}</h1>
+        <ScrollView class="parking-scroll" scrollbar :list="switchLanguage(parkingInfo, 'content')">
+          <div class="intro">{{ switchLanguage(parkingInfo, 'content') }}</div>
+        </ScrollView>
+      </div>
+    </div>
+    <Traffic v-else />
+  </div>
+  <CarInfo v-if="showCarDetail" @close="showCarDetail = false" @go="onConfirm" />
 </template>
 
 <script setup lang="ts">
+import { ref, shallowRef, defineAsyncComponent } from 'vue'
 import { useFindCar } from '@/composables/useFindCar'
 import { useParkingKeyboard } from '@/composables/useParkingKeyboard'
+import { getParkingInfo } from '@/http/api/parking'
 import PlateInput from '@/components/PlateInput/PlateInput.vue'
 import PlateKeyboard from '@/components/PlateKeyboard/PlateKeyboard.vue'
 import Loading from '@/base/Loading/Loading.vue'
+import EffectFade from '@/components/EffectFade/EffectFade.vue'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+const CarInfo = defineAsyncComponent(() => import('@/components/CarInfo/CarInfo.vue'))
+const Traffic = defineAsyncComponent(() => import('@/components/Traffic/Traffic.vue'))
 
-const { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, searchMethod, LICENSE } = useParkingKeyboard()
+const tabs = ['车牌号找车', '车位号找车', '周边交通'] as const
+const tabIdx = ref(0)
+function handleTab(index: number) {
+  tabIdx.value = index
+  if (index === 0) {
+    plate.value = LICENSE.slice()
+    changeSearchMethod('车牌')
+  } else if (index === 1) {
+    plate.value = []
+    changeSearchMethod('车位')
+  }
+}
+
+const { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, searchMethod, LICENSE, changeSearchMethod } =
+  useParkingKeyboard()
 const { confirm, loading, showCarDetail, result } = useFindCar()
 
 function onConfirm() {
   plate.value = LICENSE
   confirm(plateToString.value)
 }
+
+const parkingInfo = shallowRef<ParkingInfo>({} as ParkingInfo)
+getParkingInfo().then(({ data }) => {
+  parkingInfo.value = data ?? {}
+})
 </script>
+
+<style lang="scss" scoped>
+.parking-container {
+  position: relative;
+  z-index: 20;
+  padding-top: 140px;
+  .tabs {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 64px;
+    .tab-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 24px;
+      color: #84754e;
+      font-weight: 400;
+    }
+    .text {
+      position: relative;
+      display: block;
+      padding-bottom: 10px;
+      line-height: 32px;
+      &.active {
+        &::before {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          height: 4px;
+          background-color: #84754e;
+          content: '';
+        }
+      }
+    }
+    .line {
+      width: 2px;
+      height: 26px;
+      margin: -5px 40px 0;
+      background: #84754e;
+    }
+  }
+  .content {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 226px;
+    .content-left {
+      width: 900px;
+      height: 400px;
+      padding-top: 40px;
+      padding-left: 14px;
+      background: rgb(0 0 0 / 4%);
+      border-radius: 16px;
+    }
+    .content-right {
+      overflow: hidden;
+      width: 540px;
+      background: rgb(255 255 255 / 40%);
+      border-radius: 8px;
+      .parking-carousel {
+        position: relative;
+        width: 540px;
+        height: 304px;
+        margin-bottom: 40px;
+        background-color: #fff;
+        :deep(.stay-tuned) {
+          height: 200px;
+        }
+      }
+      .title {
+        margin: 0 48px 12px;
+        font-size: 24px;
+        color: #595447;
+        font-weight: 700;
+        line-height: 32px;
+      }
+
+      .parking-scroll {
+        position: relative;
+        overflow: hidden;
+        height: 238px;
+        margin: 0 18px 40px 48px;
+        :deep(.bscroll-vertical-scrollbar) {
+          width: 6px !important;
+          height: 120px !important;
+          background: rgb(0 0 0 / 3%) !important;
+          opacity: 1 !important;
+          .bscroll-indicator {
+            height: 40px !important;
+            background: #fff !important;
+            border: none !important;
+            box-shadow: 0 8px 20px rgb(0 0 0 / 10%) !important;
+          }
+        }
+        .intro {
+          padding-right: 24px;
+          font-size: 14px;
+          text-align: justify;
+          color: #736661;
+          line-height: 28px;
+        }
+      }
+    }
+  }
+}
+</style>