<template> <div v-if="show"> <el-dialog title="自动回复" center append-to-body :visible.sync="show" width="800px"> <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> <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> <div class="msg_sender_wrp"> <div> <i class="el-icon-circle-plus-outline" @click="onAddContent"></i> </div> <el-dialog width="30%" :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-tabs> <!--<ul class="weui-desktop-msg-sender__tabs" v-if="showType">--> <!--<!–<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" @click="getMediaList('news')">图文消息</li>–>--> <!--<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>--> <!--<!–<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" @click="getMediaList('voice')">语音</li>–>--> <!--<!–<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_video" @click="getMediaList('video')">视频</li>–>--> <!--</ul>--> <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: 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 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" @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"/> </div> </template> <div class="tool_bar"> <el-button @click="close">取 消</el-button> <el-button class="weui-desktop-btn weui-desktop-btn_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} 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: '' }, 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' } ] } } }, 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 }; 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; }, 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; this.loading = false; this.showType = false; }, onPageChange(val){ this.nowPage = val this.getMediaList(this.type) }, onChangeTab(type){ this.type = type; }, onAddContent(){ this.editIndex = -1; this.title = '添加回复'; this.content=''; this.imageContent = { url: '', 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 = { url: '', media_id: '' }; this.teacher_id = ''; this.start_at = ''; 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); } } }, 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){ 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:{ 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-bottom: 10px; img { width: 20%; } } .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; } </style>