订单列表

创建分支

  • 创建分支order用于开发新功能
1
2
3
git checkout -b order
git branch
git push -u origin order

订单路由

  • 创建order/Order.vue订单组件,并配置路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
//...
{ path: '/orders', component: Order }
]
}
]
})
  • 并获取订单列表数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
export default {
name: 'Order',
data() {
return {
queryInfo: {
query: '',
pagenum: 1,
pagesize: 10,
},
orderList:[],
total: 0,
}
},
created() {
this.getOrderList()
},
methods: {
async getOrderList() {
const { data: res } = await this.$http.get('orders', {
params: this.queryInfo,
})
if (res.meta.status !== 200) {
return this.$message.error('获取订单列表信息失败')
}
this.orderList = res.data
this.total = res.data.total
},
},
}

渲染视图

  • 根据orderList数据渲染表格视图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
<div>
<!--面包屑导航区-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>订单管理</el-breadcrumb-item>
<el-breadcrumb-item>订单列表</el-breadcrumb-item>
</el-breadcrumb>
<!--卡片视图-->
<el-card>
<el-row>
<el-col :span="8">
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
</el-row>
<!--订单列表-->
<el-table :data="orderList" border stripe>
<el-table-column label="#" type="index"></el-table-column>
<el-table-column label="订单编号" prop="order_number"></el-table-column>
<el-table-column label="订单价格" prop="order_price"></el-table-column>
<el-table-column label="是否付款" prop="pay_status">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
<el-tag type="danger" v-else>未付款</el-tag>
</template>>
</el-table-column>
<el-table-column label="是否发货">
<template slot-scope="scope">
{{ scope.row.is_send }}
</template>
</el-table-column>
<el-table-column label="下单时间">
<template slot-scope="scope">
{{ scope.row.create_time | dateFormat }}
</template>
</el-table-column>
<el-table-column label="操作" prop="is_send">
<el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
<el-button type="success" size="mini" icon="el-icon-location"></el-button>
</el-table-column>
</el-table>
</el-card>
</div>
</template>

分页功能

  • 使用分页组件即可
1
2
3
4
5
6
7
8
9
10
11
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[5, 10, 15, 20]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
>
</el-pagination>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
export default {
name: 'Order',
data() {
return {
queryInfo: {
query: '',
pagenum: 1,
pagesize: 5,
},
orderList: [],
total: 0,
}
},
created() {
this.getOrderList()
},
methods: {
async getOrderList() {
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
},
handleSizeChange(newSize){
this.queryInfo.pagesize = newSize
this.getOrderList
},
handleCurrentChange(newPage){
this.queryInfo.pagenum = newPage
this.getOrderList()
}
},
}

地址数据联动

  • 点击地址修改按钮会弹出对话框,地址数据在citydata.js中,地址数据直接放在Order.vue组件同级目录即可
  • 地址数据要有层级关系,写法如下,子元素用children,具体显示的内容用labelvalue表示操作的具体值,层层嵌套即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
export default [
{
value: '北京市',
label: '北京市',
children: [
{
value: '东城区',
label: '东城区'
},
{
value: '密云区',
label: '密云区'
},
//...
]
},
{
value: '天津市',
label: '天津市',
children: [
{
value: '和平区',
label: '和平区'
},
{
value: '河东区',
label: '河东区'
},
// ...
]
},
// ...
{

}
}

1
2
3
4
5
6
7
8
<el-form-item label="省市区/县" prop="address1">
<el-cascader
v-model="addressForm.address1"
:options="cityData"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"
></el-cascader>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 导入地址数据
import cityData from './citydata'
export default {
name: 'Order',
data() {
return {
queryInfo: {
query: '',
pagenum: 1,
pagesize: 5,
},
orderList: [],
total: 0,
addressDialogVisible: false,
addressForm: {
address1: [],
address2: '',
},
addressFormRules: {
address1: [
{ required: true, message: '请选择省市区/县', trigger: 'blur' },
],
address2: [
{ required: true, message: '请填写详细地址', trigger: 'blur' },
],
},
cityData: cityData,
}
},
created() {
this.getOrderList()
},
methods: {
// ...
// 展示修改地址的对话框,给按钮绑定事件
showBox() {
this.addressDialogVisible = true
},
addressDialogClosed(){
this.$refs.addressFormRef.resetFields();
}
},
}

提交码云

  • 订单列表完成了可以提交码云
1
2
3
4
git status
git add .
git commit -m "完成了订单列表功能"
git push
  • 然后合并主分支再推送
1
2
3
git checkout master
git merge order
git push

数据统计

创建分支

  • 创建report分支用于开发新功能
1
2
3
git checkout -b report
git branch
git push -u origin report
  • 然后创建report/Report.vue组件,并配置路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
//...
{ path: '/reports', component: Report }
]
}
]
})

Echarts渲染图表

  • 在【依赖】中搜索echarts安装插件,推荐使用命令下载
1
npm install echarts -S
1
2
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px; height: 400px"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 1. 导入echarts
import * as echarts from 'echarts'
export default {
name: 'Report',
// 初始化图表,在mounted钩子调用时,此时DOM元素已经初始完毕了,才能渲染图表
mounted() {
// 3. 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))

// 4. 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
},
tooltip: {},
legend: {
data: ['销量'],
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
],
}
// 5. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
}

获取数据渲染图表

  • 发送请求获取数据,获取的数据需要和options对象合并
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// 1. 导入echarts
import * as echarts from 'echarts'
import _ from 'lodash'
export default {
name: 'Report',
data() {
return {
// 需要合并的数据
options: {
title: {
text: '用户来源',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#E9EEF3',
},
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
boundaryGap: false,
},
],
yAxis: [
{
type: 'value',
},
],
},
}
},
created() {},
// 初始化图表,在mounted钩子调用时,此时DOM元素已经初始完毕了,才能渲染图表
async mounted() {
// 3. 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))
// 发送请求获取数据
const { data: res } = await this.$http.get('reports/type/1')
if (res.meta.status !== 200) {
return this.$message.error('获取折线图数据失败')
}
// 4. 指定图表的配置项和数据,使用lodash的merge方法合并两个对象
const result = _.merge(res.data,this.options)
// 5. 使用刚指定的配置项和数据显示图表。
myChart.setOption(result)
},
methods: {},
}

提交码云

  • 本地分支代码更新并提交
1
2
3
4
git status
git add .
git commit -m "完成了数据统计"
git push
  • 合并主分支并推送
1
2
3
git checkout master
git merge report
git push