3f535f30
 杨鑫
'初始'
|
1
|
<template>
|
8db25941
 李宇
2
|
2
3
4
5
6
7
8
9
10
|
<div style="padding: 0 10px;background: #fff;margin: 0 10px;">
<div v-if="activityVisible == '2'" style="padding-right: 20px;padding-bottom: 30px;">
<AddCoupon
ref="addCoupon"
:coupon-id="activityId"
@reset="reset"
/>
</div>
<div class="pending" v-if="activityVisible == '1'">
|
|
3f535f30
杨鑫
'初始'
|
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<div class="formSearch">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="优惠券名称">
<el-input v-model="formInline.couponName" placeholder="请输入内容"
style="width: 180px;margin-right: 15px" />
</el-form-item>
<el-form-item label="优惠券类型">
<el-select v-model="formInline.couponType" placeholder="请选择优惠券类型"
style="width: 180px;margin-right: 15px">
<el-option label="全部" :value="null" />
<el-option label="满减券" value="1" />
<el-option label="折扣券" value="2" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="formInline.state" placeholder="请选择优惠券状态"
style="width: 180px;margin-right: 15px">
<el-option label="全部" :value="null" />
<el-option label="未开始" value="0" />
<el-option label="进行中" value="1" />
<el-option label="已结束" value="2" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="formInline.dates"
style="width: 250px;margin-right: 15px"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
<el-form-item>
</el-form-item>
</el-form>
<div>
<el-button @click="search" style="background-color: #3F9B6A;color:#fff;" >查询</el-button>
<el-button @click="clear" class="buttonHover"
style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
</div>
</div>
<div style="margin-bottom:20px;">
<el-button @click="addActivity" style="background-color: #3F9B6A;color:#fff;">新增</el-button>
</div>
<!-- 表格 -->
<div class="tableBox">
<el-table
ref="multipleTable"
:data="tableData"
:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
tooltip-effect="dark"
>
<el-table-column label="优惠券名称" width="220">
<template slot-scope="scope">{{ scope.row.couponName }}</template>
</el-table-column>
<el-table-column label="类型" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.couponType === 1">满减券</span>
<span v-if="scope.row.couponType === 2">折扣券</span>
</template>
</el-table-column>
<el-table-column label="状态" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.state === 0">未开始</span>
<span v-if="scope.row.state === 1">进行中</span>
<span v-if="scope.row.state === 2">已结束</span>
</template>
</el-table-column>
<el-table-column prop="content" label="内容" show-overflow-tooltip />
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<div class="btnList">
<div v-if="scope.row.state === 0" type="text" @click="editActivity(scope.row.shopCouponId)"
class="tableBtn greens">编辑</div>
<div v-if="scope.row.state !== 0" type="text" @click="showData(scope.row.shopCouponId)"
class="tableBtn greens">数据</div>
|
|
8db25941
李宇
2
|
93
94
|
<div @click="delCouponFn(scope.row)" v-if="scope.row.state === 0 || scope.row.state === 2" slot="reference" type="text" class="tableBtn greens">删除</div>
<div v-if="scope.row.state === 1" slot="reference" type="text" @click="stopFn(scope.row.shopCouponId)"
|
|
3f535f30
杨鑫
'初始'
|
95
|
class="tableBtn greens">停止</div>
|
|
3f535f30
杨鑫
'初始'
|
96
97
98
99
|
</div>
</template>
</el-table-column>
</el-table>
|
|
8db25941
李宇
2
|
100
101
102
103
104
105
106
|
<div style="display: flex;justify-content: space-between;margin-top: 30px;" class="bom">
<div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{total}}</span> 项数据</div>
<el-pagination :current-page="formInline.page" :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>
|
|
93c8bac5
李宇
1
|
107
|
</div>
|
|
3f535f30
杨鑫
'初始'
|
108
109
110
|
</div>
<!-- 新增活动 -->
|
|
8db25941
李宇
2
|
111
|
|
|
3f535f30
杨鑫
'初始'
|
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
<!-- 数据展示 -->
<el-dialog
:close-on-click-modal="false"
title="数据效果"
:visible.sync="isDataVisible"
width="50%"
custom-class="bian_css"
>
<!-- 表格 -->
<div class="dataEffect" style="padding:20px;">
<h3>数据统计至昨日</h3>
<div class="couponTit">优惠券名称：{{ dataInfo.couponName }}</div>
<div class="couponTit">
优惠券总数：{{ dataInfo.couponTotal?dataInfo.couponTotal:'0' }} 张，已领取 {{ dataInfo.received?dataInfo.received:'0' }} 张
</div>
<div class="dataListBox">
<div class="dataItem">
<span>¥{{ dataInfo.total }}</span>
<p>用券成交总额</p>
</div>
<div class="dataItem">
<span>¥{{ dataInfo.useMoney }}</span>
<p>使用优惠券总额</p>
</div>
<div class="dataItem">
<span>{{ dataInfo.count }}件</span>
<p>购买商品总数</p>
</div>
</div>
<div class="tabListInfo">使用该优惠券购买的商品</div>
<div class="tableBox">
<el-table
ref="multipleTable"
:data="dataInfo.products"
height="150"
:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
tooltip-effect="dark"
>
<el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
<el-table-column prop="number" label="付款件数" show-overflow-tooltip />
<el-table-column prop="users" label="付款人数" show-overflow-tooltip />
</el-table>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import AddCoupon from '@/views/marketing/coupon/add.vue'
import { getCoupon, delCoupon, getCouponData, stopCoupon } from '@/api/marketing'
import activityMixin from '@/views/marketing/mixin/index.js'
function CouponQueryForm() {
this.couponName = '' // 优惠券名称
this.couponType = null // 优惠券类型
this.dates = [] // 创建时间数组
this.endTime = '' // 创建时间结束时间
this.page = 1 // 当前页
this.pageSize = 10 // 每页记录数
this.startTime = '' // 创建时间开始时间
this.state = null // 优惠券状态
}
export default {
name: 'Coupon',
components: {
AddCoupon
},
mixins: [activityMixin],
data() {
return {
|
|
8db25941
李宇
2
|
184
|
type:'2',
|
|
3f535f30
杨鑫
'初始'
|
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
216
217
218
219
220
221
222
223
224
225
|
formInline: new CouponQueryForm(),
isDataVisible: false, // 数据效果展示
dataInfo: [], // 商品使用数据
total: 1,
tableData: [],
dataEffect: []
}
},
mounted() {
this.getAll(this.formInline)
},
methods: {
closeModal() {
this.activityId = null
this.$refs.addCoupon.resetData()
},
// 查询
search() {
this.total = 1
this.formInline.page = 1
if (this.formInline.dates.length !== 0) {
this.formInline.startTime = this.formInline.dates[0]
this.formInline.endTime = this.formInline.dates[1]
}
this.getAll(this.formInline)
},
// 清除
clear() {
this.formInline = new CouponQueryForm()
this.getAll(this.formInline)
},
handleSizeChange(val) {
this.formInline.pageSize = val
this.getAll(this.formInline)
},
handleCurrentChange(val) {
this.formInline.page = val
this.getAll(this.formInline)
},
// 停止优惠券活动
stopFn(id) {
|
|
8db25941
李宇
2
|
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
|
let that = this
this.$confirm('是否将该优惠券停止?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.error(id)
stopCoupon({ shopCouponId: id }).then(res => {
if (res.code === '') {
that.$message.success('停止成功')
that.formInline.page = 1
that.getAll(that.formInline)
} else {
that.$message.error(res.message)
}
})
}).catch(() => {
});
|
|
3f535f30
杨鑫
'初始'
|
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
|
},
// 初始化查询所有数据
async getAll(formInline) {
formInline.type = 1
const res = await getCoupon(formInline)
this.total = res.data.total
this.tableData = res.data.list
},
// 显示数据效果
showData(id) {
getCouponData({ shopCouponId: id }).then(res => {
if (res.code === '') {
this.dataInfo = res.data
} else {
this.$message.error(res.message)
}
})
this.isDataVisible = true
},
// 删除优惠券
delCouponFn(data) {
|
|
8db25941
李宇
2
|
266
267
268
269
270
271
272
|
let that = this
this.$confirm('是否将该优惠券删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delCoupon({ shopCouponId: data.shopCouponId }).then(res => {
|
|
3f535f30
杨鑫
'初始'
|
273
|
if (res.code === '') {
|
|
8db25941
李宇
2
|
274
275
276
|
that.$message.success('删除成功')
that.formInline.page = 1
that.getAll(that.formInline)
|
|
3f535f30
杨鑫
'初始'
|
277
|
} else {
|
|
8db25941
李宇
2
|
278
|
that.$message.error(res.message)
|
|
3f535f30
杨鑫
'初始'
|
279
280
|
}
})
|
|
8db25941
李宇
2
|
281
282
283
|
}).catch(() => {
});
|
|
3f535f30
杨鑫
'初始'
|
284
285
286
287
288
289
290
291
292
293
294
295
|
}
}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");
.pending {
padding: 0 20px 20px 20px;
background-color:#fff;
|
|
8db25941
李宇
2
|
296
|
// min-height: calc(100vh - 50px - 20px);
|
|
3f535f30
杨鑫
'初始'
|
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
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
|
}
.fenye {
margin-top: 20px;
display: flex;
justify-content: flex-end;
position: relative;
}
.dataEffect {
.couponTit {
margin: 20px 0;
}
.dataListBox {
display: flex;
justify-content: center;
margin: 30px 0;
.dataItem {
width: 220px;
height: 120px;
border-radius: 8px;
border: 1px solid #999999;
text-align: center;
margin: 0 10px;
span {
display: block;
margin-top: 35px;
}
}
}
.tabListInfo {
margin: 20px 0;
}
}
.formSearch {
display: flex;
width: 100%;
font-size: 14px;
justify-content: space-between;
}
::v-deep .el-pagination__total {
position: absolute;
left: 10px;
}
</style>
<style scoped>
.btnList /deep/ .delCls {
margin-left: 10px;
}
.group-dialog /deep/ .el-dialog__headerbtn .el-dialog__close {
color: #FFFFFF;
}
::v-deep .el-input__inner:focus {
border: #11be59 1px solid;
}
::v-deep .el-input__inner:hover {
border: #11be59 1px solid;
}
::v-deep .el-select .el-input.is-focus .el-input__inner{
border-color:#11be59
}
::v-deep .el-form-item__label{
font-weight: normal;
font-size: 14px;
}
::v-deep .btn .el-button:focus,
.el-button:hover {
border: 1px solid #3F9B6A;
}
::v-deep .el-button {
border: 1px solid #3F9B6A;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #3F9B6A;
}
.el-radio__input.is-checked+.el-radio__label{
color:#3F9B6A;
}
</style>
<style>
.el-select-dropdown__item.selected{
color: #3F9B6A;
}
</style>
|
