vue项目电商后台管理系统/物流接口失效解决

最新推荐文章于 2025-12-01 11:42:37 发布

原创最新推荐文章于 2025-12-01 11:42:37 发布 · 757 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍了在前端开发中，如何利用Element UI的<el-timeline>组件来展示物流信息。作者创建了一个本地数据源，并在Vue组件中导入并渲染，模拟了从订单创建到签收的整个物流过程，展示了物流状态更新的时间线。

效果展示

接口失效,那我们就创建本地数据,在目录建立js文件复制此此代码

export default [
  {
    time: '2018-05-10 09:39:00',
    ftime: '2018-05-10 09:39:00',
    context: '已签收,感谢使用顺丰,期待再次为您服务',
    location: ''
  },
  {
    time: '2018-05-10 08:23:00',
    ftime: '2018-05-10 08:23:00',
    context: '[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件',
    location: ''
  },
  {
    time: '2018-05-10 07:32:00',
    ftime: '2018-05-10 07:32:00',
    context: '快件到达 [北京海淀育新小区营业点]',
    location: ''
  },
  {
    time: '2018-05-10 02:03:00',
    ftime: '2018-05-10 02:03:00',
    context: '快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]',
    location: ''
  },
  {
    time: '2018-05-09 23:05:00',
    ftime: '2018-05-09 23:05:00',
    context: '快件到达 [北京顺义集散中心]',
    location: ''
  },
  {
    time: '2018-05-09 21:21:00',
    ftime: '2018-05-09 21:21:00',
    context: '快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]',
    location: ''
  },
  {
    time: '2018-05-09 13:07:00',
    ftime: '2018-05-09 13:07:00',
    context: '顺丰速运 已收取快件',
    location: ''
  },
  {
    time: '2018-05-09 12:25:03',
    ftime: '2018-05-09 12:25:03',
    context: '卖家发货',
    location: ''
  },
  {
    time: '2018-05-09 12:22:24',
    ftime: '2018-05-09 12:22:24',
    context: '您的订单将由HLA（北京海淀区清河中街店）门店安排发货。',
    location: ''
  },
  {
    time: '2018-05-08 21:36:04',
    ftime: '2018-05-08 21:36:04',
    context: '商品已经下单',
    location: ''
  }
]

在order.vue中导入

import kuai from './kuai.js'
export default {
  data () {
    return {
      // 城市数据
      cityData,
      kuai,
    }
  },

通过element ul 中时间线组件渲染需要先在注册组件

<el-dialog title="物流进度" :visible.sync="deliverDialogVisible" width="50%">
      <el-timeline :reverse="false">
        <el-timeline-item v-for="(item,i) in kuai" :key="i" :timestamp="item.time">
          {{item.context}}
        </el-timeline-item>
      </el-timeline>
</el-dialog>