update

src/components/parts/chat.vue

@@ -3,15 +3,16 @@
     <el-row class="chat">
       <p class="luyanTop">
         <span>公共聊天</span>
-        <span class="icon"><i class="iconfont icon-xianhua" style="color:red"></i>送鲜花</span>
-        <span class="icon"><i class="iconfont icon-xin" style="color:red;"></i>鼓掌</span>
+        <span class="icon" @click="sendEmotion('flower')"><i class="iconfont icon-xianhua" style="color:red"></i>送鲜花</span>
+        <span class="icon" @click="sendEmotion('hand')"><i class="iconfont icon-xin" style="color:red;"></i>鼓掌</span>
       </p>
       <div class="chatList">
         <ul>
           <li v-for="(i, index) in list" :key="index">
             <p>
               <span>[{{ i.send_time | getTime }}]</span><span style="font-weight: bold;" :class="i.role == '8' ? 'nameColor' : ''">{{ i.sender_name }}：</span>
-              <span> {{ i.content }}</span>
+              <span v-if="!isEmotion(i.content)"> {{ i.content }}</span>
+              <span v-else v-html="i.content"> </span>
             </p>
           </li>
         </ul>
@@ -24,7 +25,14 @@
             <el-button @click="send" size="mini" round style="background: #ff8500;color: #fff;">发送</el-button>
           </el-col>
           <el-col :span="6">
-            <el-button @click="send" size="mini" round style="background: #ff8500;color: #fff;">快捷发言</el-button>
+            <el-popover v-model="popover" placement="top-end" trigger="click">
+              <el-button slot="reference" size="mini" round style="background: #ff8500;color: #fff;">快捷发言</el-button>
+              <el-row>
+                <el-col :span="24" v-for="(w, index) in fastWord" :key="`${index}`" style="border-bottom:1px solid #f1f1f1">
+                  <el-link type="primary" :underline="false" @click="fastSend(w)">{{ w }}</el-link>
+                </el-col>
+              </el-row>
+            </el-popover>
           </el-col>
         </el-row>
         <!-- </div> -->
@@ -44,8 +52,12 @@ export default {
   components: {},
   data: () => {
     return {
+      popover: false,
       list: [],
+      fastWord: ['欢迎欢迎'],
       text: '',
+      hand: require('@/assets/emotion/hand.gif'),
+      flower: require('@/assets/emotion/flower.gif'),
     };
   },
   created() {
@@ -73,11 +85,36 @@ export default {
           object.sender_id = this.user.uid;
           object.role = this.user.role;
         }
-        //TODO接口
         let res = await this.create(object);
         this.$checkRes(res, null, res.errmsg || '发言失败');
       } else this.$message.error('请输入信息后发送');
     },
+    async fastSend(word) {
+      let object = { sender_name: this.user.name ? this.user.name : this.user.adminuser, content: word };
+      if (this.user.uid) {
+        object.sender_id = this.user.uid;
+        object.role = this.user.role;
+        let res = await this.create(object);
+        this.$checkRes(res, null, res.errmsg || '发言失败');
+        this.popover = false;
+      }
+    },
+    async sendEmotion(type) {
+      // TODO 修改content内容,发送
+      let object = { sender_name: this.user.name ? this.user.name : this.user.adminuser };
+      let content = '';
+      content = `<img src='${_.get(this, `${type}`)}' style="width:30px;height:30px" />`;
+      object.content = content;
+      if (this.user.uid) {
+        object.sender_id = this.user.uid;
+        object.role = this.user.role;
+        let res = await this.create(object);
+        this.$checkRes(res, null, res.errmsg || '发言失败');
+      }
+    },
+    isEmotion(word) {
+      return word.startsWith('<img');
+    },
     channel() {
       console.log('in function:');
       this.$stomp({