|
@@ -1,6 +1,8 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div class="subPage flex-h">
|
3
|
|
- <div class="img"></div>
|
|
3
|
+ <div class="img">
|
|
4
|
+ <img v-if="templateList.length" :src="templateList[templateActiveIndex].ModelImgUrl" width="100%" alt="">
|
|
5
|
+ </div>
|
4
|
6
|
<div class="flex-item">
|
5
|
7
|
<h1>基本信息</h1>
|
6
|
8
|
<form class="mainForm">
|
|
@@ -27,7 +29,7 @@
|
27
|
29
|
<div style="width:50%">
|
28
|
30
|
<el-input
|
29
|
31
|
placeholder="请输入活动名称"
|
30
|
|
- v-model="postData.title"
|
|
32
|
+ v-model="postData.FlashBuyName"
|
31
|
33
|
clearable>
|
32
|
34
|
</el-input>
|
33
|
35
|
</div>
|
|
@@ -39,7 +41,7 @@
|
39
|
41
|
<div style="width:50%">
|
40
|
42
|
<el-input
|
41
|
43
|
placeholder="请输入活动名额"
|
42
|
|
- v-model="postData.title"
|
|
44
|
+ v-model="postData.FlashBuyMaxAttendant"
|
43
|
45
|
clearable>
|
44
|
46
|
</el-input>
|
45
|
47
|
</div>
|
|
@@ -49,6 +51,11 @@
|
49
|
51
|
<span>活动模板:<em>*</em></span>
|
50
|
52
|
<div class="flex-item">
|
51
|
53
|
<div>
|
|
54
|
+ <div class="templateItem" v-for="(item,index) in templateList" :key="index">
|
|
55
|
+ <a :class="{'active': templateActiveIndex === index}" @click="cutTemplate(index)">
|
|
56
|
+ <img :src="item.ModelImgUrl" style="width:100%;height:100%;object-fit: contain;">
|
|
57
|
+ </a>
|
|
58
|
+ </div>
|
52
|
59
|
</div>
|
53
|
60
|
</div>
|
54
|
61
|
</li>
|
|
@@ -57,12 +64,14 @@
|
57
|
64
|
<div class="flex-item">
|
58
|
65
|
<div>
|
59
|
66
|
<el-date-picker
|
|
67
|
+ value-format="yyyy-MM-ddT00:00:00+08:00"
|
60
|
68
|
v-model="postData.StartDate"
|
61
|
69
|
type="date"
|
62
|
70
|
placeholder="选择开始日期">
|
63
|
71
|
</el-date-picker>
|
64
|
72
|
<span>至</span>
|
65
|
73
|
<el-date-picker
|
|
74
|
+ value-format="yyyy-MM-ddT00:00:00+08:00"
|
66
|
75
|
v-model="postData.EndDate"
|
67
|
76
|
type="date"
|
68
|
77
|
placeholder="选择截止日期">
|
|
@@ -74,7 +83,7 @@
|
74
|
83
|
<span>活动说明:</span>
|
75
|
84
|
<div class="flex-item">
|
76
|
85
|
<div>
|
77
|
|
- <quill-editor v-model="postData.editContent"
|
|
86
|
+ <quill-editor v-model="postData.FlashBuyInfo"
|
78
|
87
|
ref="myQuillEditor"
|
79
|
88
|
:options="editorOption">
|
80
|
89
|
</quill-editor>
|
|
@@ -85,8 +94,8 @@
|
85
|
94
|
<span>参与类型:<em>*</em></span>
|
86
|
95
|
<div class="flex-item">
|
87
|
96
|
<div>
|
88
|
|
- <el-radio v-model="postData.joinType" label="1">不限</el-radio>
|
89
|
|
- <el-radio v-model="postData.joinType" label="2">新用户</el-radio>
|
|
97
|
+ <el-radio v-model="postData.AttendantType" label="no">不限</el-radio>
|
|
98
|
+ <el-radio v-model="postData.AttendantType" label="newuser">新用户</el-radio>
|
90
|
99
|
</div>
|
91
|
100
|
</div>
|
92
|
101
|
</li>
|
|
@@ -94,25 +103,33 @@
|
94
|
103
|
<span>核销时间:<em>*</em></span>
|
95
|
104
|
<div class="flex-item">
|
96
|
105
|
<div class="flex-h" style="width: 100%;align-item: center;">
|
97
|
|
- <el-radio v-model="postData.verificationType" label="1" style="margin-right: 5px;"><em style="color: transparent;display:none;">1</em></el-radio>
|
|
106
|
+ <el-radio v-model="postData.ValidateType" label="days" style="margin-right: 5px;"><em style="color: transparent;display:none;">1</em></el-radio>
|
98
|
107
|
<span>领取后</span>
|
99
|
108
|
<div style="width: 100px;display: inline-block;">
|
100
|
109
|
<el-input
|
101
|
110
|
placeholder=""
|
102
|
|
- v-model="postData.validity"
|
|
111
|
+ v-model="postData.ValidateDays"
|
103
|
112
|
clearable>
|
104
|
113
|
</el-input>
|
105
|
114
|
</div>
|
106
|
115
|
<span>天内有效</span>
|
107
|
116
|
</div>
|
108
|
117
|
<div class="flex-h" style="width: 100%;align-item: center;margin-top: 10px;">
|
109
|
|
- <el-radio v-model="postData.verificationType" label="2" style="margin-right: 5px;"><em style="color: transparent;display:none;">2</em></el-radio>
|
|
118
|
+ <el-radio v-model="postData.ValidateType" label="date" style="margin-right: 5px;"><em style="color: transparent;display:none;">2</em></el-radio>
|
110
|
119
|
<span>有效期</span>
|
111
|
120
|
<div style="display: inline-block;">
|
112
|
121
|
<el-date-picker
|
113
|
|
- v-model="postData.validityDate"
|
|
122
|
+ value-format="yyyy-MM-ddT00:00:00+08:00"
|
|
123
|
+ v-model="postData.ValidateStart"
|
114
|
124
|
type="date"
|
115
|
|
- placeholder="选择日期">
|
|
125
|
+ placeholder="选择开始日期">
|
|
126
|
+ </el-date-picker>
|
|
127
|
+ <span>至</span>
|
|
128
|
+ <el-date-picker
|
|
129
|
+ value-format="yyyy-MM-ddT00:00:00+08:00"
|
|
130
|
+ v-model="postData.ValidateEnd"
|
|
131
|
+ type="date"
|
|
132
|
+ placeholder="选择截止日期">
|
116
|
133
|
</el-date-picker>
|
117
|
134
|
</div>
|
118
|
135
|
</div>
|
|
@@ -121,7 +138,8 @@
|
121
|
138
|
<li>
|
122
|
139
|
<el-button
|
123
|
140
|
size="mini"
|
124
|
|
- type="primary">保存</el-button>
|
|
141
|
+ type="primary"
|
|
142
|
+ @click="submitFlashbuy">保存</el-button>
|
125
|
143
|
<el-button
|
126
|
144
|
size="mini"
|
127
|
145
|
type="danger" @click="reback">取消</el-button>
|
|
@@ -139,35 +157,24 @@ const { mapActions: mapActivityFlashbuyActions } = createNamespacedHelpers('acti
|
139
|
157
|
export default {
|
140
|
158
|
data () {
|
141
|
159
|
return {
|
|
160
|
+ templateActiveIndex: 0, // 当前选择模板索引值
|
|
161
|
+ templateList: [], // 模板列表
|
142
|
162
|
postData: {
|
143
|
|
- caseid: '', // 案场id
|
144
|
|
- title: '', // 活动标题
|
145
|
|
- StartDate: '', // 开始日期
|
146
|
|
- EndDate: '', // 截止日期
|
147
|
|
- editContent: '', // 编辑内容
|
148
|
|
- tableData: [], // 奖品数据
|
149
|
|
- joinOff: true, // 参与人数开关
|
150
|
|
- joinNum: '', // 参与人数
|
151
|
|
- joinType: '1', // 参与类型
|
152
|
|
- lotteryNumType: 'fixedNum', // 抽奖次数类型
|
153
|
|
- lotteryTimeUnit: 'day', // 抽奖周期单位
|
154
|
|
- lotteryNum: '', // 抽奖次数
|
155
|
|
- shareType: 'newUser', // 分享设置
|
156
|
|
- addLotteryNum: '', // 新增抽奖次数
|
157
|
|
- systemUserLottery: true, // 系统用户抽奖
|
158
|
|
- prizeDefault: true, // 奖品内定
|
159
|
|
- prizeTableData: [], // 奖品内定表格数据
|
160
|
|
- verificationType: '1', // 核销类型
|
161
|
|
- validity: '', // 领取后有效天数
|
162
|
|
- validityDate: '', // 有效期
|
|
163
|
+ CaseId: '', // 案场id
|
|
164
|
+ FlashBuyName: '', // 活动名称
|
|
165
|
+ FlashBuyMaxAttendant: '', // 活动名额
|
|
166
|
+ ModelId: '', // 模板id
|
|
167
|
+ StartDate: '', // 活动开始日期
|
|
168
|
+ EndDate: '', // 活动截止日期
|
|
169
|
+ FlashBuyInfo: '', // 活动说明
|
|
170
|
+ AttendantType: 'no', // 参与类型
|
|
171
|
+ ValidateDays: '', // 领取后有效天数
|
|
172
|
+ ValidateStart: '', // 有效期开始时间
|
|
173
|
+ ValidateEnd: '', // 有效期截止时间
|
|
174
|
+ ValidateType: 'days', // 核销类型
|
|
175
|
+ FlashBuyStatus: 'active', // 活动状态
|
163
|
176
|
},
|
164
|
177
|
editorOption: {
|
165
|
|
- modules: {
|
166
|
|
- toolbar: [
|
167
|
|
- ['bold', 'italic', 'underline', 'strike', { 'color': [] }, { 'font': [] }, { 'header': 1 }, { 'header': 2 }, { 'indent': '-1' }, { 'indent': '+1' }, { 'list': 'ordered' }, { 'list': 'bullet' }, 'align', { 'direction': 'rtl' }, 'clean'], // toggled buttons
|
168
|
|
- ['blockquote', 'code-block']
|
169
|
|
- ]
|
170
|
|
- }
|
171
|
178
|
},
|
172
|
179
|
}
|
173
|
180
|
},
|
|
@@ -181,24 +188,142 @@ export default {
|
181
|
188
|
}),
|
182
|
189
|
CaseId: {
|
183
|
190
|
get () {
|
184
|
|
- return this.postData.caseid || this.defaultCaseId
|
|
191
|
+ return this.postData.CaseId || this.defaultCaseId
|
185
|
192
|
},
|
186
|
193
|
set (val) {
|
187
|
|
- this.postData.caseid = val
|
|
194
|
+ this.postData.CaseId = val
|
188
|
195
|
}
|
189
|
196
|
}
|
190
|
197
|
},
|
191
|
198
|
created () {
|
192
|
199
|
this.getFlashbuyTemplateList().then((res) => {
|
193
|
|
- console.log(JSON.stringify(res))
|
|
200
|
+ // console.log(JSON.stringify(res))
|
|
201
|
+ for (var n = 0; n < res.length; n++) {
|
|
202
|
+ res[n].currentImg = ''
|
|
203
|
+ }
|
|
204
|
+ this.templateList = res
|
|
205
|
+ if (this.$route.query.id) {
|
|
206
|
+ this.getFlashbuyById(this.$route.query.id).then((resr) => {
|
|
207
|
+ // console.log(JSON.stringify(resr))
|
|
208
|
+ this.postData = resr
|
|
209
|
+ for (var n = 0; n < this.templateList.length; n++) {
|
|
210
|
+ if (this.templateList[n].ModelId === this.postData.ModelId) {
|
|
211
|
+ this.templateActiveIndex = n
|
|
212
|
+ }
|
|
213
|
+ }
|
|
214
|
+ if (this.postData.ValidateType === 'date') {
|
|
215
|
+ this.postData.ValidateDays = ''
|
|
216
|
+ } else {
|
|
217
|
+ this.postData.ValidateStart = ''
|
|
218
|
+ this.postData.ValidateEnd = ''
|
|
219
|
+ }
|
|
220
|
+ })
|
|
221
|
+ }
|
194
|
222
|
})
|
195
|
223
|
},
|
196
|
224
|
methods: {
|
197
|
225
|
...mapActivityFlashbuyActions([
|
198
|
226
|
'getFlashbuyTemplateList',
|
|
227
|
+ 'addFlashbuy',
|
|
228
|
+ 'getFlashbuyById',
|
|
229
|
+ 'editFlashbuy',
|
199
|
230
|
]),
|
|
231
|
+ submitFlashbuy () { // 提交抢购数据
|
|
232
|
+ if (!this.checkData()) {
|
|
233
|
+ return false
|
|
234
|
+ }
|
|
235
|
+ this.postData.FlashBuyMaxAttendant = this.postData.FlashBuyMaxAttendant - 0
|
|
236
|
+ this.postData.ModelId = this.templateList[this.templateActiveIndex].ModelId
|
|
237
|
+ if (this.$route.query.id) {
|
|
238
|
+ this.editFlashbuy(this.postData).then((res) => {
|
|
239
|
+ this.$message({
|
|
240
|
+ message: '操作成功',
|
|
241
|
+ type: 'success'
|
|
242
|
+ })
|
|
243
|
+ this.$router.push({ name: 'snapUpList' })
|
|
244
|
+ })
|
|
245
|
+ } else {
|
|
246
|
+ this.addFlashbuy(this.postData).then((res) => {
|
|
247
|
+ this.$message({
|
|
248
|
+ message: '操作成功',
|
|
249
|
+ type: 'success'
|
|
250
|
+ })
|
|
251
|
+ this.$router.push({ name: 'snapUpList' })
|
|
252
|
+ })
|
|
253
|
+ }
|
|
254
|
+ },
|
|
255
|
+ checkData () { // 校验数据格式
|
|
256
|
+ if (this.postData.CaseId === '') {
|
|
257
|
+ this.$message({
|
|
258
|
+ type: 'error',
|
|
259
|
+ message: '请选择案场'
|
|
260
|
+ })
|
|
261
|
+ return false
|
|
262
|
+ }
|
|
263
|
+ if (this.postData.FlashBuyName === '') {
|
|
264
|
+ this.$message({
|
|
265
|
+ type: 'error',
|
|
266
|
+ message: '活动名称不能为空'
|
|
267
|
+ })
|
|
268
|
+ return false
|
|
269
|
+ }
|
|
270
|
+ if (this.postData.FlashBuyMaxAttendant === '') {
|
|
271
|
+ this.$message({
|
|
272
|
+ type: 'error',
|
|
273
|
+ message: '活动名额不能为空'
|
|
274
|
+ })
|
|
275
|
+ return false
|
|
276
|
+ }
|
|
277
|
+ if (this.postData.StartDate === '') {
|
|
278
|
+ this.$message({
|
|
279
|
+ type: 'error',
|
|
280
|
+ message: '活动开始时间不能为空'
|
|
281
|
+ })
|
|
282
|
+ return false
|
|
283
|
+ }
|
|
284
|
+ if (this.postData.EndDate === '') {
|
|
285
|
+ this.$message({
|
|
286
|
+ type: 'error',
|
|
287
|
+ message: '活动截止时间不能为空'
|
|
288
|
+ })
|
|
289
|
+ return false
|
|
290
|
+ }
|
|
291
|
+ if (this.postData.ValidateType === 'days') {
|
|
292
|
+ if (this.postData.ValidateDays - 0 <= 0 || (this.postData.ValidateDays - 0) % 1 !== 0) {
|
|
293
|
+ this.$message({
|
|
294
|
+ type: 'error',
|
|
295
|
+ message: '领取后有效天数须为大于0正整数'
|
|
296
|
+ })
|
|
297
|
+ return false
|
|
298
|
+ }
|
|
299
|
+ this.postData.ValidateDays = this.postData.ValidateDays - 0
|
|
300
|
+ delete this.postData.ValidateStart
|
|
301
|
+ delete this.postData.ValidateEnd
|
|
302
|
+ } else {
|
|
303
|
+ if (this.postData.ValidateStart === '') {
|
|
304
|
+ this.$message({
|
|
305
|
+ type: 'error',
|
|
306
|
+ message: '有效期开始时间不能为空'
|
|
307
|
+ })
|
|
308
|
+ return false
|
|
309
|
+ }
|
|
310
|
+ if (this.postData.ValidateEnd === '') {
|
|
311
|
+ this.$message({
|
|
312
|
+ type: 'error',
|
|
313
|
+ message: '有效期截止时间不能为空'
|
|
314
|
+ })
|
|
315
|
+ return false
|
|
316
|
+ }
|
|
317
|
+ delete this.postData.ValidateDays
|
|
318
|
+ }
|
|
319
|
+ return true
|
|
320
|
+ },
|
|
321
|
+ cutTemplate (index) { // 切换模板
|
|
322
|
+ this.templateActiveIndex = index
|
|
323
|
+ this.postData.ModelId = this.templateList[index].ModelId
|
|
324
|
+ },
|
200
|
325
|
reback () {
|
201
|
|
- this.$router.push({name: 'snapUpList'})
|
|
326
|
+ this.$router.push({ name: 'snapUpList' })
|
202
|
327
|
},
|
203
|
328
|
},
|
204
|
329
|
}
|
|
@@ -241,5 +366,26 @@ h1 {
|
241
|
366
|
border: 1px solid #eee;
|
242
|
367
|
border-bottom: none;
|
243
|
368
|
}
|
|
369
|
+ .templateItem {
|
|
370
|
+ width: 120px;
|
|
371
|
+ display: inline-block;
|
|
372
|
+ margin: 0 20px 20px 0;
|
|
373
|
+ position: relative;
|
|
374
|
+ overflow: hidden;
|
|
375
|
+ text-align: center;
|
|
376
|
+ vertical-align: top;
|
|
377
|
+ & > a {
|
|
378
|
+ width: 100%;
|
|
379
|
+ height: 120px;
|
|
380
|
+ display: inline-block;
|
|
381
|
+ position: relative;
|
|
382
|
+ overflow: hidden;
|
|
383
|
+ border: 1px dashed #ccc;
|
|
384
|
+ box-sizing: border-box;
|
|
385
|
+ &.active {
|
|
386
|
+ border-color: #409eff;
|
|
387
|
+ }
|
|
388
|
+ }
|
|
389
|
+ }
|
244
|
390
|
}
|
245
|
391
|
</style>
|