[Vue.js]实战 -- 电商项目(七)

订单管理

订单管理概述

基于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>

查看订单物流信息

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

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