许成详 6 years ago
parent
commit
acc407e1c3

+ 61
- 4
package-lock.json View File

@@ -4877,8 +4877,7 @@
4877 4877
     "extend": {
4878 4878
       "version": "3.0.2",
4879 4879
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
4880
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
4881
-      "dev": true
4880
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
4882 4881
     },
4883 4882
     "extend-shallow": {
4884 4883
       "version": "3.0.2",
@@ -5013,6 +5012,11 @@
5013 5012
       "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
5014 5013
       "dev": true
5015 5014
     },
5015
+    "fast-diff": {
5016
+      "version": "1.1.2",
5017
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
5018
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
5019
+    },
5016 5020
     "fast-json-stable-stringify": {
5017 5021
       "version": "2.0.0",
5018 5022
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
@@ -9875,8 +9879,7 @@
9875 9879
     "object-assign": {
9876 9880
       "version": "4.1.1",
9877 9881
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
9878
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
9879
-      "dev": true
9882
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
9880 9883
     },
9881 9884
     "object-copy": {
9882 9885
       "version": "0.1.0",
@@ -10218,6 +10221,11 @@
10218 10221
         "no-case": "2.3.2"
10219 10222
       }
10220 10223
     },
10224
+    "parchment": {
10225
+      "version": "1.1.4",
10226
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
10227
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
10228
+    },
10221 10229
     "parse-asn1": {
10222 10230
       "version": "5.1.1",
10223 10231
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
@@ -12754,6 +12762,41 @@
12754 12762
       "integrity": "sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw==",
12755 12763
       "dev": true
12756 12764
     },
12765
+    "quill": {
12766
+      "version": "1.3.6",
12767
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.6.tgz",
12768
+      "integrity": "sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==",
12769
+      "requires": {
12770
+        "clone": "2.1.2",
12771
+        "deep-equal": "1.0.1",
12772
+        "eventemitter3": "2.0.3",
12773
+        "extend": "3.0.2",
12774
+        "parchment": "1.1.4",
12775
+        "quill-delta": "3.6.3"
12776
+      },
12777
+      "dependencies": {
12778
+        "clone": {
12779
+          "version": "2.1.2",
12780
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
12781
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
12782
+        },
12783
+        "eventemitter3": {
12784
+          "version": "2.0.3",
12785
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
12786
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
12787
+        }
12788
+      }
12789
+    },
12790
+    "quill-delta": {
12791
+      "version": "3.6.3",
12792
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
12793
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
12794
+      "requires": {
12795
+        "deep-equal": "1.0.1",
12796
+        "extend": "3.0.2",
12797
+        "fast-diff": "1.1.2"
12798
+      }
12799
+    },
12757 12800
     "randomatic": {
12758 12801
       "version": "3.0.0",
12759 12802
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz",
@@ -15447,6 +15490,15 @@
15447 15490
         "vue": "2.5.17"
15448 15491
       }
15449 15492
     },
15493
+    "vue-quill-editor": {
15494
+      "version": "3.0.6",
15495
+      "resolved": "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz",
15496
+      "integrity": "sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==",
15497
+      "requires": {
15498
+        "object-assign": "4.1.1",
15499
+        "quill": "1.3.6"
15500
+      }
15501
+    },
15450 15502
     "vue-router": {
15451 15503
       "version": "3.0.1",
15452 15504
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
@@ -15478,6 +15530,11 @@
15478 15530
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
15479 15531
       "dev": true
15480 15532
     },
15533
+    "vue-ueditor": {
15534
+      "version": "0.1.3",
15535
+      "resolved": "https://registry.npmjs.org/vue-ueditor/-/vue-ueditor-0.1.3.tgz",
15536
+      "integrity": "sha1-3My26oOhVwtmOkpqA6su4qzExHE="
15537
+    },
15481 15538
     "vuex": {
15482 15539
       "version": "3.0.1",
15483 15540
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",

+ 2
- 0
package.json View File

@@ -27,7 +27,9 @@
27 27
     "vue-cookie": "^1.1.4",
28 28
     "vue-fullcalendar": "^1.0.9",
29 29
     "vue-morris": "0.0.13",
30
+    "vue-quill-editor": "^3.0.6",
30 31
     "vue-router": "^3.0.1",
32
+    "vue-ueditor": "^0.1.3",
31 33
     "vuex": "^3.0.1",
32 34
     "ws": "^6.0.0"
33 35
   },

+ 7
- 0
src/main.js View File

@@ -14,11 +14,18 @@ import toolClass from './util/util'
14 14
 import store from './store'
15 15
 import Vuex from 'vuex'
16 16
 import md5 from 'js-md5'
