Vue实战之 10. 订单管理

news/2024/7/24 10:47:23 标签: css3, 前端, css, vue

1. 订单管理概述

订单管理模块用于维护商品的订单信息,可以查看订单的商品信息、物流信息,并且可以根据实际的运营情况对订单做适当的调整。

在这里插入图片描述

2. 订单列表

1. 订单列表展示

  • 订单数据加载
  • 订单列表布局
 // 获取订单列表
    async getOrderList () {
      const { data: res } = await this.$http.get('orders', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        this.$message.error('获取订单列表失败!')
      }
      console.log(res)
      this.total = res.data.total
      this.orderList = res.data.goods
    }

2. 查看订单地址信息

  • 省市区三级联动效果
  • 省市区数据格式分析
<el-form-item label="省市区/县" prop="address1">
    <el-cascader :options="cityData"
    v-model="addressForm.address1"></el-cascader>
  </el-form-item>

3. 查看订单物流信息

  • 调用接口获取物流数据
  • 实现物流信息列表效果
 <!-- 时间线 -->
       <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in progressInfo"
      :key="index"
      :timestamp="activity.time">
      {{activity.context}}
    </el-timeline-item>
  </el-timeline>

ps:因为物流接口有问题,所以在做这个功能时,我是把物流信息的数据写死了的。


http://www.niftyadmin.cn/n/1333732.html

相关文章

Vue实战之 11. 数据统计

1. 数据统计概述 数据统计模块主要用于统计电商平台运营过程中的各种统计数据&#xff0c;并通过直观的可视化方式展现出来&#xff0c;方便相关运营和管理人员查看。 2. 用户来源数据统计报表 1. Echarts 第三方可视化库的基本使用 详细代码可以去 菜鸟教程 进行复制 2. 实现…

9.1黑马Vue电商后台管理系统商品管理模块完善:编辑商品的功能

在原视频中&#xff0c;老师跳过了这个功能&#xff0c;我觉得自己去实现也可以锻炼自己&#xff0c;于是自己补充了编辑功能 同用户管理&#xff0c;权限管理等之前各个模块的编辑功能不同&#xff0c;因为商品具有很多可编辑的选项&#xff0c;所以选择像添加商品一样&#x…

Vue实战之 12. 项目优化

1. 项目优化 1. 项目优化策略 生成打包报告第三方库启用CDNElement-UI 组件按需加载路由懒加载首页内容定制 1. 生成打包报告 打包时&#xff0c;为了直观地发现项目中存在的问题&#xff0c;可以在打包时生成报告。生成报告的方式有两种&#xff1a; 通过命令行参数的形式…

12. 1 补充:关于 babel-plugin-transform-remove-console 插件

这个插件的作用是在项目发布上线阶段&#xff0c;去掉我们在开发阶段时进行测试的console.log&#xff08;&#xff09; 1. 关于使用 找到项目的babel.config.js&#xff0c;加入一句代码&#xff1a; 但是&#xff0c;如果只是加入这么一句话&#xff0c;其实无论是在项目的开…

Gstreamer编译篇_libmount

Gstreamer编译篇_libmount /usr/lib/x86_64-linux-gnu/libmount.so: file not recognized: File format not… 在交叉编译的时候出现libmount.so文件格式不正确 因为现在是在交叉编译环境下啊。 仔细对比了glib的meson.build # libmount is only used by gio, but we need …

13.1 补充:购买服务器部署上线

在进行之前&#xff0c;我们需要先下载两个软件 Xshell 和 postman 1. 去阿里云购买一个云服务器 也可以先试用一个月 1. 基础配置 地区最好选择香港&#xff0c;因为后期可能会涉及到域名的绑定&#xff0c;选择香港会方便一点其他的选项都选择第一个&#xff0c;因为第一个是…

Vue实战之 13. 项目上线

1. 项目上线相关配置 通过 node 创建 web 服务器。开启 gzip 配置。配置 https 服务。使用 pm2 管理应用。 1. 通过 node 创建 web 服务器 创建 node 项目&#xff0c;并安装 express&#xff0c;通过 express 快速创建 web 服务器&#xff0c;将 vue 打包生成的 dist 文件夹…

gstreamer-glib篇

Gstreamer-glib篇 Glib的获取 git clone https://gitlab.gnome.org/GNOME/glib.git git tag git checkout tag git checkout 2.62.6