<template>
<div v-if="show">
<el-dialog
title="自动回复"
center
append-to-body
:visible.sync="show"
width="50%">
<div v-loading="loading">
<el-form ref="form" :model="form" :rules="rules" >
<el-row>
<el-col :span="4"><label>关键词</label></el-col>
<el-col :span="8">
<el-form-item prop="value">
<el-input v-model="form.value"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4"><label>回复内容</label></el-col>
<el-col :span="20">
<template v-if="form.desc">
<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==='voice'"><br>{{item.content.name}}</span>
<img v-else-if="item.type==='image' && item.content" :src="item.content"/>
<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>
<div v-else-if="item.type === 'link'" 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;">
<div style="margin: 3px;line-height: 2" class="ellip">{{item.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%;">{{item.description}}</div>
<img :src="item.thumb_url" style="width: 35%; height: auto"/>
</div>
</a>
</el-card>
</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-delete" @click="onDelText(item, index)"></i>
</div>
</template>
<div class="msg_sender_wrp" style="width:100%;">
<div>
<i class="el-icon-circle-plus-outline" @click="onAddContent"></i>
</div>
<el-dialog
width="50%"
:title="title"
:visible.sync="showType"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
append-to-body>
<div>
<el-tabs v-if="showType" v-model="type" type="card">
<el-tab-pane label="文字" name="text"></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="video"></el-tab-pane>
<el-tab-pane label="链接" name="link"></el-tab-pane>
</el-tabs>
<div v-if="showType" class="more-info clear-both">
<template v-if="type=== 'text'">
<el-input
type="textarea"
:autosize="{ minRows: 4, maxRows: 8}"
placeholder="请输入内容"
v-model="content">
</el-input>
<div style="float:left;">
<el-popover
placement="bottom-end"
width="400"
:offset="10"
trigger="hover"
v-model="showEmotion">
<div>
<emotion @emotion="handleEmotion" :height="200"></emotion>
</div>
<el-button @click="showEmotion = !showEmotion" slot="reference" type="text">
<span class="icon_emotion emotion_switch" ></span>
</el-button>
</el-popover>
<el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherName" type="warning" plain style="margin-top: 10px;">添加老师名字</el-button>
<el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherAlias" type="success" plain style="margin-top: 10px;">添加老师别名</el-button>
</div>
</template>
<template v-if="type==='image'">
<div v-if="imageContent.url && form.key !== 'mini_keywords_reply'" class="img">
<img :src="imageContent.url"/>
<i class="el-icon-delete" @click="imageContent={url:'',media_id:''}"></i>
</div>
<div v-if="imageContent.variable && form.key !== 'mini_keywords_reply'" class="img my-teacher">
<div>老师二维码</div>
<i class="el-icon-delete" @click="imageContent={url:'',media_id:'',variable:''}"></i>
</div>
<div class="display-b" v-if="form.key !== 'mini_keywords_reply'">
<div class="choose_item" style="color: #888;" @click="getMediaList('image')">+从素材库中选择</div>
<div class="choose_item" style="color: #888;" @click="addTeacherQrcode">+添加老师二维码</div>
</div>
<el-upload
v-if="form.key === 'mini_keywords_reply'"
action="/api/public/upload/zone"
:http-request="uploadFile"
:class="{disabled:!uploadShow}"
:before-upload="beforeAvatarUpload"
list-type="picture-card"
:file-list="imageList"
:on-success="handleAvatarSuccess"
:on-remove="handleRemove"
:limit="1">
<i class="el-icon-plus"></i>
</el-upload>
<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.url">
<img style="width: 60px;" :src="scope.row.url"/>
</a>
</template>
</el-table-column>
</el-table>
<page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
</div>
</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" @sizeChange="onSizeChange"/>
</div>
</template>
<template v-if="type==='voice'">
<div v-if="voiceContent">
{{voiceContent.name}}
<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" @sizeChange="onSizeChange"/>
</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" @sizeChange="onSizeChange"/>
</div>
</template>
<template v-if="type==='link' || type==='news-item'">
<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>
</template>
<div class="tool_bar">
<el-button @click="close">取 消</el-button>
<el-button class="weui-desktop-btn weui-desktop-btn_primary el-button--primary" @click="confirm">确定</el-button>
</div>
</div>
</div>
</el-dialog>
</div>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="show = false">取 消</el-button>
<el-button type="primary" @click="save">保 存</el-button>
</span>
</div>
</el-dialog>
</div>
</template>
<script>
import {updateConfigApi,saveConfigApi,getMediaListApi,getTeacherListApi,uploadFileApi} from "../../service/api";
import page from '../framework/page'
import emotion from '../framework/Emotion/index'
export default {
name: "dialogObj",
props:[
'dialogObj'
],
data(){
return{
editIndex: -1,
title: '',
show:false,
showEmotion: false,
id: '',
loading:true,
showType: false,
showTextContent: false,
total:0,
nowPage:1,
limit: 5,
type:'text',
form:{
key:'keywords_reply',
value:'',
desc:''
},
teacher_id: '',
start_at: '',
textContent: '',
mediaList: [],
showMedia: false,
teacherList: [],
content: '',
imageContent: {
url: '',
media_id: ''
},
linkContent: {
title: '',
description: '',
url: '',
thumb_url: ''
},
voiceContent:'',
videoContent: '',
newsContent: '',
pickerOptions1: {
disabledDate(time) {
return !(time.getTime() > Date.now());
}
},
rules:{
value:[
{ required: true, message: '请输入规则名称', trigger: 'change' }
],
desc:[
{ required: true, message: '请输入回复内容', trigger: 'change' }
],
qr:[
{ required: true, message: '请输入二维码', trigger: 'change' }
]
},
imageList: [],
imageLinkList: [],
uploadShow: true,
uploadLinkShow: true
}
},
components:{
page,
emotion
},
methods:{
getTeacher(){
getTeacherListApi({page: 1, limit: 1000}).then(res=>{
this.teacherList = res.list
})
},
save(){
let json = {
key:this.form.key,
value:this.form.value,
desc:this.form.desc
}
if(this.dialogObj.id){
this.$refs['form'].validate((valid) => {
if(valid){
updateConfigApi(this.id,json).then(res=>{
this.$message({
type: 'success',
message: '修改成功!'
});
this.$emit("reflash");
this.show = false;
})
}
});
}else{
this.$refs['form'].validate((valid) => {
if(valid){
saveConfigApi(json).then(res=>{
this.$message({
type: 'success',
message: '新增成功!'
});
this.$emit("reflash");
this.show = false;
})
}
});
}
},
addContent(type, content, mediaId, my_teacher) {
let _form = this.form;
let _desc = _form.desc ? JSON.parse(_form.desc) : [];
let obj = {
type: type
};
console.log(content)
if (content) {
obj.content = content
}
if (mediaId) {
obj.media_id = mediaId;
}
if (my_teacher) {
obj.variable = my_teacher
}
if (this.editIndex > -1) {
_desc.splice(this.editIndex,1,obj);
} else {
_desc.push(obj);
}
_form.desc = JSON.stringify(_desc);
this.form = _form;
this.showType = false;
},
addLinkContent(type, title, description, url,thumb_url) {
let _form = this.form;
let _desc = _form.desc ? JSON.parse(_form.desc) : [];
let obj = {
type: type,
title: title,
description: description,
url: url,
thumb_url: thumb_url
};
if (this.editIndex > -1) {
_desc.splice(this.editIndex,1,obj);
} else {
_desc.push(obj);
}
_form.desc = JSON.stringify(_desc);
this.form = _form;
this.showType = false;
},
initDialog(){
this.show = this.dialogObj.show;
if (this.dialogObj.id) {
this.id = this.dialogObj.id;
}
this.form.value = this.dialogObj.value;
this.form.desc = this.dialogObj.desc;
if (this.dialogObj.key) {
this.form.key = this.dialogObj.key
}
this.loading = false;
this.showType = false;
},
onPageChange(val){
this.nowPage = val
this.getMediaList(this.type)
},
onSizeChange(val){
this.nowPage = 1
this.limit = val
this.getMediaList(this.type)
},
onChangeTab(type){
this.type = type;
},
onAddContent(){
this.editIndex = -1;
this.title = '添加回复';
this.content='';
this.voiceContent = '';
this.videoContent = '';
this.type = 'text';
this.imageContent = {
url: '',
media_id: '',
variable: ''
};
this.linkContent = {
title: '',
description: '',
url: '',
thumb_url: ''
};
this.imageList = [];
this.imageLinkList = [];
this.teacher_id = '';
this.start_at = '';
this.showType = true;
this.uploadShow = true;
this.uploadLinkShow = true;
},
onEditText(item, index) {
this.title = '编辑回复';
this.type = item.type;
this.editIndex = index;
if (this.type === 'text') {
this.content=item.content;
} else if (this.type === 'link' || this.type === 'news-item') {
this.linkContent = {
url: item.url,
title : item.title,
description: item.description,
thumb_url: item.thumb_url
};
this.imageLinkList = [{name:'mini',url:item.thumb_url}];
this.uploadLinkShow = false;
} else {
if(item.content) {
this.imageContent = {
url: item.content,
media_id: item.media_id
};
}
if (item.variable) {
this.imageContent = {
variable: item.variable
};
}
if(this.type === 'image' && this.form.key === 'mini_keywords_reply') {
this.imageList = [{name:'mini',url:item.content}]
this.uploadShow = false;
}
}
this.showType = true;
},
close(){
this.content='';
this.imageContent = {
url: '',
media_id: ''
};
this.teacher_id = '';
this.start_at = '';
this.linkContent = {
url: '',
title : '',
description: '',
thumb_url: ''
};
this.showType = false;
},
confirm(){
if(this.type === 'text') {
if(!this.content){
this.$message({
showClose: true,
message: '请输入文本内容'
});
} else {
this.addContent('text', this.content, '','');
}
} else if (this.type === 'image') {
if (!this.imageContent.url && !this.imageContent.variable) {
this.$message({
showClose: true,
message: '请选择图片'
});
} else {
let _myTeacher = this.imageContent.variable ? this.imageContent.variable : '';
let _url = this.imageContent.url ? this.imageContent.url : '';
let _mediaId = this.imageContent.media_id ? this.imageContent.media_id : '';
this.addContent(this.type, _url, _mediaId,_myTeacher);
}
} else if (this.type === 'link' || this.type === 'news-item'){
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;
}
this.addLinkContent(this.type, this.linkContent.title, this.linkContent.description, this.linkContent.url,this.linkContent.thumb_url);
} 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,'');
}
}else if (this.type === 'voice') {
if (!this.voiceContent) {
this.$message({
showClose: true,
message: '请选择音频'
});
} else {
let _url = this.voiceContent ? this.voiceContent : '';
let _mediaId = this.voiceContent.media_id ? this.voiceContent.media_id : '';
this.addContent(this.type, _url, _mediaId,'');
}
}
},
getMediaList(type){
let json = {
type: type,
page: this.nowPage,
limit: this.limit
};
this.loading = true;
this.showMedia = true;
getMediaListApi(json).then(res=>{
this.loading = false;
this.type = type;
this.mediaList = res.item;
this.total = res.total_count;
if (this.total === 0 ) {
this.$message({
showClose: true,
message: '暂无数据'
});
}
}).catch(() => {
this.loading = false;
})
},
editContent() {
this.$prompt('请输入文本', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({value}) => {
this.addContent('text', value, '','');
})
},
onDelText(item, index) {
let _form = this.form;
this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let _desc = JSON.parse(_form.desc);
_desc.splice(index,1);
_form.desc = JSON.stringify(_desc);
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
this.form = _form;
},
onChooseMedia(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;
},
addTeacherQrcode(){
this.showMedia = false;
this.imageContent = {
variable:'my_teacher'
}
},
handleEmotion (i) {
this.content += i
},
addTeacherName(){
this.content += '{my_teacher_name}'
},
addTeacherAlias(){
this.content += '{my_teacher_alias}'
},
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}]
} else {
this.imageList = [{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
} else {
this.uploadShow = false
}
},
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;
})
} else {
uploadFileApi({file:a.file,type:'mini'}).then(res=>{
this.uploadFileToQiniu(a, res);
this.loading = false;
}).catch(()=>{
this.loading = false;
})
}
},
uploadFileToQiniu(a, data) {
this.loading = true;
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
this.loading = false;
this.$message({
type: 'success',
message: '上传成功!'
});
this.imageContent = {
url: process.env.IMAGE_URL_HEAD + res.url,
media_id: data.media_id,
name: res.url
}
}).catch(()=>{
this.loading = false;
})
},
handleRemove(){
if (this.type === 'link' || this.type === 'news-item') {
this.uploadLinkShow = true
} else {
this.uploadShow = true
}
}
},
watch:{
dialogObj:{
handler: function () {
this.loading = true;
this.initDialog();
this.getTeacher();
},
deep: true
},
show(value){
this.$emit("changeShow",value);
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.emotion_switch {
float: left;
height: 28px;
line-height: 999em;
overflow: hidden;
background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/reply/images/icon_emotion_switch.png) no-repeat 0 0;
width: 20px;
height: 20px;
vertical-align: middle;
display: inline-block;
}
.msg-item {
margin: 30px 0;
width: 600px;
img {
width: 150px;
padding: 10px;
}
}
.msg-text {
margin-right: 20px;
}
.dialog-footer{
display: block;
text-align: center;
margin-top: 30px;
}
.msg_sender_wrp {
/*display: flex;*/
/*flex-flow: row wrap;*/
/*justify-content: flex-start;*/
/*align-items: center;*/
/*height: 48px;*/
/*position: absolute;*/
/*left: 100%;*/
/*top: 50%;*/
/*width: 500px;*/
/*z-index: 500;*/
/*-ms-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
/*background: #FFFFFF;*/
/*box-shadow: 0 1px 20px 0 #E4E8EB;*/
/*border-radius: 2px;*/
}
.el-icon-circle-plus-outline {
font-size: 28px;
}
.weui-desktop-msg-sender__tabs {
line-height: 38px;
background-color: #FFFFFF;
}
ul, ol {
padding-left: 0;
list-style-type: none;
}
.weui-desktop-msg-sender__tab {
padding: 0 15px;
float: left;
cursor: pointer;
}
.weui-desktop-msg-sender__tab_appmsg:before {
background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg3f92fe.svg) no-repeat 0 0;
}
.weui-desktop-msg-sender__tab:before {
content: " ";
display: inline-block;
width: 22px;
height: 20px;
vertical-align: middle;
margin: -0.2em 5px 0 0;
}
.weui-desktop-msg-sender__tab_text:before {
background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_text3f92fe.svg) no-repeat 0 0;
}
.weui-desktop-msg-sender__tab_img:before {
background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img3f92fe.svg) no-repeat 0 0;
}
.weui-desktop-msg-sender__tab_audio:before {
background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio3f92fe.svg) no-repeat 0 0;
}
.weui-desktop-msg-sender__tab_video:before {
background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video3f92fe.svg) no-repeat 0 0;
}
.more-info {
}
.img {
position: relative;
width: 25%;
img {
width: 100%;
}
.el-icon-delete {
position: absolute;
top: 50%;
left: 50%;
display: none;
}
}
.img:hover img{
opacity: 0.3;
}
.img:hover .el-icon-delete{
display: block;
}
.tool_bar {
float: right;
margin-top: 20px;
}
.choose_item {
margin-bottom: 25px;
color: rgb(136, 136, 136);
height: 80px;
line-height: 80px;
width: 45%;
border: 1px dashed;
text-align: center;
}
.display-b {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.my-teacher {
width: 25%;
height: 80px;
background-color: #eee;
line-height: 80px;
text-align: center;
margin-bottom: 10px;
}
.news-media {
padding: 10px;
width: 25%;
}
.news-media .el-card{
padding: 10px;
}
.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: 15px 10px 10px;
}
.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;
}
.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>
.disabled .el-upload--picture-card {
display: none !important;
}
</style>