vue后台管理系统——订单管理模块

电商后台管理系统的功能——订单管理模块

1. 订单管理概述

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

 

2. 订单列表

在components文件夹下创建一个order文件夹，然后再创建一个Order.vue组件

① 订单列表展示

• 订单数据加载
• 订单列表布局

const { data: res } = await this.$http.get('orders', { params: this.queryInfo })
if (res.meta.status !== 200) {
    return this.$message.error('获取订单列表失败！ ')
}
this.orderList = res.data.goods
this.total = res.data.total

② 查看订单地址信息

点击编辑按钮，实现省市联动的效果：

这个对话框我们并不会真正的去实现它的业务逻辑，而是在弹出对话框里实现省市联动的效果即可。

• 省市区三级联动效果
• 省市区数据格式分析

<el-cascader
　　:options="cityOptions"
　　v-model="selectedArea"
　　@change="changeProvince"
　　change-on-select
　　style="width: 100%;">
</el-cascader>

③ 查看订单物流信息 

• 调用接口获取物流数据
• 实现物流信息列表效果

需要使用Timeline时间线组件：

注意，timeline组件在2.6.0版本之前是没有的，发布时间是2019-3-1，而项目中vue-cli-plugin-element插件发布时间是1月，我们用到的一些element组件都是基于该插件提供的，所以在我们的项目中并没有提供时间线组件。

那如何使用timeline组件呢？

导入timeline两个组件：

使用方法还是和官网上的API是一样的

const { data: res } = await this.$http.get('/kuaidi/110121212622')
if (res.meta.status !== 200) {
    return this.$message.error('获取物流进度失败！ ')
}
this.wlList = res.data

此时并没有样式，需要导入timeline的样式表

3. 将订单管理功能上传到码云

• 使用git checkout -b order创建一个新分支并切换到该分支上
• 使用git branch查看当前所处的分支，所有代码的修改也一起被切换到了order子分支中
• 使用git status命令检查当前分支的代码状态
• 使用git add .命令统一增加到暂存区
• 使用git commit -m "完成订单管理功能的开发"命令把order分支提交到本地仓库中

本地order的代码就是最新的了

使用git push -u origin order命令把本地的order分支推送到云端中

master是主分支，但是它的代码还是旧的，应该立即把所有的代码合并到主分支上

• 使用git checkout master命令切换到主分支
• 使用git merge order命令从主分支上把order分支上的代码合并过来
• 使用git push命令将本地的master分支的代码推送到云端，这样master分支上的代码也是最新的了

代码地址：https://github.com/Emily-zcy/Backstage-Management-System-Based-on-vue