Commit 7aa69515 authored by 王's avatar

公众号自动回复关键字回复二维码自动回复添加链接和图文链接

parent 0b582ee7
...@@ -107,6 +107,26 @@ ...@@ -107,6 +107,26 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="scope.row.type === 'link'" class="news-media" style="display: inline-block;width: 150px;">
<el-card :body-style="{ padding: '0px' }">
<a :href="scope.row.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
<div style="margin: 3px;line-height: 2" class="ellip">{{scope.row.title}}</div>
<div class="f-bt" style="position: relative;">
<div style="color: #666;margin-left: 3px;word-wrap: break-word;word-break: break-all;width: 60%;">{{scope.row.description}}</div>
<img :src="scope.row.thumb_url" style="width: 35%; height: auto"/>
</div>
</a>
</el-card>
</div>
<div v-else-if="scope.row.type === 'news-item'" class="news-media" style="width: 150px;">
<el-card :body-style="{ padding: '0px' }">
<a :href="scope.row.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
<img :src="scope.row.thumb_url" style="width: 100%; height: auto"/>
<div style="margin: 3px;line-height: 2" class="ellip">{{scope.row.title}}</div>
<div style="color: #666;width: 63%;word-break: break-all;word-wrap: break-word;line-height: 1;">{{scope.row.description}}</div>
</a>
</el-card>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
...@@ -166,6 +186,10 @@ ...@@ -166,6 +186,10 @@
return '视频' return '视频'
} else if(value === 'voice'){ } else if(value === 'voice'){
return '语音' return '语音'
} else if(value === 'link'){
return '链接'
} else if(value === 'news-item'){
return '图文链接'
} else { } else {
return val return val
} }
...@@ -425,4 +449,15 @@ ...@@ -425,4 +449,15 @@
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
text-decoration: none; text-decoration: none;
} }
.f-bt {
display: flex;
position: relative;
justify-content: space-between;
align-items: flex-start;
}
.ellip {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style> </style>
...@@ -3,13 +3,15 @@ ...@@ -3,13 +3,15 @@
title="自动回复" title="自动回复"
center center
:visible.sync="dialogObj.show" :visible.sync="dialogObj.show"
width="800px" width="900px"
append-to-body> append-to-body>
<div class="focus-reply"> <div class="focus-reply">
<div class="content"> <div class="content">
<div class="inner" v-loading="loading"> <div class="inner" v-loading="loading">
<ul class="weui-desktop-msg-sender__tabs"> <ul class="weui-desktop-msg-sender__tabs">
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news')">图文</li> <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news')">图文</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news-item' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news-item')">图文链接</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'link' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('link')">链接</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('text')">文字</li> <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('text')">文字</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('image')">图片</li> <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('image')">图片</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('voice')">语音</li> <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('voice')">语音</li>
...@@ -50,6 +52,33 @@ ...@@ -50,6 +52,33 @@
<page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/> <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
</div> </div>
</div> </div>
<div class="img-action" v-if="type === 'link' || type === 'news-item'">
<el-form ref="form">
<el-form-item label="标题">
<el-input v-model="linkContent.title"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="linkContent.description"></el-input>
</el-form-item>
<el-form-item label="跳转链接">
<el-input v-model="linkContent.url"></el-input>
</el-form-item>
<el-form-item label="缩略图">
<el-upload
action="/api/public/upload/zone"
:http-request="uploadFile"
:class="{disabled:!uploadLinkShow}"
:before-upload="beforeAvatarUpload"
list-type="picture-card"
:file-list="imageLinkList"
:on-success="handleAvatarSuccess"
:on-remove="handleRemove"
:limit="1">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
</div>
<div class="img-action" v-if="type === 'news'"> <div class="img-action" v-if="type === 'news'">
<template v-if="newsContent && newsContent.content"> <template v-if="newsContent && newsContent.content">
<div class="news-media"> <div class="news-media">
...@@ -283,7 +312,15 @@ ...@@ -283,7 +312,15 @@
] ]
}, },
imageList: [], imageList: [],
uploadShow: true uploadShow: true,
uploadLinkShow: true,
linkContent: {
title: '',
description: '',
url: '',
thumb_url: ''
},
imageLinkList: []
} }
}, },
components:{ components:{
...@@ -309,7 +346,6 @@ ...@@ -309,7 +346,6 @@
this.nowPage = 1; this.nowPage = 1;
}, },
initDialog(){ initDialog(){
console.log('initDialog', this.dialogObj)
this.form.index = this.dialogObj.index this.form.index = this.dialogObj.index
this.form.desc = this.dialogObj.desc this.form.desc = this.dialogObj.desc
if (this.form.index === -1) { if (this.form.index === -1) {
...@@ -337,6 +373,14 @@ ...@@ -337,6 +373,14 @@
this.voiceContent = obj this.voiceContent = obj
} else if (this.type === 'video') { } else if (this.type === 'video') {
this.videoContent = obj this.videoContent = obj
} else if (this.type === 'link' || this.type === 'news-item') {
this.linkContent = {
title: this.form.desc.title,
description: this.form.desc.description,
url: this.form.desc.url,
thumb_url: this.form.desc.thumb_url
}
this.imageLinkList = [{name:this.form.desc.thumb_url,url:this.form.desc.thumb_url}]
} }
} }
} }
...@@ -387,6 +431,37 @@ ...@@ -387,6 +431,37 @@
return return
} }
json.desc = this.videoContent json.desc = this.videoContent
}else if (this.type === 'news-item' || this.type === 'link') {
this.linkContent.type = this.type
if (!this.linkContent.title) {
this.$message({
showClose: true,
message: '请输入标题'
});
return;
}
if (!this.linkContent.description) {
this.$message({
showClose: true,
message: '请输入描述'
});
return;
}
if (!this.linkContent.url) {
this.$message({
showClose: true,
message: '请输入跳转链接'
});
return;
}
if (!this.linkContent.thumb_url) {
this.$message({
showClose: true,
message: '请上传缩略图'
});
return;
}
json.desc = this.linkContent
} }
this.$emit("changeShow", false); this.$emit("changeShow", false);
this.$emit("reflash", json) this.$emit("reflash", json)
...@@ -449,6 +524,38 @@ ...@@ -449,6 +524,38 @@
} else{ } else{
this.imageContent = obj this.imageContent = obj
} }
},
uploadFile(a) {
this.loading = true;
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
if (this.type === 'link' || this.type === 'news-item') {
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.imageLinkList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
this.loading = false;
this.$message({
type: 'success',
message: '上传成功!'
});
this.linkContent.thumb_url = process.env.IMAGE_URL_HEAD + res.url;
}).catch(()=>{
this.loading = false;
})
}
},
handleAvatarSuccess(res) {
if (this.type === 'link' || this.type === 'news-item') {
this.imageLinkList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
}
},
beforeAvatarUpload(){
if (this.type === 'link' || this.type === 'news-item') {
this.uploadLinkShow = false
}
},
handleRemove(){
if (this.type === 'link' || this.type === 'news-item') {
this.uploadLinkShow = true
}
} }
} }
} }
......
...@@ -62,6 +62,15 @@ ...@@ -62,6 +62,15 @@
</a> </a>
</el-card> </el-card>
</div> </div>
<div v-else-if="item.type === 'news-item'" style="width: 150px;">
<el-card :body-style="{ padding: '0px' }">
<a :href="item.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
<img :src="item.thumb_url" style="width: 100%; height: auto"/>
<div style="margin: 3px;line-height: 2" class="ellip">{{item.title}}</div>
<div style="color: #666;width: 63%;word-break: break-all;word-wrap: break-word;line-height: 1;">{{item.description}}</div>
</a>
</el-card>
</div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -99,7 +108,7 @@ ...@@ -99,7 +108,7 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getList"/> <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getList"/>
</div> </div>
</template> </template>
...@@ -140,6 +149,8 @@ ...@@ -140,6 +149,8 @@
return '图文' return '图文'
} else if (value === 'link') { } else if (value === 'link') {
return '链接' return '链接'
} else if (value === 'news-item') {
return '图文链接'
} else { } else {
return val return val
} }
......
...@@ -63,6 +63,15 @@ ...@@ -63,6 +63,15 @@
</a> </a>
</el-card> </el-card>
</div> </div>
<div v-else-if="item.type === 'news-item'" class="news-media" style="display: inline-block">
<el-card :body-style="{ padding: '0px' }">
<a :href="item.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
<img :src="item.thumb_url" style="width: 100%; height: auto"/>
<div style="margin: 0;line-height: 2" class="ellip">{{item.title}}</div>
<div style="color: #666;margin-left: 0;word-wrap: break-word;word-break: break-all;">{{item.description}}</div>
</a>
</el-card>
</div>
<i class="el-icon-edit" @click="onEditText(item, index)"></i> <i class="el-icon-edit" @click="onEditText(item, index)"></i>
<i class="el-icon-delete" @click="onDelText(item, index)"></i> <i class="el-icon-delete" @click="onDelText(item, index)"></i>
</div> </div>
...@@ -81,12 +90,13 @@ ...@@ -81,12 +90,13 @@
append-to-body> append-to-body>
<div> <div>
<el-tabs v-if="showType" v-model="type" type="card"> <el-tabs v-if="showType" v-model="type" type="card">
<el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图文消息" name="news"></el-tab-pane>
<el-tab-pane label="文字" name="text"></el-tab-pane> <el-tab-pane label="文字" name="text"></el-tab-pane>
<el-tab-pane label="图片" name="image"></el-tab-pane> <el-tab-pane label="图片" name="image"></el-tab-pane>
<el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图文消息" name="news"></el-tab-pane>
<el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图文链接" name="news-item"></el-tab-pane>
<el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="语音" name="voice"></el-tab-pane> <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="语音" name="voice"></el-tab-pane>
<el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="视频" name="video"></el-tab-pane> <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="视频" name="video"></el-tab-pane>
<el-tab-pane v-if="form.key === 'mini_keywords_reply'" label="链接" name="link"></el-tab-pane> <el-tab-pane label="链接" name="link"></el-tab-pane>
</el-tabs> </el-tabs>
<div v-if="showType" class="more-info clear-both"> <div v-if="showType" class="more-info clear-both">
<template v-if="type=== 'text'"> <template v-if="type=== 'text'">
...@@ -308,7 +318,7 @@ ...@@ -308,7 +318,7 @@
<page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
</div> </div>
</template> </template>
<template v-if="type==='link'"> <template v-if="type==='link' || type==='news-item'">
<el-form-item label="标题"> <el-form-item label="标题">
<el-input v-model="linkContent.title"></el-input> <el-input v-model="linkContent.title"></el-input>
</el-form-item> </el-form-item>
...@@ -543,6 +553,7 @@ ...@@ -543,6 +553,7 @@
this.content=''; this.content='';
this.voiceContent = ''; this.voiceContent = '';
this.videoContent = ''; this.videoContent = '';
this.type = 'text';
this.imageContent = { this.imageContent = {
url: '', url: '',
media_id: '', media_id: '',
...@@ -568,7 +579,7 @@ ...@@ -568,7 +579,7 @@
this.editIndex = index; this.editIndex = index;
if (this.type === 'text') { if (this.type === 'text') {
this.content=item.content; this.content=item.content;
} else if (this.type === 'link') { } else if (this.type === 'link' || this.type === 'news-item') {
this.linkContent = { this.linkContent = {
url: item.url, url: item.url,
title : item.title, title : item.title,
...@@ -634,7 +645,7 @@ ...@@ -634,7 +645,7 @@
let _mediaId = this.imageContent.media_id ? this.imageContent.media_id : ''; let _mediaId = this.imageContent.media_id ? this.imageContent.media_id : '';
this.addContent(this.type, _url, _mediaId,_myTeacher); this.addContent(this.type, _url, _mediaId,_myTeacher);
} }
} else if (this.type === 'link'){ } else if (this.type === 'link' || this.type === 'news-item'){
if (!this.linkContent.title) { if (!this.linkContent.title) {
this.$message({ this.$message({
showClose: true, showClose: true,
...@@ -769,14 +780,14 @@ ...@@ -769,14 +780,14 @@
this.content += '{my_teacher_alias}' this.content += '{my_teacher_alias}'
}, },
handleAvatarSuccess(res) { handleAvatarSuccess(res) {
if (this.type === 'link') { if (this.type === 'link' || this.type === 'news-item') {
this.imageLinkList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}] this.imageLinkList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
} else { } else {
this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}] this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
} }
}, },
beforeAvatarUpload(){ beforeAvatarUpload(){
if (this.type === 'link') { if (this.type === 'link' || this.type === 'news-item') {
this.uploadLinkShow = false this.uploadLinkShow = false
} else { } else {
this.uploadShow = false this.uploadShow = false
...@@ -785,7 +796,7 @@ ...@@ -785,7 +796,7 @@
uploadFile(a) { uploadFile(a) {
this.loading = true; this.loading = true;
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid}); this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
if (this.type === 'link') { if (this.type === 'link' || this.type === 'news-item') {
uploadFileApi({file:a.file,type:'local'}).then(res=>{ uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.imageLinkList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}] this.imageLinkList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
this.loading = false; this.loading = false;
...@@ -826,7 +837,7 @@ ...@@ -826,7 +837,7 @@
}) })
}, },
handleRemove(){ handleRemove(){
if (this.type === 'link') { if (this.type === 'link' || this.type === 'news-item') {
this.uploadLinkShow = true this.uploadLinkShow = true
} else { } else {
this.uploadShow = true this.uploadShow = true
......
...@@ -70,6 +70,30 @@ ...@@ -70,6 +70,30 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="scope.row.type === 'news-item'">
<div class="news-media">
<div style="position: relative">
<a :href="scope.row.url" target="_blank" style="text-decoration: none;">
<div class="single-cover">
<img :src="scope.row.thumb_url" style="width: 100%;"/>
<div class="title">{{scope.row.title}}</div>
<div class="digest">{{scope.row.description}}</div>
</div>
</a>
</div>
</div>
</div>
<div v-else-if="scope.row.type === 'link'" class="news-media" style="display: inline-block;width: 150px;">
<el-card :body-style="{ padding: '0px' }">
<a :href="scope.row.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
<div style="margin: 3px;line-height: 2" class="ellip">{{scope.row.title}}</div>
<div class="f-bt" style="position: relative;margin-left: 3px;">
<div style="color: #666;width: 63%;word-break: break-all;word-wrap: break-word;line-height: 1;">{{scope.row.description}}</div>
<img :src="scope.row.thumb_url" style="width: 35%; height: auto"/>
</div>
</a>
</el-card>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
...@@ -176,6 +200,10 @@ ...@@ -176,6 +200,10 @@
return '视频' return '视频'
} else if(value === 'voice'){ } else if(value === 'voice'){
return '语音' return '语音'
} else if(value === 'news-item'){
return '图文链接'
} else if(value === 'link'){
return '链接'
} else { } else {
return val return val
} }
...@@ -272,6 +300,7 @@ ...@@ -272,6 +300,7 @@
this.id = res.list[0].id; this.id = res.list[0].id;
let _desc = JSON.parse(res.list[0].desc); let _desc = JSON.parse(res.list[0].desc);
this.list = _desc || []; this.list = _desc || [];
console.log('getList', this.list)
} else { } else {
this.list = [] this.list = []
} }
...@@ -363,7 +392,6 @@ ...@@ -363,7 +392,6 @@
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
padding-left: 20px;
} }
.top { .top {
margin-bottom: 30px; margin-bottom: 30px;
...@@ -569,4 +597,15 @@ ...@@ -569,4 +597,15 @@
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
text-decoration: none; text-decoration: none;
} }
.ellip {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.f-bt {
display: flex;
position: relative;
justify-content: space-between;
align-items: flex-start;
}
</style> </style>
...@@ -3,12 +3,14 @@ ...@@ -3,12 +3,14 @@
title="自动回复" title="自动回复"
center center
:visible.sync="dialogObj.show" :visible.sync="dialogObj.show"
width="800px"> width="900px">
<div class="focus-reply"> <div class="focus-reply">
<div class="content"> <div class="content">
<div class="inner" v-loading="loading"> <div class="inner" v-loading="loading">
<ul class="weui-desktop-msg-sender__tabs"> <ul class="weui-desktop-msg-sender__tabs">
<li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news')">图文</li> <li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news')">图文</li>
<li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news-item' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news-item')">图文链接</li>
<li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'link' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('link')">链接</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('text')">文字</li> <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('text')">文字</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('image')">图片</li> <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('image')">图片</li>
<li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('voice')">语音</li> <li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('voice')">语音</li>
...@@ -239,6 +241,33 @@ ...@@ -239,6 +241,33 @@
<el-button v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" @click="addTeacherAlias" type="success" plain>添加老师别名</el-button> <el-button v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" @click="addTeacherAlias" type="success" plain>添加老师别名</el-button>
</div> </div>
</div> </div>
<div class="inner-emotion_editor" v-else-if="type === 'news-item' || type === 'link'">
<el-form :model="newsItemForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="图文标题" prop="title">
<el-input v-model="newsItemForm.title"></el-input>
</el-form-item>
<el-form-item label="图文描述" prop="description">
<el-input type="textarea" v-model="newsItemForm.description"></el-input>
</el-form-item>
<el-form-item label="图文图片">
<el-upload
action="/api/public/upload/zone"
:http-request="uploadNewsItemFile"
:before-upload="beforeNewsItemAvatarUpload"
list-type="picture-card"
:class="{disabled:!newsItemUploadShow}"
:file-list="newsItemImageList"
:on-success="handleNewsItemAvatarSuccess"
:on-remove="handleNewsItemRemove"
:limit="1">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="图文链接" prop="url">
<el-input v-model="newsItemForm.url"></el-input>
</el-form-item>
</el-form>
</div>
</div> </div>
<div class="tool_bar"> <div class="tool_bar">
<el-button @click="close">取 消</el-button> <el-button @click="close">取 消</el-button>
...@@ -292,6 +321,14 @@ ...@@ -292,6 +321,14 @@
return !(time.getTime() > Date.now()); return !(time.getTime() > Date.now());
} }
}, },
newsItemForm: {
type: 'news-item',
title: '',
description: '',
thumb_url: '',
url: ''
},
newsItemImageList: [],
rules:{ rules:{
value:[ value:[
{ required: true, message: '请输入规则名称', trigger: 'change' } { required: true, message: '请输入规则名称', trigger: 'change' }
...@@ -301,10 +338,20 @@ ...@@ -301,10 +338,20 @@
], ],
qr:[ qr:[
{ required: true, message: '请输入二维码', trigger: 'change' } { required: true, message: '请输入二维码', trigger: 'change' }
],
title:[
{ required: true, message: '请输入图文标题', trigger: 'change' }
],
description:[
{ required: true, message: '请输入图文描述', trigger: 'change' }
],
url:[
{ required: true, message: '请输入图文链接', trigger: 'change' }
] ]
}, },
imageList: [], imageList: [],
uploadShow: true uploadShow: true,
newsItemUploadShow: true
} }
}, },
components:{ components:{
...@@ -375,6 +422,13 @@ ...@@ -375,6 +422,13 @@
} }
} else if (this.type ==='news') { } else if (this.type ==='news') {
this.newsContent = obj this.newsContent = obj
} else if (this.type ==='news-item' || this.type ==='link') {
this.newsItemForm.description = this.list[this.index].description
this.newsItemForm.thumb_url = this.list[this.index].thumb_url
this.newsItemForm.title = this.list[this.index].title
this.newsItemForm.url = this.list[this.index].url
this.newsItemImageList = [{name:this.list[this.index].thumb_url,url:this.list[this.index].thumb_url}]
this.newsItemUploadShow = false;
} else if (this.type === 'voice') { } else if (this.type === 'voice') {
this.voiceContent = obj this.voiceContent = obj
} else if (this.type === 'video') { } else if (this.type === 'video') {
...@@ -446,6 +500,20 @@ ...@@ -446,6 +500,20 @@
} else { } else {
_desc.push(this.videoContent) _desc.push(this.videoContent)
} }
}else if (this.type === 'news-item' || this.type === 'link') {
this.newsItemForm.type = this.type
if (!this.newsItemForm.thumb_url) {
this.$message({
showClose: true,
message: '请上传图文图片'
});
return
}
if (this.index > -1) {
_desc[this.index] = this.newsItemForm
} else {
_desc.push(this.newsItemForm)
}
} }
json.desc = JSON.stringify(_desc) json.desc = JSON.stringify(_desc)
if (this.id) { if (this.id) {
...@@ -539,12 +607,32 @@ ...@@ -539,12 +607,32 @@
this.imageContent = obj this.imageContent = obj
} }
}, },
handleAvatarSuccess(res) { handleNewsItemAvatarSuccess(res){
this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}] this.newsItemImageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
}, },
beforeAvatarUpload(){ beforeAvatarUpload(){
this.uploadShow = false this.uploadShow = false
}, },
handleAvatarSuccess(res) {
this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
},
beforeNewsItemAvatarUpload(){
this.newsItemUploadShow = false
},
uploadNewsItemFile(a){
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.newsItemImageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
this.loading = false;
this.$message({
type: 'success',
message: '上传成功!'
});
this.newsItemForm.thumb_url = process.env.IMAGE_URL_HEAD + res.url
}).catch(()=>{
this.loading = false;
})
},
uploadFile(a) { uploadFile(a) {
this.loading = true; this.loading = true;
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid}); this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
...@@ -577,6 +665,9 @@ ...@@ -577,6 +665,9 @@
}, },
handleRemove(){ handleRemove(){
this.uploadShow = true this.uploadShow = true
},
handleNewsItemRemove(){
this.newsItemUploadShow = true
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment