许成详 6 years ago
parent
commit
df75a44f76

+ 491
- 103
src/pages/system/marketingActivities/listOfLotteryActivities/edit.vue View File

@@ -1,120 +1,434 @@
1 1
 <template>
2
-  <div class="subPage">
3
-    <nav class="flex-h">
4
-      <a class="flex-item" :class="{'active': activeIndex === 0}" @click="activeIndex = 0">基础信息</a>
5
-      <a class="flex-item" :class="{'active': activeIndex === 1}" @click="activeIndex = 1">奖品信息</a>
6
-      <a class="flex-item" :class="{'active': activeIndex === 2}" @click="activeIndex = 2">活动设置</a>
7
-    </nav>
8
-    <div class="cutBody">
9
-      <form class="mainForm">
10
-        <div :hidden="activeIndex !== 0">
11
-          <ul>
12
-            <li class="flex-h">
13
-              <span>案场:<em>*</em></span>
14
-              <div class="flex-item">
15
-                <div style="width:50%">
16
-                  <el-select v-model="CaseId" placeholder="请选择案场">
17
-                    <el-option
18
-                      v-for="item in cases"
19
-                      :key="item.CaseId"
20
-                      :label="item.CaseName"
21
-                      :value="item.CaseId">
22
-                    </el-option>
23
-                  </el-select>
2
+  <div class="subPage flex-h">
3
+    <div class="img"></div>
4
+    <div class="flex-item">
5
+      <nav class="flex-h">
6
+        <a class="flex-item" :class="{'active': activeIndex === 0}" @click="activeIndex = 0">基础信息</a>
7
+        <a class="flex-item" :class="{'active': activeIndex === 1}" @click="activeIndex = 1">奖品信息</a>
8
+        <a class="flex-item" :class="{'active': activeIndex === 2}" @click="activeIndex = 2">活动设置</a>
9
+      </nav>
10
+      <div class="cutBody">
11
+        <form class="mainForm">
12
+          <div :hidden="activeIndex !== 0">
13
+            <ul>
14
+              <li class="flex-h">
15
+                <span>案场:<em>*</em></span>
16
+                <div class="flex-item">
17
+                  <div style="width:50%">
18
+                    <el-select v-model="CaseId" placeholder="请选择案场">
19
+                      <el-option
20
+                        v-for="item in cases"
21
+                        :key="item.CaseId"
22
+                        :label="item.CaseName"
23
+                        :value="item.CaseId">
24
+                      </el-option>
25
+                    </el-select>
26
+                  </div>
27
+                </div>
28
+              </li>
29
+              <li class="flex-h">
30
+                <span>活动标题:<em>*</em></span>
31
+                <div class="flex-item">
32
+                  <div style="width:50%">
33
+                    <el-input
34
+                      placeholder="请输入活动标题"
35
+                      v-model="postData.title"
36
+                      clearable>
37
+                    </el-input>
38
+                  </div>
39
+                </div>
40
+              </li>
41
+              <li class="flex-h">
42
+                <span>活动时间:<em>*</em></span>
43
+                <div class="flex-item">
44
+                  <div>
45
+                    <el-date-picker
46
+                      v-model="postData.StartDate"
47
+                      type="date"
48
+                      placeholder="选择开始日期">
49
+                    </el-date-picker>
50
+                    <span>至</span>
51
+                    <el-date-picker
52
+                      v-model="postData.EndDate"
53
+                      type="date"
54
+                      placeholder="选择截止日期">
55
+                    </el-date-picker>
56
+                  </div>
57
+                </div>
58
+              </li>
59
+              <li class="flex-h">
60
+                <span>活动模板:<em>*</em></span>
61
+                <div class="flex-item">
62
+                  <div>
63
+                  </div>
64
+                </div>
65
+              </li>
66
+              <li class="flex-h">
67
+                <span>活动规则说明:<em>*</em></span>
68
+                <div class="flex-item">
69
+                  <div>
70
+                    <quill-editor v-model="postData.editContent"
71
+                      ref="myQuillEditor"
72
+                      :options="editorOption">
73
+                    </quill-editor>
74
+                  </div>
75
+                </div>
76
+              </li>
77
+            </ul>
78
+          </div>
79
+          <div :hidden="activeIndex !== 1">
80
+            <el-table
81
+              :data="postData.tableData"
82
+              style="width: 100%">
83
+              <el-table-column
84
+                prop="photo"
85
+                label="奖品图片"
86
+                width="180">
87
+              </el-table-column>
88
+              <el-table-column
89
+                prop="name"
90
+                label="奖品名称">
91
+              </el-table-column>
92
+              <el-table-column
93
+                prop="num"
94
+                label="奖品数量">
95
+              </el-table-column>
96
+              <el-table-column
97
+                prop="per"
98
+                label="中奖概率">
99
+              </el-table-column>
100
+              <el-table-column
101
+                prop="address"
102
+                label="操作"
103
+                width="200">
104
+                <template slot-scope="scope">
105
+                  <el-button
106
+                    size="mini"
107
+                    type="success">编辑</el-button>
108
+                  <el-button
109
+                    size="mini"
110
+                    type="warning">删除</el-button>
111
+                </template>
112
+              </el-table-column>
113
+            </el-table>
114
+            <div style="text-align:center;margin-top:20px;">
115
+              <el-button
116
+                size="mini"
117
+                type="primary" @click="addPrize">新增奖品</el-button>
118
+            </div>
119
+          </div>
120
+          <div :hidden="activeIndex !== 2">
121
+            <ul>
122
+              <li class="flex-h">
123
+                <span>参与人数:</span>
124
+                <div class="flex-item flex-h">
125
+                  <el-switch
126
+                    v-model="postData.joinOff"
127
+                    :active-text="postData.joinOff ? '开启' : '关闭'">
128
+                  </el-switch>
129
+                  <div :hidden="!postData.joinOff">
130
+                    <span>仅限</span>
131
+                    <div style="width:100px;">
132
+                      <el-input
133
+                        placeholder=""
134
+                        v-model="postData.joinNum"
135
+                        clearable>
136
+                      </el-input>
137
+                    </div>
138
+                    <span>人参与</span>
139
+                  </div>
140
+                </div>
141
+              </li>
142
+              <li class="flex-h">
143
+                <span>参与类型:</span>
144
+                <div class="flex-item flex-h">
145
+                  <el-switch
146
+                    v-model="postData.joinType"
147
+                    active-value="newUser"
148
+                    inactive-value="allUser"
149
+                    :active-text="postData.joinType === 'newUser' ? '新用户' : '不限'">
150
+                  </el-switch>
151
+                </div>
152
+              </li>
153
+              <li class="flex-h">
154
+                <span>抽奖次数:</span>
155
+                <div class="flex-item flex-h">
156
+                  <el-switch
157
+                    v-model="postData.lotteryNumType"
158
+                    active-value="fixedNum"
159
+                    inactive-value="fixedTimeNum"
160
+                    :active-text="postData.lotteryNumType === 'fixedNum' ? '固定次数' : '周期次数'">
161
+                  </el-switch>
162
+                  <div :hidden="postData.lotteryNumType !== 'fixedNum'">
163
+                    <span>每个账号</span>
164
+                    <div style="width:100px;">
165
+                      <el-input
166
+                        placeholder=""
167
+                        v-model="postData.lotteryNum"
168
+                        clearable>
169
+                      </el-input>
170
+                    </div>
171
+                    <span>次</span>
172
+                  </div>
173
+                  <div :hidden="postData.lotteryNumType !== 'fixedTimeNum'">
174
+                    <span>每</span>
175
+                    <div style="width:100px;">
176
+                      <el-select v-model="postData.lotteryTimeUnit" placeholder="请选择">
177
+                        <el-option
178
+                          v-for="item in lotteryTimeUnitOptions"
179
+                          :key="item.id"
180
+                          :label="item.value"
181
+                          :value="item.id">
182
+                        </el-option>
183
+                      </el-select>
184
+                    </div>
185
+                    <div style="width:100px;">
186
+                      <el-input
187
+                        placeholder=""
188
+                        v-model="postData.lotteryNum"
189
+                        clearable>
190
+                      </el-input>
191
+                    </div>
192
+                    <span>次</span>
193
+                  </div>
24 194
                 </div>
