生活圈

src/api/lingCircle.js

@@ -1,10 +1,17 @@
 // axios
 import request from '@/utils/request'
 
-//获取我的社区
+//获取生活圈
 export function sphereLifeSearchList(parm) {
     return request({
       url: `/voluntary/sphereLife/searchList?lon=${parm.lon}&lat=${parm.lat}&name=${parm.name}`,
       method: 'get',
     })
   }
+  //获取生活圈
+export function sphereLifeSearcdetail(id) {
+  return request({
+    url: `/voluntary/sphereLife/detail/${id}`,
+    method: 'get',
+  })
+}

src/router/router.config.js

@@ -21,6 +21,12 @@ export const constantRouterMap = [
     component: () => import('@/views/livingCircle'),
     meta: { title: '生活圈', keepAlive: false }
   },
+  {
+    path: '/livingCircleDetail',
+    name: 'livingCircleDetail',
+    component: () => import('@/views/livingCircle/detail.vue'),
+    meta: { title: '生活圈详情', keepAlive: false }
+  },
   {
     path: '/mine',
     name: 'mine',

src/views/livingCircle/detail.vue

@@ -0,0 +1,350 @@
+<template>
+    <div>
+        <div class="flex flex-mean" style="background-color: #FFFFFF; height: 150px;">
+            <!-- <van-search class=".flex flex-1" v-model="searchValue" left-icon="" shape="round" placeholder="请输入搜索关键词" />
+            <van-button round type="applyList" class="custom-button font-size13 m-top10 m-right12" @click="onSearch()">查询</van-button> -->
+            <!-- <van-image src="../../assets/images/servicePhone/" /> -->
+            <img :src="applyList.attrs[0].url" style="width: 100%; height: 150px;" />
+        </div>
+        <div class='' style="position: relative;top: -10px;">
+            <div class="card">
+                <div class=" flex flex-y p0">
+                    <div class="flex flex-x  flex-center2">
+                        <h2 style="margin: 0; font-size: 21px; ">{{ applyList.name }}</h2>
+                        <van-tag size="medium" color="#ffefd6" style="margin-left: 10px;"
+                            text-color="#ff8707">{{applyList.type}}/{{typeNames}}</van-tag>
+
+                    </div>
+                    <div>
+                        <div>
+                            <van-tag v-for=" (item,index) in tabs" round type="warning" color="#f2f2f2" size="medium" text-color="#6e6e6e">{{item.tab}}</van-tag>
+                             <div style="font-size: 16px;color: #999999; line-height: 30px;">
+                                <img src="">
+                                <span>活动时间:
+                                </span><span>{{ applyList.strTime }} 至 {{ applyList.endTime}}</span></div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <div class='container' style="position: relative;top: -10px;">
+            <div class="card">
+                <div class="m-top15 p0">
+                    <h2 style="margin: 0; font-size: 21px;">活动信息</h2>
+                    <div style="font-size: 16px;color: #999999; line-height: 30px;"><span>所属项目: </span><span
+                            style="color: black;">{{applyList.projectName}}</span></div>
+                    <div style="font-size: 16px;color: #999999; line-height: 30px;"><span>招募截止: </span><span
+                            style="color: black;">{{applyList.deadline}}</span></div>
+                    <div style="font-size: 16px;color: #999999; line-height: 30px;"><span>签到时间: </span><span
+                            style="color: black;">{{applyList.signInTime+' 至 '+applyList.signOutTime}}</span></div>
+                    <div style="font-size: 16px;color: #999999; line-height: 30px;"><span>活动名额: </span><span
+                            style="color: black;"><span v-if="applyList.notQuota === 1">{{applyList.quota}}</span>
+                            <tspanext v-else>不限名额</tspanext>
+                        </span></div>
+                    <div style="font-size: 16px;color: #999999; line-height: 30px;"><span>主办方: </span><span
+                            style="color: black;">{{ActName?ActName:'-'}}</span></div>
+                    <div style="font-size: 16px;color: #999999; line-height: 30px;"><span>联系人: </span><span
+                            style="color: black;">{{applyList.linkman}}</span></div>
+                    <div style="font-size: 16px;color: #999999; line-height: 30px;"><span>联系电话: </span><span
+                            style="color: black;">{{applyList.linkman}}</span></div>
+                    <div style="font-size: 16px;color: #999999; line-height: 30px;"><span>活动时长: </span><span
+                            style="color: black;">{{applyList.serviceTime}}小时</span></div>
+                    <div style="font-size: 16px;color: #999999; line-height: 30px;"><span>积分奖励: </span><span
+                            style="color: black;">{{applyList.points}}</span></div>
+                </div>
+            </div>
+        </div>
+        <div class='container' style="position: relative;top: -10px;">
+            <div class="card">
+                <div class="m-top15 p0">
+                    <h2 style="margin: 0; font-size: 21px;">招募要求</h2>
+                    <div v-html="applyList.conditions"></div>
+                </div>
+            </div>
+        </div>
+
+        <Android @send-number="handleNumber" />
+    </div>
+
+</template>
+
+<script>
+import {sphereLifeSearcdetail } from "@/api/lingCircle"
+import Share from "@/components/Share"
+import registerDialog from '@/components/registerDialog';
+import { setConfig } from '@/utils/jweixin'
+import { Toast, Dialog } from 'vant'
+
+export default {
+    data() {
+        return {
+            options: [
+                {
+                    "children": [
+                        {
+                            "pv": "1",
+                            "value": "11",
+                            "label": "托儿所"
+                        },
+                        {
+                            "pv": "1",
+                            "value": "12",
+                            "label": "幼儿园"
+                        },
+                        {
+                            "pv": "1",
+                            "value": "13",
+                            "label": "小学"
+                        },
+                        {
+                            "pv": "1",
+                            "value": "14",
+                            "label": "中学"
+                        },
+                        {
+                            "pv": "1",
+                            "value": "15",
+                            "label": "培训机构"
+                        },
+                        {
+                            "pv": "1",
+                            "value": "16",
+                            "label": "其它"
+                        }
+                    ],
+                    "value": "1",
+                    "label": "教育培训"
+                },
+                {
+                    "children": [
+                        {
+                            "pv": "2",
+                            "value": "21",
+                            "label": "门诊"
+                        },
+                        {
+                            "pv": "2",
+                            "value": "22",
+                            "label": "社区医院"
+                        },
+                        {
+                            "pv": "2",
+                            "value": "23",
+                            "label": "医院"
+                        },
+                        {
+                            "pv": "2",
+                            "value": "24",
+                            "label": "其它"
+                        }
+                    ],
+                    "value": "2",
+                    "label": "医疗卫生"
+                },
+                {
+                    "children": [
+                        {
+                            "pv": "3",
+                            "value": "31",
+                            "label": "餐饮"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "32",
+                            "label": "超市"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "33",
+                            "label": "理发"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "34",
+                            "label": "书店"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "35",
+                            "label": "便利店"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "36",
+                            "label": "市场"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "37",
+                            "label": "五金"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "38",
+                            "label": "照相"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "39",
+                            "label": "综合修理"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "30",
+                            "label": "服务站"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "330",
+                            "label": "农贸市场"
+                        },
+                        {
+                            "pv": "3",
+                            "value": "331",
+                            "label": "其它"
+                        }
+                    ],
+                    "value": "3",
+                    "label": "商业服务"
+                },
+                {
+                    "children": [
+                        {
+                            "pv": "4",
+                            "value": "41",
+                            "label": "电影院"
+                        },
+                        {
+                            "pv": "4",
+                            "value": "42",
+                            "label": "歌剧院"
+                        },
+                        {
+                            "pv": "4",
+                            "value": "43",
+                            "label": "图书馆"
+                        },
+                        {
+                            "pv": "4",
+                            "value": "44",
+                            "label": "游泳馆"
+                        },
+                        {
+                            "pv": "4",
+                            "value": "45",
+                            "label": "活动中心"
+                        },
+                        {
+                            "pv": "4",
+                            "value": "46",
+                            "label": "体育馆"
+                        },
+                        {
+                            "pv": "4",
+                            "value": "47",
+                            "label": "其它"
+                        }
+                    ],
+                    "value": "4",
+                    "label": "文化体育"
+                },
+                {
+                    "value": "5",
+                    "label": "其它"
+                }
+            ],
+            tabs:[],
+            applyList:{},
+        };
+    },
+    created() {
+
+    },
+   async mounted() {
+
+        // setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData'])
+        if (this.$route.query.id) {
+            console.log(this.$route.query.id);
+            
+            this.sphereLifeId= this.$route.query.id
+        //    await this.detail(this.$route.query.id)
+        //    if(this.$route.query.flag === 'share'){
+        //    await this.getById(this.$route.query.id)
+        //    }
+        //    await this.share()
+           this.activityApplyList( this.$route.query.id)
+        //    this.activitySignIn(1)
+        //    this.activitySignIn(0)
+        }
+    },
+    methods: {
+        //获取生活圈详情
+        activityApplyList(id) {
+            sphereLifeSearcdetail(id).then(res => {
+                if (res.code === 0) {
+                    this.applyList = res.data
+                    this.tabs = res.data.tags.split(',').map(tag => ({ tab: tag.trim() }))
+                    console.log(tabs, "sdalkjflksdf");
+
+              
+             
+                }
+            }).catch(err => {
+
+            })
+        },        
+
+      
+
+      
+    },
+    components: { Share, registerDialog },
+    computed: {
+        disabledRecord() {
+            return (item) => {
+                if (!item.cutOffTime || item.online != 1) return true
+                let flag = new Date(item.cutOffTime.replace(/-/g, '/')).getTime() < Date.now() || item.currentParticipants >= item.participants  || item.currentParticipants >= item.participants;
+                return flag || false
+            }
+        },
+    },
+    watch: {},
+}
+</script>
+
+<style lang='less' scoped>
+.phone{
+    height: 50px;
+    bottom:8vh;
+}
+:deep img{
+    max-width: 100%;
+}
+:deep(.p0>.van-cell) {
+    padding: 0;
+}
+
+:deep(.van-cell) {
+    padding: 16px 8px;
+}
+
+:deep(.van-cell__title) {
+    color: #666666;
+    display: flex;
+
+    &>span {
+        flex: 1;
+    }
+}
+
+:deep(.van-cell__value) {
+    text-align: left;
+}
+
+:deep(.van-cell--required) {
+    &::before {
+        left: -5px;
+    }
+}
+</style>

src/views/livingCircle/index.less

@@ -0,0 +1,133 @@
+/* pages/livingCircle/livingCircle.wxss */
+
+.map-view-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    background: #F8F8F7;
+    width: 100%;
+}
+.map-view-content {
+    width: 100%;
+    background: #FFF;
+    padding: 10px 0 10px; /* 原来是 20px */
+    margin-top: 5px; /* 原来是 10px */
+}
+#map {
+    width:100%;
+    height:50vh; /* 原来是 100vh */
+    position: relative;
+}
+
+.zoom-in, .zoom-out {
+    position: absolute;
+    width: 20px; /* 原来是 40px */
+    height: 20px; /* 原来是 40px */
+    color:#3fc971;
+    background-color: white;
+    border: 1px solid #3fc971;
+    text-align: center;
+    line-height: 20px; /* 原来是 40px */
+    font-size: 15px; /* 原来是 30px */
+    box-sizing: border-box;
+    font-weight: bold;
+}
+
+.zoom-in {
+    right: 5px; /* 原来是 10px */
+    bottom: 44px; /* 原来是 88px */
+}
+
+.zoom-out {
+    right: 5px; /* 原来是 10px */
+    bottom: 25px; /* 原来是 50px */
+}
+.van-search__content {
+    border:solid red 1px; /* 原来是 2px */
+}
+.movable-area{
+    pointer-events:none;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+.toCommunity{
+    width: 75px; /* 原来是 150px */
+    height: 75px; /* 原来是 150px */
+}
+.movable-view{ 
+    pointer-events:auto;
+    height: 30px; /* 原来是 60px */
+    width: 90px; /* 原来是 180px */
+    font-size: 13px; /* 原来是 26px */
+}
+.content{
+    background-color: #FFF;
+    border-radius: 15px 0  0 15px; /* 原来是 30px */
+    padding: 8px; /* 原来是 16px */
+    box-sizing: border-box;
+}
+.tab{
+    background-color: #FFF;
+    width: 100%;
+    overflow-x: scroll;
+}
+.item{
+    padding: 5px 0; /* 原来是 10px */
+    box-sizing: border-box;
+    color: #666666;
+    min-width: 75px; /* 原来是 150px */
+    text-align: center;
+    margin-right: 10px; /* 原来是 20px */
+}
+.active{
+    color: #ea2325;
+    border-bottom: 3px solid #ea2325; /* 原来是 6px */
+}
+.map_item{
+    background-color: #ffffff;
+    border-radius: 5px; /* 原来是 10px */
+    padding: 10px; /* 原来是 20px */
+    box-sizing: border-box;
+    margin-top: 10px; /* 原来是 20px */
+}
+.tag{
+    width: fit-content;
+    padding: 3px 5px; /* 原来是 6px 10px */
+    box-sizing: border-box;
+    border-radius: 8px 8px 8px 0; /* 原来是 15px */
+    margin: 5px 0 10px 0; /* 原来是 10px 0 20px 0 */
+}
+
+.tag-g{
+    color:#009e8d;
+    background-color: #dcf4f0;
+}
+.tag-r{
+    color:#ff6363;
+    background-color: #ffefef;
+} 
+.tag-b{
+    color:#5a77ec;
+    background-color: #e4e9fc;
+}
+.left_image{
+    width: 70px; /* 原来是 140px */
+    height: 70px; /* 原来是 140px */
+    margin-right: 12px; /* 原来是 24px */
+    border-radius: 5px; /* 原来是 10px */
+}
+.navigation{
+    width: 20px; /* 原来是 20px */
+    height: 20px; /* 原来是 20px */
+}
+
+.ellipsis{
+    padding: 0;
+}

src/views/livingCircle/index.vue

@@ -6,28 +6,57 @@
             <van-button round type="info" class="custom-button font-size13 m-top10 m-right12"
                 @click="handleSearch">查询</van-button>
         </div>
-        <van-tabs>
+        <van-tabs @change="onTabChange" >
-            <van-tab v-for="item in tagList" :key="item.value" :title="item.name">
+            <van-tab v-for="item in tagList" :key="item.value" :title="item.name"    @click="() => tabClick(item)">
             </van-tab>
         </van-tabs>
         <div>
             <div id="content1"></div>
-            <div style=" background-color: rgb(255, 255, 255);position: fixed;right: 0;top: 30%;" @click="selectMap">
+            <div class="InfoMap flex-center1 flex-center2" style="display: flex;flex-direction: row;  background-color: rgb(255, 255, 255);position: fixed;right: 0;top: 30%;" @click="selectMap">
                 <div>
-                    <img src="">
+                    <img style="width: 14px; height: 14px;"   :src="showModal 
+    ? require('../../assets/images/livingCircle/list.png') 
+    : require('../../assets/images/livingCircle/address.png')">
                 </div>
-                查看地图
+                <div style="font-size: 15px; margin-left: 3px;">{{showModal?'查看地图':'查看列表'}}</div>
+         
             </div>
         </div>
         <div>
     <van-popup
       round
       position="bottom"
-      v-if="showModal"
+      v-model="showModal"
+       :style="{ height: '50%' }"
       @close="onClose"
+      style="z-index: 10px;"
+      :popup-background-color="'#F6F7F9'" 
 
     >
-222
+    <div class="container">
+       
+            <div v-for="(item, index) in tableList" :key="index" class="map_item flex flex-center-i" @click="toDetail(item)">
+        <img 
+          :src="item.attrs && item.attrs.length > 0 ? item.attrs[0].url : 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240927/087bb3a330a6494b9b09b5341c309ced.png'" 
+          class="left_image"
+        />
+        <div class="flex flex-1 flex-y flex-sb">
+          <div style="font-size:18px ;" class="font-size-30 font-bold ellipsis">{{ item.name }}</div>
+          <div style="font-size: 16px;" :class="item.type === 'relaxation' ? 'tag-g' : item.type === '志愿阵地' ? 'tag-b' : item.type === '志愿组织' ? 'tag-r' : 'tag-g'" class="tag font-size-20">
+            {{ item.type }}
+          </div>
+          <div style="font-size: 15px;" class="">距我{{ item.distance }}km</div>
+        </div>
+        <div class="flex flex-y flex-center-j" @click="routePlanning(item)">
+          <img src="../../assets/images/livingCircle/navigation.png" class="navigation" />
+          <text class="color-gray font-size-20">导航</text>
+        </div>
+      </div>
+      <!-- 分隔符 -->
+      <div style="height: 120rpx;width: 100%;"></div>
+     
+    </div>
+        
       <!-- <no-data v-if="list.length === 0"></no-data> -->
     </van-popup>
 
@@ -39,14 +68,15 @@
 
 <script>
 import {Popup } from '@/plugins/vant'
-import coordtransform from 'coordtransform'
 import Map from '@/components/Map'
 import { sphereLifeSearchList } from '@/api/lingCircle';
-import { wgs84_to_gcj02 } from "../../utils/wgs84_to_gcj02";
+import { wgs84togcj02, gcj02tobd09 } from 'coordtransform';
 
 export default {
     data() {
         return {
+            markers:[],
+            tableList:[],
             overlay:true,
             showModalDetail:false,
             PublicityList: [],
@@ -67,19 +97,26 @@ export default {
         };
     },
     created() {
-
         this.agencyId = this.$route.query.agencyId?this.$route.query.agencyId: this.$store.state.app.agencyId;
         // this.advertisingTag();//获取社区讯息菜单
 
+
     },
-    mounted(){
+    async  mounted(){
-        this.loadMap();
+        await   this.sphereLifeSearchList()//获取讯息列表
+        await  this.loadMap();
     },
     methods: {
+        onTabChange(index) {
+            const selectedTab = this.tagList[index];
+            this.tableList=this.tableList.filter(item=>item.type===selectedTab.name)
+            this.loadMarkers(this.tableList)
+        },
         //关闭
         onClose() {
           this.showModal=false,
           this.showModalDetail=false
+          this.sphereLifeSearchList()
     
   },
         //查看生活圈列表
@@ -99,27 +136,52 @@ export default {
             document.body.appendChild(script);
         },
         initMap() {
+            console.log("sdklfjlksdf");
             // 创建地图实例
             const map = new qq.maps.Map(document.getElementById('content1'), {
                 center: new qq.maps.LatLng(39.916527, 116.397128), // 北京
-                zoom: 15, // 缩放级别
+                zoom: 14, // 缩放级别
-                scrollwheel:true
+                scrollwheel: true
             });
+            console.log(this.markers,"sdlkjflisdf");
+            
+            this.markers.forEach(markerData => {
+                console.log(markerData,"sdflkhs");
+                
                 const marker = new qq.maps.Marker({
-                position: new qq.maps.LatLng(39.916527, 116.397128), // 标记位置
+                    position: new qq.maps.LatLng(markerData.latitude, markerData.longitude),
-                map: map, // 添加到地图
+                    map: map,  // 地图实例
-                draggable: true, //允许鼠标拖动
+                    icon: new qq.maps.MarkerImage(
-                scrollwheel:true
+                        markerData.iconPath,
+                        null,
+                        null,
+                        null,
+                        new qq.maps.Size(markerData.width, markerData.height)
+                    ),
+                    zIndex: markerData.zindex
+                });
+
+                // 可以在这里添加点击事件
+                qq.maps.event.addListener(marker, 'click', () => {
+                    console.log("Marker clicked:", markerData.id);
+                    this.showModal=true
+                 this.tableList=this.tableList.filter((item) => item.id === markerData.id);
+                    console.log(this.showModal,this.tableList,"dslkjsl");
+                    
+                });
             });
             const circle = new qq.maps.Circle({
                 center: new qq.maps.LatLng(36.08743, 120.37479),
-          radius: 800,
+                radius: 1500,
                 strokeColor: "#FF0000",
                 strokeWeight: 2,
+
                 //   fillColor: "rgba(255, 0, 0, 0.3)",
                 //   fillOpacity: 0.3
             });
+            
         circle.setMap(map)
+   
             // 获取用户当前位置
             this.getUserLocation(map);
         },
@@ -142,11 +204,11 @@ export default {
             console.log(map,"dsl;sfkjslk");
             this.longitude=map.center.lng
             this.latitude=map.center.lat
-            this.sphereLifeSearchList()//获取讯息列表
+          
         },
 
         toDetail(item){
-            this.$router.push({name:'communityPublicityDetail',query:{id:item.id}})
+            this.$router.push({name:'livingCircleDetail',query:{id:item.id}})
         },
         handleSearch(){
             this.PublicityList = [];
@@ -155,29 +217,67 @@ export default {
         },     
         async sphereLifeSearchList(searchKey) {
             let parm = {
-                lon: this.longitude,//'120.372537'
+                lon: '120.3733448537755',//'120.372537'
-                lat: this.latitude,//'36.098056'
+                lat: '36.087769447807496',//'36.098056'
                 name: searchKey || ''
             }
-            console.log(parm,"sdflksdjflkjdsfk");
+            console.log(parm, "sdflksdjflkjdsfk");
 
             let res = await sphereLifeSearchList(parm)
             if (res.code === 0) {
                 this.loading = false;
-                res.data.list.forEach(item => {
+                this.tableList = res.data.map(item => {
-                    if (item.content) {
+                    if (item.latitude) {
-                        item.newContent = this.extractChineseCharactersAndPunctuation(item.content)
+                        item.distance = this.getDistance(this.latitude, this.longitude, item.latitude, item.longitude).toFixed(2)
+                        return item
                     }
+
                 })
-                if (!res.data || res.data.list.length < this.pageSize) {
-                    this.finished = true;
-                }
-                this.PublicityList = this.PublicityList.concat(res.data.list);
             }
+            this.loadMarkers(res.data);
         },
-        extractChineseCharactersAndPunctuation(str) {
+        loadMarkers(markers) {
-            const chineseCharsAndPunctuation = str.match(/[\u4e00-\u9fa5\u3000-\u303F\uff00-\uffef]/g);
+            this.markers = [];
-            return chineseCharsAndPunctuation ? chineseCharsAndPunctuation.join('') : '';
+            console.log(markers,"sdfkljofdl");
+            let markersData = markers.map((marker, index) => {
+                return {
+                    id: marker.id,
+                    longitude: marker.longitude,
+                    latitude: marker.latitude,
+                    title: marker.name,
+                    iconPath: marker.type === 'user' ? 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/internal/20241111/3594d75211b04b21aaba60d7d9084db0.jpg' 
+                    : marker.type === 'relaxation' ? 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/internal/20241111/64cc030d80004e22a5f73f9838fe73a6.png' : 
+                     'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/internal/20241111/64cc030d80004e22a5f73f9838fe73a6.png',
+                    width: 28,
+                    height: 28,
+                    zindex: 12,
+                    data: marker
+                };
+            });
+            markersData.push({
+                type: 'user',
+                longitude: this.longitude,//'120.372537'
+                latitude: this.latitude,//'36.098056'
+                width: 28,
+                height: 38,
+                zindex: 10,
+            });
+            console.log(markersData, '渲染前点位');
+            this.markers = markersData
+            this.initMap();  // 确保调用 initMap 更新地图
+
+        },
+        // 根据两个经纬度获取当前距离
+        getDistance(lat1, lon1, lat2, lon2) {
+            const R = 6371;
+            const dLat = (lat2 - lat1) * Math.PI / 180;
+            const dLon = (lon2 - lon1) * Math.PI / 180;
+            const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+                Math.sin(dLon / 2) * Math.sin(dLon / 2);
+            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+            const distance = R * c; // 距离，单位为千米
+            return distance;
     },
 
     },
@@ -188,6 +288,7 @@ export default {
 </script>
 
 <style lang='less'  scoped>
+@import './index.less';
 .text2{
     font-family: PingFang SC;
         font-weight: 500;
@@ -292,10 +393,14 @@ export default {
 ::v-deep .van-search__input {
   color: #000; 
 }
+::v-deep .van-popup {
+    background-color: #F6F7F9;
+}
 
 ::v-deep .van-field__control::placeholder {
   color: #A0A0A0; 
 }
+
 :deep(.van-field__control) {
     font-size: 13px;
 }
@@ -311,4 +416,11 @@ export default {
   width: 100%;
   height: 600px; /* 确保有足够的高度 */
 }
+.InfoMap{
+    width: 92px;
+        height: 34px;
+        background: #FFFFFF;
+        box-shadow: 0px 1px 5px 0px rgba(185, 185, 185, 0.75);
+        border-radius: 17px 0px 0px 17px;
+}
 </style>