vue實現物流時間軸效果
阿新 • • 發佈:2021-08-13
本文例項為大家分享了實現物流時間軸效果的具體程式碼,供大家參考,具體內容如下
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.pJVsCrng" /> <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"
},"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": "[邢臺市]在官網\"運單資料&簽收圖\",可檢視簽收人資訊","ftime": "2020-03-02 14:37:20"
}]
},{
"state": "簽收","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"
},"time": "2020-02-24 09:30:2www.cppcns.com4","ftime": "2020-02-24 09:30:24"
},{
"context": "江蘇蘇州相城區公司萬里路便民寄存分部快件已被 快件已被 本人 簽收。如有問題請電聯業務員:付龍龍【18751166952】。相逢是緣,如果您對我的服務感到滿意,給個五星好不好?【請在評價小件員處給予五星好評】","time": "2020-02-24 11:11:05","ftime": "2020-02-24 11:11:05"
}]
},"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"
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。