195
+              </li>
196
+              <li class="flex-h">
197
+                <span>分享设置:</span>
198
+                <div class="flex-item flex-h">
199
+                  <el-switch
200
+                    v-model="postData.shareType"
201
+                    active-value="newUser"
202
+                    inactive-value="allUser"
203
+                    :active-text="postData.shareType === 'newUser' ? '分享新用户' : '不限'">
204
+                  </el-switch>
205
+                  <div :hidden="postData.shareType !== 'newUser'">
206
+                    <span>新增</span>
207
+                    <div style="width:100px;">
208
+                      <el-input
209
+                        placeholder=""
210
+                        v-model="postData.addLotteryNum"
211
+                        clearable>
212
+                      </el-input>
213
+                    </div>
214
+                    <span>次抽奖</span>
215
+                  </div>
216
+                </div>
217
+              </li>
218
+              <li class="flex-h">
219
+                <span>系统用户抽奖:</span>
220
+                <div class="flex-item flex-h">
221
+                  <el-switch
222
+                    v-model="postData.systemUserLottery"
223
+                    :active-text="postData.systemUserLottery ? '开启' : '关闭'">
224
+                  </el-switch>
225
+                </div>
226
+              </li>
227
+              <li class="flex-h">
228
+                <span>奖品内定设置:</span>
229
+                <div class="flex-item flex-h">
230
+                  <el-switch
231
+                    v-model="postData.prizeDefault"
232
+                    :active-text="postData.prizeDefault ? '开启' : '关闭'">
233
+                  </el-switch>
234
+                </div>
235
+              </li>
236
+            </ul>
237
+            <el-table
238
+              :hidden="!postData.prizeDefault"
239
+              :data="postData.prizeTableData"
240
+              style="width: 100%">
241
+              <el-table-column
242
+                prop="photo"
243
+                label="奖品图片"
244
+                width="180">
245
+              </el-table-column>
246
+              <el-table-column
247
+                prop="name"
248
+                label="奖品名称">
249
+              </el-table-column>
250
+              <el-table-column
251
+                prop="address"
252
+                label="操作"
253
+                width="200">
254
+                <template slot-scope="scope">
255
+                  <el-button
256
+                    size="mini"
257
+                    type="success">编辑</el-button>
258
+                  <el-button
259
+                    size="mini"
260
+                    type="warning">删除</el-button>
261
+                </template>
262
+              </el-table-column>
263
+            </el-table>
264
+          </div>
265
+        </form>
266
+      </div>
267
+    </div>
268
+    <el-dialog
269
+      title="新增奖品"
270
+      :visible.sync="centerDialogVisible"
271
+      width="600px"
272
+      center>
273
+      <form class="mainForm">
274
+        <ul>
275
+          <li class="flex-h">
276
+            <span>奖品类型:<em>*</em></span>
277
+            <div class="flex-item">
278
+              <el-select v-model="addPrizeInfo.type" placeholder="请选择">
279
+                <el-option
280
+                  v-for="item in prizeOptions"
281
+                  :key="item.id"
282
+                  :label="item.value"
283
+                  :value="item.id">
284
+                </el-option>
285
+              </el-select>
286
+            </div>
287
+          </li>
288
+          <li class="flex-h" v-if="addPrizeInfo.type === 'prize'">
289
+            <span>奖品名称:<em>*</em></span>
290
+            <div class="flex-item">
291
+              <div style="width: 200px;">
292
+                <el-input
293
+                  placeholder=""
294
+                  v-model="addPrizeInfo.prizeName"
295
+                  clearable>
296
+                </el-input>
297
+              </div>
298
+            </div>
299
+          </li>
300
+          <li class="flex-h" v-if="addPrizeInfo.type === 'coupon'">
301
+            <span>卡券类型:<em>*</em></span>
302
+            <div class="flex-item">
303
+              <el-select v-model="addPrizeInfo.cardOrCoupon" placeholder="请选择">
304
+                <el-option
305
+                  v-for="item in cardOrCouponOptions"
306
+                  :key="item.id"
307
+                  :label="item.value"
308
+                  :value="item.id">
309
+                </el-option>
310
+              </el-select>
311
+            </div>
312
+          </li>
313
+          <li class="flex-h" v-if="addPrizeInfo.type === 'coupon'">
314
+            <span>选择卡券:<em>*</em></span>
315
+            <div class="flex-item">
316
+              <el-select v-model="addPrizeInfo.cardOrCouponId" placeholder="请选择">
317
+                <el-option
318
+                  v-for="item in cardOrCouponList"
319
+                  :key="item.id"
320
+                  :label="item.value"
321
+                  :value="item.id">
322
+                </el-option>
323
+              </el-select>
324
+            </div>
325
+          </li>
326
+          <li class="flex-h">
327
+            <span>奖品图片:<em>*</em></span>
328
+            <div class="flex-item">
329
+            </div>
330
+          </li>
331
+          <li class="flex-h">
332
+            <span>奖品数量:<em>*</em></span>
333
+            <div class="flex-item">
334
+              <div style="width: 200px;">
335
+                <el-input
336
+                  placeholder=""
337
+                  v-model="addPrizeInfo.prizeNum"
338
+                  clearable>
339
+                </el-input>
25 340
               </div>
