city-gather/src/subPack-charge/chargeMap/chargeMap.vue

<script setup lang="ts">
import chargeSearch from '../components/search.vue'
import chargeFooter from '../components/charge-tab.vue'
import router from '@/router'
import { StaticUrl } from '@/config'

const { Location } = storeToRefs(useAddressStore())
const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
definePage({
  name: 'charge-map',
  islogin: false,
  style: {
    navigationBarTitleText: '地图模式',
    navigationStyle: 'custom',
  },
})
onMounted(() => {
  getStationInfoMapList()
})
const markersData = ref<any[]>([])
const markerMapList = ref<any[]>([])
async function getStationInfoMapList() {
  const res = await Apis.charge.stationInfoMapList({ data: { longitude: Location.value.longitude, latitude: Location.value.latitude } })
  markerMapList.value = res.data
  res.data.forEach((item: any) => {
    markersData.value.push({
      id: item.stationId,
      latitude: item.latitude,
      longitude: item.longitude,
      iconPath: `${StaticUrl}/marker-tag.png`,
      width: 30,
      height: 34,
    })
  })
}
const markerShow = ref(false)
const selectData = ref<any>({})
function openMarkerTap(item: any) {
  const selected = markerMapList.value.find((station: any) => station.stationId === item.detail.markerId)
  if (selected) {
    selectData.value = selected
    markerShow.value = true
  }
}
</script>

<template>
  <view class="map-page min-h-screen bg-#F6FAFF">
    <wd-navbar
      title="" custom-style="background:linear-gradient( 180deg, #E2FF91 0%, rgba(158,214,5,0) 100%)"
      :bordered="false" :z-index="99" safe-area-inset-top fixed
    >
      <template #left>
        <view class="flex items-center">
          <!-- <wd-icon name="arrow-left" size="22px" color="#000" /> -->
          <view class="relative z-10 h62rpx w-full w180rpx opacity-100">
            <image class="absolute left-0 top-0 h62rpx w180rpx" :src="`${StaticUrl}/charge-logo.png`" />
          </view>
        </view>
      </template>
    </wd-navbar>
    <view class="relative">
      <view
        class="absolute z-1 box-border px24rpx"
        :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
      >
        <charge-search
          map-mode-text-value="列表模式" :map-mode-icon="`${StaticUrl}/charge-list.png`"
          @map-mode-click="router.push({ name: 'charge-index' })"
        />
      </view>
      <view class="absolute left-0 top-0 z-0 h-full w-full">
        <map
          style="width: 100%;height: 100vh;" :longitude="Location.longitude || 113.264435"
          :latitude="Location.latitude || 23.129163" :markers="markersData" @markertap.stop="openMarkerTap"
        />
      </view>
      <transition name="slide-up">
        <view v-if="markerShow" class="absolute top-960rpx px-24rpx">
          <view class="h-432rpx w-660rpx rounded-32rpx bg-#FFF p-24rpx" @click="router.push({ name: 'charge-site-detail', params: { stationId: String(selectData.stationId) } })">
            <view class="" @click.stop="markerShow = false">
              <wd-icon name="close" size="16px" color="#9ED605" />
            </view>
            <view class="flex items-center justify-between">
              <view class="text-32rpx font-800">
                {{ selectData.stationName }}
              </view>
              <view
                class="ml-150rpx h-44rpx w-148rpx flex items-center border-2rpx border-#9ED605 rounded-34rpx border-solid line-height-[44rpx]"
              >
                <view class="w-44rpx rounded-[34rpx_0rpx_0rpx_34rpx] bg-#9ED605 text-center">
                  <wd-icon name="location" size="16px" color="#FFF" />
                </view>
                <view class="text-24rpx text-#9ED605">
                  {{ selectData.distance }}km
                </view>
              </view>
            </view>
            <view class="mt-20rpx text-24rpx text-#AAA">
              {{ selectData.address }}
            </view>
            <view class="mt-20rpx flex items-center justify-between">
              <view class="h-120rpx w-204rpx flex flex-col items-center justify-center rounded-8rpx bg-[linear-gradient(180deg,#45E67D_0%,rgba(218,249,229,0)_100%)]">
                <view class="mt-16rpx h-40rpx w-100rpx rounded-8rpx bg-[linear-gradient(180deg,#4FEF86_0%,#00AA3A_100%)] text-center text-24rpx text-#FFF font-bold line-height-[40rpx]">
                  快充
                </view>
                <view class="mt-10rpx text-32rpx font-bold">
                  {{ selectData.fastCharging }}
                </view>
              </view>
              <view class="h-120rpx w-204rpx flex flex-col items-center justify-center rounded-8rpx bg-[linear-gradient(180deg,#BED2FF_0%,rgba(62,82,128,0)_100%)]">
                <view class="mt-16rpx h-40rpx w-100rpx rounded-8rpx bg-[linear-gradient(180deg,#8EB1FF_0%,#3071FF_100%)] text-center text-24rpx text-#FFF font-bold line-height-[40rpx]">
                  慢充
                </view>
                <view class="mt-10rpx text-32rpx font-bold">
                  {{ selectData.slowCharging }}
                </view>
              </view>
            </view>
            <view class="mt-20rpx h-72rpx w-654rpx flex items-center justify-between bg-#F6FAFF">
              <view>
                <text class="text-48rpx text-#FF6464 font-800">
                  {{ selectData.platformPrice }}
                </text>
                <text class="text-24rpx">
                  元/度
                </text>
              </view>
              <view class="28rpx">
                {{ selectData.peakValue }}：{{ selectData.peakTime }}
              </view>
            </view>
            <view class="mt-20rpx flex items-center gap-16rpx">
              <view class="h-30rpx w-30rpx rounded-4rpx bg-#5BE7FF text-center text-24rpx text-#FFF line-height-[30rpx]">
                P
              </view>
              <view class="text-24rpx text-#AAA">
                {{ selectData.tips }}
              </view>
            </view>
          </view>
        </view>
      </transition>
    </view>
    <chargeFooter />
  </view>
</template>

<style lang="scss" scoped>
.slide-up-enter-active, .slide-up-leave-active {
  transition: transform 0.3s ease;
}

.slide-up-enter-from {
  transform: translateY(100%);
}

.slide-up-enter-to {
  transform: translateY(0%);
}

.slide-up-leave-from {
  transform: translateY(0%);
}

.slide-up-leave-to {
  transform: translateY(100%);
}
</style>