084351b6
 李宇
1
|
1
|
<template>
|
|
93c8bac5
李宇
1
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div>
<div style="display: flex;margin-bottom: 10px;">
<div
style="width: 30%;margin-right: 3%;text-align: center;padding: 20px 0;border-radius: 3px;border: 2px solid #eee;">
<div style="font-size: 14px;color: #a8abb2;">渠道领取数量</div>
<div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{info.channelReceipts}}</div>
</div>
<div
style="width: 30%;margin-right: 3%;text-align: center;padding: 20px 0;border-radius: 3px;border: 2px solid #eee;">
<div style="font-size: 14px;color: #a8abb2;">用户领取数量</div>
<div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{info.userClaim}}</div>
</div>
<div
style="width: 30%;margin-right: 3%;text-align: center;padding: 20px 0;border-radius: 3px;border: 2px solid #eee;">
<div style="font-size: 14px;color: #a8abb2;">用户使用数量</div>
<div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{info.userUsage}}</div>
</div>
<div
style="width: 30%;margin-right: 3%;text-align: center;padding: 20px 0;border-radius: 3px;border: 2px solid #eee;">
<div style="font-size: 14px;color: #a8abb2;">商家补贴总额</div>
<div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{Number(info.merchantsAmount)/100}}</div>
</div>
|
|
084351b6
李宇
1
|
24
|
</div>
|
|
93c8bac5
李宇
1
|
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="渠道领用" name="first">渠道领用</el-tab-pane>
<el-tab-pane label="用户领取" name="second">用户领取</el-tab-pane>
<el-tab-pane label="用户使用" name="third">用户使用</el-tab-pane>
<el-tab-pane label="商家补贴" name="fourth">商家补贴</el-tab-pane>
</el-tabs>
<!-- 搜索 -->
<!-- <div class="formSearch">
<el-form :inline="true" :model="query" class="demo-form-inline">
<el-form-item label="名称">
<el-input v-model="query.couponName" placeholder="请输入名称" />
</el-form-item>
</el-form>
<div>
<el-button style="background-color: #3F9B6A;color: #fff" @click="search">查询</el-button>
<el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
@click="clear">重置</el-button>
</div>
</div> -->
<!-- 表格 -->
<div class="tableBox">
<el-table ref="multipleTable" :data="qdlist" v-if="activeName == 'first'"
|
a182f238
 wesley88
