{{current.nu}}
{{current.com}}
本文实例为大家分享了vue实现物流时间轴效果的具体代码，供大家参考，具体内容如下
son组件(物流时间轴组件)
- {{item.time}}
parent组件
抱歉！暂无查询记录
{{item.nu}}
{{item.com}}
接口数据格式
{
"Status": "true",
"StatusCode": "200",
"Msg": "成功",
"Timestamp": 1584005302985,
"Sign": null,
"Result": [{
"state": "签收",
"status": "3",
"com": "SF",
"nu": "SF1018384252542",
"data": [{
"context": "[上海市]顺丰速运 已收取快件",
"time": "2020-03-01 18:16:59",
"ftime": "2020-03-01 18:16:59"
}, {
"context": "[上海市]快件在【上海青浦重固营业点】已装车,准备发往 【上海华新集散中心】",
"time": "2020-03-01 18:40:14",
"ftime": "2020-03-01 18:40:14"
}, {
"context": "[上海市]快件已发车",
"time": "2020-03-01 18:42:12",
"ftime": "2020-03-01 18:42:12"
}, {
"context": "[上海市]快件到达 【上海华新集散中心】",
"time": "2020-03-01 19:01:08",
"ftime": "2020-03-01 19:01:08"
}, {
"context": "[上海市]快件在【上海华新集散中心】已装车,准备发往 【全国航空枢纽（萧山】",
"time": "2020-03-01 20:01:27",
"ftime": "2020-03-01 20:01:27"
}, {
"context": "[上海市]快件已发车",
"time": "2020-03-01 20:48:53",
"ftime": "2020-03-01 20:48:53"
}, {
"context": "[杭州市]快件到达 【全国航空枢纽（萧山】",
"time": "2020-03-01 23:20:28",
"ftime": "2020-03-01 23:20:28"
}, {
"context": "[杭州市]快件在【全国航空枢纽（萧山】已装车,准备发往 【石家庄高开集散中心】",
"time": "2020-03-02 01:31:35",
"ftime": "2020-03-02 01:31:35"
}, {
"context": "[杭州市]快件在【杭州飞往石家庄航班上】已起飞",
"time": "2020-03-02 04:15:00",
"ftime": "2020-03-02 04:15:00"
}, {
"context": "[石家庄市]快件到达【石家庄】，准备发往【石家庄高开集散中心】",
"time": "2020-03-02 06:02:00",
"ftime": "2020-03-02 06:02:00"
}, {
"context": "[石家庄市]快件到达 【石家庄高开集散中心】",
"time": "2020-03-02 08:21:18",
"ftime": "2020-03-02 08:21:18"
}, {
"context": "[石家庄市]快件在【石家庄高开集散中心】已装车,准备发往 【邢台高新集散点】",
"time": "2020-03-02 09:15:47",
"ftime": "2020-03-02 09:15:47"
}, {
"context": "[石家庄市]快件已发车",
"time": "2020-03-02 09:16:05",
"ftime": "2020-03-02 09:16:05"
}, {
"context": "[邢台市]快件到达 【邢台高新集散点】",
"time": "2020-03-02 11:48:24",
"ftime": "2020-03-02 11:48:24"
}, {
"context": "[邢台市]快件在【邢台高新集散点】已装车,准备发往 【邢台市沙河市宋璟营业点】",
"time": "2020-03-02 13:17:55",
"ftime": "2020-03-02 13:17:55"
}, {
"context": "[邢台市]快件已发车",
"time": "2020-03-02 13:18:54",
"ftime": "2020-03-02 13:18:54"
}, {
"context": "[邢台市]快件到达 【邢台市沙河市宋璟营业点】",
"time": "2020-03-02 13:46:04",
"ftime": "2020-03-02 13:46:04"
}, {
"context": "[邢台市]正在派送途中,请您准备签收(派件人:邓朋飞,电话:18631965961)",
"time": "2020-03-02 13:59:33",
"ftime": "2020-03-02 13:59:33"
}, {
"context": "[邢台市]快件交给邓朋飞,正在派送途中（联系电话：18631965961,顺丰已开启“安全呼叫”保护您的电话隐私,请放心接听！）",
"time": "2020-03-02 14:04:19",
"ftime": "2020-03-02 14:04:19"
}, {
"context": "[邢台市]您的快件已签收，如有疑问请电联小哥【邓朋飞，电话：18631965961】。疫情期间顺丰每日对网点消毒、小哥每日测温、配戴口罩，感谢您使用顺丰，期待再次为您服务。（主单总件数：1件）",
"time": "2020-03-02 14:37:20",
"ftime": "2020-03-02 14:37:20"
}, {
"context": "[邢台市]在官网\"运单资料&签收图\",可查看签收人信息",
"time": "2020-03-02 14:37:20",
"ftime": "2020-03-02 14:37:20"
}]
}, {
"state": "签收",
"status": "3",
"com": "YD",
"nu": "3103140966821",
"data": [{
"context": "上海普陀区徐公司进行揽件扫描",
"time": "2020-02-13 20:13:39",
"ftime": "2020-02-13 20:13:39"
}, {
"context": "上海分拨中心在分拨中心进行称重扫描",
"time": "2020-02-13 23:22:20",
"ftime": "2020-02-13 23:22:20"
}, {
"context": "上海分拨中心进行装车扫描，发往：江苏苏州分拨中心",
"time": "2020-02-14 00:29:45",
"ftime": "2020-02-14 00:29:45"
}, {
"context": "江苏苏州分拨中心在分拨中心进行卸车扫描",
"time": "2020-02-24 04:36:07",
"ftime": "2020-02-24 04:36:07"
}, {
"context": "江苏苏州分拨中心从站点发出，本次转运目的地：江苏苏州相城区公司",
"time": "2020-02-24 04:55:10",
"ftime": "2020-02-24 04:55:10"
}, {
"context": "江苏苏州相城区公司万里路便民寄存分部进行派件扫描；派送业务员：付龙龙；联系电话：18751166952",
"time": "2020-02-24 09:22:13",
"ftime": "2020-02-24 09:22:13"
}, {
"context": "江苏苏州相城区公司万里路便民寄存分部进行派件扫描；派送业务员：付龙龙；联系电话：18751166952",
"time": "2020-02-24 09:30:24",
"ftime": "2020-02-24 09:30:24"
}, {
"context": "江苏苏州相城区公司万里路便民寄存分部快件已被 快件已被 本人 签收。如有问题请电联业务员：付龙龙【18751166952】。相逢是缘,如果您对我的服务感到满意,给个五星好不好？【请在评价小件员处给予五星好评】",
"time": "2020-02-24 11:11:05",
"ftime": "2020-02-24 11:11:05"
}]
}, {
"state": "签收",
"status": "3",
"com": "ZTO",
"nu": "73122326322138",
"data": [{
"context": "【苏州市】 【昆山】（0512-83630555、0512-87807044） 的 CK（18762410718） 已揽收",
"time": "2019-11-07 18:42:40",
"ftime": "2019-11-07 18:42:40"
}, {
"context": "【苏州市】 快件已经到达 【昆山】",
"time": "2019-11-07 22:37:12",
"ftime": "2019-11-07 22:37:12"
}, {
"context": "【苏州市】 快件离开 【昆山】 已发往 【无锡中转部】",
"time": "2019-11-07 22:49:26",
"ftime": "2019-11-07 22:49:26"
}, {
"context": "【无锡市】 快件已经到达 【无锡中转部】",
"time": "2019-11-08 05:15:58",
"ftime": "2019-11-08 05:15:58"
}, {
"context": "【无锡市】 快件离开 【无锡中转部】 已发往 【南京中转部】",
"time": "2019-11-08 05:16:50",
"ftime": "2019-11-08 05:16:50"
}, {
"context": "【南京市】 快件已经到达 【南京中转部】",
"time": "2019-11-08 10:04:29",
"ftime": "2019-11-08 10:04:29"
}, {
"context": "【南京市】 快件离开 【南京中转部】 已发往 【南京浦口区】",
"time": "2019-11-08 10:12:19",
"ftime": "2019-11-08 10:12:19"
}, {
"context": "【南京市】 快件已经到达 【南京浦口区】",
"time": "2019-11-08 13:03:28",
"ftime": "2019-11-08 13:03:28"
}, {
"context": "【南京市】 【南京浦口区】 的中院（13291283965） 正在第1次派件, 请保持电话畅通,并耐心等待（95720为中通快递员外呼专属号码，请放心接听）。小哥今日体温正常，将佩戴口罩为您投递，也可以联系小哥将您的快递，放到您指定的代收点，祝您身体健康！",
"time": "2019-11-08 13:06:57",
"ftime": "2019-11-08 13:06:57"
}, {
"context": "【南京市】 快件已由【菜鸟的南信大西苑滨江楼底菜鸟驿站】代签收, 如有问题请电联（13291283965 / 95311）, 感谢您使用中通快递, 期待再次为您服务!",
"time": "2019-11-08 13:40:19",
"ftime": "2019-11-08 13:40:19"
}]
}],
"AlertType": "toast"
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。