nazw/nnzwminiapp/pagesPublic/pages/tdcr/details/detail.js

// pagesPublic/pages/tdcr/details/detail.js
const { imgUrl } = require('../../api/request')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgPath: imgUrl + 'tdcr/',
    headerStyle: {},
    tabs: [{
      label: '概况',
    }, {
      label: '基本情况',
    }, {
      label: '周边配套',
    }, {
      label: '其他地块',
    }],
    tabActive: 0,
    dataIndex: 0,
    list: [{
      longitude: 106.596361,
      latitude: 29.579387,
      name: '中西医结合医院地块',
      img: 'zsyy.png',
      time: '2024年4月',
      description: '项目位于南岸区弹子石组团，南靠重庆卷烟厂，北邻弹子石新街，项目范围面积2.44公顷（36.6亩） 。项目周边以住宅小区为主，东北侧分布有弹子石、长嘉汇商业购物中心，其他主要以沿街生活配套性商业为主；周边2KM范围内分布有三所小学、四所中学、两处医院，公共配套设施较为完善。',
      area: 36.6,
      status: '已开始供地',
      contstructionArea: 5.58,
      use: '居民用地',
      progress: '在第五人民医院搬迁至新址后，计划将中西医结合医院搬迁至原第五人民医院院区，目前第五人民医院新址办公楼正在修建，中西医结合医院预计2024年8月进行搬迁。地块内涉及2处未定级文保单位（文幼章故居、老教会楼），私房约300户(住宅291户，非住宅9户)，面积住宅17428平方米，非住宅2321平方米。',
      rate: 4,
      dutyUnit: '区土储中心',
      phoneNum: '12345',
      polygon: [
        {
          longitude: 106.594297,
          latitude: 29.578465
        },
        {
          longitude: 106.594452,
          latitude: 29.578218
        },
        {
          longitude: 106.595821,
          latitude: 29.577567
        },
        {
          longitude: 106.596113,
          latitude: 29.577515
        },
        {
          longitude: 106.596965,
          latitude: 29.578226
        },
        {
          longitude: 106.597249,
          latitude: 29.578383
        },
        {
          longitude: 106.597334,
          latitude: 29.578465
        },
        {
          longitude: 106.597334,
          latitude: 29.57869
        },
        {
          longitude: 106.597275,
          latitude: 29.578839
        },
        {
          longitude: 106.597375,
          latitude: 29.579041
        },
        {
          longitude: 106.597103,
          latitude: 29.579513
        },
        {
          longitude: 106.595184,
          latitude: 29.579925
        },
        {
          longitude: 106.594943,
          latitude: 29.57982
        }
      ],
      peripherytabs: [{
        label: '教育'
      }, {
        label: '商业'
      }],
      surroundingFacilities: [
        {
          id: 1, name: '重庆市第11中学', type: '教育',
          longitude: 106.599916, latitude: 29.582458
        }, {
          id: 2, name: '弹子石老街景区', type: '商业',
          longitude: 106.587890, latitude: 29.579806
        }, {
          id: 3, name: '泽科弹子石中心', type: '商业',
          longitude: 106.591454, latitude: 29.583796
        }
      ]
    }],
    peripherytabsindex:0,
    markers: [],
    centerPoint: {
      longitude: 106.596361,
      latitude: 29.579387,
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const _this = this
    let markers = []
    _this.data.list.forEach(item => {
      item.surroundingFacilities.forEach(map => {
        markers.push({
          id: map.id,
          latitude: map.latitude,
          longitude: map.longitude,
          callout: {
            content: map.name,
            fontSize: 11,
            padding: 5,
            borderRadius: 5,
            display: 'ALWAYS'
          },
          iconPath: imgUrl + '/location.png',
          width: 20,
          height: 25,
        })
      })
    })
    this.setData({
      headerStyle: wx.getMenuButtonBoundingClientRect(),
      dataIndex: options.index,
      markers,
      polygons: [{
        dashArray: [10, 10],
        strokeColor: '#ffe20063',
        fillColor: '#ffe20063',
        points: _this.data.list[options.index].polygon
      }],
      centerPoint: {
        longitude: _this.data.list[options.index].longitude,
        latitude: _this.data.list[options.index].latitude,
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    return {
      title: this.data.list[this.data.dataIndex].name,
      imageUrl: imgUrl + '/tdcr/share.jpg'
    }
  },
  tabEvent(e) {
    this.setData({
      tabActive: e.target.dataset.index,
    })
  },
  peripherytabEvent(e){
	this.setData({
		peripherytabsindex: e.target.dataset.index,
	})
  },
  goBack() {
    wx.navigateBack()
  },
  callPhone() {
    const _this = this
    wx.makePhoneCall({
      phoneNumber: _this.data.list[_this.data.dataIndex].phoneNum,
      fail: (e) => {
        console.log(e);
      }
    })
  },
  mapMarkerEvent(e) {
    const map = this.data.list[this.data.dataIndex].surroundingFacilities.filter(item => item.id == e.target.dataset.id)
    this.setData({
      centerPoint: {
        longitude: map[0].longitude,
        latitude: map[0].latitude,
      }
    })
  }
})