17
+import VueQuillEditor from 'vue-quill-editor'
18
+// require styles 引入样式
19
+import 'quill/dist/quill.core.css'
20
+import 'quill/dist/quill.snow.css'
21
+import 'quill/dist/quill.bubble.css'
22
+
17 23
 const Base64 = require('js-base64').Base64
18 24
 Vue.use(ElementUI)
19 25
 Vue.use(Cookies)
20 26
 Vue.use(VueAMap)
21 27
 Vue.use(Vuex)
28
+Vue.use(VueQuillEditor)
22 29
 
23 30
 VueAMap.initAMapApiLoader({
24 31
   key: 'f0d1d4f82432504003ebf46e5e36ff03',

+ 155
- 1
src/pages/system/marketingActivities/listOfLotteryActivities/edit.vue View File

@@ -1,13 +1,146 @@
1 1
 <template>
2 2
   <div class="subPage">
3
-    新增抽奖活动
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>
24
+                </div>
25
+              </div>
26
+            </li>
27
+            <li class="flex-h">
28
+              <span>活动标题:<em>*</em></span>
29
+              <div class="flex-item">
30
+                <div style="width:50%">
31
+                  <el-input
32
+                    placeholder="请输入活动标题"
33
+                    v-model="postData.title"
34
+                    clearable>
35
+                  </el-input>
36
+                </div>
37
+              </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>
49
+                  <el-date-picker
50
+                    v-model="postData.EndDate"
51
+                    type="date"
52
+                    placeholder="选择截止日期">
53
+                  </el-date-picker>
54
+                </div>
55
+              </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>
73
+              </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>
116
+      </form>
117
+    </div>
4 118
   </div>
5 119
 </template>
6 120
 <script>
7 121
 import { mapState } from 'vuex'
122
+import { quillEditor } from 'vue-quill-editor'
123
+
8 124
 export default {
9 125
   data () {
10 126
     return {
127
+      activeIndex: 0,
128
+      postData: {
129
+        caseid: '', // 案场id
130
+        title: '', // 活动标题
131
+        StartDate: '', // 开始日期
132
+        EndDate: '', // 截止日期
133
+        editContent: '', // 编辑内容
134
+        tableData: [], // 奖品数据
135
+      },
136
+      editorOption: {
137
+        modules: {
138
+          toolbar: [
139
+            ['bold', 'italic', 'underline', 'strike', { 'color': [] }, { 'font': [] }, { 'header': 1 }, { 'header': 2 }, { 'indent': '-1' }, { 'indent': '+1' }, { 'list': 'ordered' }, { 'list': 'bullet' }, 'align', { 'direction': 'rtl' }, 'clean'], // toggled buttons
140
+            ['blockquote', 'code-block']
141
+          ]
142
+        }
143
+      },
11 144
     }
12 145
   },
13 146
   computed: {
@@ -24,6 +157,9 @@ export default {
24 157
       }
25 158
     }
26 159
   },
160
+  components: {
161
+    quillEditor,
162
+  },
27 163
   mounted () {
28 164
   },
29 165
   methods: {
@@ -34,4 +170,22 @@ export default {
34 170
 <!-- Add "scoped" attribute to limit CSS to this component only -->
35 171
 <style lang="scss" scoped>
36 172
 @import "page.scss";
173
+.mainForm {
174
+  width: 100%;
175
+  li {
176
+    margin-bottom: 20px;
177
+    > span {
178
+      line-height: 40px;
179
+      min-width: 100px;
180
+      margin-right: 10px;
181
+      em {
182
+        color: red;
183
+      }
184
+    }
185
+  }
186
+  .el-table.el-table--fit.el-table--enable-row-hover{
187
+    border: 1px solid #eee;
188
+    border-bottom: none;
189
+  }
190
+}
37 191
 </style>

+ 31
- 32
src/pages/system/marketingActivities/listOfLotteryActivities/page.scss View File

@@ -1,33 +1,32 @@
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
+  >*{
3
+    width: calc(100% - 40px);
4
+    position: relative;
5
+    overflow: hidden;
6
+    margin: 20px;
7
+  }
8
+  >nav{
9
+    box-sizing: border-box;
10
+    border: 1px solid #eee;
11
+    border-radius: 6px;
12
+    a{
13
+      line-height: 40px;
14
+      text-align: center;
15
+      font-size: 13px;
16
+      color: #333;
17
+      box-sizing: border-box;
18
+      border-left: 1px solid #eee;
19
+      &:first-child{
20
+        border: none;
21
+      }
22
+      &:hover{
23
+        background: rgba(64, 158, 255, .3);
24
+      }
25
+      &.active,
26
+      &.active:hover{
27
+        background: #409EFF;
28
+        color: #fff;
29
+      }
30
+    }
31
+  }
33 32
 }