1
|
47
|
:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
|
|
93c8bac5
李宇
1
|
48
49
50
51
52
53
54
55
56
57
58
59
|
tooltip-effect="light">
<el-table-column label="渠道方">
<template slot-scope="scope">{{ scope.row.channelParty }}</template>
</el-table-column>
<el-table-column label="优惠券">
<template slot-scope="scope">{{ infoyhq.couponName}}</template>
</el-table-column>
<el-table-column label="数量">
<template slot-scope="scope">{{ scope.row.quantity }}</template>
</el-table-column>
</el-table>
<el-table ref="multipleTable" :data="qdlist" v-if="activeName == 'second'"
|
|
a182f238
wesley88
1
|
60
|
:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
|
|
93c8bac5
李宇
1
|
61
62
63
64
65
66
67
68
69
70
71
72
|
tooltip-effect="light">
<el-table-column label="优惠券">
<template slot-scope="scope">{{ infoyhq.couponName}}</template>
</el-table-column>
<el-table-column label="用户手机号">
<template slot-scope="scope">{{ scope.row.userPhone}}</template>
</el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">待使用</template>
</el-table-column>
</el-table>
<el-table ref="multipleTable" :data="qdlist" v-if="activeName == 'third'"
|
|
a182f238
wesley88
1
|
73
|
:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
|
|
93c8bac5
李宇
1
|
74
75
76
77
78
79
80
81
82
83
84
85
|
tooltip-effect="light">
<el-table-column label="优惠券">
<template slot-scope="scope">{{ infoyhq.couponName}}</template>
</el-table-column>
<el-table-column label="用户手机号">
<template slot-scope="scope">{{ scope.row.userPhone}}</template>
</el-table-column>
<el-table-column label="使用时间">
<template slot-scope="scope">{{ scope.row.useTime }}</template>
</el-table-column>
</el-table>
<el-table ref="multipleTable" :data="qdlist" v-if="activeName == 'fourth'"
|
|
a182f238
wesley88
1
|
86
|
:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
|
|
93c8bac5
李宇
1
|
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
tooltip-effect="light">
<el-table-column label="商家">
<template slot-scope="scope">{{ scope.row.shop.shopName }}</template>
</el-table-column>
<el-table-column label="优惠券使用金额">
<template slot-scope="scope">{{Number(scope.row.sumDiscountAmount)/100}}</template>
</el-table-column>
</el-table>
<div style="display: flex;justify-content: space-between;margin: 20px 0;">
<div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{total}}</span> 项数据</div>
<el-pagination :current-page="query.pageNumber+1" :page-sizes="[10, 20, 50, 100]" :page-size="10" background small
layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</div>
</template>
|
|
084351b6
李宇
1
|
106
|
|
|
93c8bac5
李宇
1
|
107
108
109
110
111
112
113
|
<script>
import {
myCoupons,
couponStatistics,
cereCouponUsage,
cereCouponDistribution
} from '@/api/couponmanagement/couponlist.js'
|
|
084351b6
李宇
1
|
114
115
116
117
118
|
import router from '@/router';
import coupon from './coupon.vue';
export default {
|
|
93c8bac5
李宇
1
|
119
|
components: {
|
|
084351b6
李宇
1
|
120
121
|
coupon
},
|
|
93c8bac5
李宇
1
|
122
|
data() {
|
|
084351b6
李宇
1
|
123
|
return {
|
|
93c8bac5
李宇
1
|
124
125
126
127
128
|
activeName: 'first',
typelist: [{
num: 100,
type: '渠道领用',
color: '#ff5e5e'
|
|
084351b6
李宇
1
|
129
130
|
},
{
|
|
93c8bac5
李宇
1
|
131
132
133
|
num: 100,
type: '用户领取',
color: '#ff883a'
|
|
084351b6
李宇
1
|
134
135
|
},
{
|
|
93c8bac5
李宇
1
|
136
137
138
|
num: 100,
type: '用户使用',
color: '#ffc461'
|
|
084351b6
李宇
1
|
139
140
|
},
{
|
|
93c8bac5
李宇
1
|
141
142
143
|
num: 100,
type: '商家补贴',
color: '#a467f0'
|
|
084351b6
李宇
1
|
144
145
146
|
},
],
query: {
|
|
93c8bac5
李宇
1
|
147
|
pageNumber: 0,
|
|
084351b6
李宇
1
|
148
149
150
151
|
pageSize: 10
},
total: 0,
tableData: [],
|
|
93c8bac5
李宇
1
|
152
153
154
|
info: {},
qdlist: [],
infoyhq:{}
|
|
084351b6
李宇
1
|
155
156
|
}
},
|
|
93c8bac5
李宇
1
|
157
|
created() {
|
|
8db25941
李宇
2
|
158
|
// this.getAll()
|
|
084351b6
李宇
1
|
159
160
|
},
methods: {
|
|
93c8bac5
李宇
1
|
161
|
int(e,infoyhq) {
|
|
8db25941
李宇
2
|
162
|
this.fundPoolId = e
|
|
93c8bac5
李宇
1
|
163
164
165
166
|
this.infoyhq = infoyhq
couponStatistics({
id: this.fundPoolId
}).then(res => {
|
|
8db25941
李宇
2
|
167
|
console.error(res)
|
|
93c8bac5
李宇
1
|
168
|
this.info = res.data
|
|
8db25941
李宇
2
|
169
|
})
|
|
93c8bac5
李宇
1
|
170
171
|
console.error(this.infoyhq)
this.getall()
|
|
8db25941
李宇
2
|
172
173
|
// this.clear()
},
|
|
93c8bac5
李宇
1
|
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
getall() {
console.error(this.activeName)
this.qdlist = []
if(this.activeName == 'first') {
cereCouponDistribution({
...this.query,
couponId:this.fundPoolId
}).then(res => {
console.error(res)
this.qdlist = res.data.content
this.total = res.data.numberOfElements
})
} else if(this.activeName == 'second') {
cereCouponUsage({
...this.query,
couponStatus:'2',
couponId:this.fundPoolId
}).then(res => {
console.error(res)
this.qdlist = res.data.content
this.total = res.data.numberOfElements
})
} else if(this.activeName == 'third') {
cereCouponUsage({
...this.query,
couponStatus:'3',
couponId:this.fundPoolId
}).then(res => {
console.error(res)
this.qdlist = res.data.content
this.total = res.data.numberOfElements
})
} else if(this.activeName == 'fourth') {
couponStatistics({
id: this.fundPoolId
}).then(res => {
console.error(res)
this.qdlist = res.data.keyUseCouponStatistics
this.total = res.data.keyUseCouponStatistics.length
})
}
},
|
|
084351b6
李宇
1
|
216
217
|
handleClick(tab, event) {
console.log(tab, event);
|
|
93c8bac5
李宇
1
|
218
219
|
this.query.pageNumber = 0
this.getall()
|
|
084351b6
李宇
1
|
220
221
222
|
},
xq(e) {
// 跳转路由
|
|
8db25941
李宇
2
|
223
224
225
226
227
228
229
230
|
// router.push({
// path: '/other/coupon',
// query: {
// id: e.id
// }
// })
console.error(e.id)
// this.$emit('changecapitalpoolid',e.id)
|
|
084351b6
李宇
1
|
231
|
},
|
|
93c8bac5
李宇
1
|
232
233
234
235
236
237
238
|
// async getAll() {
// const res = await myCoupons(this.query)
// console.error(res.data.content)
// this.tableData = res.data.content
// this.total = res.data.numberOfElements
// },
handleSizeChange(val) {
|
|
084351b6
李宇
1
|
239
240
241
|
this.query.pageSize = val
this.getAll()
},
|
|
93c8bac5
李宇
1
|
242
243
|
handleCurrentChange(val) {
this.query.pageNumber = val-1
|
|
084351b6
李宇
1
|
244
245
|
this.getAll()
},
|
|
93c8bac5
李宇
1
|
246
|
search() {
|
|
084351b6
李宇
1
|
247
248
249
250
251
|
this.total = 1
this.query.pageNumber = 1
this.getAll()
},
// 重置
|
|
93c8bac5
李宇
1
|
252
|
clear() {
|
|
084351b6
李宇
1
|
253
254
255
256
257
258
259
260
261
262
263
|
this.query = {
activityName: '',
state: '',
pageNumber: 1,
pageSize: 10
}
this.getAll()
},
}
}
|
|
93c8bac5
李宇
1
|
264
|
</script>
|
|
084351b6
李宇
1
|
265
|
|
|
93c8bac5
李宇
1
|
266
|
<style scoped lang="scss">
|
|
084351b6
李宇
1
|
267
268
269
|
::v-deep .el-form-item {
margin-bottom: 0;
}
|
|
93c8bac5
李宇
1
|
270
|
|
|
084351b6
李宇
1
|
271
272
273
|
::v-deep .el-tabs__content {
display: none;
}
|
|
084351b6
李宇
1
|
274
|
|
|
93c8bac5
李宇
1
|
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
|
::v-deep .el-tabs__item {
font-size: 16px;
font-family: "Alibaba PuHuiTi 2.0-55 Regular";
}
::v-deep .el-dialog__header {
border-bottom: 2px solid #eee;
background-color: #fff;
}
::v-deep .el-dialog__title {
color: #303133;
}
.footer {
font-size: 24px;
.btn_list {
display: flex;
flex-direction: row-reverse;
span {
padding: 0;
margin: 0;
width: 100px;
height: 32px;
line-height: 32px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 4px;
box-sizing: border-box;
&:hover {
cursor: pointer;
}
&:nth-child(1) {
background: rgba(255, 255, 255, 1);
order: 1px solid rgba(224, 229, 235, 1);
border: 1px solid rgba(224, 229, 235, 1);
}
&:nth-child(2) {
background: #3f9b6a;
color: #fff;
margin-right: 20px;
|
|
084351b6
李宇
1
|
323
324
325
|
}
}
}
|
|
93c8bac5
李宇
1
|
326
327
328
|
}
.couponPage {
|
|
084351b6
李宇
1
|
329
|
|
|
93c8bac5
李宇
1
|
330
331
332
|
padding: 0 20px 20px 20px;
min-height: calc(100vh - 50px - 20px);
background-color: #Fff;
|
|
084351b6
李宇
1
|
333
334
|
|
|
93c8bac5
李宇
1
|
335
|
.tableBox {
|
|
084351b6
李宇
1
|
336
|
text-align: center;
|
|
93c8bac5
李宇
1
|
337
338
|
.fenye {
|
|
084351b6
李宇
1
|
339
340
341
342
|
// margin: 20px;
}
}
}
|
|
93c8bac5
李宇
1
|
343
|
|
|
084351b6
李宇
1
|
344
345
346
347
|
.couponDialogBox {
max-height: 600px;
overflow-y: auto;
}
|
|
084351b6
李宇
1
|
348
|
|
|
93c8bac5
李宇
1
|
349
350
351
352
353
354
355
356
357
|
.formSearch {
display: flex;
width: 100%;
font-size: 14px;
justify-content: space-between;
// padding-bottom: 10px;
align-items: center;
margin: 20px 0;
|
|
084351b6
李宇
1
|
358
359
|
}
|
|
93c8bac5
李宇
1
|
360
|
|
|
d64cd58f
wesley88
上传验收小程序
|
361
|
|
|
084351b6
李宇
1
|
362
363
|
.greens {
|
|
93c8bac5
李宇
1
|
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
|
color: #3F9B6A;
}
::v-deep .buttonHover:hover {
color: #3f9b6a !important;
border-color: #c5e1d2 !important;
background-color: #ecf5f0 !important;
outline: none;
}
::v-deep .el-pagination__total {
position: absolute;
left: 10px;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #3f9b6a;
}
</style>
|