26
-            </li>
27
-            <li class="flex-h">
28
-              <span>活动标题:<em>*</em></span>
29
-              <div class="flex-item">
30
-                <div style="width:50%">
341
+            </div>
342
+          </li>
343
+          <li class="flex-h" v-if="addPrizeInfo.type === 'prize'">
344
+            <span>核销时间:<em>*</em></span>
345
+            <div class="flex-item">
346
+              <div class="flex-h" style="width: 100%;align-item: center;">
347
+                <el-radio v-model="addPrizeInfo.verificationType" label="1" style="margin-right: 5px;"><em style="color: transparent;display:none;">1</em></el-radio>
348
+                <span>领取后</span>
349
+                <div style="width: 100px;display: inline-block;">
31 350
                   <el-input
32
-                    placeholder="请输入活动标题"
33
-                    v-model="postData.title"
351
+                    placeholder=""
352
+                    v-model="addPrizeInfo.validity"
34 353
                     clearable>
35 354
                   </el-input>
36 355
                 </div>
356
+                <span>天内有效</span>
37 357
               </div>
38
-            </li>
39
-            <li class="flex-h">
40
-              <span>活动时间:<em>*</em></span>
41
-              <div class="flex-item">
42
-                <div>
43
-                  <el-date-picker
44
-                    v-model="postData.StartDate"
45
-                    type="date"
46
-                    placeholder="选择开始日期">
47
-                  </el-date-picker>
48
-                  <span>至</span>
358
+              <div class="flex-h" style="width: 100%;align-item: center;margin-top: 10px;">
359
+                <el-radio v-model="addPrizeInfo.verificationType" label="2" style="margin-right: 5px;"><em style="color: transparent;display:none;">2</em></el-radio>
360
+                <span>有效期</span>
361
+                <div style="display: inline-block;">
49 362
                   <el-date-picker
