1
+ <template >
2
+ <div >
3
+ <!-- 面包屑区域 -->
4
+ <el-breadcrumb separator-class =" el-icon-arrow-right" >
5
+ <el-breadcrumb-item :to =" { path: '/welcome' }" >首页</el-breadcrumb-item >
6
+ <el-breadcrumb-item >订单管理</el-breadcrumb-item >
7
+ <el-breadcrumb-item >订单列表</el-breadcrumb-item >
8
+ </el-breadcrumb >
9
+ <el-card >
10
+ <el-row >
11
+ <el-col :span =" 8" >
12
+ <el-input placeholder =" 请输入内容" v-model =" queryInfo.query" clearable @click =" getOrderData" >
13
+ <el-button slot =" append" icon =" el-icon-search" @click =" getOrderData" ></el-button >
14
+ </el-input >
15
+ </el-col >
16
+ </el-row >
17
+ <el-table :data =" orderTableList" border stripe >
18
+ <el-table-column type =" index" ></el-table-column >
19
+ <el-table-column label =" 订单编号" prop =" order_number" ></el-table-column >
20
+ <el-table-column label =" 订单价格" prop =" order_price" ></el-table-column >
21
+ <el-table-column label =" 是否付款" >
22
+ <template slot-scope="scope">
23
+ <el-tag size =" mini" v-if =" scope.row.pay_status === '1'" >已付款</el-tag >
24
+ <el-tag type =" danger" size =" mini" v-else >未付款</el-tag >
25
+ </template >
26
+ </el-table-column >
27
+ <el-table-column label =" 是否发货" prop =" is_send" ></el-table-column >
28
+ <el-table-column label =" 下单时间" prop =" create_time" >
29
+ <template slot-scope="scope">
30
+ {{scope.row.create_time | dateFormat}}
31
+ </template >
32
+ </el-table-column >
33
+ <el-table-column label =" 操作" width =" 180px" >
34
+ <template >
35
+ <el-button type =' primary' icon =" el-icon-edit" size =" mini" @click =" adressDialog" >地址</el-button >
36
+ <el-button type =" warning" icon =" el-icon-location" size =" mini" @click =" progressDialog" >物流</el-button >
37
+ </template >
38
+ </el-table-column >
39
+ </el-table >
40
+ <el-pagination @size-change =" handleSizeChange" @current-change =" handleCurrentChange" :current-page =" queryInfo.pagenum" :page-sizes =" [1, 3, 5, 10]" :page-size =" queryInfo.pagesize" layout =" total, sizes, prev, pager, next, jumper" :total =" total" >
41
+ </el-pagination >
42
+ <el-dialog title =" 收货地址" :visible.sync =" addressDialogVisible" @close =" adressClose" >
43
+ <el-form :model =" addressForm" :rules =" adressFormRules" ref =" adressFormRef" >
44
+ <el-form-item label =" 省市区/县" prop =" adress" >
45
+ <el-cascader v-model =" addressForm.adress" :options =" citydata" expandTrigger =" hover" ></el-cascader >
46
+ </el-form-item >
47
+ <el-form-item label =" 详细地址" prop =" detailAdress" >
48
+ <el-input v-model =" addressForm.detailAdress" ></el-input >
49
+ </el-form-item >
50
+ </el-form >
51
+ <span slot =" footer" class =" dialog-footer" >
52
+ <el-button @click =" addressDialogVisible = false" >取 消</el-button >
53
+ <el-button type =" primary" @click =" addressDialogVisible = false" >确 定</el-button >
54
+ </span >
55
+ </el-dialog >
56
+ <el-dialog title =" 物流信息" :visible.sync =" progressFormVisible" >
57
+ <span >物流信息</span >
58
+ </el-dialog >
59
+ </el-card >
60
+ </div >
61
+ </template >
62
+
63
+ <script >
64
+ import citydata from ' ./citydata'
65
+
66
+ export default {
67
+ name: ' ' ,
68
+ data () {
69
+ return {
70
+ queryInfo: {
71
+ query: ' ' ,
72
+ pagenum: 1 ,
73
+ pagesize: 5
74
+ },
75
+ orderTableList: [],
76
+ total: 0 ,
77
+ addressDialogVisible: false ,
78
+ addressForm: {
79
+ adress: ' ' ,
80
+ detailAdress: ' ' ,
81
+ },
82
+ adressFormRules: {
83
+ adress: [
84
+ { required: true , message: ' 请输入城市' , trigger: ' blur' }
85
+ ],
86
+ detailAdress: [
87
+ { required: true , message: ' 请输入详细地址' , trigger: ' blur' }
88
+ ]
89
+ },
90
+ citydata,
91
+ progressFormVisible: false ,
92
+ progressInfo: {}
93
+ }
94
+ },
95
+ methods: {
96
+ async getOrderData () {
97
+ console .log (this .queryInfo .query );
98
+ const { data: res } = await this .$axios .get (' orders' , { params: this .queryInfo });
99
+ if (res .meta .status !== 200 ) return this .$message .error (' 查询订单数据失败' );
100
+ this .orderTableList = res .data .goods ;
101
+ this .total = res .data .total ;
102
+ console .log (res);
103
+ },
104
+ handleSizeChange (newSize ) {
105
+ this .queryInfo .pagesize = newSize;
106
+ this .getOrderData ();
107
+ },
108
+ handleCurrentChange (newPage ) {
109
+ this .queryInfo .pagenum = newPage;
110
+ this .getOrderData ();
111
+ },
112
+ adressDialog () {
113
+ this .addressDialogVisible = true ;
114
+ },
115
+ adressClose () {
116
+ this .$refs .adressFormRef .resetFields ();
117
+ },
118
+ async progressDialog () {
119
+ /* const { data: res } = await this.$axios.get('kuaidi/1106975712662');
120
+ console.log(res);
121
+ if (res.meta.status !== 200) return this.$message.error('获取物流数据失败');
122
+ this.progressInfo = res.data; */
123
+ this .progressFormVisible = true ;
124
+ }
125
+ },
126
+ created () {
127
+ this .getOrderData ();
128
+ }
129
+ };
130
+ </script >
131
+
132
+ <style scoped>
133
+ .el-cascader {
134
+ width : 100% ;
135
+ }
136
+ </style >
0 commit comments