关键词回复

src/components/framework/Emotion/Emotion.vue

+<template>
+  <div class="ly-emotion" >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ly-emotion',
+  mounted () {
+    const name = this.$el.innerHTML
+    const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
+    let index = list.indexOf(name)
+    let imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">`
+    this.$nextTick(() => {
+      this.$el.innerHTML = imgHTML
+    })
+  },
+}
+</script>
+<style scoped>
+.ly-emotion {
+  display: inline-block
+}
+.ly-static-emotion {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+}
+</style>

src/components/framework/Emotion/index.vue

+<template>
+  <div>
+    <div class="emotion-box" :style="{height: height + 'px' }" >
+      <div class="emotion-box-line" v-for="(line, i) in list" :key="i" >
+        <emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)" >{{item}}</emotion>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Emotion from './Emotion'
+export default {
+  props: {
+    height: {
+      type: Number,
+      default: 200,
+    }
+  },
+  data () {
+    return {
+      list: [
+        ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
+        ['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过']
+        ['酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
+        ['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
+        ['疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见'],
+        ['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
+        ['鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀'],
+        ['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰',],
+        ['凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
+        ['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
+        ['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
+        ['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
+        ['磕头', '回头', '跳绳', '挥手', '激动', '街舞', '左太极', '右太极'],
+      ]
+    }
+  },
+  methods: {
+    clickHandler (i) {
+      let emotion = `#${i};`
+      this.$emit('emotion', emotion)
+    }
+  },
+  components: {
+    Emotion
+  }
+}
+</script>
+<style scoped>
+  .emotion-box {
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 5px;
+    /*border: 1px solid #b4b4b4;*/
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .emotion-box-line {
+    display: flex;
+  }
+  .emotion-item {
+    flex: 1;
+    text-align: center;
+    cursor: pointer;
+  }
+</style>

src/components/weChat/focusReply.vue

@@ -27,9 +27,12 @@
             <div v-if="scope.row.type === 'text'">
               {{scope.row.content}}
             </div>
-            <a v-else-if="scope.row.type === 'image'"  :href="scope.row.content" target="_blank">
+            <a v-else-if="scope.row.type === 'image' && scope.row.content"  :href="scope.row.content" target="_blank">
               <img class="shotcut" :src="scope.row.content">
             </a>
+            <div v-else-if="scope.row.variable">
+              老师二维码
+            </div>
           </template>
         </el-table-column>
         <el-table-column

src/components/weChat/focusReplyDialog.vue

@@ -5,30 +5,6 @@
     :visible.sync="dialogObj.show"
     width="800px">
     <div class="focus-reply">
-      <div class="header">
-        <el-form label-width="120px" inline>
-          <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="上课时间" prop="start_at">
-            <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>
-        </el-form>
-      </div>
       <div class="content">
         <div class="inner" v-loading="loading">
           <ul class="weui-desktop-msg-sender__tabs">
@@ -37,9 +13,17 @@
           </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>
+              <template v-if="imageContent">
+                <div class="my-teacher" v-if="imageContent.variable">我的老师二维码</div>
+                <img style="max-width: 80%" v-if="imageContent.content" :src="imageContent.content"/>
+              </template>
+              <div class="display-b">
+                <div class="img-create-access" v-if="!showMedia">
+                  <a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a>
+                </div>
+                <div class="img-create-access" v-if="!showMedia">
+                  <a href="javascript:;" class="img-create-access__link" @click="addTeacherQrcode">添加老师二维码</a>
+                </div>
               </div>
               <div v-if="showMedia && mediaList.length > 0">
                 <el-table
@@ -57,7 +41,7 @@
                   <el-table-column
                     label="URL">
                     <template slot-scope="scope">
-                      <a :href="scope.row.url">
+                      <a :href="scope.row.url" target="_blank">
                         <img style="width: 60px;" :src="scope.row.url"/>
                       </a>
                     </template>
@@ -75,6 +59,23 @@
                   v-model="content">
                 </el-input>
               </div>
+             <div style="float: right">
+               <el-popover
+                 placement="bottom-end"
+                 width="400"
+                 :offset="10"
+                 trigger="manual"
+                 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>
             </div>
           </div>
           <div class="tool_bar">
@@ -93,6 +94,7 @@
 <script>
     import {updateConfigApi,saveConfigApi,getMediaListApi,getConfigListApi,getTeacherListApi} from "../../service/api";
     import page from '../framework/page'
+    import emotion from '../framework/Emotion/index'
     export default {
       name: "focusReplyDialog",
       props:[
@@ -102,6 +104,7 @@
         return{
           show: false,
           loading:false,
+          showEmotion: false,
           total:0,
           nowPage:1,
           limit: 5,
@@ -119,9 +122,6 @@
           mediaList: [],
           mediaListMock:  [],
           showMedia: false,
-          teacher_id: '',
-          teacherList: [],
-          start_at: '',
           pickerOptions1: {
             disabledDate(time) {
               return !(time.getTime() > Date.now());
@@ -141,19 +141,23 @@
         }
       },
       components:{
-        page
+        page,
+        emotion
       },
       mounted(){
         this.initDialog();
-        this.getTeacher();
       },
       filters: {
       },
       methods:{
-        getTeacher(){
-          getTeacherListApi({page: 1, limit: 1000}).then(res=>{
-            this.teacherList = res.list
-          })
+        addTeacherName(){
+          this.content += '{my_teacher_name}'
+        },
+        addTeacherAlias(){
+          this.content += '{my_teacher_alias}'
+        },
+        handleEmotion (i) {
+          this.content += i
         },
         initDialog(){
           if (this.dialogObj.id) {
@@ -168,16 +172,22 @@
             this.content = ''
           } else {
             this.type = this.list[this.index].type;
-            this.teacher_id = this.list[this.index].teacher_id ? this.list[this.index].teacher_id : '';
-            this.start_at = this.list[this.index].start_at ? this.list[this.index].start_at : '';
             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
+              let obj = {
+                type: 'image'
+              }
+              if(this.list[this.index].content) {
+                  obj.content = this.list[this.index].content
+              }
+              if(this.list[this.index].media_id) {
+                obj.media_id = this.list[this.index].media_id
               }
+              if(this.list[this.index].variable) {
+                obj.variable = this.list[this.index].variable
+              }
+              this.imageContent = obj
             }
           }
 
@@ -200,12 +210,6 @@
               type : this.type,
               content: this.content
             };
-            if (this.teacher_id) {
-                obj.teacher_id = this.teacher_id
-            }
-            if (this.start_at) {
-              obj.start_at = this.start_at
-            }
             if (this.index > -1) {
               _desc[this.index] = obj
             } else {
@@ -219,12 +223,6 @@
               });
               return
             }
-            if (this.teacher_id) {
-              this.imageContent.teacher_id = this.teacher_id
-            }
-            if (this.start_at) {
-              this.imageContent.start_at = this.start_at
-            }
             if (this.index > -1) {
               _desc[this.index] = this.imageContent
             } else {
@@ -287,6 +285,12 @@
           this.addContent(this.type, val.url, val.media_id);
           this.showMedia = false;
         },
+        addTeacherQrcode(){
+          this.imageContent = {
+            type: 'image',
+            variable:'my_teacher'
+          }
+        },
         addContent(type, content, mediaId) {
           let obj = {};
           if (content) {
@@ -321,6 +325,7 @@
   .content {
   }
   .inner {
+    position: relative;
     border: 1px solid #E4E8EB;
     background-color: #FFFFFF;
   }
@@ -339,9 +344,9 @@
     height: 211px;
     text-align: center;
   }
-  .img-create-access:first-child {
-    float: left;
-  }
+  /*.img-create-access:first-child {*/
+    /*float: left;*/
+  /*}*/
   .img-create-access__link {
     display: inline-block;
     vertical-align: middle;
@@ -393,7 +398,7 @@
   .tool_bar {
     padding-top: 0;
     padding-bottom: 50px;
-    margin-top: 40px;
+    /*margin-top: 40px;*/
     margin-left: 20px;
   }
   .tool_bar > .weui-desktop-btn {
@@ -435,4 +440,29 @@
   .shotcut {
     width: 50px;
   }
+  .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;
+  }
+  .display-b {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .my-teacher{
+    height: 150px;
+    line-height: 150px;
+    width: 50%;
+    margin-left: 25%;
+    border: 1px dashed #666;
+    margin-bottom: 10px;
+  }
 </style>

src/util/common.js

@@ -16,5 +16,12 @@ export default{
 		 RegExp.$1.length==1 ? o[k] :
 		 ("00"+ o[k]).substr((""+ o[k]).length));
 		 return format;
-	}
+	},
+  // 将匹配结果替换表情图片
+  emotion (res) {
+    let word = res.replace(/\#|\;/gi,'')
+    const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
+    let index = list.indexOf(word)
+    return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
+  }
 }