u

components/message-item/pay-message.vue

 <template>
     <div
         class="pay-message d-flex flex-column"
-        :class="[messageClass, { 'user-side': !backend }]"
+        :class="[
+            messageClass,
+            { 'user-side': !backend || !isChatMember, click: isChatMember },
+        ]"
         @click="view"
     >
         <div class="d-flex align-items-center flex-fill pay-msg-body">
@@ -29,9 +32,13 @@
     import { Component } from "vue-property-decorator";
     import BaseMessage from "./index";
     import Chat from "@/customer-service/xim";
+    import { ChatStore, chatStore } from "@/customer-service/store/model";
 
     @Component({ components: {} })
     export default class Index extends BaseMessage {
+        @chatStore.State(ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER)
+        private readonly isChatMember!: ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER;
+
         protected backend = Chat.isBackend();
 
         private get payData() {
@@ -99,7 +106,8 @@
         }
 
         private view() {
-            this.$emit("open-pay-message", this.payData.paymentId);
+            this.isChatMember &&
+                this.$emit("open-pay-message", this.payData.paymentId);
         }
     }
 </script>
@@ -110,7 +118,10 @@
         width: 248px;
         height: 106px;
         color: #fff;
-        cursor: pointer;
+
+        &.click {
+            cursor: pointer;
+        }
 
         &.user-side {
             border-radius: 0 10px 10px 10px;