在途跟踪组件

本组件基于yarn构建 开发基于react

1. 在途跟踪组件 API

<TfTrackFollow {
  ...{
    tracklist: [{  // 传给组件的数组
      "partyid":"666888", 
      "deviceid":"18867901789", // 车辆设备id
      "platenumber":"浙A6N68S", // 车牌号
      "extension": {
        "status": "0", // 车辆状态，(必须要有) 0：工作中 1：空闲 2：报停 3：异常
        "isNeedWayBill": true, // 是否需要显示运单信息页签
        "requestWayBillData": [ // 运单信息json数据，如已提供，则不会再用requestWayBillUrl接口请求数据
          {
            "endAddress": "上海", // 目的地
            "receiverName": "收货人", // 收货人
            "receiverPhone": "4124532523", // 收货人电话
            "senderName": "发货人", // 发货人
            "senderPhone": "1238903729", // 发货人电话
            "startAddress": "杭州", // 始发地
            "waybillNo": "1", // 运单编号
            "requestDetailUrl": "http://www.baidu.com" // 查看详情的跳转地址
          }
        ],
        "requestWayBillUrl": "", // 运单信息请求接口，如未提供requestWayBillData，则会发起接口请求"requestType":"POST" // 请求运单接口类型，非必填，默认"GET"请求
      }
    }],
    page: {
      "size":"2", // 每页显示多少条
      "height:"800px", // 组件外部高度
      "token":"8C70B8F1395343C0B492ABB2853D166D_session_568009871" // 运单信息接口请求token
    }, // 分页配置项
  }
}

2. 使用示例

import React, { Component } from 'react';

import {TfTrackFollow} from 'tf-track-follow';
import 'tf-track-follow/lib/style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      tl : [{
        "partyid":"666888", 
        "deviceid":"18867901789", // 车辆设备id
        "platenumber":"浙A6N68S", // 车牌号
        "extension": {
          "status": "0", // 车辆状态，(必须要有) 0：工作中 1：空闲 2：报停 3：异常
          "isNeedWayBill": true, // 是否需要显示运单信息页签
          "requestWayBillData": [ // 运单信息json数据，非必填，如已提供，则不会再用requestWayBillUrl接口请求数据
            {
              "endAddress": "上海", // 目的地
              "receiverName": "收货人", // 收货人
              "receiverPhone": "4124532523", // 收货人电话
              "senderName": "发货人", // 发货人
              "senderPhone": "1238903729", // 发货人电话
              "startAddress": "杭州", // 始发地
              "waybillNo": "1", // 运单编号
              "requestDetailUrl": "http://www.baidu.com" // 查看详情的跳转地址
            }
          ],
          "requestWayBillUrl": "" // 运单信息请求接口，非必填，如未提供requestWayBillData，则会发起接口请求
          "requestType":"POST" // 请求运单接口类型，非必填，默认"GET"请求
        }
      }],
      ts : {
        "size":"18",
        "token":"8C70B8F1395343C0B492ABB2853D166D_session_568009871"
      },
      height: '900px' // 组件外部高度
    }
  }

  render() {
    return (
      <TfTrackFollow tracklist={this.state.tl} page={this.state.ts} height={this.state.height}></TfTrackFollow>
    );
  }
}

3. 运单信息接口requestWayBillUrl数据模型

{
  "code": 0,
  "count": 2,
  "data": [
      {
          "endAddress": "上海",
          "receiverName": "收货人",
          "receiverPhone": "4124532523",
          "senderName": "发货人",
          "senderPhone": "1238903729",
          "startAddress": "杭州",
          "waybillNo": "123"
      },
      {
          "endAddress": "深圳",
          "receiverName": "收货人",
          "receiverPhone": "4124532523",
          "senderName": "发货人",
          "senderPhone": "1238903729",
          "startAddress": "杭州",
          "waybillNo": "456"
      }
  ],
  "msg": "success"
}

4. 版本更新说明

  0.1.1:
    更新说明文档