[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

 

数据统计

数据统计概述

用于统计电商平台运营过程的中的各种统计数据

并通过直观的可视化方式展示出来，方便相关运营和管理人员查看

 

用户来源数据统计报表

Echarts 第三方可视化库的基本使用

• 安装echarts库

// 安装echarts库
 npm install echarts -S

• 导入echarts接口

// 导入echarts接口
 import echarts from 'echarts'

 

实现用户来源数据统计报表

• 调用接口获取后台接口数据
• 通过echarts的api实现报表效果

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this.$refs.main)
const { data: res } = await this.$http.get('reports/type/1')
if (res.meta.status !== 200) return this.$message.error('初始化折线图失败！')
const data = _.merge(res.data, this.options)
// 绘制图表
myChart.setOption(data)