|
|
@@ -2,60 +2,65 @@
|
|
2
|
2
|
<div id="app" class="app-container">
|
|
3
|
3
|
<el-form ref="form" :model="form">
|
|
4
|
4
|
<el-form-item :label-width="formLabelWidth" label="标题">
|
|
5
|
|
- <el-input v-model="form.caseTitle"/>
|
|
|
5
|
+ <el-input v-model="form.caseTitle" />
|
|
6
|
6
|
</el-form-item>
|
|
7
|
|
- <el-form-item :label-width="formLabelWidth" label="封面图">
|
|
8
|
|
- <el-upload
|
|
9
|
|
- :action= "uploadImgUrl"
|
|
10
|
|
- :show-file-list="false"
|
|
11
|
|
- :on-success="handleAvatarSuccess"
|
|
12
|
|
- class="avatar-uploader"
|
|
13
|
|
- name="uploadFiles">
|
|
14
|
|
- <img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
15
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"/>
|
|
|
7
|
+ <el-form-item :label-width="formLabelWidth" label="首页banner">
|
|
|
8
|
+ <el-upload :action="uploadImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess" class="avatar-uploader" name="uploadFiles">
|
|
|
9
|
+ <img v-if="imageUrl" :src="imageUrl" class="avatar" >
|
|
|
10
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
11
|
+ <div slot="tip" class="el-upload__tip">建议上传案例为481*466、分享为769*459的图片</div>
|
|
16
|
12
|
</el-upload>
|
|
17
|
13
|
</el-form-item>
|
|
|
14
|
+ <el-form-item :label-width="formLabelWidth" label="详情banner">
|
|
|
15
|
+ <el-upload :action="uploadImgUrl" :show-file-list="false" :on-success="handleDetailSuccess" class="avatar-uploader" name="uploadFiles">
|
|
|
16
|
+ <img v-if="detailUrl" :src="detailUrl" class="avatar" >
|
|
|
17
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
18
|
+ <div slot="tip" class="el-upload__tip">建议上传1920*768的图片</div>
|
|
|
19
|
+ </el-upload>
|
|
|
20
|
+ </el-form-item>
|
|
|
21
|
+
|
|
|
22
|
+ <el-form-item :label-width="formLabelWidth" label="更多banner">
|
|
|
23
|
+ <el-upload :action="uploadImgUrl" :show-file-list="false" :on-success="handlemoreSuccess" class="avatar-uploader" name="uploadFiles">
|
|
|
24
|
+ <img v-if="moreUrl" :src="moreUrl" class="avatar" >
|
|
|
25
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
26
|
+ <div slot="tip" class="el-upload__tip">建议上传481*466的图片</div>
|
|
|
27
|
+ </el-upload>
|
|
|
28
|
+ </el-form-item>
|
|
|
29
|
+
|
|
18
|
30
|
<el-form-item :label-width="formLabelWidth" label="简介">
|
|
19
|
|
- <el-input v-model="form.caseSummary"/>
|
|
|
31
|
+ <el-input v-model="form.caseSummary" />
|
|
20
|
32
|
</el-form-item>
|
|
21
|
33
|
<el-form-item :label-width="formLabelWidth" label="类型">
|
|
22
|
34
|
<el-select v-model="form.taCaseTypeId" placeholder="请选择类型">
|
|
23
|
|
- <el-option v-for="item in caseTypeList" :key="item.id" :value="item.id" :label="item.typeName"/>
|
|
|
35
|
+ <el-option v-for="item in caseTypeList" :key="item.id" :value="item.id" :label="item.typeName" />
|
|
24
|
36
|
</el-select>
|
|
25
|
37
|
</el-form-item>
|
|
26
|
38
|
<el-form-item v-if="form.type == 'case'" :label-width="formLabelWidth" label="案例客户方logo">
|
|
27
|
|
- <el-upload
|
|
28
|
|
- :action= "uploadImgUrl"
|
|
29
|
|
- :show-file-list="false"
|
|
30
|
|
- :on-success="handleLogoSuccess"
|
|
31
|
|
- class="avatar-uploader"
|
|
32
|
|
- name="uploadFiles">
|
|
33
|
|
- <img v-if="logoUrl" :src="logoUrl" class="avatar">
|
|
34
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"/>
|
|
|
39
|
+ <el-upload :action="uploadImgUrl" :show-file-list="false" :on-success="handleLogoSuccess" class="avatar-uploader" name="uploadFiles">
|
|
|
40
|
+ <img v-if="logoUrl" :src="logoUrl" class="avatar" >
|
|
|
41
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
35
|
42
|
</el-upload>
|
|
36
|
43
|
</el-form-item>
|
|
37
|
44
|
<el-form-item :label-width="formLabelWidth" label="所属行业">
|
|
38
|
|
- <el-input v-model="form.caseIndustry"/>
|
|
|
45
|
+ <el-input v-model="form.caseIndustry" />
|
|
|
46
|
+ </el-form-item>
|
|
|
47
|
+ <el-form-item :label-width="formLabelWidth" label="分享链接">
|
|
|
48
|
+ <el-input v-model="form.caseLink" />
|
|
39
|
49
|
</el-form-item>
|
|
40
|
50
|
<el-form-item>
|
|
41
|
51
|
<p class="title">内容</p>
|
|
42
|
|
- <div id="websiteEditorElem" style="height: 400px"/>
|
|
|
52
|
+ <div id="websiteEditorElem" style="height: 400px" />
|
|
43
|
53
|
</el-form-item>
|
|
44
|
54
|
<el-form-item :label-width="formLabelWidth" label="权重">
|
|
45
|
|
- <el-input v-model="form.sort"/>
|
|
|
55
|
+ <el-input v-model="form.sort" />
|
|
46
|
56
|
</el-form-item>
|
|
47
|
57
|
<el-form-item :label-width="formLabelWidth" label="是否置顶">
|
|
48
|
|
- <el-switch
|
|
49
|
|
- v-model="form.topping"
|
|
50
|
|
- :active-value="1"
|
|
51
|
|
- :inactive-value="0"
|
|
52
|
|
- active-color="#13ce66"
|
|
53
|
|
- inactive-color="#ff4949"/>
|
|
|
58
|
+ <el-switch v-model="form.topping" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
|
|
54
|
59
|
</el-form-item>
|
|
55
|
60
|
<el-form-item :label-width="formLabelWidth" label="发布类型">
|
|
56
|
61
|
<el-select :value="form.type" placeholder="请选择发布类型">
|
|
57
|
|
- <el-option key="case" value="case" label="案例"/>
|
|
58
|
|
- <el-option key="movement" value="movement" label="动态"/>
|
|
|
62
|
+ <el-option key="case" value="case" label="案例" />
|
|
|
63
|
+ <el-option key="movement" value="movement" label="动态" />
|
|
59
|
64
|
</el-select>
|
|
60
|
65
|
</el-form-item>
|
|
61
|
66
|
</el-form>
|
|
|
@@ -107,6 +112,8 @@ export default {
|
|
107
|
112
|
listLoading: true,
|
|
108
|
113
|
imageUrl: '', // 图片预览
|
|
109
|
114
|
logoUrl: '', // 图片预览
|
|
|
115
|
+ detailUrl: '',
|
|
|
116
|
+ moreUrl: '',
|
|
110
|
117
|
importanceOptions: [1, 2, 3],
|
|
111
|
118
|
calendarTypeOptions,
|
|
112
|
119
|
communityQuery: {
|
|
|
@@ -127,9 +134,11 @@ export default {
|
|
127
|
134
|
caseLogoImg: '',
|
|
128
|
135
|
caseSummary: '',
|
|
129
|
136
|
caseIndustry: '',
|
|
|
137
|
+ caseLink: '',
|
|
130
|
138
|
topping: 0,
|
|
131
|
139
|
content: '',
|
|
132
|
|
- type: 'case'
|
|
|
140
|
+ type: 'case',
|
|
|
141
|
+ caseDetailCoverImg: ''
|
|
133
|
142
|
},
|
|
134
|
143
|
uploadImgUrl: process.env.BASE_API + 'uploadimage',
|
|
135
|
144
|
dialogStatus: '',
|
|
|
@@ -180,7 +189,7 @@ export default {
|
|
180
|
189
|
|
|
181
|
190
|
this.$store.dispatch('servicecase/getCaseDetail', this.$route.query.id).then((res) => {
|
|
182
|
191
|
if (res.data.code === '0') {
|
|
183
|
|
- console.log(res.data.data)
|
|
|
192
|
+ console.log(res.data.data, '-----')
|
|
184
|
193
|
this.imageUrl = res.data.data.caseCoverImg
|
|
185
|
194
|
this.logoUrl = res.data.data.caseLogoImg
|
|
186
|
195
|
this.form = res.data.data
|
|
|
@@ -205,6 +214,15 @@ export default {
|
|
205
|
214
|
this.imageUrl = URL.createObjectURL(file.raw)
|
|
206
|
215
|
this.form.caseCoverImg = res.data[0]
|
|
207
|
216
|
},
|
|
|
217
|
+ handleDetailSuccess(res, file) { // 上传成功回调
|
|
|
218
|
+ this.detailUrl = URL.createObjectURL(file.raw)
|
|
|
219
|
+ this.form.caseDetailCoverImg = res.data[0]
|
|
|
220
|
+ },
|
|
|
221
|
+ handleMoreSuccess(res, file) { // 上传成功回调
|
|
|
222
|
+ this.moreUrl = URL.createObjectURL(file.raw)
|
|
|
223
|
+ this.form.caseMoreCoverImg = res.data[0]
|
|
|
224
|
+ },
|
|
|
225
|
+
|
|
208
|
226
|
handleLogoSuccess(res, file) { // 上传成功回调
|
|
209
|
227
|
this.logoUrl = URL.createObjectURL(file.raw)
|
|
210
|
228
|
this.form.caseLogoImg = res.data[0]
|
|
|
@@ -260,6 +278,8 @@ export default {
|
|
260
|
278
|
console.log(res.data.data)
|
|
261
|
279
|
this.imageUrl = res.data.data.caseCoverImg
|
|
262
|
280
|
this.logoUrl = res.data.data.caseLogoImg
|
|
|
281
|
+ this.detailUrl = res.data.data.caseDetailCoverImg
|
|
|
282
|
+ this.moreUrl = res.data.data.caseMoreCoverImg
|
|
263
|
283
|
this.form = res.data.data
|
|
264
|
284
|
} else {
|
|
265
|
285
|
this.$message({
|
|
|
@@ -298,10 +318,10 @@ export default {
|
|
298
|
318
|
</script>
|
|
299
|
319
|
|
|
300
|
320
|
<style scoped>
|
|
301
|
|
-.title{
|
|
302
|
|
- font-size: 14px;
|
|
303
|
|
- color: #606266;
|
|
304
|
|
- font-weight: 600;
|
|
|
321
|
+.title {
|
|
|
322
|
+ font-size: 14px;
|
|
|
323
|
+ color: #606266;
|
|
|
324
|
+ font-weight: 600;
|
|
305
|
325
|
}
|
|
306
|
326
|
.app-container {
|
|
307
|
327
|
width: 50%;
|
|
|
@@ -311,20 +331,20 @@ export default {
|
|
311
|
331
|
text-align: center;
|
|
312
|
332
|
}
|
|
313
|
333
|
.el-tag + .el-tag {
|
|
314
|
|
- margin-left: 10px;
|
|
315
|
|
- }
|
|
316
|
|
- .button-new-tag {
|
|
317
|
|
- margin-left: 10px;
|
|
318
|
|
- height: 32px;
|
|
319
|
|
- line-height: 30px;
|
|
320
|
|
- padding-top: 0;
|
|
321
|
|
- padding-bottom: 0;
|
|
322
|
|
- }
|
|
323
|
|
- .input-new-tag {
|
|
324
|
|
- width: 90px;
|
|
325
|
|
- margin-left: 10px;
|
|
326
|
|
- vertical-align: bottom;
|
|
327
|
|
- }
|
|
|
334
|
+ margin-left: 10px;
|
|
|
335
|
+}
|
|
|
336
|
+.button-new-tag {
|
|
|
337
|
+ margin-left: 10px;
|
|
|
338
|
+ height: 32px;
|
|
|
339
|
+ line-height: 30px;
|
|
|
340
|
+ padding-top: 0;
|
|
|
341
|
+ padding-bottom: 0;
|
|
|
342
|
+}
|
|
|
343
|
+.input-new-tag {
|
|
|
344
|
+ width: 90px;
|
|
|
345
|
+ margin-left: 10px;
|
|
|
346
|
+ vertical-align: bottom;
|
|
|
347
|
+}
|
|
328
|
348
|
</style>
|
|
329
|
349
|
<style>
|
|
330
|
350
|
.avatar-uploader .el-upload {
|
|
|
@@ -335,7 +355,7 @@ export default {
|
|
335
|
355
|
overflow: hidden;
|
|
336
|
356
|
}
|
|
337
|
357
|
.avatar-uploader .el-upload:hover {
|
|
338
|
|
- border-color: #409EFF;
|
|
|
358
|
+ border-color: #409eff;
|
|
339
|
359
|
}
|
|
340
|
360
|
.avatar-uploader-icon {
|
|
341
|
361
|
font-size: 28px;
|