50
-                    v-model="postData.EndDate"
363
+                    v-model="addPrizeInfo.validityDate"
51 364
                     type="date"
52
-                    placeholder="选择截止日期">
365
+                    placeholder="选择日期">
53 366
                   </el-date-picker>
54 367
                 </div>
55 368
               </div>
56
-            </li>
57
-            <li class="flex-h">
58
-              <span>活动模板:<em>*</em></span>
59
-              <div class="flex-item">
60
-                <div>
61
-                </div>
62
-              </div>
63
-            </li>
64
-            <li class="flex-h">
65
-              <span>活动规则说明:<em>*</em></span>
66
-              <div class="flex-item">
67
-                <div>
68
-                  <quill-editor v-model="postData.editContent"
69
-                    ref="myQuillEditor"
70
-                    :options="editorOption">
71
-                  </quill-editor>
72
-                </div>
369
+            </div>
370
+          </li>
371
+          <li class="flex-h" v-if="addPrizeInfo.type === 'prize'">
372
+            <span>兑换说明:</span>
373
+            <div class="flex-item">
374
+              <div>
375
+                <quill-editor v-model="addPrizeInfo.editContent"
376
+                  ref="myQuillEditor"
377
+                  :options="editorOption">
378
+                </quill-editor>
73 379
               </div>
