<template> <el-dialog title="自动回复" center :visible.sync="show" :close="close" width="800px"> <div class="focus-reply"> <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 === '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> </ul> <div class="inner-bottom"> <div class="img-action" v-if="type === 'image'"> <img style="max-width: 80%" v-if="imageContent" :src="imageContent.content"/> <div class="img-create-access" v-if="!showMedia"> <a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a> </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"/> </div> </div> <div class="inner-emotion_editor" v-else-if="type === 'text'"> <div class="inner-edit_area"> <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="请输入内容" v-model="content"> </el-input> </div> </div> </div> <div class="tool_bar"> <el-button @click="close">取 消</el-button> <el-button class="weui-desktop-btn weui-desktop-btn_primary" @click="save">保存</el-button> <!--<div class="weui-desktop-popover__wrp">--> <!--<span class="weui-desktop-popover__target"><button class="weui-desktop-btn weui-desktop-btn_default">删除回复</button></span>--> <!--</div>--> </div> </div> </div> </div> </el-dialog> </template> <script> import {updateConfigApi,saveConfigApi,getMediaListApi,getConfigListApi} from "../../service/api"; import page from '../framework/page' export default { name: "focusReplyDialog", props:[ 'dialogObj' ], data(){ return{ show: false, loading:false, total:0, nowPage:1, id: null, list: [], index: -1, form:{ key:'focus_reply', value:'focus_reply', desc:'' }, content: '', 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:[ { required: true, message: '请输入规则名称', trigger: 'change' } ], desc:[ { required: true, message: '请输入回复内容', trigger: 'change' } ], qr:[ { required: true, message: '请输入二维码', trigger: 'change' } ] } } }, components:{ page }, mounted(){ this.initDialog() }, filters: { }, methods:{ initDialog(){ this.show = this.dialogObj.show; if (this.dialogObj.id) { this.id = this.dialogObj.id; } this.index = this.dialogObj.index this.list = this.dialogObj.list || [] if (this.index === -1) { this.type = 'text' this.content = '' } else { this.type = this.list[this.index].type; if (this.type === 'text') { this.content = this.list[this.index].content } else if (this.type === 'image') { this.imageContent = { type: 'image', content: this.list[this.index].content, media_id: this.list[this.index].media_id } } } }, close(){ this.$emit("changeShow", false); }, save(){ let json = this.form let _desc = this.list || []; if (this.type === 'text') { if (!this.content) { this.$message({ showClose: true, message: '请输入文本内容' }); return; } let obj = { type : this.type, content: this.content }; console.log('index', this.index) if (this.index > -1) { _desc[this.index] = obj } else { _desc.push(obj) } console.log('save contennt _desc', _desc); } else if (this.type === 'image') { console.log('image'); if (!this.imageContent) { this.$message({ showClose: true, message: '请选择图片' }); return } if (this.index > -1) { _desc[this.index] = this.imageContent } else { _desc.push(this.imageContent) } } console.log('save contennt _desc', _desc); json.desc = JSON.stringify(_desc) if (this.id) { updateConfigApi(this.id,json).then(res=>{ this.$message({ type: 'success', message: '修改成功!' }); this.$emit("reflash"); this.$emit("changeShow", false); this.show = false; }) } else { saveConfigApi(json).then(res=>{ this.$message({ type: 'success', message: '保存成功!' }); this.$emit("reflash"); this.$emit("changeShow", false); }) } }, getMediaList(type){ let json = { type: type, page: this.nowPage }; this.loading = true; getMediaListApi(json).then(res=>{ this.loading = false; this.type = type; this.total = res.total_count; if (res.item.length === 0 ) { this.$message({ showClose: true, message: '暂无数据' }); this.showMedia = false; } else { this.showMedia = true; this.mediaList = res.item; } }).catch(() => { this.loading = false; this.showMedia = false; }) }, onChooseMedia(val){ this.addContent(this.type, val.url, val.media_id); this.showMedia = false; }, addContent(type, content, mediaId) { let obj = {}; if (content) { obj = { type: type, content: content }; } if (mediaId) { obj.media_id = mediaId; } this.imageContent = obj }, getList(){ getConfigListApi({key: 'focus_reply'}).then(res => { if (res.total > 0) { this.id = res.list[0].id; let _desc = JSON.parse(res.list[0].desc); this.list = _desc || []; this.type = _desc[0].type; if (this.type === 'text') { this.content = _desc[0].content } else if (this.type === 'image') { this.imageContent = { type: 'image', content: _desc[0].content, media_id: _desc[0].media_id } } console.log('this.type', _desc) } }) }, } } </script> <style scoped> .focus-reply { padding: 30px; } ul, ol { padding-left: 0; list-style-type: none; } .title { color: #353535; font-size: 20px; font-weight: 400; line-height: 1; } .content { } .inner { border: 1px solid #E4E8EB; background-color: #FFFFFF; } .inner-bottom { border-top: 1px solid #E4E8EB; } .img-action { padding: 17px 20px; min-height: 215px; text-align: center; } .img-create-access { position: relative; border: 2px dotted #E4E8EB; width: 48.6%; height: 211px; text-align: center; } .img-create-access:first-child { float: left; } .img-create-access__link { display: inline-block; vertical-align: middle; color: #9A9A9A; margin: 0 10px; margin-top: 68px; text-decoration: none; } .img-create-access__link:before { content: " "; display: block; width: 36px; height: 36px; margin: 0 auto 5px; background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/images/icon36_add_gray.png) no-repeat 0 0; } .weui-desktop-msg-sender__tabs { line-height: 38px; background-color: #FFFFFF; } .sender__tab_selected { color: #44B549; } .weui-desktop-msg-sender__tab:hover, .weui-desktop-msg-sender__tab_selected { color: #44B549; } .weui-desktop-msg-sender__tab { display: inline-block; padding: 0 20px; cursor: pointer; } .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_text:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_text:before { 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; } .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:before { content: " "; display: inline-block; width: 22px; height: 20px; vertical-align: middle; margin: -0.2em 5px 0 0; } .tool_bar { padding-top: 0; padding-bottom: 50px; margin-top: 40px; margin-left: 20px; } .tool_bar > .weui-desktop-btn { margin-right: 1em; } .weui-desktop-btn_primary { background-color: #1AAD19; border-color: #1AAD19; color: #FFFFFF; } .weui-desktop-btn { display: inline-block; padding: 0 22px; min-width: 54px; line-height: 2.42857143; vertical-align: middle; text-align: center; text-decoration: none; border-radius: 3px; font-size: 14px; cursor: pointer; border-width: 1px; border-style: solid; box-sizing: content-box; } .weui-desktop-popover__wrp { display: inline; position: relative; font-size: 14px; } .weui-desktop-btn_default { background-color: #FBFBFB; border-color: #E4E8EB; color: #353535; } .inner-emotion_editor { margin: 2%; } .shotcut { width: 50px; } </style>