epmet-apartment-mp/pages/life/life.js

/*
 * @Author: mk 2403457699@qq.com
 * @Date: 2024-08-19 14:08:31
 * @LastEditors: mk 2403457699@qq.com
 * @LastEditTime: 2024-10-21 11:08:03
 * @FilePath: \epmet-voluntary-mp\pages\livingCircle\livingCircle.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// import {sphereLifeSearchList} from "../../api/livingCircle"
const app = getApp()
Page({
  data: {
      longitude:'', //经度
      latitude: '', //维度
      scale: 13, //地图默认缩放等级
      markers: [], //点位数据
      showModal: true, //弹框显隐
      modalData: {}, //详情信息
      circles:[{
        latitude: '',
        longitude: '',
        color: "#09b8b6",
        fillColor: '#09b8b626',
        radius: 1800,
        strokeWidth: 2,
      }],
      active:0,
      pageNo:1,
      tabList:[{name:'全部',value:0},{name:'教育培训',value:1},{name:'医疗卫生',value:2},{name:'商业服务',value:3},{name:'文化体育',value:4},{name:'金融电邮',value:5},{name:'其他',value:6},],
      list:[],
      showModalDetail:false,
      detailList:[],
      tableList:[],
      community:{}
  },

  onLoad: function (options) {
    
  },
  onHide(){
    if(wx.getStorageSync('livingCircleType')){
        wx.removeStorage({
          key: 'livingCircleType',
        })
    }
  },
  async onShow() {
    this.mapCtx = wx.createMapContext('map');
    let than = this;
    try {
      const location = await new Promise((resolve, reject) => {
        wx.getLocation({
          type: 'gcj02',
          success(res) {
            resolve(res); 
          },
          fail(err) {
            reject(err); 
          }
        });
      });
      than.setData({
        longitude: location.longitude,
        latitude: location.latitude,
        'circles[0].longitude': location.longitude,
        'circles[0].latitude': location.latitude,
      });
      // 重置列表
      than.restList();
    //   await than.sphereLifeSearchList();
      if( wx.getStorageSync('livingCircleType')){
        this.setData({
          active: wx.getStorageSync('livingCircleType')
        })
      }
      if(than.data.active == '1'){
        this.loadMarkers([{
          type: 'community',
          longitude: this.data.community.longitude,//'120.372537'
          latitude: this.data.community.latitude,//'36.098056'
          width: 28,
          height: 38,
          zindex:10,
        }])
      }else if(than.data.active != '1'){
        this.filterList(than.data.active)
      }
    } catch (err) {
      console.error('获取位置失败', err);
    }
  },
  handelSearch(e){
   this.sphereLifeSearchList(e.detail)
   if(this.data.active == '3'){
      this.filterList('3')
    }else if(this.data.active == '2'){
      this.filterList('2')
    }else if(this.data.active == '0'){
      this.filterList('0')
    }else if(this.data.active != '1'){
      this.filterList(this.data.active)
    }
    this.loadMarkers(this.data.list)
  },
  async sphereLifeSearchList(searchKey) {
    try {
      let parm = {
        lon: this.data.longitude,//'120.372537'
        lat: this.data.latitude,//'36.098056'
        name: searchKey || ''
      };
      
      const res = await sphereLifeSearchList(parm); // 使用 await 等待异步请求完成
      
      if (res.code === 0 && res.data) {
        // 处理返回的数据
        res.data = res.data.map(item => {
          if (item.latitude) {
            item.distance = this.getDistance(this.data.latitude, this.data.longitude, item.latitude, item.longitude).toFixed(2);
          }
          return item;  // 返回修改后的 item
        });
        
        this.setData({
          tableList: res.data
        });
        this.loadMarkers(res.data);
        
      } else {
        this.restList();
        this.loadMarkers([]);
      }
    } catch (err) {
      console.log(err);
      this.restList();
      this.loadMarkers([]);
    }
  },
  loadMarkers(markers){
      let markersData = markers.map((marker,index) => {
          console.log(marker.type,);
          return {
              id:index,
              longitude: marker.longitude,
              latitude: marker.latitude,
              title: marker.name,
              iconPath: marker.type === 'user'?'../../images/map/map-poi.png': marker.type === 'relaxation'?'../../images/map/relaxation.png':marker.type === '阵地'?'../../images/map/position.png':marker.type==='志愿组织'?'../../images/map/organization.png': marker.type === 'community'?'../../images/map/community.png':'../../images/map/relaxation.png',
              width: 28,
              height: 28,
              zindex:12,
              data:marker
          };
      });
      markersData.push({
        type: 'user',
        longitude: this.data.longitude,//'120.372537'
        latitude: this.data.latitude,//'36.098056'
        width: 28,
        height: 38,
        zindex:10,
      });
      console.log(markersData,'渲染前点位');
      console.log(this.data.active);
      this.setData({
          markers: markersData,
          // showModal:this.data.active !== 1?true:false,//默认打开列表，禅道-1801
      });
  },

  
  onClickTab(e){
    this.setData({
        markers:[],
        active:e.currentTarget.dataset.value
    })
    this.restList()
    if(e.currentTarget.dataset.value == '1'){
      this.loadMarkers([{
        type: 'community',
        longitude: this.data.community.longitude,//'120.372537'
        latitude: this.data.community.latitude,//'36.098056'
        width: 28,
        height: 38,
        zindex:10,
      }])
    }else if(e.currentTarget.dataset.value != '1'){
      this.filterList(e.currentTarget.dataset.value)
    }
  },

  markertap(e) {
      let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId);
      if(this.data.active !== 1){
        this.setData({
          showModalDetail: true,
          detailList:[markerData.data]
        });
      }else{
        let key = 'T5YBZ-OHPW4-77SUI-KZVFO-LYQL5-4OBTA';
        let referer = '北邻家'; 
        let endPoint = JSON.stringify({  //终点
            'name': app.globalData.userInfo.agencyName + '服务点',
            'latitude':this.data.community.latitude,
            'longitude':this.data.community.longitude
        });
        wx.navigateTo({
            url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
        });
      }
      
  },
  onClikTab(){
    this.restList()
    if(this.data.active =='3'){
      this.filterList('3')
    }else if(this.data.active =='2'){
      this.filterList('2')
    }else if(this.data.active =='0'){
      this.filterList('0')
    }else if(this.data.active !='1'){
      this.filterList(this.data.active)
    }
    this.setData({
        showModal: !this.data.showModal,
    });
  },
  filterList(type){
    if(type == '0'){
      this.setData({
        list:this.data.tableList.filter(item=>item.type !== '场所')
      })
    }else if (type == '2'){
      this.setData({
        list:this.data.tableList.filter(item=>item.type === '志愿组织')
      })
    }else if (type == '3'){
      this.setData({
        list:this.data.tableList.filter(item=>item.type === '阵地')
      })
    }else if (type != '1'){
      if(type == '4'){
        this.setData({
          list:this.data.tableList.filter(item=>item.type === '教育培训')
        })
      }else if(type == '5'){
        this.setData({
          list:this.data.tableList.filter(item=>item.type === '医疗卫生')
        })
      }else if(type == '6'){
        this.setData({
          list:this.data.tableList.filter(item=>item.type === '商业服务')
        })
      }else if(type == '7'){
        this.setData({
          list:this.data.tableList.filter(item=>item.type === '文化体育')
        })
      }else if(type == '8'){
        this.setData({
          list:this.data.tableList.filter(item=>item.type === '金融电邮')
        })
      }else if(type == '9'){
        this.setData({
          list:this.data.tableList.filter(item=>item.type === '其他')
        })
      }
    }
    this.loadMarkers(this.data.list)
  },
  onClose() {
      this.setData({
          showModal: false,
          showModalDetail:false
      });
  },
  restList(){
    this.setData({
      list:[],
      pageNo:1,
      markers:[],
    })
  },
  toMyCommunity(){
    wx.navigateTo({
        url: '/pages/myCommunity/myCommunity',
      })
  },
  routePlanning(e){
    let key = 'T5YBZ-OHPW4-77SUI-KZVFO-LYQL5-4OBTA';
    let referer = ''; 
    let endPoint = JSON.stringify({  //终点
        'name': e.currentTarget.dataset.item.name,
        'latitude': e.currentTarget.dataset.item.latitude,
        'longitude': e.currentTarget.dataset.item.longitude
    });
    wx.navigateTo({
        url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
    });
  },
  toDetail(e){
    let obj = e.currentTarget.dataset.obj 
    if(e.currentTarget.dataset.type ==="阵地"){
      wx.navigateTo({
        url: `/subpages/placeDetails/pages/index/index?id=${e.currentTarget.dataset.id}`,
      })
    }else if(e.currentTarget.dataset.type ==="志愿组织"){
      wx.navigateTo({
        url: `/subpages/Myorganization/pages/organizationdetails/organizationdetails?id=${e.currentTarget.dataset.id}&type=map`,
      })
    }else {
      wx.navigateTo({
        url: `/subpages/merchantDetails/pages/index/index?obj=${encodeURIComponent(JSON.stringify(obj))}`,
      })
  }
  },

    // 根据两个经纬度获取当前距离
    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;
    },
})