vue实现物流时间轴效果

本文实例为大家分享了vue实现物流时间轴效果的具体代码，供大家参考，具体内容如下

son组件(物流时间轴组件)

<template> <div class='steps-wrap'> <ul> <li v-for='(item,index) in steps' :key='index'><span class='time'>{{item.time}}</span><div class='circle'> <img v-if='index===0' src='https://www.haobala.com/assets/images/user_seleted.png' /> <img v-else-if='index === steps.length-1' src='https://www.haobala.com/assets/images/user_seleted.png' /> <i v-else class='circle-icon'></i></div><span v-html='item.context' class='message'></span> </li> </ul> </div></template><script>export default { props: { steps: { type: Array, } }}</script><style lang='less'>.steps-wrap { ul { padding: 0 16px; li { display: flex; line-height: 1rem; color: #999; .time {text-align: center;width: 80px;font-size: 12px; } .circle {position: relative;z-index: 999;display: flex;justify-content: center;align-items: center;border-radius: 50%;width: 16px;height: 16px;top: 0;.icon { width: 100%; height: 100%;}.circle-icon { position: relative; z-index: 999; display: inline-block; border-radius: 50%; width: 8px; height: 8px; background-color: #333333;} } .message {padding: 0 0 1.6rem 25px;font-size: 12px;flex: 1;border-left: 1px solid #999999;margin-left: -8px; } &:last-child {.message { border-left: 1px solid transparent;} } } }}</style>

parent组件

<template> <div class='logistics'> <m-header :title='title' fixed> <a @click='$router.go(-1)' slot='left'><img src='https://www.haobala.com/assets/images/root_back.png' /> </a> </m-header> <div @click='isShow = true'> <img src='https://www.haobala.com/assets/images/ck.jpg' /> <div class='text'><p class='name'>{{current.nu}}</p><p class='title'>{{current.com}}</p> </div> <img src='https://www.haobala.com/assets/images/root_next.png' /> </div> <v-steps v-if='loadDataDone' :steps='current.data'></v-steps> <div v-else class='empty'> <img src='https://www.haobala.com/assets/images/vip.png' alt /> <span>抱歉！暂无查询记录</span> </div> <van-action-sheet v-model='isShow'> <ul class='list'><li v-for='item in list' @click='onSelect(item)' :key='item.nu' class='item'> <img src='https://www.haobala.com/assets/images/ck.jpg' /> <div class='text'> <p class='name'>{{item.nu}}</p> <p class='title'>{{item.com}}</p> </div></li> </ul> </van-action-sheet> </div></template><script>import mHeader from ’@/components/common/header/header.vue’import vSteps from ’@/components/common/steps/Steps.vue’export default { name: ’logistics’, components: { mHeader, vSteps }, computed: { orderSn () { return this.$route.query.orderSn } }, data () { return { title: ’查询结果’, isShow: false, list: [], current: {}, loadDataDone: false } }, created () { this.getData() }, methods: { async getData () { this.loadDataDone = true let res = await this.get(this.API.message.deliveryHtml, {params: { orderSn: this.orderSn} }).then(res => {if (res.Status == ’true’ && res.StatusCode === ’200’) { // 手机号点击拨打处理 const telReg = /1[3-9]d{9}|[0][1-9]{2,3}-[0-9]{5,10}|95d{3}/g res.Result.forEach(item => { item.data.forEach(item1 => { // 提取出来手机号 if (telReg.test(item1.context)) { let tels = [...new Set(item1.context.match(telReg))] tels.forEach(item2 => { item1.context = item1.context.replace(new RegExp(item2, ’g’), `<a href='tel:${item2}' rel='external nofollow' >${item2}</a>`) }) } }) }) this.current = res.Result[0] this.list = res.Result}if (res.Status == 0 || res.Status == 4) { this.loadDataDone = false} }) }, onSelect (item) { this.isShow = false this.current = item } }}</script><style lang='less' >.logistics { .item { display: flex; align-items: center; /* 垂直居中 */ padding: 12px 24px; .left { width: 50px; height: 50px; object-fit: cover; } .text { flex: 1; p {margin: 0;padding-left: 12px; } } .refresh { width: 24px; height: 24px; } } .empty { display: flex; justify-content: center; align-items: center; padding-top: 48px; font-size: 14px; span { padding-left: 12px; } }}</style>

接口数据格式

{ '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'}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。