|
@@ -4,61 +4,68 @@
|
4
|
4
|
<div class="infoContent">
|
5
|
5
|
<i-form :model="form" :label-width="80">
|
6
|
6
|
<Form-item label="标题">
|
7
|
|
- <i-input v-model="formItem.title" placeholder="请输入资讯标题"></i-input>
|
|
7
|
+ <i-input v-model="form.ntitle" placeholder="请输入资讯标题"></i-input>
|
8
|
8
|
</Form-item>
|
9
|
|
- <Form-item label="分类" class="classify" prop='ntypename'>
|
10
|
|
- <i-select v-model="form.ntypename" placeholder="请选择资讯分类">
|
11
|
|
- <i-option value="beijing">北京市</i-option>
|
12
|
|
- <i-option value="shanghai">上海市</i-option>
|
13
|
|
- <i-option value="shenzhen">深圳市</i-option>
|
|
9
|
+ <Form-item label="分类" class="classify" prop='ntypeid'>
|
|
10
|
+ <i-select v-model="form.ntypeid" placeholder="请选择资讯分类">
|
|
11
|
+ <i-option v-for="item in classifyList" :key="item.ntypeid" :value="item.ntypeid">{{item.ntypename}}</i-option>
|
14
|
12
|
</i-select>
|
15
|
13
|
</Form-item>
|
16
|
|
- <Form-item label="是否置顶" class="radio" prop='top'>
|
17
|
|
- <Radio-group v-model="formItem.top">
|
18
|
|
- <Radio label='0'><span>否</span> </Radio>
|
19
|
|
- <Radio label='1'><span>是</span> </Radio>
|
|
14
|
+ <Form-item label="是否置顶" class="radio" prop=' nistop'>
|
|
15
|
+ <Radio-group v-model="form.nistop">
|
|
16
|
+ <Radio label='0'><span>不置顶</span> </Radio>
|
|
17
|
+ <Radio label='1'><span>置顶</span> </Radio>
|
20
|
18
|
</Radio-group>
|
21
|
19
|
</Form-item>
|
22
|
|
- <Form-item label="排序" class="radio" prop='ntypeorder'>
|
23
|
|
- <div class="order">
|
24
|
|
- <i-button type='text'><i class="ivu-icon ivu-icon- iconfont icon-21"></i></i-button>
|
25
|
|
- <i-input v-model="form.order" ></i-input>
|
26
|
|
- <i-button type='text'><i class="ivu-icon ivu-icon- iconfont icon-jianhao"></i></i-button>
|
27
|
|
- </div>
|
|
20
|
+ <Form-item v-if="form.nistop==='1'" label="排序" class="radio radioOrder" prop=' norder'>
|
|
21
|
+ <!-- <div class="order"> -->
|
|
22
|
+ <!-- <div class="btn" @click="calc(-1)"><i class="ivu-icon ivu-icon- iconfont icon-jianhao"></i></div> -->
|
|
23
|
+ <i-input v-model="form.norder" style="text-align:center" class="numInput">
|
|
24
|
+ <i-button slot="prepend" @click='calc(-1)' icon='ivu-icon ivu-icon- iconfont icon-jianhao' ></i-button>
|
|
25
|
+ <i-button slot="append" @click='calc(1)' icon='ivu-icon ivu-icon- iconfont icon-21'></i-button>
|
|
26
|
+ </i-input>
|
|
27
|
+ <!-- <div class="btn" @click="calc(1)"><i class="ivu-icon ivu-icon- iconfont icon-21 "></i></div> -->
|
|
28
|
+ <!-- </div> -->
|
28
|
29
|
</Form-item>
|
29
|
|
- <Form-item label="是否广告位" class="radio" style="margin-left:30px">
|
30
|
|
- <Radio-group :model.sync="formItem.adSlot">
|
31
|
|
- <Radio value="0" label='否'></Radio>
|
32
|
|
- <Radio value="1" label='是'></Radio>
|
|
30
|
+ <Form-item label="是否广告位" class="radio" prop='nlevel'>
|
|
31
|
+ <Radio-group v-model="form.nlevel">
|
|
32
|
+ <Radio label='0'>否</Radio>
|
|
33
|
+ <Radio label='1'>是</Radio>
|
33
|
34
|
</Radio-group>
|
34
|
35
|
</Form-item>
|
35
|
36
|
<Form-item label="标签" >
|
36
|
|
- <i-input :value.sync="formItem.tag" placeholder="请输入标签"></i-input>
|
|
37
|
+ <i-select style="width:460px" :model.sync="form.ntagname" multiple @on-change="updatePermission" >
|
|
38
|
+ <i-option v-for="item in labelList" :key="item.ntagid" :value="item.ntagname" :label='item.ntagname'>{{ item.ntagname }}</i-option>
|
|
39
|
+ </i-select>
|
|
40
|
+ <!-- <i-input :value.sync="form.ntagname" placeholder="请输入标签"></i-input> -->
|
37
|
41
|
</Form-item>
|
38
|
42
|
<Form-item class="labelTop">
|
39
|
|
- <p style="font-size:14px">资讯内容</p>
|
40
|
|
- <editor ref="editor" :value="formItem.content" @on-change="handleChange"/>
|
|
43
|
+ <p style="font-size:12px">资讯内容</p>
|
|
44
|
+ <editor ref="editor" :value="form.ncontent" @on-change="handleChange"/>
|
41
|
45
|
</Form-item>
|
42
|
46
|
<Form-item class="imgVideo labelTop" >
|
43
|
47
|
<p>封面图<span>(建议尺寸:840X400)</span></p>
|
44
|
48
|
<div class="upload">
|
45
|
|
- <Upload v-if="flag" ref="upload" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :before-upload="handleBeforeUpload" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action="//jsonplaceholder.typicode.com/posts/" style="display: inline-block;width:58px;">
|
|
49
|
+ <Upload ref="upload" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :before-upload="handleBeforeUpload" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action=''>
|
46
|
50
|
<div style="width: 200px;height:200px;line-height: 200px;">
|
47
|
|
- <i class="ivu-icon ivu-icon- iconfont icon-21"></i>
|
|
51
|
+ <i style="color:#3D8EFE" class="ivu-icon ivu-icon- iconfont icon-21"></i>
|
48
|
52
|
</div>
|
49
|
53
|
</Upload>
|
50
|
|
- <img style="height:200px;width:200px" v-else :src="uploadImg" alt="">
|
|
54
|
+ <img style="height:150px;width:150px" v-if="!flagImg" :src="imgCover" alt="">
|
51
|
55
|
</div>
|
52
|
56
|
</Form-item>
|
53
|
57
|
<Form-item class="imgVideo" style="margin-left:200px">
|
54
|
58
|
<p>视频</p>
|
55
|
59
|
<div class="upload">
|
56
|
|
- <Upload v-if="flag" ref="upload" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :before-upload="handleBeforeUpload" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action="//jsonplaceholder.typicode.com/posts/" style="display: inline-block;width:58px;">
|
|
60
|
+ <Upload ref="upload" :show-upload-list="false" :format="['mp4','avi',]" :max-size="2048" :before-upload="handleBeforeUpload2" :on-format-error="handleFormatError2" :on-exceeded-size="handleMaxSize2" type="drag" action=''>
|
57
|
61
|
<div style="width: 200px;height:200px;line-height: 200px;">
|
58
|
|
- <i class="ivu-icon ivu-icon- iconfont icon-21"></i>
|
|
62
|
+ <i style="color:#3D8EFE" class="ivu-icon ivu-icon- iconfont icon-21"></i>
|
59
|
63
|
</div>
|
60
|
64
|
</Upload>
|
61
|
|
- <img style="height:200px;width:200px" v-else :src="uploadVideo" alt="">
|
|
65
|
+ <div class="videoFile" v-if="!flagVideo" >
|
|
66
|
+ <img src="../../../assets/img/video.png" alt="">
|
|
67
|
+ <video style="height:200px;width:200px" :src="form.nvideo" autoplay alt="" />
|
|
68
|
+ </div>
|
62
|
69
|
</div>
|
63
|
70
|
</Form-item>
|
64
|
71
|
<Form-item class="submitBtn">
|
|
@@ -71,10 +78,10 @@
|
71
|
78
|
|
72
|
79
|
<script>
|
73
|
80
|
import Editor from '_c/editor'
|
74
|
|
-import store from '@/store'
|
|
81
|
+// import store from '@/store'
|
75
|
82
|
|
76
|
83
|
// import Cropper from '@/components/picture/index.vue'
|
77
|
|
-import { addInfo } from '@/api/info.js'
|
|
84
|
+import { addInfo, classify, tagList } from '@/api/info.js'
|
78
|
85
|
|
79
|
86
|
export default {
|
80
|
87
|
components: {
|
|
@@ -83,30 +90,62 @@ export default {
|
83
|
90
|
},
|
84
|
91
|
data () {
|
85
|
92
|
return {
|
86
|
|
- exampleImageSrc: '',
|
87
|
|
- uploadImg: '',
|
88
|
|
- flag: true,
|
|
93
|
+ classifyList: [],
|
|
94
|
+ imgCover: '',
|
|
95
|
+ labelList: [],
|
|
96
|
+ flagImg: true,
|
|
97
|
+ flagVideo: true,
|
|
98
|
+ userInfo: {},
|
89
|
99
|
form: {
|
90
|
|
- ntypename: '',
|
91
|
|
- ntypeorder: 1,
|
92
|
|
- createid: ''
|
93
|
|
- },
|
94
|
|
- formItem: {
|
95
|
|
- title: '',
|
96
|
|
- classify: '',
|
97
|
|
- top: '0',
|
98
|
|
- adSlot: '0',
|
99
|
|
- tag: '',
|
100
|
|
- content: ''
|
|
100
|
+ ntitle: '',
|
|
101
|
+ ncontent: '',
|
|
102
|
+ ncontxt: '',
|
|
103
|
+ ncover: '',
|
|
104
|
+ nvideo: '',
|
|
105
|
+ nvsize: '',
|
|
106
|
+ nvsuffix: '',
|
|
107
|
+ ntypeid: '',
|
|
108
|
+ norder: 1,
|
|
109
|
+ nistop: '0',
|
|
110
|
+ nlevel: '',
|
|
111
|
+ edid: '',
|
|
112
|
+ schoolid: '',
|
|
113
|
+ createid: '',
|
|
114
|
+ ntagname: undefined
|
101
|
115
|
}
|
102
|
116
|
}
|
103
|
117
|
},
|
104
|
118
|
mounted () {
|
105
|
|
- // console.log(store.state.user.userInfo)
|
106
|
|
- this.form.createid = store.state.user.userInfo.edid
|
|
119
|
+ this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
|
|
120
|
+ // console.log(this.userInfo.content)
|
|
121
|
+ this.form.schoolid = this.userInfo.content.schoolid
|
|
122
|
+ this.form.edid = this.userInfo.content.edid
|
|
123
|
+ this.form.nlevel = this.userInfo.content.schoolstate
|
|
124
|
+ this.form.createid = this.userInfo.content.userid
|
|
125
|
+ // console.log(this.form)
|
|
126
|
+ // 获取分类列表
|
|
127
|
+ classify().then(res => {
|
|
128
|
+ // console.log(res.data.obj)
|
|
129
|
+ this.classifyList = res.data.obj
|
|
130
|
+ })
|
|
131
|
+ // 获取标签;列表
|
|
132
|
+ tagList().then(res => {
|
|
133
|
+ // console.log(res.data.obj)
|
|
134
|
+
|
|
135
|
+ this.labelList = res.data.obj
|
|
136
|
+ })
|
107
|
137
|
},
|
108
|
138
|
methods: {
|
109
|
|
- // ---------------------------------------------------------------
|
|
139
|
+ // 将标签内容格式化
|
|
140
|
+ updatePermission (e) {
|
|
141
|
+ // console.log(e)
|
|
142
|
+ this.form.ntagname = JSON.stringify({ ...e })
|
|
143
|
+ },
|
|
144
|
+ // 排序
|
|
145
|
+ calc (num) {
|
|
146
|
+ this.form.norder = Number(this.form.norder) + Number(num)
|
|
147
|
+ },
|
|
148
|
+ // 上传图片
|
110
|
149
|
handleBeforeUpload (file) {
|
111
|
150
|
// 创建一个 FileReader 对象
|
112
|
151
|
let reader = new FileReader()
|
|
@@ -114,13 +153,15 @@ export default {
|
114
|
153
|
// 当读操作完成,readyState 变为 DONE,loadend 被触发,此时 result 属性包含数据:URL(以 base64 编码的字符串表示文件的数据)
|
115
|
154
|
// 读取文件作为 URL 可访问地址
|
116
|
155
|
reader.readAsDataURL(file)
|
|
156
|
+ this.form.ncover = file.name
|
117
|
157
|
|
118
|
158
|
const _this = this
|
119
|
159
|
reader.onloadend = function (e) {
|
120
|
160
|
file.url = reader.result
|
121
|
|
- console.log(file.url)
|
122
|
|
- _this.uploadImg = file.url
|
123
|
|
- _this.flag = false
|
|
161
|
+ // console.log(file.url)
|
|
162
|
+ // console.log(_this.base64ToFile(file, file.url))
|
|
163
|
+ _this.imgCover = file.url
|
|
164
|
+ _this.flagImg = false
|
124
|
165
|
}
|
125
|
166
|
},
|
126
|
167
|
handleFormatError (file) {
|
|
@@ -135,25 +176,56 @@ export default {
|
135
|
176
|
desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
|
136
|
177
|
})
|
137
|
178
|
},
|
138
|
|
- // ------------------------------------------------------------------
|
139
|
|
- // handleImg (e) {
|
140
|
|
- // console.log(e)
|
141
|
|
- // },
|
|
179
|
+ // 上传视频
|
|
180
|
+ handleBeforeUpload2 (file) {
|
|
181
|
+ // 创建一个 FileReader 对象
|
|
182
|
+ let reader = new FileReader()
|
|
183
|
+ // readAsDataURL 方法用于读取指定 Blob 或 File 的内容
|
|
184
|
+ // 当读操作完成,readyState 变为 DONE,loadend 被触发,此时 result 属性包含数据:URL(以 base64 编码的字符串表示文件的数据)
|
|
185
|
+ // 读取文件作为 URL 可访问地址
|
|
186
|
+ reader.readAsDataURL(file)
|
|
187
|
+ // console.log(file)
|
|
188
|
+ this.form.nvideo = file.name
|
|
189
|
+ this.form.nvsuffix = file.name.split('.')[1]
|
|
190
|
+ // console.log(this.form.nvsuffix[1])
|
|
191
|
+ const _this = this
|
|
192
|
+ reader.onloadend = function (e) {
|
|
193
|
+ file.url = reader.result
|
|
194
|
+ // console.log(file.url)
|
|
195
|
+ // _this.form.nvideo = file.url
|
|
196
|
+ // console.log(_this.extname(file))
|
|
197
|
+
|
|
198
|
+ var size = file.size
|
|
199
|
+ _this.form.nvsize = size
|
|
200
|
+ _this.flagVideo = false
|
|
201
|
+ _this.flag = false
|
|
202
|
+ }
|
|
203
|
+ },
|
|
204
|
+ handleFormatError2 (file) {
|
|
205
|
+ this.$Notice.warning({
|
|
206
|
+ title: '文件格式不正确',
|
|
207
|
+ desc: '文件 ' + file.name + ' 格式不正确,请上传 mp4 或 avi 格式的图片。'
|
|
208
|
+ })
|
|
209
|
+ this.flagVideo = true
|
|
210
|
+ },
|
|
211
|
+ handleMaxSize2 (file) {
|
|
212
|
+ this.$Notice.warning({
|
|
213
|
+ title: '超出文件大小限制',
|
|
214
|
+ desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
|
|
215
|
+ })
|
|
216
|
+ },
|
|
217
|
+ // 获取资讯内容
|
142
|
218
|
handleChange (e) {
|
143
|
219
|
console.log(e)
|
|
220
|
+ this.form.ncontent = e
|
|
221
|
+ this.form.ncontxt = e.replace(/<[^>]+>/g, '')
|
144
|
222
|
},
|
|
223
|
+ // 添加
|
145
|
224
|
submit () {
|
146
|
225
|
console.log(this.form)
|
147
|
|
- addInfo(this.formItem).then(res => {
|
|
226
|
+ addInfo(this.form).then(res => {
|
148
|
227
|
console.log(res)
|
149
|
228
|
})
|
150
|
|
- },
|
151
|
|
- handleCroped (blob) {
|
152
|
|
- const formData = new FormData()
|
153
|
|
- formData.append('croppedImg', blob)
|
154
|
|
- uploadImg(formData).then(() => {
|
155
|
|
- this.$Message.success('Upload success~')
|
156
|
|
- })
|
157
|
229
|
}
|
158
|
230
|
}
|
159
|
231
|
|
|
@@ -172,46 +244,60 @@ export default {
|
172
|
244
|
}
|
173
|
245
|
}
|
174
|
246
|
.infoContent{
|
175
|
|
- padding: 20px 0 20px 10px;
|
|
247
|
+ padding: 20px 10px 20px 10px;
|
|
248
|
+ background: white;
|
|
249
|
+ .ivu-input-group .ivu-input, .ivu-input-group .ivu-input-inner-container {
|
|
250
|
+ width: 100%;
|
|
251
|
+ float: left;
|
|
252
|
+ margin-bottom: 0;
|
|
253
|
+ position: relative;
|
|
254
|
+ z-index: 2;
|
|
255
|
+ text-align: center;
|
|
256
|
+ display: flex;
|
|
257
|
+ justify-content: center;
|
|
258
|
+ align-items: center;
|
|
259
|
+}
|
|
260
|
+ .ivu-form .ivu-form-item-label {
|
|
261
|
+ font-size: 12px!important;
|
|
262
|
+ }
|
176
|
263
|
.classify{
|
177
|
264
|
display: inline-block;
|
178
|
|
- width: 500px;
|
|
265
|
+ width: 300px;
|
179
|
266
|
}
|
180
|
267
|
.submitBtn{
|
181
|
268
|
display: flex;
|
182
|
269
|
justify-content: center;
|
183
|
270
|
margin-top:60px;
|
184
|
271
|
}
|
|
272
|
+ .radioOrder{
|
|
273
|
+ margin-left: -35px;
|
|
274
|
+ margin-right: 20px;
|
|
275
|
+ }
|
185
|
276
|
.radio{
|
186
|
277
|
display: inline-block;
|
187
|
|
- .order{
|
188
|
|
- border: 1px solid grey;
|
189
|
|
- height: 32px;
|
190
|
|
- .ivu-btn-text{
|
191
|
|
- float: left;
|
192
|
|
- width: 20px;
|
193
|
|
- // border: 1px solid grey;
|
194
|
|
- display: flex;
|
195
|
|
- justify-content: center;
|
196
|
|
- border-radius: none;
|
197
|
|
- }
|
198
|
|
- .ivu-input-wrapper-default{
|
199
|
|
- width: 40px;
|
200
|
|
- height: 32px;
|
201
|
|
- float: left;
|
202
|
|
- border-radius: none;
|
203
|
|
- }
|
|
278
|
+ .ivu-input-group {
|
|
279
|
+ width: 110px;
|
204
|
280
|
}
|
205
|
|
-
|
206
|
|
- }
|
207
|
|
- .ivu-form-item-label{
|
208
|
|
- font-size: 14px!important;
|
|
281
|
+ .ivu-btn-icon-only{
|
|
282
|
+ height: 34px;
|
|
283
|
+ width: 30px;
|
|
284
|
+ display: flex;
|
|
285
|
+ justify-content: center;
|
|
286
|
+ align-items: center;
|
|
287
|
+ // line-height: 20px;
|
|
288
|
+ }
|
|
289
|
+ // .ivu-input {
|
|
290
|
+ // height: 35px;
|
|
291
|
+ // width: 80px!important;
|
|
292
|
+ // }
|
209
|
293
|
}
|
|
294
|
+
|
210
|
295
|
.labelTop{
|
211
|
296
|
margin-left: -40px;
|
212
|
297
|
}
|
213
|
298
|
.imgVideo{
|
214
|
299
|
display: inline-block;
|
|
300
|
+ position: relative;
|
215
|
301
|
p{
|
216
|
302
|
font-size: 16px;
|
217
|
303
|
span{
|
|
@@ -220,6 +306,13 @@ export default {
|
220
|
306
|
color: #3D8EFE;
|
221
|
307
|
}
|
222
|
308
|
}
|
|
309
|
+ img{
|
|
310
|
+ position: absolute;
|
|
311
|
+ top: 60px;
|
|
312
|
+ left: 25px;
|
|
313
|
+ z-index: 999;
|
|
314
|
+
|
|
315
|
+ }
|
223
|
316
|
}
|
224
|
317
|
.upload{
|
225
|
318
|
height: 200px;
|
|
@@ -242,6 +335,23 @@ export default {
|
242
|
335
|
.icon-21:before {
|
243
|
336
|
font-size: 40px;
|
244
|
337
|
}
|
|
338
|
+ .videoFile{
|
|
339
|
+ // border: 1px solid grey;
|
|
340
|
+ height: 200px;
|
|
341
|
+ width: 200px;
|
|
342
|
+ position: relative;
|
|
343
|
+ img{
|
|
344
|
+ height: 120px;
|
|
345
|
+ position: absolute;
|
|
346
|
+ top: -200px;
|
|
347
|
+ left: -55px;
|
|
348
|
+ width: 150px;
|
|
349
|
+ margin-left: 80px;
|
|
350
|
+ margin-top: 40px;
|
|
351
|
+ z-index: 999;
|
|
352
|
+ }
|
|
353
|
+
|
|
354
|
+ }
|
245
|
355
|
}
|
246
|
356
|
|
247
|
357
|
}
|