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,順豐已開啟“安全呼叫”保護您的電話隱私,請放心接聽?。?, "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項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決
這篇文章主要介紹了在vue項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue3與webpack5安裝element-plus樣式webpack編譯報錯問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報錯,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中
這篇文章主要介紹了Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10