74
-            </li>
75
-          </ul>
76
-        </div>
77
-        <div :hidden="activeIndex !== 1">
78
-          <el-table
79
-            :data="postData.tableData"
80
-            style="width: 100%">
81
-            <el-table-column
82
-              prop="photo"
83
-              label="奖品图片"
84
-              width="180">
85
-            </el-table-column>
86
-            <el-table-column
87
-              prop="name"
88
-              label="奖品名称">
89
-            </el-table-column>
90
-            <el-table-column
91
-              prop="num"
92
-              label="奖品数量">
93
-            </el-table-column>
94
-            <el-table-column
95
-              prop="per"
96
-              label="中奖概率">
97
-            </el-table-column>
98
-            <el-table-column
99
-              prop="address"
100
-              label="操作"
101
-              width="200">
102
-              <template slot-scope="scope">
103
-                <el-button
104
-                  size="mini"
105
-                  type="success">编辑</el-button>
106
-                <el-button
107
-                  size="mini"
108
-                  type="warning">删除</el-button>
109
-              </template>
110
-            </el-table-column>
111
-          </el-table>
112
-        </div>
113
-        <div :hidden="activeIndex !== 2">
114
-          3
115
-        </div>
380
+            </div>
381
+          </li>
382
+        </ul>
116 383
       </form>
117
-    </div>
384
+      <div style="text-align:center;margin:20px 0 0;padding-bottom:20px;">
385
+        <el-button
386
+          size="mini"
387
+          type="primary">保存</el-button>
388
+        <el-button
389
+          size="mini"
390
+          type="danger"
391
+          @click="closeAddPrize">取消</el-button>
392
+      </div>
393
+    </el-dialog>
394
+    <el-dialog
395
+      title="添加手机号"
396
+      :visible.sync="showAddPhone"
397
+      width="600px"
398
+      center>
399
+      <div style="text-align:center;font-size:0;">
400
+        <div style="width:300px;display:inline-block;margin-right:20px;">
401
+          <el-input
402
+            placeholder="请输入正确手机号"
403
+            v-model="addPhoneNum"
404
+            clearable>
405
+          </el-input>
406
+        </div>
407
+        <el-button
408
+          type="primary">确定</el-button>
409
+      </div>
410
+      <div style="border:1px solid #eee;border-bottom:none;margin:20px 0 0;">
411
+        <el-table
412
+          :data="addPhoneTableData"
413
+          style="width: 100%">
414
+          <el-table-column
415
+            prop="phone"
416
+            label="手机号">
417
+          </el-table-column>
418
+          <el-table-column
419
+            prop="address"
420
+            label="操作">
421
+            <template slot-scope="scope">
422
+              <el-button
423
+                size="mini"
424
+                type="warning">删除</el-button>
425
+            </template>
426
+          </el-table-column>
427
+        </el-table>
428
+      </div>
429
+      <div style="text-align:center;padding-bottom:20px;">
430
+      </div>
431
+    </el-dialog>
118 432
   </div>
119 433
 </template>
120 434
 <script>
