vue实现物流时间轴效果
程序员文章站
2022-07-07 21:50:04
本文实例为大家分享了vue实现物流时间轴效果的具体代码,供大家参考,具体内容如下son组件(物流时间轴组件)
本文实例为大家分享了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" }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。