Skip to content

A
admin-base
Commit a5defc82 authored by 王's avatar 王
Browse files
Options

关键词回复添加图文音视频

parent e9d495ab
Hide whitespace changes
Inline Side-by-side
Showing with 408 additions and 13 deletions
src/components/weChat/autoReply.vue
View file @ a5defc82
...@@ -13,12 +13,40 @@ ...@@ -13,12 +13,40 @@
<el-form label-position="top" class="demo-table-expand"> <el-form label-position="top" class="demo-table-expand">
<el-form-item label="回复内容"> <el-form-item label="回复内容">
<div v-for="(item, index) in JSON.parse(props.row.desc)"> <div v-for="(item, index) in JSON.parse(props.row.desc)">
回复{{index+1}}({{item.type | type}})：
<span v-if="item.content && item.type==='text'"> <span v-if="item.content && item.type==='text'">
回复{{index+1}}：
<span v-html="item.content.replace(/\/[\u4E00-\u9FA5]{1,3}/gi, emotion)"></span> <span v-html="item.content.replace(/\/[\u4E00-\u9FA5]{1,3}/gi, emotion)"></span>
</span> </span>
<span v-if="item.content && item.type==='image'">回复{{index+1}}：<img class="img" :src="item.content"/></span> <span v-if="item.content && item.type==='image'">回复{{index+1}}：<img class="img" :src="item.content"/></span>
<span v-if="item.variable">回复{{index+1}}：老师二维码</span> <span v-if="item.type==='image' && item.variable">回复{{index+1}}：老师二维码</span>
<a v-if="item.type === 'video'" :href="item.content.down_url" target="_blank">{{item.content.title}}</a>
<div v-if="item.type==='news' && item.content && item.content.news_item" class="news-media" style="display: inline-block;width: 150px;">
<el-card :body-style="{ padding: '0px' }">
<div v-for="(child, childIndex) in item.content.news_item" style="position: relative">
<div v-if="item.content.news_item.length === 1" class="single-cover">
<div class="title">{{child.title}}</div>
<img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
<div class="digest">{{child.digest}}</div>
<a class="preview" :href="child.url" target="_blank">
预览文章
</a>
</div>
<div v-else-if="item.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
<div v-if="childIndex === 0" class="muti-cover">
<img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
<div class="bottom-title">{{child.title}}</div>
</div>
<div class="next-cover clear-both" v-else>
<span class="next-title">{{child.title}}</span>
<img class="next-img" :src="child.thumb_url"/>
</div>
<a class="preview" :href="child.url" target="_blank">
预览文章
</a>
</div>
</div>
</el-card>
</div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -82,6 +110,23 @@ ...@@ -82,6 +110,23 @@
mounted(){ mounted(){
this.getList() this.getList()
}, },
filters: {
type(value){
if (value === 'text') {
return '文本'
} else if (value === 'voice') {
return '语音'
} else if (value === 'video') {
return '视频'
} else if (value === 'image') {
return '图片'
} else if (value === 'news') {
return '图文'
} else {
return val
}
}
},
methods: { methods: {
// 将匹配结果替换表情图片 // 将匹配结果替换表情图片
emotion (res) { emotion (res) {
...@@ -139,4 +184,78 @@ ...@@ -139,4 +184,78 @@
.img { .img {
width: 10%; width: 10%;
} }
.news-media {
padding: 10px;
width: 25%;
}
.news-media img{
width: 100%;
}
.s-news img {
width: 50px;
float: right;
}
.title {
font-size: 16px;
font-weight: 400;
display: block;
line-height: 1.2;
color: #353535;
}
.digest {
padding-top: 12px;
color: #9A9A9A;
font-size: 14px;
}
.single-cover {
/*padding: 20px 15px 15px;*/
}
.muti-cover {
position: relative;
padding: 20px 15px 0 15px;
}
.bottom-title {
color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.55);
position: absolute;
left: 15px;
right: 15px;
bottom: 0;
padding: 8px 12px;
}
.next-cover {
padding: 12px 15px;
position: relative;
}
.next-img {
float: right;
margin-left: 12px;
width: 60px !important;
height: 60px !important;
}
.next-title {
overflow: hidden;
font-weight: 400;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: #353535;
}
.single-cover:hover .preview,.bottomCover:hover .preview{
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.preview {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
text-decoration: none;
}
</style> </style>
src/components/weChat/autoReplyDialog.vue
View file @ a5defc82
...@@ -23,7 +23,35 @@ ...@@ -23,7 +23,35 @@
<div v-for="(item, index) in JSON.parse(form.desc)" class="msg-item"> <div v-for="(item, index) in JSON.parse(form.desc)" class="msg-item">
<span class="msg-text" v-if="item.type==='text'">{{item.content}}</span> <span class="msg-text" v-if="item.type==='text'">{{item.content}}</span>
<img v-else-if="item.type==='image' && item.content" :src="item.content"/> <img v-else-if="item.type==='image' && item.content" :src="item.content"/>
<span v-else-if="item.variable" class="msg-text">我的老师二维码</span> <span v-else-if="item.type==='image' && item.variable" class="msg-text">我的老师二维码</span>
<a v-else-if="item.type==='video'" :href="item.content.down_url" target="_blank">{{item.content.title}}</a>
<div v-else-if="item.type==='news' && item.content && item.content.news_item" class="news-media" style="display: inline-block">
<el-card :body-style="{ padding: '0px' }">
<div v-for="(child, childIndex) in item.content.news_item" style="position: relative">
<div v-if="item.content.news_item.length === 1" class="single-cover">
<div class="title">{{child.title}}</div>
<img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
<div class="digest">{{child.digest}}</div>
<a class="preview" :href="child.url" target="_blank">
预览文章
</a>
</div>
<div v-else-if="item.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
<div v-if="childIndex === 0" class="muti-cover">
<img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
<div class="bottom-title">{{child.title}}</div>
</div>
<div class="next-cover clear-both" v-else>
<span class="next-title">{{child.title}}</span>
<img class="next-img" :src="child.thumb_url"/>
</div>
<a class="preview" :href="child.url" target="_blank">
预览文章
</a>
</div>
</div>
</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>
...@@ -33,7 +61,7 @@ ...@@ -33,7 +61,7 @@
<i class="el-icon-circle-plus-outline" @click="onAddContent"></i> <i class="el-icon-circle-plus-outline" @click="onAddContent"></i>
</div> </div>
<el-dialog <el-dialog
width="30%" width="50%"
:title="title" :title="title"
:visible.sync="showType" :visible.sync="showType"
:close-on-click-modal="false" :close-on-click-modal="false"
...@@ -42,16 +70,12 @@ ...@@ -42,16 +70,12 @@
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 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 label="语音" name="voice"></el-tab-pane>
<el-tab-pane label="视频" name="video"></el-tab-pane>
</el-tabs> </el-tabs>
<!--<ul class="weui-desktop-msg-sender__tabs" v-if="showType">-->
<!--&lt;!&ndash;<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" @click="getMediaList('news')">图文消息</li>&ndash;&gt;-->
<!--<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" @click="onChangeTab('text')">文字</li>-->
<!--<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" @click="onChangeTab('image')">图片</li>-->
<!--&lt;!&ndash;<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" @click="getMediaList('voice')">语音</li>&ndash;&gt;-->
<!--&lt;!&ndash;<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_video" @click="getMediaList('video')">视频</li>&ndash;&gt;-->
<!--</ul>-->
<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'">
<el-input <el-input
...@@ -116,6 +140,149 @@ ...@@ -116,6 +140,149 @@
<page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/> <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
</div> </div>
</template> </template>
<template v-if="type==='video'">
<div v-if="videoContent && videoContent.info && videoContent.info.down_url">
<a :href="videoContent.info.down_url" target="_blank">{{videoContent.info.title}}</a>
<i class="el-icon-delete" @click="videoContent=''"></i>
</div>
<div class="display-b">
<div class="choose_item" style="color: #888;" @click="getMediaList('video')">+从素材库中选择</div>
</div>
<div v-if="showMedia && mediaList.length > 0">
<el-table
:data="mediaList"
@row-click="onChooseMedia"
style="width: 100%">
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
prop="media_id"
label="mediaId">
</el-table-column>
<el-table-column
label="URL">
<template slot-scope="scope">
<a :href="scope.row.info.down_url" target="_blank" v-if="scope.row.info && scope.row.info.down_url">
{{scope.row.info.title}}
</a>
</template>
</el-table-column>
</el-table>
<page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
</div>
</template>
<template v-if="type==='voice'">
<div v-if="voiceContent && voiceContent.info && voiceContent.info.down_url">
<a :href="voiceContent.info.down_url" target="_blank">{{voiceContent.info.title}}</a>
<i class="el-icon-delete" @click="voiceContent=''"></i>
</div>
<div class="display-b">
<div class="choose_item" style="color: #888;" @click="getMediaList('voice')">+从素材库中选择</div>
</div>
<div v-if="showMedia && mediaList.length > 0">
<el-table
:data="mediaList"
@row-click="onChooseMedia"
style="width: 100%">
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
prop="media_id"
label="mediaId">
</el-table-column>
<el-table-column
label="URL">
<template slot-scope="scope">
<a v-if="scope.row.info && scope.row.info.down_url" :href="scope.row.info.down_url" target="_blank">
{{scope.row.info.title}}
</a>
</template>
</el-table-column>
</el-table>
<page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
</div>
</template>
<template v-if="type==='news'">
<div v-if="newsContent && newsContent.content && newsContent.content.news_item">
<div class="news-media" style="display: inline-block">
<el-card :body-style="{ padding: '0px' }">
<div v-for="(child, childIndex) in newsContent.content.news_item" style="position: relative">
<div v-if="newsContent.content.news_item.length === 1" class="single-cover">
<div class="title">{{child.title}}</div>
<img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
<div class="digest">{{child.digest}}</div>
<a class="preview" :href="child.url" target="_blank">
预览文章
</a>
</div>
<div v-else-if="newsContent.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
<div v-if="childIndex === 0" class="muti-cover">
<img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
<div class="bottom-title">{{child.title}}</div>
</div>
<div class="next-cover clear-both" v-else>
<span class="next-title">{{child.title}}</span>
<img class="next-img" :src="child.thumb_url"/>
</div>
<a class="preview" :href="child.url" target="_blank">
预览文章
</a>
</div>
</div>
</el-card>
</div>
<i class="el-icon-delete" @click="newsContent=''" style="display: inline-block"></i>
</div>
<div class="display-b">
<div class="choose_item" style="color: #888;" @click="getMediaList('news')">+从素材库中选择</div>
</div>
<div v-if="showMedia && mediaList.length > 0">
<el-table
:data="mediaList"
@row-click="onChooseMedia"
style="width: 100%">
<el-table-column
prop="media_id"
label="mediaId">
</el-table-column>
<el-table-column
label="URL">
<template slot-scope="scope">
<div class="news-media" style="display: inline-block;width: 200px;" v-if="scope.row.content && scope.row.content.news_item">
<div v-for="(child, childIndex) in scope.row.content.news_item" style="position: relative">
<div v-if="scope.row.content.news_item.length === 1" class="single-cover">
<div class="title">{{child.title}}</div>
<img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
<div class="digest">{{child.digest}}</div>
<a class="preview" :href="child.url" target="_blank">
预览文章
</a>
</div>
<div v-else-if="scope.row.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
<div v-if="childIndex === 0" class="muti-cover">
<img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
<div class="bottom-title">{{child.title}}</div>
</div>
<div class="next-cover clear-both" v-else>
<span class="next-title">{{child.title}}</span>
<img class="next-img" :src="child.thumb_url"/>
</div>
<a class="preview" :href="child.url" target="_blank">
预览文章
</a>
</div>
</div>
</div>
</template>
</el-table-column>
</el-table>
<page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
</div>
</template>
<div class="tool_bar"> <div class="tool_bar">
<el-button @click="close">取 消</el-button> <el-button @click="close">取 消</el-button>
<el-button class="weui-desktop-btn weui-desktop-btn_primary" @click="confirm">确定</el-button> <el-button class="weui-desktop-btn weui-desktop-btn_primary" @click="confirm">确定</el-button>
...@@ -177,6 +344,9 @@ ...@@ -177,6 +344,9 @@
url: '', url: '',
media_id: '' media_id: ''
}, },
voiceContent:'',
videoContent: '',
newsContent: '',
pickerOptions1: { pickerOptions1: {
disabledDate(time) { disabledDate(time) {
return !(time.getTime() > Date.now()); return !(time.getTime() > Date.now());
...@@ -284,6 +454,8 @@ ...@@ -284,6 +454,8 @@
this.editIndex = -1; this.editIndex = -1;
this.title = '添加回复'; this.title = '添加回复';
this.content=''; this.content='';
this.voiceContent = '';
this.videoContent = '';
this.imageContent = { this.imageContent = {
url: '', url: '',
media_id: '', media_id: '',
...@@ -346,13 +518,35 @@ ...@@ -346,13 +518,35 @@
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 === 'news') {
if (!this.newsContent) {
this.$message({
showClose: true,
message: '请选择图文'
});
} else {
let _url = this.newsContent.content ? this.newsContent.content : '';
let _mediaId = this.newsContent.media_id ? this.newsContent.media_id : '';
this.addContent(this.type, _url, _mediaId,'');
}
}else if (this.type === 'video') {
if (!this.videoContent) {
this.$message({
showClose: true,
message: '请选择视频'
});
} else {
let _url = this.videoContent.info ? this.videoContent.info : '';
let _mediaId = this.videoContent.media_id ? this.videoContent.media_id : '';
this.addContent(this.type, _url, _mediaId,'');
}
} }
}, },
getMediaList(type){ getMediaList(type){
let json = { let json = {
type: type, type: type,
page: this.nowPage, page: this.nowPage,
limit: this.limit limit: type === 'news' ? 2 : this.limit
}; };
this.loading = true; this.loading = true;
this.showMedia = true; this.showMedia = true;
...@@ -402,7 +596,15 @@ ...@@ -402,7 +596,15 @@
this.form = _form; this.form = _form;
}, },
onChooseMedia(val){ onChooseMedia(val){
this.imageContent = val if (this.type === 'image') {
this.imageContent = val
} else if (this.type === 'video'){
this.videoContent = val
} else if (this.type === 'voice'){
this.voiceContent = val
} else if (this.type === 'news'){
this.newsContent = val
}
this.showMedia = false; this.showMedia = false;
}, },
addTeacherQrcode(){ addTeacherQrcode(){
...@@ -569,4 +771,78 @@ ...@@ -569,4 +771,78 @@
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.news-media {
padding: 10px;
width: 25%;
}
.news-media img{
width: 100%;
}
.s-news img {
width: 50px;
float: right;
}
.title {
font-size: 16px;
font-weight: 400;
display: block;
line-height: 1.2;
color: #353535;
}
.digest {
padding-top: 12px;
color: #9A9A9A;
font-size: 14px;
}
.single-cover {
/*padding: 20px 15px 15px;*/
}
.muti-cover {
position: relative;
padding: 20px 15px 0 15px;
}
.bottom-title {
color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.55);
position: absolute;
left: 15px;
right: 15px;
bottom: 0;
padding: 8px 12px;
}
.next-cover {
padding: 12px 15px;
position: relative;
}
.next-img {
float: right;
margin-left: 12px;
width: 60px !important;
height: 60px !important;
}
.next-title {
overflow: hidden;
font-weight: 400;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: #353535;
}
.single-cover:hover .preview,.bottomCover:hover .preview{
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.preview {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
text-decoration: none;
}
</style> </style>
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