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 class="icon" v-if="index===0" src="../../../assets/images/user_seleted.png" />
<img
class="icon"
v-else-if="index === steps.length-1"
src="../../../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="../../assets/images/root_back.png" class="m-icon-img" style="width:20px" />
</a>
</m-header>
<div class="item" @click="isShow = true">
<img class="left" src="../../assets/images/ck.jpg" />
<div class="text">
<p class="name">{{current.nu}}</p>
<p class="title">{{current.com}}</p>
</div>
<img class="refresh" src="../../assets/images/root_next.png" />
</div>
<v-steps v-if="loadDataDone" :steps="current.data"></v-steps>
<div v-else class="empty">
<img src="../../assets/images/vip.png" alt />
<span>抱歉！暂无查询记录</span>
</div>
<van-action-sheet v-model="isShow" title="物流">
<ul class="list">
<li v-for="item in list" @click="onSelect(item)" :key="item.nu" class="item">
<img class="left" src="../../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}|95\d{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 style="color:red" 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"
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue实现可移动水平时间轴
本文实例为大家分享了Vue实现可移动水平时间轴的具体代码,供大家参考,具体内容如下 里程碑时间轴具体实现 效果图 编辑里程碑效果图 <template> <div class="state_grade"> <!-- <mile-stone :projectId="projectData.proId" :projectName="projectData.proName" :proNum="project
-
Vue时间轴 vue-light-timeline的用法说明
轻量的vue时间轴组件 install npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline usage import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline); <template> <light-timeline :items='items'></light-timeline> </tem
-
Vue.js实现时间轴功能
本文实例为大家分享了Vue.js实现时间轴功能的具体代码,供大家参考,具体内容如下 GitHub 时间轴组件封装 Main.js <template> <div class="timeline-main"> <div class="timeline-axis"> <div class="axis-item" v-for="(time, index) in dateTimes" :key
-
vue+swiper实现时间轴效果
本文实例为大家分享了vue+swiper实现时间轴效果的具体代码,供大家参考,具体内容如下 效果: 首先引入,有淘宝镜像的用 cnpm install swiper --save 没有的用 npm install swiper --save <template> <div class="hello" style="height:100%;width:100%;position:relative;"> <div class="s
-
vue实现物流时间轴效果
本文实例为大家分享了vue实现物流时间轴效果的具体代码,供大家参考,具体内容如下 son组件(物流时间轴组件) <template> <div class="steps-wrap"> <ul> <li v-for="(item,index) in steps" :key="index"> <span class="time">{{item.time}}</spa
-
Android实现快递物流时间轴效果
本文实例为大家分享了Android实现快递物流时间轴效果展示的具体代码,供大家参考,具体内容如下 首先,这篇参考了别人的代码.根据自己的项目需求简单改造了一下,效果图如下 xml:代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:lay
-
Vue实现时间轴效果
本文实例为大家分享了Vue实现时间轴效果的具体代码,供大家参考,具体内容如下 时间轴上的时间点数和描述文本均可自定义设置 效果图如下: ①创建时间轴组件Timeline.vue: <template> <div class="m-timeline-area"> <div class="m-timeline"> <div :class="['m-timeline-item',
-
vue+canvas绘制时间轴的方法
本文实例为大家分享了vue canvas绘制时间轴的具体代码,供大家参考,具体内容如下 最近在研究canvas绘制时间轴,直接上代码,希望分享能给大家带来帮助,效果如下: 代码如下,可以拷贝到vue项目中直接预览 <template> <div> <canvas id="time_line" width="1200" height="27"></canvas> </div> </t
-
Android控件之使用ListView实现时间轴效果
实现思路: 该View是通过ListView实现的,通过实体两个字段内容content和时间time来展示每个ListItem 时间轴是使用上面一条线(20dp)和中间一个圆(15dp)和下面一条线(40dp)组装成的 在ListView中,设置其分割线为空,并且没有点击效果 效果图: 步骤一:使用xml画出一个灰色的圆点(time_cycle.xml) <?xml version="1.0" encoding="utf-8"?> <shape
-
Android自定义指示器时间轴效果实例代码详解
指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activity_main.xml中放置一个ListView,代码如下.由于这个列表只是用于展示信息,并不需要用户去点击,所以将其clickable属性置为false:为了消除ListView点击产生的波纹效果,我们设置其listSelector属性的值为透明:我们不需要列表项之间的分割线,所以设置其divider属
-
Android使用自定义View实现横行时间轴效果
前言 本篇文章会说下如何使用并且要用麻烦的自定义 view 去实现时间轴效果,以及如何分析.实现自定义 view. 需要具备的知识:Paint.Canvas.自定义 view 的绘制流程. 欢迎留言交流. 一.已经有很多 RecycleView 实现时间轴的例子,为何还要费劲的使用自定义 view 去实现时间轴? 首先看下最终想要的效果: 根据上图可以总结出以下几点: 每个阶段要显示时间.阶段名.状态图标.中间有虚线: 文字上下交错显示: 相邻阶段的文字在垂直方向上是可以相交的: 时间轴的个数不
-
Flutter通过Container实现时间轴效果
时间轴是前端UI经常用到的效果,先看下效果图: 时间轴的特点 1.在列表中的高度不确定,高度取决于右侧 item 的高度 2.时间轴通常在第一个 item 中的样式和其他 item 中不同. 实现 一.借助 Container 中 decoration 属性,设置左侧的 border,可以实现时间轴高度随着 item 变化效果 Center( child: Container( width: 100, height: 100, decoration: BoxDecoration( // 设置 B