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实现物流时间轴效果 的全部内容, 来源链接: utcz.com/p/239542.html

回到顶部