@@ -124,7 +438,51 @@ import { quillEditor } from 'vue-quill-editor'
124 438
 export default {
125 439
   data () {
126 440
     return {
441
+      addPhoneTableData: [], // 添加手机号数据
442
+      addPhoneNum: '', // 添加手机号
443
+      showAddPhone: false,
444
+      prizeOptions: [{
445
+        value: '城的空间内部券',
446
+        id: 'coupon'
447
+      }, {
448
+        value: '第三方奖品',
449
+        id: 'prize'
450
+      }],
451
+      cardOrCouponOptions: [{
452
+        value: '课程体验卡',
453
+        id: 'courseCard'
454
+      }, {
455
+        value: '课程体验券',
456
+        id: 'courseCoupon'
457
+      }, {
458
+        value: '饮品优惠券',
459
+        id: 'drinkCoupon'
460
+      }],
461
+      cardOrCouponList: [],
462
+      addPrizeInfo: {
463
+        type: 'coupon', // 奖品类型
464
+        cardOrCoupon: 'courseCard', // 卡券类型
465
+        cardOrCouponId: '', // 卡券id
466
+        prizeNum: '', // 奖品数量
467
+        prizeImg: '', // 奖品图片
468
+        prizeName: '', // 奖品名称
469
+        verificationType: '1', // 核销类型
470
+        validity: '', // 领取后有效天数
471
+        validityDate: '', // 有效期
472
+        editContent: '', // 兑换说明
473
+      },
474
+      centerDialogVisible: false,
127 475
       activeIndex: 0,
476
+      lotteryTimeUnitOptions: [{
477
+        value: '天',
478
+        id: 'day'
479
+      }, {
480
+        value: '周',
481
+        id: 'week'
482
+      }, {
483
+        value: '月',
484
+        id: 'month'
485
+      }],
128 486
       postData: {
129 487
         caseid: '', // 案场id
130 488
         title: '', // 活动标题
@@ -132,6 +490,17 @@ export default {
132 490
         EndDate: '', // 截止日期
133 491
         editContent: '', // 编辑内容
134 492
         tableData: [], // 奖品数据
493
+        joinOff: true, // 参与人数开关
494
+        joinNum: '', // 参与人数
495
+        joinType: 'newUser', // 参与类型
496
+        lotteryNumType: 'fixedNum', // 抽奖次数类型
497
+        lotteryTimeUnit: 'day', // 抽奖周期单位
498
+        lotteryNum: '', // 抽奖次数
499
+        shareType: 'newUser', // 分享设置
500
+        addLotteryNum: '', // 新增抽奖次数
501
+        systemUserLottery: true, // 系统用户抽奖
502
+        prizeDefault: true, // 奖品内定
503
+        prizeTableData: [], // 奖品内定表格数据
135 504
       },
136 505
       editorOption: {
137 506
         modules: {
@@ -163,6 +532,12 @@ export default {
163 532
   mounted () {
164 533
   },
165 534
   methods: {
535
+    addPrize () { // 新增奖品
536
+      this.centerDialogVisible = true
537
+    },
538
+    closeAddPrize () { // 关闭新增奖品
539
+      this.centerDialogVisible = false
540
+    },
166 541
   },
167 542
 }
168 543
 </script>
@@ -174,6 +549,19 @@ export default {
174 549
   width: 100%;
175 550
   li {
176 551
     margin-bottom: 20px;
552
+    div.flex-h {
553
+      align-items: center;
554
+      & > * {
555
+        margin-right: 20px;
556
+      }
557
+      > div {
558
+        white-space: nowrap;
559
+        > * {
560
+          display: inline-block;
561
+          margin-right: 5px;
562
+        }
563
+      }
564
+    }
177 565
     > span {
178 566
       line-height: 40px;
179 567
       min-width: 100px;
@@ -183,7 +571,7 @@ export default {
183 571
       }
184 572
     }
185 573
   }
186
-  .el-table.el-table--fit.el-table--enable-row-hover{
574
+  .el-table.el-table--fit.el-table--enable-row-hover {
187 575
     border: 1px solid #eee;
188 576
     border-bottom: none;
189 577
   }

+ 3
- 0
src/pages/system/marketingActivities/listOfLotteryActivities/index.vue View File

@@ -92,6 +92,9 @@
92 92
               <el-button
93 93
                 size="mini"
94 94
                 type="success">启用</el-button>
95
+              <el-button
96
+                size="mini"
97
+                type="success">编辑</el-button>
95 98
               <el-button
96 99
                 size="mini"
97 100
                 type="success">分享记录</el-button>

+ 14
- 3
src/pages/system/marketingActivities/listOfLotteryActivities/page.scss View File

@@ -1,14 +1,25 @@
1 1
 .subPage{
2
-  >*{
3
-    width: calc(100% - 40px);
2
+  .img{
3
+    width: 300px;
4 4
     position: relative;
5 5
     overflow: hidden;
6 6
     margin: 20px;
7
+    margin-right: 0;
8
+    img{
9
+      width: 100%;
10
+    }
11
+    &+.flex-item{
12
+      margin: 20px;
13
+      position: relative;
14
+      overflow: hidden;
15
+    }
7 16
   }
8
-  >nav{
17
+  nav{
9 18
     box-sizing: border-box;
10 19
     border: 1px solid #eee;
11 20
     border-radius: 6px;
21
+    position: relative;
22
+    overflow: hidden;
12 23
     a{
13 24
       line-height: 40px;
14 25
       text-align: center;

+ 200
- 2
src/pages/system/marketingActivities/snapUpList/edit.vue View File

@@ -1,15 +1,178 @@
1 1
 <template>
2
-  <div class="subPage">
3
-    新增抢购活动
2
+  <div class="subPage flex-h">
3
+    <div class="img"></div>
4
+    <div class="flex-item">
5
+      <h1>基本信息</h1>
6
+      <form class="mainForm">
7
+          <div>
8
+            <ul>
9
+              <li class="flex-h">
10
+                <span>案场:<em>*</em></span>
11
+                <div class="flex-item">
12
+                  <div style="width:50%">
13
+                    <el-select v-model="CaseId" placeholder="请选择案场">
14
+                      <el-option
15
+                        v-for="item in cases"
16
+                        :key="item.CaseId"
17
+                        :label="item.CaseName"
18
+                        :value="item.CaseId">
19
+                      </el-option>
20
+                    </el-select>
21
+                  </div>
22
+                </div>
23
+              </li>
24
+              <li class="flex-h">
25
+                <span>活动名称:<em>*</em></span>
26
+                <div class="flex-item">
27
+                  <div style="width:50%">
28
+                    <el-input
29
+                      placeholder="请输入活动名称"
30
+                      v-model="postData.title"
31
+                      clearable>
32
+                    </el-input>
33
+                  </div>
34
+                </div>
35
+              </li>
36
+              <li class="flex-h">
37
+                <span>活动名额:<em>*</em></span>
38
+                <div class="flex-item">
39
+                  <div style="width:50%">
40
+                    <el-input
41
+                      placeholder="请输入活动名额"
42
+                      v-model="postData.title"
43
+                      clearable>
44
+                    </el-input>
45
+                  </div>
46
+                </div>
47
+              </li>
48
+              <li class="flex-h">
49
+                <span>活动模板:<em>*</em></span>
50
+                <div class="flex-item">
51
+                  <div>
52
+                  </div>
53
+                </div>
54
+              </li>
55
+              <li class="flex-h">
56
+                <span>活动时间:<em>*</em></span>
57
+                <div class="flex-item">
58
+                  <div>
59
+                    <el-date-picker
60
+                      v-model="postData.StartDate"
61
+                      type="date"
62
+                      placeholder="选择开始日期">
63
+                    </el-date-picker>
64
+                    <span>至</span>
65
+                    <el-date-picker
66
+                      v-model="postData.EndDate"
67
+                      type="date"
68
+                      placeholder="选择截止日期">
69
+                    </el-date-picker>
70
+                  </div>
71
+                </div>
72
+              </li>
73
+              <li class="flex-h">
74
+                <span>活动说明:</span>
75
+                <div class="flex-item">
76
+                  <div>
77
+                    <quill-editor v-model="postData.editContent"
78
+                      ref="myQuillEditor"
79
+                      :options="editorOption">
80
+                    </quill-editor>
81
+                  </div>
82
+                </div>
83
+              </li>
84
+              <li class="flex-h">
85
+                <span>参与类型:<em>*</em></span>
86
+                <div class="flex-item">
87
+                  <div>
88
+                    <el-radio v-model="postData.joinType" label="1">不限</el-radio>
89
+                    <el-radio v-model="postData.joinType" label="2">新用户</el-radio>
90
+                  </div>
91
+                </div>
92
+              </li>
93
+              <li class="flex-h">
94
+                <span>核销时间:<em>*</em></span>
95
+                <div class="flex-item">
96
+                  <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>
98
+                    <span>领取后</span>
99
+                    <div style="width: 100px;display: inline-block;">
100
+                      <el-input
101
+                        placeholder=""
102
+                        v-model="postData.validity"
103
+                        clearable>
104
+                      </el-input>
105
+                    </div>
106
+                    <span>天内有效</span>
107
+                  </div>
108
+                  <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>
110
+                    <span>有效期</span>
111
+                    <div style="display: inline-block;">
112
+                      <el-date-picker
113
+                        v-model="postData.validityDate"
114
+                        type="date"
115
+                        placeholder="选择日期">
116
+                      </el-date-picker>
117
+                    </div>
118
+                  </div>
119
+                </div>
120
+              </li>
121
+              <li>
122
+                <el-button
123
+                  size="mini"
124
+                  type="primary">保存</el-button>
125
+                <el-button
126
+                  size="mini"
127
+                  type="danger">取消</el-button>
128
+              </li>
129
+            </ul>
130
+          </div>
131
+        </form>
132
+    </div>
4 133
   </div>
5 134
 </template>
6 135
 <script>
7 136
 import { mapState } from 'vuex'
137
+import { quillEditor } from 'vue-quill-editor'
8 138
 export default {
9 139
   data () {
10 140
     return {
141
+      postData: {
142
+        caseid: '', // 案场id
143
+        title: '', // 活动标题
144
+        StartDate: '', // 开始日期
145
+        EndDate: '', // 截止日期
146
+        editContent: '', // 编辑内容
147
+        tableData: [], // 奖品数据
148
+        joinOff: true, // 参与人数开关
149
+        joinNum: '', // 参与人数
150
+        joinType: '1', // 参与类型
151
+        lotteryNumType: 'fixedNum', // 抽奖次数类型
152
+        lotteryTimeUnit: 'day', // 抽奖周期单位
153
+        lotteryNum: '', // 抽奖次数
154
+        shareType: 'newUser', // 分享设置
155
+        addLotteryNum: '', // 新增抽奖次数
156
+        systemUserLottery: true, // 系统用户抽奖
157
+        prizeDefault: true, // 奖品内定
158
+        prizeTableData: [], // 奖品内定表格数据
159
+        verificationType: '1', // 核销类型
160
+        validity: '', // 领取后有效天数
161
+        validityDate: '', // 有效期
162
+      },
163
+      editorOption: {
164
+        modules: {
165
+          toolbar: [
166
+            ['bold', 'italic', 'underline', 'strike', { 'color': [] }, { 'font': [] }, { 'header': 1 }, { 'header': 2 }, { 'indent': '-1' }, { 'indent': '+1' }, { 'list': 'ordered' }, { 'list': 'bullet' }, 'align', { 'direction': 'rtl' }, 'clean'], // toggled buttons
167
+            ['blockquote', 'code-block']
168
+          ]
169
+        }
170
+      },
11 171
     }
12 172
   },
173
+  components: {
174
+    quillEditor,
175
+  },
13 176
   computed: {
14 177
     ...mapState({
15 178
       cases: x => x.app.cases.list,
@@ -34,4 +197,39 @@ export default {
34 197
 <!-- Add "scoped" attribute to limit CSS to this component only -->
35 198
 <style lang="scss" scoped>
36 199
 @import "page.scss";
200
+h1{
201
+  line-height: 40px;
202
+  font-size: 16px;
203
+}
204
+.mainForm {
205
+  width: 100%;
206
+  li {
207
+    margin-bottom: 20px;
208
+    div.flex-h {
209
+      align-items: center;
210
+      & > * {
211
+        margin-right: 20px;
212
+      }
213
+      > div {
214
+        white-space: nowrap;
215
+        > * {
216
+          display: inline-block;
217
+          margin-right: 5px;
218
+        }
219
+      }
220
+    }
221
+    > span {
222
+      line-height: 40px;
223
+      min-width: 100px;
224
+      margin-right: 10px;
225
+      em {
226
+        color: red;
227
+      }
228
+    }
229
+  }
230
+  .el-table.el-table--fit.el-table--enable-row-hover {
231
+    border: 1px solid #eee;
232
+    border-bottom: none;
233
+  }
234
+}
37 235
 </style>

+ 16
- 32
src/pages/system/marketingActivities/snapUpList/page.scss View File

@@ -1,33 +1,17 @@
1
-
2
-// 活动列表 标题
3
-.title{
4
-  font-size: 28px;
5
-  color: darkgray;
6
-  width: 100%;
7
-  border-bottom: 1px solid darkgray;
8
-  padding-left: 30px;
9
-  padding-top: 20px;
10
-  padding-bottom: 20px;
11
-}
12
-
13
-// 头部div
14
-.head-div {
15
-  width: 100%;
16
-  margin-left: 30px;
17
-  margin-right: 30px;
18
-  padding-top: 30px;
19
-}
20
-
21
-.button-div {
22
-  width: 100%;
23
-  margin-left: 30px;
24
-  margin-right: 30px;
25
-  margin-bottom: 30px;
26
-  float: right;
27
-}
28
-// 表格 div
29
-.content {
30
-  width: 100%;
31
-  margin-left: 30px;
32
-  margin-right: 30px;
1
+.subPage{
2
+  .img{
3
+    width: 300px;
4
+    position: relative;
5
+    overflow: hidden;
6
+    margin: 20px;
7
+    margin-right: 0;
8
+    img{
9
+      width: 100%;
10
+    }
11
+    &+.flex-item{
12
+      margin: 20px;
13
+      position: relative;
14
+      overflow: hidden;
15
+    }
16
+  }
33 17
 }