福利宝客服

components/message-item/my-welfare-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 PurchasePlanMessage from "@/customer-service/components/message-item/purchase-plan-message.vue";
+    import Chat from "@/customer-service/xim/index";
     @Component({ components: {} })
-    export default class Index extends BaseMessage {
-        protected readonly emptyText = "　";
+    export default class Index extends PurchasePlanMessage {
+        protected openPlanUrl(e: any) {
+            if (Chat.isBackend()) {
+                return;
+            }
+            this.planTargetUrl = "/my-benefit-detail/";
+            window.open(
+                `${this.planTargetUrl}${e.target.attributes["plan-id"].value}`,
+                "_blank"
+            );
+        }
     }
 </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 MyWelfareMessage from "@/customer-service/components/message-item/my-welfare-message.vue";
+    import BaseMessage from "./index";
     import Chat from "@/customer-service/xim/index";
     @Component({ components: {} })
-    export default class Index extends MyWelfareMessage {
-        mounted() {
-            if (Chat.isBackend()) {
-                this.backEndPlan();
-            }
+    export default class Index extends BaseMessage {
+        protected readonly emptyText = "　";
+        protected planDom: HTMLElement | null = null;
+        protected planTargetUrl = "";
+
+        public mounted() {
+            this.planDom = this.$el?.querySelector(".plan-welfare-title");
+            this.listenPlan();
+        }
+
+        public beforeDestroy() {
+            this.planDom?.removeEventListener("click", this.openPlanUrl);
+        }
+
+        protected listenPlan() {
+            this.planDom?.addEventListener("click", this.openPlanUrl);
         }
-        private backEndPlan() {
-            const productTitleDom = document.getElementsByClassName(
-                "plan-welfare-title"
-            ) as any;
-            if (productTitleDom) {
-                // 遍历注册点击事件
-                productTitleDom.forEach((item: HTMLElement) => {
-                    item.onclick = (e: any) => {
-                        // 我的福利在后台没找到位置
-                        if (e.target.attributes["data-type"].value === "plan") {
-                            window.open(
-                                `/福利宝.福利宝管理端.采购管理/detail/w_plan/key/${e.target.attributes["data-id"].value}`,
-                                "_blank"
-                            );
-                        }
-                    };
-                });
-            }
+        protected openPlanUrl(e: any) {
+                if (Chat.isBackend()) {
+                    this.planTargetUrl =
+                        "/福利宝.福利宝管理端.采购管理/detail/w_plan/key/";
+                } else {
+                    this.planTargetUrl = "/my-plan-walfare-detail/";
+                }
+                window.open(
+                    `${this.planTargetUrl}${e.target.attributes["plan-id"].value}`,
+                    "_blank"
+                );
         }
     }
 </script>

components/message.vue

@@ -2,7 +2,8 @@
     <div
         class="message-con d-flex align-items-center"
         :class="{
-            'my-message flex-row-reverse': isMyMessage && !isQuestionAnswerMessage,
+            'my-message flex-row-reverse':
+                isMyMessage && !isQuestionAnswerMessage,
             'justify-content-center': isWithdrawMessage,
             'offset-bottom': matchKeywords,
         }"
@@ -19,7 +20,7 @@
                 class="content-avatar d-flex align-items-start"
                 :class="{
                     'justify-content-end': isMyMessage,
-                    'cs-flex-direction': chatRole !== 'default',
+                    'cs-flex-direction': !isMyMessage,
                 }"
             >
                 <component
@@ -33,11 +34,15 @@
                     @open="openFile"
                 />
                 <avatar
-                    v-if="(avatar || showHostAvatar) && !isQuestionAnswerMessage && !isWithdrawMessage"
+                    v-if="
+                        (avatar || showHostAvatar) &&
+                        !isQuestionAnswerMessage &&
+                        !isWithdrawMessage
+                    "
                     :src="
-                        chatRole === 'default'
-                            ? avatar
-                            : require('../imgs/default-host-avatar.svg')
+                        chatRole === 'admin' || chatRole === 'customer-service'
+                            ? require('../imgs/default-host-avatar.svg')
+                            : avatar
                     "
                     shape="circle"
                 />
@@ -314,6 +319,10 @@
                 const t = this.chatMembers.find((i) => i.eid === this.data.eid);
                 if (t?.type === ChatRole.Default) {
                     return "default";
+                } else if (t?.type === ChatRole.Admin) {
+                    return "admin";
+                } else if (t?.type === ChatRole.CustomerService) {
+                    return "customer-service";
                 }
             }
             return "";

model/index.ts

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