Przeglądaj źródła

```
feat(charge): 添加充电站地图标点功能

- 新增markers接口类型定义,包含标点ID、经纬度、图标路径及尺寸信息
- 添加stationInfoMapList API接口配置用于获取站点地图列表数据
- 在全局类型声明中扩展charge模块,添加stationInfoMapList方法定义
- 在充电地图页面实现地图标点展示功能,集成定位服务获取当前位置
- 添加地图标点点击事件处理逻辑
- 优化页面布局样式,增加充电站详情展示区域
- 修复地址位置参数类型中的空值联合类型格式问题
```

zouzexu 2 dni temu
rodzic
commit
f460a08ae4

+ 27 - 0
src/api/api.type.d.ts

@@ -1942,4 +1942,31 @@ namespace Api {
      */
     status?: number
   }
+
+  interface markers {
+    /**
+     * 标点id
+     */
+    id?: number
+    /**
+     * 维度
+     */
+    latitude?: number
+    /**
+     * 经度
+     */
+    longitude?: number
+    /**
+     * 标点图标
+     */
+    iconPath?: string
+    /**
+     * 标点图标宽度
+     */
+    width?: number
+    /**
+     * 标点图标高度
+     */
+    height?: number
+  }
 }

+ 1 - 0
src/api/apiDefinitions.ts

@@ -80,4 +80,5 @@ export default {
   'charge.search': ['GET', '/smqjh-system/applet/v1/station/search'],
   'charge.chargeingCost': ['GET', '/smqjh-system/applet/v1/station/charging-cost'],
   'charge.stopCharge': ['POST', '/smqjh-system/applet/v1/station/stopCharge'],
+  'charge.stationInfoMapList': ['GET', '/smqjh-system/applet/v1/homePage/getStationInfoMapList'],
 };

+ 13 - 2
src/api/globals.d.ts

@@ -741,8 +741,8 @@ declare global {
         Config extends Alova2MethodConfig<apiResData<any>> & {
           data: {
             keyword?: string;
-            longitude?: number|null
-            latitude?: number|null
+            longitude?: number | null
+            latitude?: number | null
           }
         }
       >(
@@ -768,6 +768,17 @@ declare global {
       >(
         config: Config
       ): Alova2Method<listData<Api.stopChargeList>, 'charge.stopCharge', Config>;
+
+      stationInfoMapList<
+        Config extends Alova2MethodConfig<apiResData<any>> & {
+          data: {
+            longitude?: number|null;
+            latitude?: number|null;
+          }
+        }
+      >(
+        config: Config
+      ): Alova2Method<apiResData<any>, 'charge.stationInfoMapList', Config>;
     }
   }
 }

+ 87 - 8
src/subPack-charge/chargeMap/chargeMap.vue

@@ -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>

+ 0 - 1
src/subPack-charge/index/index.vue

@@ -8,7 +8,6 @@ import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
 const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
 const { token, userInfo } = storeToRefs(useUserStore())
 const { Location } = storeToRefs(useAddressStore())
-// const swiperList = ['https://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpg']
 definePage({
   name: 'charge-index',
   islogin: false,