我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue实现物流时间轴效果

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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" class="lazy" data-src="../../../assets/images/user_seleted.png" />
          <img
            class="icon"
            v-else-if="index === steps.length-1"
            class="lazy" data-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 class="lazy" data-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" class="lazy" data-src="../../assets/images/ck.jpg" />
      <div class="text">
        <p class="name">{{current.nu}}</p>
        <p class="title">{{current.com}}</p>
      </div>
      <img class="refresh" class="lazy" data-src="../../assets/images/root_next.png" />
    </div>
 
    <v-steps v-if="loadDataDone" :steps="current.data"></v-steps>
    <div v-else class="empty">
      <img class="lazy" data-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" class="lazy" data-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"
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue实现物流时间轴效果

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Android时光轴实现淘宝物流信息浏览效果

本文实例为大家分享了Android时光轴的制作方法,供大家参考,具体内容如下 1. 效果2.分析和实现 2.1效果实现:之前想了一下这种效果,因为只需要用到自己的项目中所以采用图片直接布局的形式去实现效果,虽然效果实现了,但是后来发现了出了
2022-06-06

Android控件之使用ListView实现时间轴效果

实现思路: 该View是通过ListView实现的,通过实体两个字段内容content和时间time来展示每个ListItem 时间轴是使用上面一条线(20dp)和中间一个圆(15dp)和下面一条线(40dp)组装成的 在ListView
2022-06-06

使用CSS3怎么实现一个时间轴效果

这篇文章将为大家详细讲解有关使用CSS3怎么实现一个时间轴效果 ,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用
2023-06-08

Vue怎么实现时间轴功能

这篇文章主要介绍了Vue怎么实现时间轴功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue怎么实现时间轴功能文章都会有所收获,下面我们一起来看看吧。