vue實現(xiàn)物流時間軸效果
更新時間：2021年08月12日 15:44:19 作者：優(yōu)秀的土豆絲
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)物流時間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)物流時間軸效果的具體代碼，供大家參考，具體內(nèi)容如下
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: '查詢結(jié)果',
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>
接口數(shù)據(jù)格式
{
"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": "[上海市]快件在【上海青浦重固營業(yè)點】已裝車,準(zhǔn)備發(fā)往 【上海華新集散中心】",
"time": "2020-03-01 18:40:14",
"ftime": "2020-03-01 18:40:14"
}, {
"context": "[上海市]快件已發(fā)車",
"time": "2020-03-01 18:42:12",
"ftime": "2020-03-01 18:42:12"
}, {
"context": "[上海市]快件到達(dá) 【上海華新集散中心】",
"time": "2020-03-01 19:01:08",
"ftime": "2020-03-01 19:01:08"
}, {
"context": "[上海市]快件在【上海華新集散中心】已裝車,準(zhǔn)備發(fā)往 【全國航空樞紐（蕭山】",
"time": "2020-03-01 20:01:27",
"ftime": "2020-03-01 20:01:27"
}, {
"context": "[上海市]快件已發(fā)車",
"time": "2020-03-01 20:48:53",
"ftime": "2020-03-01 20:48:53"
}, {
"context": "[杭州市]快件到達(dá) 【全國航空樞紐（蕭山】",
"time": "2020-03-01 23:20:28",
"ftime": "2020-03-01 23:20:28"
}, {
"context": "[杭州市]快件在【全國航空樞紐（蕭山】已裝車,準(zhǔn)備發(fā)往 【石家莊高開集散中心】",
"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": "[石家莊市]快件到達(dá)【石家莊】，準(zhǔn)備發(fā)往【石家莊高開集散中心】",
"time": "2020-03-02 06:02:00",
"ftime": "2020-03-02 06:02:00"
}, {
"context": "[石家莊市]快件到達(dá) 【石家莊高開集散中心】",
"time": "2020-03-02 08:21:18",
"ftime": "2020-03-02 08:21:18"
}, {
"context": "[石家莊市]快件在【石家莊高開集散中心】已裝車,準(zhǔn)備發(fā)往 【邢臺高新集散點】",
"time": "2020-03-02 09:15:47",
"ftime": "2020-03-02 09:15:47"
}, {
"context": "[石家莊市]快件已發(fā)車",
"time": "2020-03-02 09:16:05",
"ftime": "2020-03-02 09:16:05"
}, {
"context": "[邢臺市]快件到達(dá) 【邢臺高新集散點】",
"time": "2020-03-02 11:48:24",
"ftime": "2020-03-02 11:48:24"
}, {
"context": "[邢臺市]快件在【邢臺高新集散點】已裝車,準(zhǔn)備發(fā)往 【邢臺市沙河市宋璟營業(yè)點】",
"time": "2020-03-02 13:17:55",
"ftime": "2020-03-02 13:17:55"
}, {
"context": "[邢臺市]快件已發(fā)車",
"time": "2020-03-02 13:18:54",
"ftime": "2020-03-02 13:18:54"
}, {
"context": "[邢臺市]快件到達(dá) 【邢臺市沙河市宋璟營業(yè)點】",
"time": "2020-03-02 13:46:04",
"ftime": "2020-03-02 13:46:04"
}, {
"context": "[邢臺市]正在派送途中,請您準(zhǔn)備簽收(派件人:鄧朋飛,電話:18631965961)",
"time": "2020-03-02 13:59:33",
"ftime": "2020-03-02 13:59:33"
}, {
"context": "[邢臺市]快件交給鄧朋飛,正在派送途中（聯(lián)系電話：18631965961,順豐已開啟“安全呼叫”保護(hù)您的電話隱私,請放心接聽?。?,
"time": "2020-03-02 14:04:19",
"ftime": "2020-03-02 14:04:19"
}, {
"context": "[邢臺市]您的快件已簽收，如有疑問請電聯(lián)小哥【鄧朋飛，電話：18631965961】。疫情期間順豐每日對網(wǎng)點消毒、小哥每日測溫、配戴口罩，感謝您使用順豐，期待再次為您服務(wù)。（主單總件數(shù)：1件）",
"time": "2020-03-02 14:37:20",
"ftime": "2020-03-02 14:37:20"
}, {
"context": "[邢臺市]在官網(wǎng)\"運單資料&簽收圖\",可查看簽收人信息",
"time": "2020-03-02 14:37:20",
"ftime": "2020-03-02 14:37:20"
}]
}, {
"state": "簽收",
"status": "3",
"com": "YD",
"nu": "3103140966821",
"data": [{
"context": "上海普陀區(qū)徐公司進(jìn)行攬件掃描",
"time": "2020-02-13 20:13:39",
"ftime": "2020-02-13 20:13:39"
}, {
"context": "上海分撥中心在分撥中心進(jìn)行稱重掃描",
"time": "2020-02-13 23:22:20",
"ftime": "2020-02-13 23:22:20"
}, {
"context": "上海分撥中心進(jìn)行裝車掃描，發(fā)往：江蘇蘇州分撥中心",
"time": "2020-02-14 00:29:45",
"ftime": "2020-02-14 00:29:45"
}, {
"context": "江蘇蘇州分撥中心在分撥中心進(jìn)行卸車掃描",
"time": "2020-02-24 04:36:07",
"ftime": "2020-02-24 04:36:07"
}, {
"context": "江蘇蘇州分撥中心從站點發(fā)出，本次轉(zhuǎn)運目的地：江蘇蘇州相城區(qū)公司",
"time": "2020-02-24 04:55:10",
"ftime": "2020-02-24 04:55:10"
}, {
"context": "江蘇蘇州相城區(qū)公司萬里路便民寄存分部進(jìn)行派件掃描；派送業(yè)務(wù)員：付龍龍；聯(lián)系電話：18751166952",
"time": "2020-02-24 09:22:13",
"ftime": "2020-02-24 09:22:13"
}, {
"context": "江蘇蘇州相城區(qū)公司萬里路便民寄存分部進(jìn)行派件掃描；派送業(yè)務(wù)員：付龍龍；聯(lián)系電話：18751166952",
"time": "2020-02-24 09:30:24",
"ftime": "2020-02-24 09:30:24"
}, {
"context": "江蘇蘇州相城區(qū)公司萬里路便民寄存分部快件已被 快件已被 本人 簽收。如有問題請電聯(lián)業(yè)務(wù)員：付龍龍【18751166952】。相逢是緣,如果您對我的服務(wù)感到滿意,給個五星好不好？【請在評價小件員處給予五星好評】",
"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": "【蘇州市】 快件已經(jīng)到達(dá) 【昆山】",
"time": "2019-11-07 22:37:12",
"ftime": "2019-11-07 22:37:12"
}, {
"context": "【蘇州市】 快件離開 【昆山】 已發(fā)往 【無錫中轉(zhuǎn)部】",
"time": "2019-11-07 22:49:26",
"ftime": "2019-11-07 22:49:26"
}, {
"context": "【無錫市】 快件已經(jīng)到達(dá) 【無錫中轉(zhuǎn)部】",
"time": "2019-11-08 05:15:58",
"ftime": "2019-11-08 05:15:58"
}, {
"context": "【無錫市】 快件離開 【無錫中轉(zhuǎn)部】 已發(fā)往 【南京中轉(zhuǎn)部】",
"time": "2019-11-08 05:16:50",
"ftime": "2019-11-08 05:16:50"
}, {
"context": "【南京市】 快件已經(jīng)到達(dá) 【南京中轉(zhuǎn)部】",
"time": "2019-11-08 10:04:29",
"ftime": "2019-11-08 10:04:29"
}, {
"context": "【南京市】 快件離開 【南京中轉(zhuǎn)部】 已發(fā)往 【南京浦口區(qū)】",
"time": "2019-11-08 10:12:19",
"ftime": "2019-11-08 10:12:19"
}, {
"context": "【南京市】 快件已經(jīng)到達(dá) 【南京浦口區(qū)】",
"time": "2019-11-08 13:03:28",
"ftime": "2019-11-08 13:03:28"
}, {
"context": "【南京市】 【南京浦口區(qū)】 的中院（13291283965） 正在第1次派件, 請保持電話暢通,并耐心等待（95720為中通快遞員外呼專屬號碼，請放心接聽）。小哥今日體溫正常，將佩戴口罩為您投遞，也可以聯(lián)系小哥將您的快遞，放到您指定的代收點，祝您身體健康！",
"time": "2019-11-08 13:06:57",
"ftime": "2019-11-08 13:06:57"
}, {
"context": "【南京市】 快件已由【菜鳥的南信大西苑濱江樓底菜鳥驛站】代簽收, 如有問題請電聯(lián)（13291283965 / 95311）, 感謝您使用中通快遞, 期待再次為您服務(wù)!",
"time": "2019-11-08 13:40:19",
"ftime": "2019-11-08 13:40:19"
}]
}],
"AlertType": "toast"
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)點擊按鈕“查看詳情”彈窗展示詳情列表操作
這篇文章主要介紹了vue實現(xiàn)點擊按鈕“查看詳情”彈窗展示詳情列表操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了在Vue中使用Select選擇器拼接label的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在vue項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決
這篇文章主要介紹了在vue項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3與webpack5安裝element-plus樣式webpack編譯報錯問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報錯,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中如何實時監(jiān)聽本地存儲，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
mpvue是一個使用Vue.js開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖形驗證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中
這篇文章主要介紹了Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue+antv實現(xiàn)雷達(dá)圖，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了Vue Autocomplete 自動完成功能,結(jié)合簡單示例形式分析了Vue使用el-autocomplete組件實現(xiàn)自動完成功能相關(guān)操作技巧,需要的朋友可以參考下2019-05-05