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

订单管理

订单管理概述

用于维护商品的订单信息

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

 

订单列表

订单列表展示

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

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