Commit 6fc8d04c authored by 王's avatar

关键词回复

parent 01c6f046
......@@ -13,9 +13,9 @@
<el-form label-position="top" class="demo-table-expand">
<el-form-item label="回复内容">
<div v-for="(item, index) in JSON.parse(props.row.desc)">
<span>内容{{ item.content }}</span>
<span v-if="item.teacher_id"> 老师ID:{{item.teacher_id}}</span>
<span v-if="item.start_at"> 开课时间:{{item.start_at}}</span>
<span v-if="item.content && item.type==='text'">回复{{index+1}}{{ 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>
</div>
</el-form-item>
</el-form>
......@@ -126,4 +126,7 @@
.add-btn {
margin: 10px 0;
}
.img {
width: 10%;
}
</style>
......@@ -22,8 +22,9 @@
<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>
<img v-else-if="item.type==='image'" :src="item.content"/>
<i v-if="item.type === 'text'" class="el-icon-edit" @click="onEditText(item, index)"></i>
<img v-else-if="item.type==='image' && item.content" :src="item.content"/>
<span v-else-if="item.variable" class="msg-text">我的老师二维码</span>
<i class="el-icon-edit" @click="onEditText(item, index)"></i>
<i class="el-icon-delete" @click="onDelText(item, index)"></i>
</div>
</template>
......@@ -51,27 +52,7 @@
<!--&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">
<el-form-item label="老师">
<el-select v-model="teacher_id" placeholder="请选择老师" clearable>
<el-option
v-for="(data,index) in teacherList"
:key="index"
:label="data.name"
:value="data.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上课时间">
<el-date-picker
v-model="start_at"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
:picker-options="pickerOptions1"
placeholder="选择上课时间">
</el-date-picker>
</el-form-item>
<div v-if="showType" class="more-info clear-both">
<template v-if="type=== 'text'">
<el-input
type="textarea"
......@@ -79,13 +60,37 @@
placeholder="请输入内容"
v-model="content">
</el-input>
<div style="float: right">
<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 @click="addTeacherName" type="warning" plain>添加老师名字</el-button>
<el-button @click="addTeacherAlias" type="success" plain>添加老师别名</el-button>
</div>
</template>
<template v-if="type==='image'">
<div style="margin-bottom: 25px;color: 888;" v-if="!imageContent.url" @click="getMediaList('image')">+从素材库中选择</div>
<div v-if="imageContent.url" class="img">
<img :src="imageContent.url"/>
<i class="el-icon-delete" @click="imageContent={url:'',media_id:''}"></i>
</div>
<div v-if="imageContent.variable" class="img my-teacher">
<div>老师二维码</div>
<i class="el-icon-delete" @click="imageContent={url:'',media_id:'',variable:''}"></i>
</div>
<div class="display-b">
<div class="choose_item" style="color: #888;" @click="getMediaList('image')">+从素材库中选择</div>
<div class="choose_item" style="color: #888;" @click="addTeacherQrcode">+添加老师二维码</div>
</div>
<div v-if="showMedia && mediaList.length > 0">
<el-table
:data="mediaList"
......@@ -136,6 +141,7 @@
<script>
import {updateConfigApi,saveConfigApi,getMediaListApi,getTeacherListApi} from "../../service/api";
import page from '../framework/page'
import emotion from '../framework/Emotion/index'
export default {
name: "dialogObj",
props:[
......@@ -143,8 +149,10 @@
],
data(){
return{
editIndex: -1,
title: '',
show:false,
showEmotion: false,
id: '',
loading:true,
showType: false,
......@@ -188,7 +196,8 @@
}
},
components:{
page
page,
emotion
},
methods:{
getTeacher(){
......@@ -198,7 +207,6 @@
},
save(){
let json = {}
console.log('this.form', this.form)
if(this.dialogObj.id){
this.$refs['form'].validate((valid) => {
if(valid){
......@@ -228,26 +236,26 @@
});
}
},
addContent(type, content, mediaId) {
addContent(type, content, mediaId, my_teacher) {
let _form = this.form;
let _desc = _form.desc ? JSON.parse(_form.desc) : [];
let obj = {};
let obj = {
type: type
};
if (content) {
obj = {
type: type,
content: content
};
obj.content = content
}
if (mediaId) {
obj.media_id = mediaId;
}
if (this.teacher_id) {
obj.teacher_id = this.teacher_id
if (my_teacher) {
obj.variable = my_teacher
}
if (this.start_at) {
obj.start_at = this.start_at
if (this.editIndex > -1) {
_desc.splice(this.editIndex,1,obj);
} else {
_desc.push(obj);
}
_desc.push(obj);
_form.desc = JSON.stringify(_desc);
this.form = _form;
this.showType = false;
......@@ -270,17 +278,39 @@
this.type = type;
},
onAddContent(){
console.log('onAddContent')
this.editIndex = -1;
this.title = '添加回复';
this.content='';
this.imageContent = {
url: '',
media_id: ''
media_id: '',
variable: ''
};
this.teacher_id = '';
this.start_at = '';
this.showType = true;
},
onEditText(item, index) {
this.title = '编辑回复';
this.type = item.type;
this.editIndex = index;
if (this.type === 'text') {
this.content=item.content;
} else {
if(item.content) {
this.imageContent = {
url: item.content,
media_id: item.media_id
};
}
if (item.variable) {
this.imageContent = {
variable: item.variable
};
}
}
this.showType = true;
},
close(){
this.content='';
this.imageContent = {
......@@ -299,16 +329,19 @@
message: '请输入文本内容'
});
} else {
this.addContent('text', this.content, '');
this.addContent('text', this.content, '','');
}
} else if (this.type === 'image') {
if (!this.imageContent.url) {
if (!this.imageContent.url && !this.imageContent.variable) {
this.$message({
showClose: true,
message: '请选择图片'
});
} else {
this.addContent(this.type, this.imageContent.url, this.imageContent.media_id);
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);
}
}
},
......@@ -318,7 +351,6 @@
page: this.nowPage,
limit: this.limit
};
// this.showType = false;
this.loading = true;
this.showMedia = true;
getMediaListApi(json).then(res=>{
......@@ -341,24 +373,8 @@
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({value}) => {
this.addContent('text', value, '');
})
},
onEditText(item, index) {
let _form = this.form;
this.$prompt('编辑文本', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.content
}).then(({value}) => {
let newDesc = JSON.parse(_form.desc);
let _desc = newDesc[index]
_desc.type = 'text';
_desc.content = value;
newDesc.splice(index,1,_desc);
_form.desc = JSON.stringify(newDesc);
this.addContent('text', value, '','');
})
this.form = _form;
},
onDelText(item, index) {
let _form = this.form;
......@@ -383,10 +399,24 @@
this.form = _form;
},
onChooseMedia(val){
// this.addContent(this.type, val.url, val.media_id);
this.imageContent = 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}'
},
},
watch:{
dialogObj:{
......@@ -406,6 +436,17 @@
<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-bottom: 10px;
img {
......@@ -499,6 +540,30 @@
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;
}
</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