福利宝客服

components/message-item/my-welfare-message.vue

@@ -11,7 +11,7 @@
 
     @Component({ components: {} })
     export default class Index extends BaseMessage {
-        private readonly emptyText = "　";
+        protected readonly emptyText = "　";
     }
 </script>
 

components/message-item/purchase-plan-message.vue

-<template>
-    <div
-        class="msg-detail inline-text"
-        v-html="messageBody.msg.text || emptyText"
-    ></div>
-</template>
-
 <script lang="ts">
     import { Component } from "vue-property-decorator";
-    import BaseMessage from "./index";
+    import MyWelfareMessage from "@/customer-service/components/message-item/my-welfare-message.vue";
     import Chat from "@/customer-service/xim/index";
     @Component({ components: {} })
-    export default class Index extends BaseMessage {
-        private readonly emptyText = "　";
+    export default class Index extends MyWelfareMessage {
         mounted() {
             if (Chat.isBackend()) {
                 this.backEndPlan();

components/message-item/question-answer-message.vue

-<template>
-    <div
-        class="msg-detail inline-text"
-        v-html="format2Link(messageBody.msg.text || emptyText)"
-    ></div>
-</template>
-
 <script lang="ts">
-    import { replaceText2Link } from "@/customer-service/utils";
-    import xim from "@/customer-service/xim";
     import { Component } from "vue-property-decorator";
-    import BaseMessage from "./index";
+    import TextMessage from "@/customer-service/components/message-item/text-message.vue";
     @Component({ components: {} })
-    export default class Index extends BaseMessage {
-        private readonly emptyText = "　";
-        private format2Link(text: string) {
-            let t = replaceText2Link(text);
-            const keywords = xim.getMatchedTextKeywords();
-            for (const item of keywords) {
-                const r = new RegExp(item, "g");
-                t = t.replace(r, `<span class="highlight">${item}</span>`);
-            }
-            return t;
-        }
-    }
+    export default class Index extends TextMessage {}
 </script>
 
 <style lang="less" scoped>
-.content-chat .chat-room-con .message-template .my-message.msg-detail{
-    background: #f5f5f5 !important;
-    &::after{
-        border: 0;
+    .chat-room-con .message-template .my-message.msg-detail {
+        background-color: #f5f5f5 !important;
+        &::after {
+           border: 0;
+        }
     }
-}
     .inline-text {
         display: inline-block;
         white-space: pre-wrap;

components/message.vue

@@ -2,10 +2,9 @@
     <div
         class="message-con d-flex align-items-center"
         :class="{
-            'my-message flex-row-reverse': isMyMessage,
+            'my-message flex-row-reverse': isMyMessage && !isQuestionAnswerMessage,
             'justify-content-center': isWithdrawMessage,
             'offset-bottom': matchKeywords,
-            'question-answer-message': isQuestionAnswerMessage,
         }"
     >
         <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
@@ -466,19 +465,6 @@
                 word-break: break-all;
             }
         }
-        &.question-answer-message {
-            flex-direction: row;
-            .msg-content {
-                text-align: left;
-            }
-            .msg-name {
-                margin-left: 0 !important;
-                text-align: left;
-            }
-            .content-avatar {
-                justify-content: flex-start !important;
-            }
-        }
         &.offset-bottom {
             margin-bottom: 30px;
         }