seahorsesShop_miniapp/pages/MaterialFlowInfo/MaterialFlowInfo.js

// pages/MaterialFlowInfo/MaterialFlowInfo.js
var http = require('../../utils/http.js');
var util = require('../../utils/util.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    steps: [], //订单物流
    packageInfo: [],
    delivery: {},
    latitude: '', //初始纬度
    longitude: '', //初始经度
    scale: 14,
    markers: [],
    polyline: [],
    // 限制拖动的最大和最小范围（这里根据需求设置上下拖动300rpx范围）
    maxTop: 760, // 初始位置760rpx + 300rpx
    minTop: 560, // 初始位置760rpx - 300rpx
    flowInfoBoxTop: 560,
    option: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      option: options,
      latitude:options.lat,
      longitude:options.long
    })
    this.getDeliveryInfo()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },
  /**
   * 刷新
   */
  updateInfo: function () {
    this.getDeliveryInfo()
  },

  /**
   * 配送信息
   * @param {*} e 
   */
  getDeliveryInfo: function () {
    wx.showLoading();
    let url = this.data.option.refundSn ? `/p/myDelivery/refund/${this.data.option.refundSn}` : `/p/myDelivery/orderInfo/${this.data.option.orderNumber}`
    var params = {
      url: url,
      method: "GET",
      callBack: res => {
        wx.hideLoading();
        let dataInfo = []
        if (res.info) {
          this.setData({
            delivery: res
          })
          res.info.forEach(e => {
            e.ctime = util.timestampToDate(e.ctime, 'Y-M-D h:m:s')
            // status:10待接单,20已接单,30已到店,40配送中,50已完成,60已取消,70配送失败
            let statusText;
            switch (e.status) {
              case 10:
                statusText = '待接单'
                break
              case 20:
                statusText = '已接单'
                break
              case 30:
                statusText = '已到店'
                break
              case 40:
                statusText = '配送中'
                break
              case 50:
                statusText = '已完成'
                break
              case 60:
                statusText = '已取消'
                break
              case 70:
                statusText = '配送失败'
                break
            }
            let riderName = e.riderName == '' ? '' : '；配送员:' + e.riderName + '，'
            let riderPhone = e.riderPhone == '' ? '' : '联系方式:' + e.riderPhone
            dataInfo.push({
              text: statusText + '；' + e.ctime,
              desc: e.statusDesc + riderName + riderPhone,
              inactiveIcon: 'smile'
            })
          })
        } else {
          res.forEach(item => {
            if (item.deliveryDto) {
              let trackPoints = [];
              let content = []
              item.deliveryDto.info.forEach(e => {
                trackPoints.push({
                  latitude: e.riderLatitude,
                  longitude: e.riderLongitude
                })
                content.push({
                  text: e.statusDesc
                })
                /*路线绘制 */
                let polylineData = {
                  points: trackPoints,
                  color: '#449CF7',
                  width: 2
                };
                /*距离计算start*/
                let point1 = {
                  latitude:this.data.option.lat,
                  longitude:this.data.option.long
                };
                let point2 = {
                  latitude: trackPoints[0].latitude,
                  longitude: trackPoints[0].longitude
                };
                let distance = util.getDistance(point1, point2);
                /*距离计算end*/

                /*起终点配置start*/
                let startMarker = {
                  latitude: trackPoints[0].latitude,
                  longitude: trackPoints[0].longitude,
                  iconPath: '/images/icon/origin.png', //示例图标路径
                  width: 20,
                  height: 20,
                  callout: {
                    content: content[0].text + ',' + '距离' + distance,
                    display: 'ALWAYS',
                    padding: 5,
                    borderRadius: 6,
                    color: '#04358D'
                  }
                };
                let endMarker = {
                  latitude:this.data.option.lat,
                  longitude:this.data.option.long,
                  iconPath:wx.getStorageSync('loginResult').pic,
                  width: 20,
                  height: 20,
                  callout: {
                    content:wx.getStorageSync('loginResult').nickName,
                    display: 'ALWAYS',
                    padding: 5,
                    borderRadius: 6,
                    color: '#04358D'
                  }
                };
                /*起终点配置end*/

                this.setData({
                  polyline: [polylineData],
                  markers: [startMarker, endMarker]
                })
                e.ctime = util.timestampToDate(e.ctime, 'Y-M-D h:m:s')
                // status:10待接单,20已接单,30已到店,40配送中,50已完成,60已取消,70配送失败
                let statusText;
                let contentText;
                switch (e.status) {
                  case 10:
                    statusText = '待接单'
                    contentText = ''
                    break
                  case 20:
                    statusText = '已接单'
                    contentText = ''
                    break
                  case 30:
                    statusText = '已到目的地'
                    contentText = '配送员已就位，待出货'
                    break
                  case 40:
                    statusText = '配送中'
                    contentText = '配送员已取货，正赶往目的地'
                    break
                  case 50:
                    statusText = '已完成'
                    contentText = '客户已收到商品'
                    break
                  case 60:
                    statusText = '已取消'
                    contentText = ''
                    break
                  case 70:
                    statusText = '配送失败'
                    contentText = ''
                    break
                }
                /*物流信息格式处理*/
                let riderName = e.riderName == '' ? '' : ' ' + contentText + '；配送员:' + e.riderName + '，'
                let riderPhone = e.riderPhone == '' ? '' : '联系方式:' + e.riderPhone
                dataInfo.push({
                  text: statusText + '；' + e.ctime,
                  desc: e.statusDesc + riderName + riderPhone,
                  inactiveIcon: 'smile'
                })
              })
            }
          })
          this.setData({
            packageInfo: res
          })
        }
        this.setData({
          steps: dataInfo
        })
      }
    };
    http.request(params);
  },


  /**
   * 触摸开始事件处理函数
   * @param {*} e 
   */
  touchStart(e) {
    this.startY = e.touches[0].pageY;
  },
  /**
   * 触摸移动事件处理函数
   * @param {*} e 
   */
  touchMove(e) {
    const moveY = e.touches[0].pageY;
    const offset = moveY - this.startY;
    let newTop = this.data.flowInfoBoxTop + offset;
    // 限制拖动范围
    newTop = Math.min(this.data.maxTop, Math.max(this.data.minTop, newTop));
    this.setData({
      flowInfoBoxTop: newTop
    });
    this.startY = moveY;
  },
  mapClick() {
    let currentTop = this.data.flowInfoBoxTop;
    // 下移300rpx，确保不超出设定范围
    currentTop = Math.min(this.data.maxTop, currentTop + 300);
    this.setData({
      flowInfoBoxTop: currentTop
    });
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

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

  },

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

  },

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

  },

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

  }
})