Przeglądaj źródła

refactor(about): 优化联系组件数据传递和地图标记实现

- 移除组件内静态参数生成函数,改为页面层获取数据
- 添加 LocationInfo 类型定义用于位置信息结构
- 将位置信息列表通过 props 传递给 ContactUs 组件
- 优化地图标记渲染逻辑,直接使用传入的位置数据列表
- 简化地图初始化过程中的数据处理流程
nahida 5 miesięcy temu
rodzic
commit
52d6dd68b3
3 zmienionych plików z 49 dodań i 39 usunięć
  1. 10 1
      src/app/about/page.tsx
  2. 16 38
      src/components/about/ContactUs.tsx
  3. 23 0
      src/types/index.ts

+ 10 - 1
src/app/about/page.tsx

@@ -38,6 +38,15 @@ export default async function Home() {
     cache: "force-cache"
   })
 
+  const locationInfoRes = await serverGet<LocationInfo[]>("/webSite/getLocationInforList", {
+    next: {
+      revalidate: 1800
+    },
+    cache: "force-cache"
+  })
+
+  const locationInfoList = locationInfoRes.data || []
+
   const basicInfo = basicInfoRes.data?.[0] || {
     address: "",
     companyProfile: "",
@@ -164,7 +173,7 @@ export default async function Home() {
         </AnimatedSection>
         {/* 联系我们 */}
         <AnimatedSection effect="slide" direction="left">
-          <ContactUs basicInfo={basicInfo}/>
+          <ContactUs basicInfo={basicInfo} locationInfoList={locationInfoList}/>
         </AnimatedSection>
       </div>
     </>

+ 16 - 38
src/components/about/ContactUs.tsx

@@ -3,39 +3,19 @@ import React, {useEffect} from 'react';
 import SubTitle from "@/components/subTitle";
 import {BDMapGL} from "@/utils/BDMap";
 import Image from "next/image";
-import {serverGet, serverPost} from "@/utils/request";
 
-export async function generateStaticParams() {
-  const basicInfoRes = await serverGet<BasicInfo[]>("/webSite/getLocationInforList", {
-    next: {
-      revalidate: 1800
-    },
-    cache: "force-cache"
-  })
-  return basicInfoRes.data
-}
-function ContactUs({basicInfo}: {basicInfo: BasicInfo}) {
-  const BASE_URL:string = process.env.NEXT_PUBLIC_BASE_URL as string;
+function ContactUs({basicInfo, locationInfoList}: { basicInfo: BasicInfo, locationInfoList: LocationInfo[] }) {
+  const BASE_URL: string = process.env.NEXT_PUBLIC_BASE_URL as string;
 
   const BDMapInit = () => {
     BDMapGL('94KOPB1NRjoXmLvlJN6HMi7eVC50z09K').then((BMapGL: any) => {
       const map = new BMapGL.Map('container')
-      let pointLists;
-
-      // { lng: 112.863450, lat: 28.178478, name: "长沙市", address: "北京市东城区东长安街" },
-      // { lng: 110.009930, lat: 27.582966, name: "怀化市", address: "北京市东城区景山前街4号" },
-      // { lng: 110.400296, lat: 28.459076, name: "沅陵县", address: "北京市海淀区新建宫门路19号" },
-      // { lng: 113.141009, lat: 27.837841, name: "株洲市", address: "北京市海淀区新建宫门路19号" }
-
-      generateStaticParams().then((resultArray) => {
-        pointLists = resultArray; // 获取数组第1个元素
-        console.log(1111,pointLists)
-        pointLists.forEach(point => {
-          const bmapPoint = new BMapGL.Point(point.longitude, point.latitude);
-          const marker = new BMapGL.Marker(bmapPoint);
+      locationInfoList.forEach(point => {
+        const bmapPoint = new BMapGL.Point(point.longitude, point.latitude);
+        const marker = new BMapGL.Marker(bmapPoint);
 
-          // 创建信息窗口(内容可自定义 HTML)
-            const infoWindow = new BMapGL.InfoWindow(`
+        // 创建信息窗口(内容可自定义 HTML)
+        const infoWindow = new BMapGL.InfoWindow(`
             <div>
               <h4>姓名:${point.name}</h4>
               <p style="margin: 5px 0 0; color: #666;">区域:${point.marker}</p>
@@ -43,19 +23,17 @@ function ContactUs({basicInfo}: {basicInfo: BasicInfo}) {
             </div>
           `);
 
-          // 绑定点击事件:点击标记点显示信息窗口
-          marker.addEventListener("click", () => {
-            map.openInfoWindow(infoWindow, bmapPoint); // 在点位坐标处打开窗口
-          });
-
-          map.centerAndZoom(bmapPoint, 7)
-          map.enableScrollWheelZoom(true) //设置鼠标放大缩小
-          map.addControl(new BMapGL.ScaleControl()) //卡尺
-          map.addOverlay(marker)
+        // 绑定点击事件:点击标记点显示信息窗口
+        marker.addEventListener("click", () => {
+          map.openInfoWindow(infoWindow, bmapPoint); // 在点位坐标处打开窗口
         });
-      }).catch((err) => {
-        console.error("Promise 执行失败:", err);
+
+        map.centerAndZoom(bmapPoint, 7)
+        map.enableScrollWheelZoom(true) //设置鼠标放大缩小
+        map.addControl(new BMapGL.ScaleControl()) //卡尺
+        map.addOverlay(marker)
       });
+
     })
   }
   const qrCodeUrl = BASE_URL + basicInfo.qrCodeUrl

+ 23 - 0
src/types/index.ts

@@ -262,3 +262,26 @@ interface ProductCenter {
     productModel?: string;
 
 }
+
+interface LocationInfo {
+    /** 唯一标识 ID */
+    id: string;
+    /** 名称 */
+    name: string;
+    /** 手机号 */
+    phone: string;
+    /** 经度 */
+    longitude: number;
+    /** 纬度 */
+    latitude: number;
+    /** 标记内容 */
+    marker: string;
+    /** 创建人 */
+    createBy: string;
+    /** 创建时间(ISO 格式字符串) */
+    createTime: string;
+    /** 更新人 */
+    updateBy: string;
+    /** 更新时间(ISO 格式字符串) */
+    updateTime: string;
+}