关键词回复

src/components/weChat/autoReply.vue

@@ -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>

src/components/weChat/autoReplyDialog.vue

@@ -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 = {};
-        if (content) {
-            obj = {
-              type: type,
-              content: content
+        let obj = {
+            type: type
         };
+        if (content) {
+            obj.content = content
         }
         if (mediaId) {
             obj.media_id = mediaId;
         }
-        if (this.teacher_id) {
-          obj.teacher_id = this.teacher_id
-        }
-        if (this.start_at) {
-          obj.start_at = this.start_at
+        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;
@@ -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,11 +399,25 @@
         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:{
         handler: function () {
@@ -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>