福利宝客服系统消息

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

@@ -8,10 +8,31 @@
 <script lang="ts">
     import { Component } from "vue-property-decorator";
     import BaseMessage from "./index";
-
+    import Chat from "@/customer-service/xim/index";
     @Component({ components: {} })
     export default class Index extends BaseMessage {
         private readonly emptyText = "　";
+        mounted() {
+            if (Chat.isBackend()) {
+                this.backEndPlan();
+            }
+        }
+        private backEndPlan() {
+            const productTitleDom = document.getElementsByClassName(
+                "plan-welfare-title"
+            ) as any;
+            if (productTitleDom) {
+                productTitleDom.forEach((item: HTMLElement) => {
+                    item.onclick = (e: any) => {
+                        window.open(
+                            window.location.host +
+                                `/统一业务平台.福利宝管理.采购管理/detail/w_plan/key/${e.target.id}`,
+                            "_blank"
+                        );
+                    };
+                });
+            }
+        }
     }
 </script>
 

components/message-item/system-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";
+    @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;
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+.content-chat .chat-room-con .message-template .my-message.msg-detail{
+    background: #f5f5f5 !important;
+    &::after{
+        border: 0;
+    }
+}
+    .inline-text {
+        display: inline-block;
+        white-space: pre-wrap;
+        text-align: left;
+    }
+</style>
\ No newline at end of file

components/message.vue

@@ -5,6 +5,7 @@
             'my-message flex-row-reverse': isMyMessage,
             'justify-content-center': isWithdrawMessage,
             'offset-bottom': matchKeywords,
+            'system-message': isSystemMessage,
         }"
     >
         <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
@@ -13,23 +14,23 @@
                 :class="{ 'algin-left': !isMyMessage }"
                 v-if="!isWithdrawMessage"
             >
-                {{ userName }}
+                {{ isSystemMessage ? "系统消息" : userName }}
             </div>
             <div
                 class="content-avatar d-flex align-items-start"
-                :class="{ 'justify-content-end': isMyMessage }"
+                :class="{ 'justify-content-end': isMyMessage,'cs-flex-direction': chatRole!=='default' }"
             >
-                <img
+                <!-- <img
                     src="../imgs/default-host-avatar.svg"
                     style="width: 42px"
                     v-if="
-                        !avatar &&
                         messageComponent &&
-                        showHostAvatar &&
-                        !isWithdrawMessage
+                        !chatRole &&
+                        !isWithdrawMessage &&
+                        !isSystemMessage
                     "
                     class="host-avatar"
-                />
+                /> -->
                 <component
                     :is="messageComponent"
                     :user-name="userName"
@@ -40,7 +41,15 @@
                     v-model="data"
                     @open="openFile"
                 />
-                <avatar v-if="avatar" :src="avatar" shape="circle" />
+                <avatar
+                    v-if="!avatar && !isSystemMessage"
+                    :src="
+                        chatRole === 'default'
+                            ? avatar
+                            : require('../imgs/default-host-avatar.svg')
+                    "
+                    shape="circle"
+                />
             </div>
         </div>
 
@@ -136,7 +145,9 @@
     import WithdrawMessage from "./message-item/withdraw-message.vue";
     import PurchasePlanMessage from "./message-item/purchase-plan-message.vue";
     import MyWelfareMessage from "./message-item/my-welfare-message.vue";
+    import SystemMessage from "./message-item/system-message.vue";
     import xim from "./../xim";
+    import { ChatRole } from "@/customer-service/model";
 
     const twoMinutes = 2 * 60 * 1000;
 
@@ -150,6 +161,7 @@
         [dto.MessageType.GeneralOrderMsg, "text-message"],
         [dto.MessageType.MyPurchasePlan, "purchase-plan-message"],
         [dto.MessageType.MyWelfare, "my-welfare-message"],
+        [dto.MessageType.System, "system-message"],
     ]);
 
     @Component({
@@ -163,7 +175,8 @@
             TextMessage,
             WithdrawMessage,
             PurchasePlanMessage,
-            MyWelfareMessage
+            MyWelfareMessage,
+            SystemMessage,
         },
     })
     export default class Message extends Vue {
@@ -222,6 +235,10 @@
             return this.data.type === dto.MessageType.Withdraw;
         }
 
+        private get isSystemMessage() {
+            return this.data.type === dto.MessageType.System;
+        }
+
         private get isAllRead() {
             return this.data.read_count >= this.data.total_read_count;
         }
@@ -277,13 +294,13 @@
 
         private get avatar() {
             const avatar = chat.getUserMapping();
-
-            if (this.isSendingMessage) {
                 if (Object.getOwnPropertyNames(avatar).length > 0) {
                     this.showHostAvatar = true;
                 } else {
                     this.showHostAvatar = false;
                 }
+            if (this.isSendingMessage) {
+
                 if (avatar && this.chatMyId) {
                     const user = avatar[this.chatMyId];
                     if (user && user.avatar) {
@@ -293,11 +310,6 @@
             }
 
             if (avatar && this.data) {
-                if (Object.getOwnPropertyNames(avatar).length > 0) {
-                    this.showHostAvatar = true;
-                } else {
-                    this.showHostAvatar = false;
-                }
                 const value = avatar[this.data.eid];
                 if (value && value.avatar) {
                     return value.avatar;
@@ -307,6 +319,16 @@
             return "";
         }
 
+        private get chatRole() {
+            if (this.chatMembers) {
+                const t = this.chatMembers.find((i) => i.eid === this.data.eid);
+                if (t?.type === ChatRole.Default) {
+                    return "default";
+                }
+            }
+            return "";
+        }
+
         private get messageType() {
             const type = this.data?.type;
             if (type === "file") {
@@ -453,7 +475,19 @@
                 word-break: break-all;
             }
         }
-
+        &.system-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;
         }

model/index.ts

@@ -100,6 +100,7 @@ export const enum MessageType {
     Withdraw = "withdraw",
     MyPurchasePlan = "my_purchase_plan",
     MyWelfare = "my_welfare",
+    System ="system"
 }
 
 export const enum MessageHandled {