test/pages/map/index.js

// pages/map/index.js
let systemInfo = wx.getSystemInfoSync(),rect = wx.getMenuButtonBoundingClientRect();
let height = (rect.top - systemInfo.statusBarHeight) * 2 + rect.height + systemInfo.statusBarHeight;
import commonApi from "../../utils/https/common"
import util from "../../utils/util"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showAllMask:false,
    seachHeight:height,
    topHeight:rect.top,
    areas:['姑苏','吴江','苏州'],
    areaIndex:0,
    latitude:"",
    longitude:"",
    type:0,
    keywords:"",
    list:[],
    showInfo:false,
    info:null,
    menus:[],
    menuIndex:-1,
    productList:[],
    productPage:1,
    productTotal:1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(options.type){
      this.setData({
        type:options.type
      })
    }
    let that = this;
    // 获取当前定位
    commonApi._post("act/get_suzhou_areas").then(res=>{
      wx.getLocation({
        type: 'gcj02',
        success: function (r) {
          console.log(r)
          res.data.unshift({
            area_id:"",
            area_title:"全部",
            lon:r.longitude,
            lat:r.latitude
          })
          that.setData({
            areas:res.data,
            areaIndex:0,
            longitude:r.longitude,
            latitude:r.latitude
          })
        }
      })
      commonApi._post("pbservice/Other/getClientConfig",{
        unique_key:"wechatxcx"
      }).then(res=>{
        let data = JSON.parse(res.data)
        this.setData({
          indexHot:data.indexHot,
          isTest:data.isTest
        })
        if(data.isTest==true){
          this.setData({
            type:1
          })
        }
        that.getList()
      })
      
    })
  },
  gotoDetail:function(){
    if(this.data.info.info.type=='relic'){
      wx.navigateTo({
        url: '/pages/pbService/wbdw/info/index?id='+this.data.info.info.id,
      })
    }
    else if(this.data.info.info.type=='restaurant' || this.data.info.info.type=='tenscenic'){
      wx.navigateTo({
        url: '/pages/info/foodInfo/index?id='+this.data.info.info.id,
      })
    }
    else {
      util.gotoDetail(this.data.info.info)
    }
    
  },
  onTapMarker:function(e){
    console.log(e)
    let info = this.data.list[e.detail.markerId];
    if(info.info.type=='tenscenic'){
      // 运河十景需要先获取景点详情
      commonApi._post("scene/detail",{
        id:info.info.id
      }).then(res=>{
        if(res.data){
          res.data.display_tags = res.data.display_tags?res.data.display_tags.split(","):[];
          res.data.display_tags = res.data.display_tags.slice(0,2);
        }
        info.info = res.data;
        this.setData({
          info:info,
          showInfo:true,
          showAllMask:true,
          menus:[],
          menuIndex:-1,
          productList:[],
          productTotal:1,
          productPage:1
        })
      })
      // 运河十景还需要获取是否有购票、线路、住宿、攻略菜单栏 如果没有的话菜单栏要隐藏
      let ajaxes = [commonApi._post("scene/get_scene_by_type",{
        type:"scenic",
        type_id:"",
        tenscenic_id:info.info.id,
        offset:0,
        limit:10
      }),
      commonApi._post("product/get_product_by_type",{
        type:"line",
        type_id:"",
        tenscenic_id:info.info.id,
        offset:0,
        limit:10
      }),
      commonApi._post("scene/get_scene_by_type",{
        tenscenic_id:info.info.id,
        offset:0,
        limit:10,
        type:"room",
        type_id:""
      }),
      commonApi._post("scene/get_scene_by_type",{
        tenscenic_id:info.info.id,
        offset:0,
        limit:10,
        type:"restaurant",
        type_id:""
      }),
      commonApi._post("travels/getList",{
        tenscenic_id:info.info.id,
        page_no:1,
        page_num:10
      })]
      Promise.all(ajaxes).then(res=>{
        let menus = [],menuIndex=-1;
        if(res[0].data.total>0){
          menuIndex = 0;
          menus[0] = "购票"
        }
        if(res[1].data.total>0){
          if(menuIndex==-1) menuIndex = 1;
          menus[1] = "线路"
        }
        if(res[2].data.total>0){
          if(menuIndex==-1) menuIndex = 2;
          menus[2] = "住宿"
        }
        if(res[3].data.total>0){
          if(menuIndex==-1) menuIndex = 3;
          menus[3] = "美食"
        }
        if(res[4].data.total>0){
          if(menuIndex==-1) menuIndex = 4;
          menus[4] = "攻略"
        }
        this.setData({
          menus:menus,
          menuIndex:menuIndex
        })
        this.getProductList()
      })
      return;
    }
    this.setData({
      info:info,
      showInfo:true,
      showAllMask:false
    })
  },
  changeMenu:function(e){
    let index = e.currentTarget.dataset.index;
    if(this.data.menuIndex==index) return;
    this.setData({
      menuIndex:index,
      productPage:1,
      productTotal:1,
      productList:[]
    })
    this.getProductList();
  },
  // 获取运河实景的产品、景点、攻略列表
  getProductList:function(){
    let info = this.data.info;
    if(info && info.info && info.info.id && this.data.showInfo && info.info.type=='tenscenic'){
      // 如果是运河十景的话
      // 如果已经到底了
      if(this.data.productList.length>=this.data.productTotal) return;
      let menu = this.data.menus[this.data.menuIndex],data={
        type:"ticket",
        type_id:"",
        tenscenic_id:info.info.id,
        offset:this.data.productList.length,
        limit:10,
        page_no:this.data.productPage,
        page_num:10,
        lon:this.data.longitude,
        lat:this.data.latitude
      },service="product/get_product_by_type";
      if(!menu){
        this.setData({
          productTotal:0
        })
        return;
      }
      switch(menu){
        case "购票":
          service="scene/get_scene_by_type";
          data.type="scenic";
          break;
        case "线路":
          data.type="line";
          break;
        case "住宿":
          service="scene/get_scene_by_type";
          data.type="room";
          break;
        case "美食":
          service="scene/get_scene_by_type";
          data.type="restaurant";
          break;
        case "攻略":
          delete data.type;
          delete data.type_id;
          delete data.offset;
          delete data.limit;
          service="travels/getList";
          break;
      }
      commonApi._post(service,data).then(res=>{
        let list = res.data.list || res.data.rows;
        list.map(item=>{
          item.display_tags = item.display_tags?item.display_tags.split(","):[];
          item.display_tags = item.display_tags.slice(0,2);
          if(item.distance){
            if(item.distance>=1000){
              item.distance = item.distance/1000+"km"
            }
            else {
              item.distance = item.distance+"m"
            }
          }
        })
        this.setData({
          productTotal:res.data.productTotal,
          productPage:this.data.productPage+1,
          productList:this.data.productList.concat(list)
        })
      })
    }
  },
  gotoDetailNew:function(e){
    let item = e.currentTarget.dataset.item;
    util.gotoDetail(item);
  },
  showImages:function(e){
    let index = e.currentTarget.dataset.index,info = this.data.info;
    wx.previewImage({
      urls: info.info.listimg,
      current:info.info.listimg[index]
    })
  },
  closeMask:function(){
    this.setData({
      showAllMask:false
    })
  },
  hideInfo:function(){
    this.setData({
      info:null,
      showInfo:false,
      showAllMask:false
    })
  },
  changeType:function(e){
    this.setData({
      type:e.currentTarget.dataset.type,
      showInfo:false,
      info:null
    })
    this.getList()
  },
  changeArea:function(e){
    this.setData({
      areaIndex:e.detail.value
    })
    this.getList()
  },
  changeRegion:function(e){
    console.log(e)
    this.getList()
  },
  getList:function(){
    this.mapCtx = wx.createMapContext("map");
    let types = ['','scenic','venue','post','restaurant','relic','tenscenic','cinema','academes'],that = this;
    this.mapCtx.getRegion({
      type: 'gcj02',
      success: function(res) {
        console.log(res)
        commonApi._post("act/map_travel",{
          type:types[that.data.type],
          title:that.data.keywords,
          m_lon:res.southwest.longitude-0.05,
          l_lon:res.northeast.longitude+0.05,
          m_lat:res.southwest.latitude-0.05,
          l_lat:res.northeast.latitude+0.05
        }).then(res=>{
          let list = [];
          res.data.map((item,index)=>{
            let mapItem = {};
            item.lat = item.tx_lat;
            item.lon = item.tx_lon;
            mapItem.latitude = Number(item.lat);
            mapItem.longitude = Number(item.lon);
            mapItem.id = index;
            mapItem.info = item;
            mapItem.iconPath = "https://static.ticket.sz-trip.com/xcxImages/map/"+item.type+".png";
            mapItem.width = 20;
            mapItem.height=23;
            if(mapItem.latitude<40){
              list.push(mapItem)
            }
          })
          that.setData({
            list:list
          })
        })
        // that.mapCtx.getRegion({
        //   success:function(r){
        //     let location = r.longitude+","+r.latitude;
            
        //     that.getParkList(res.northeast.longitude,res.northeast.latitude,res.southwest.longitude,res.southwest.latitude,location)
        //   }
        // })
      }
    })


    
  },
  search:function(e){
    console.log(e)
    this.setData(e.detail)
    this.getList()
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  preventTouchMove:function(){

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})