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:因为物流接口有问题,所以在做这个功能时,我是把物流信息的数据写死了的。