Skip to content

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

关注自动回复加入音视频图文

parent 3c0d1c7b
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 35 deletions
src/components/weChat/focusReply.vue
View file @ e7742cae
......@@ -34,8 +34,38 @@
<div v-else-if="scope.row.type === 'image' && scope.row.variable">
老师二维码
</div>
<div v-else-if="scope.row.type === 'video'">
<a :href="scope.row.content.down_url" target="_blank">{{scope.row.content.title}}</a>
</div>
<div v-else-if="scope.row.type === 'voice'">
<a :href="scope.row.content.down_url" target="_blank">{{scope.row.content.title}}</a>
</div>
<div v-else-if="scope.row.type === 'news'">
图文消息
<div class="news-media">
<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>
</div>
</template>
</el-table-column>
......@@ -103,20 +133,6 @@
imageContent: '',
type: 'text',
mediaList: [],
mediaListMock: [
{
"media_id": "hQb3Pbdb4E5Ivxi2sagL5sTdtW5W9pKJNA6Z8nBo6Ao",
"name": "xx.jpg",
"update_time": 1535351431,
"url": "http://mmbiz.qpic.cn/mmbiz_jpg/qNgYSw5sicibUGtiaRYRY9QEZUoqgGdvkTE5Zvg58tUciaAXFslmwuiadgU6turtsF7mXFeicKa9RQTTG1gKSLqPiabpA/0?wx_fmt=jpeg"
},
{
"media_id": "hQb3Pbdb4E5Ivxi2sagL5p2poL7GllXYm4SETNmf210",
"name": "z.jpg",
"update_time": 1535351316,
"url": "http://mmbiz.qpic.cn/mmbiz_jpg/qNgYSw5sicibUGtiaRYRY9QEZUoqgGdvkTE5mTOB0jnmfdH30s54N5FIr2Tsbd9QcBFDiapicYWJ6sCZRMGTIlj179g/0?wx_fmt=jpeg"
}
],
showMedia: false,
rules:{
value:[
......@@ -153,6 +169,10 @@
return '图片'
} else if(value === 'news'){
return '图文'
} else if(value === 'video'){
return '视频'
} else if(value === 'voice'){
return '语音'
} else {
return val
}
......@@ -472,4 +492,79 @@
clear: both;
}
}
.news-media {
padding: 10px;
width: 200px;
background-color: #fff;
}
.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>
src/components/weChat/focusReplyDialog.vue
View file @ e7742cae
......@@ -8,11 +8,11 @@
<div class="content">
<div class="inner" v-loading="loading">
<ul class="weui-desktop-msg-sender__tabs">
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="type = '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="type = 'news'">图文</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="type = '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="type = 'image'">图片</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="type = 'voice'">语音</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'video' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="type = 'video'">视频</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="type = 'voice'">语音</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_video" :class="type === 'video' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="type = 'video'">视频</li>
</ul>
<div class="inner-bottom">
<div class="img-action" v-if="type === 'image'">
......@@ -100,12 +100,9 @@
label="mediaId">
</el-table-column>
<el-table-column
label="URL"
label="图文"
className="news-media">
<template slot-scope="scope">
<!--<a :href="scope.row.url" target="_blank">-->
<!--<img style="width: 60px;" :src="scope.row.url"/>-->
<!--</a>-->
<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>
......@@ -135,7 +132,12 @@
<page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
</div>
</div>
<div class="img-action" v-if="type === 'voice' || type === 'video'">
<div class="img-action" v-if="type === 'video'" style="text-align: left">
<template v-if="videoContent && videoContent.content">
<a :href="videoContent.content.down_url" target="_blank" v-if="videoContent.content && videoContent.content.down_url">
{{videoContent.content.title}}
</a>
</template>
<div class="display-b">
<div class="img-create-access" v-if="!showMedia">
<a href="javascript:;" class="img-create-access__link" @click="getMediaList(type)">从素材库中选择</a>
......@@ -157,8 +159,39 @@
<el-table-column
label="URL">
<template slot-scope="scope">
<a :href="scope.row.url" target="_blank">
<img style="width: 60px;" :src="scope.row.url"/>
<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>
</div>
<div class="img-action" v-if="type === 'voice'" style="text-align: left">
<div class="display-b">
<div class="img-create-access" v-if="!showMedia">
<a href="javascript:;" class="img-create-access__link" @click="getMediaList(type)">从素材库中选择</a>
</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>
......@@ -235,7 +268,9 @@
content: '',
imageContent: '',
newsContent: '',
type: 'text',
videoContent: '',
voiceContent: '',
type: 'news',
mediaList: [],
mediaListMock: [],
showMedia: false,
......@@ -285,18 +320,18 @@
this.index = this.dialogObj.index
this.list = this.dialogObj.list || []
if (this.index === -1) {
this.type = 'text'
this.content = ''
this.type = 'news'
this.newsContent = ''
} else {
this.type = this.list[this.index].type;
if (this.type === 'text') {
this.content = this.list[this.index].content
} else if (this.type === 'image') {
} else {
let obj = {
type: 'image'
type: this.type
}
if(this.list[this.index].content) {
obj.content = this.list[this.index].content
obj.content = this.list[this.index].content
}
if(this.list[this.index].media_id) {
obj.media_id = this.list[this.index].media_id
......@@ -304,7 +339,15 @@
if(this.list[this.index].variable) {
obj.variable = this.list[this.index].variable
}
this.imageContent = obj
if (this.type === 'image') {
this.imageContent = obj
} else if (this.type ==='news') {
this.newsContent = obj
} else if (this.type === 'voice') {
this.voiceContent = obj
} else if (this.type === 'video') {
this.videoContent = obj
}
}
}
......@@ -358,6 +401,19 @@
} else {
_desc.push(this.newsContent)
}
}else if (this.type === 'video') {
if (!this.videoContent) {
this.$message({
showClose: true,
message: '请选择视频'
});
return
}
if (this.index > -1) {
_desc[this.index] = this.videoContent
} else {
_desc.push(this.videoContent)
}
}
json.desc = JSON.stringify(_desc)
if (this.id) {
......@@ -414,6 +470,8 @@
onChooseMedia(val){
if(this.type === 'news') {
this.addContent(this.type, val.content, val.media_id);
} else if(this.type === 'video'){
this.addContent(this.type, val.info, val.media_id);
} else {
this.addContent(this.type, val.url, val.media_id);
}
......@@ -438,7 +496,9 @@
}
if (type === 'news') {
this.newsContent = obj
} else {
} else if(type === 'video'){
this.videoContent = obj
} else{
this.imageContent = obj
}
......@@ -521,11 +581,29 @@
background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_text_current.svg);
}
.weui-desktop-msg-sender__tab_img:before {
background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img.svg) no-repeat 0 0;
}
background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img.svg) no-repeat 0 0;
}
.weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_img:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_img:before {
background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img_current.svg);
}
.weui-desktop-msg-sender__tab_video:before {
background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video.svg) no-repeat 0 0;
}
.weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_video:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_video:before {
background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video_current.svg);
}
.weui-desktop-msg-sender__tab_audio:before {
background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio.svg) no-repeat 0 0;
}
.weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_audio:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_audio:before {
background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio_current.svg);
}
.weui-desktop-msg-sender__tab_appmsg:before {
background: transparent url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg3c96b5.svg) no-repeat 0 0;
}
.weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_appmsg:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_appmsg:before {
background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg_current3c96b5.svg);
}
.weui-desktop-msg-sender__tab:before {
content: " ";
display: inline-block;
......
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