|
|
@@ -4,6 +4,7 @@ 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',
|
|
|
@@ -13,13 +14,35 @@ definePage({
|
|
|
navigationStyle: 'custom',
|
|
|
},
|
|
|
})
|
|
|
+onMounted(() => {
|
|
|
+ getStationInfoMapList()
|
|
|
+})
|
|
|
+const markersData = ref<any[]>([])
|
|
|
+async function getStationInfoMapList() {
|
|
|
+ const res = await Apis.charge.stationInfoMapList({ data: { longitude: Location.value.longitude, latitude: Location.value.latitude } })
|
|
|
+ res.data.forEach((item: any) => {
|
|
|
+ markersData.value.push({
|
|
|
+ id: item.stationId,
|
|
|
+ latitude: item.latitude,
|
|
|
+ longitude: item.longitude,
|
|
|
+ iconPath: '',
|
|
|
+ width: 30,
|
|
|
+ height: 30,
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+const markerShow = ref(true)
|
|
|
+function openMarkerTap(item: any) {
|
|
|
+ console.log(item, '点击标点')
|
|
|
+ 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 left-arrow fixed @click-left="router.back()"
|
|
|
+ title="" custom-style="background:linear-gradient( 180deg, #E2FF91 0%, rgba(158,214,5,0) 100%)"
|
|
|
+ :bordered="false" :z-index="99" safe-area-inset-top left-arrow fixed @click-left="router.back()"
|
|
|
>
|
|
|
<template #left>
|
|
|
<view class="flex items-center">
|
|
|
@@ -32,19 +55,75 @@ definePage({
|
|
|
</wd-navbar>
|
|
|
<!-- <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" /> -->
|
|
|
<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
|
|
|
+ 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="113.264435"
|
|
|
- :latitude="23.129163"
|
|
|
+ style="width: 100%;height: 100vh;" :longitude="Location.longitude || 113.264435"
|
|
|
+ :latitude="Location.latitude || 23.129163" :markers="markersData" @markertap.stop="openMarkerTap"
|
|
|
/>
|
|
|
</view>
|
|
|
+ <view class="absolute top-900rpx px-24rpx">
|
|
|
+ <view class="h-432rpx w-702rpx rounded-32rpx bg-#FFF p-24rpx">
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view class="text-32rpx font-800">
|
|
|
+ 贵阳花果园购物中心充电站
|
|
|
+ </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">
|
|
|
+ 1.55km
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-20rpx text-24rpx text-#AAA">
|
|
|
+ 贵州省贵阳市观山湖区贵安新区群航新能源责任有限公司
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="h-120rpx w-204rpx rounded-8rpx bg-[linear-gradient(180deg,#45E67D_0%,rgba(218,249,229,0)_100%)] text-center">
|
|
|
+ <view class="">
|
|
|
+ 快充
|
|
|
+ </view>
|
|
|
+ <view>12/12</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>快充</view>
|
|
|
+ <view>12/12</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>快充</view>
|
|
|
+ <view>12/12</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>
|
|
|
+ <text>1.0026</text>
|
|
|
+ <text>元/度</text>
|
|
|
+ </view>
|
|
|
+ <view>峰:10:00-13:00</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>P</view>
|
|
|
+ <view>充电减免2小时停车费,超出部分按每小时3元计算</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<chargeFooter />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|