IM

im/src/components/chat/messaege/InviteMessage.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="invite-message">
+    <div v-if="invite.type == 1 || invite.type == 3" class="system-msg">
+      <a @click="toUser(invite.operate_user.id)">
+        {{ invite.operate_user.nickname }}
+      </a>
+      <span>{{ invite.type == 1 ? '邀请了' : '将' }}</span>
+      <template v-for="(user, uidx) in invite.users">
+        <a @click="toUser(user.id)">{{ user.nickname }}</a>
+        <em v-show="uidx < invite.users.length - 1">、</em>
+      </template>
+      <span>{{ invite.type == 1 ? '加入了群聊' : '踢出了群聊' }}</span>
+    </div>
+
+    <div v-else-if="invite.type == 2" class="system-msg">
+      <a @click="toUser(invite.operate_user.id)">
+        {{ invite.operate_user.nickname }}
+      </a>
+      <span>退出了群聊</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'InviteMessage',
+  props: {
+    invite: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    toUser(user_id) {
+      this.$emit('cat', user_id)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.invite-message {
+  display: flex;
+  justify-content: center;
+}
+
+.system-msg {
+  margin: 10px auto;
+  background-color: #f5f5f5;
+  font-size: 11px;
+  line-height: 30px;
+  padding: 0 8px;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #979191;
+  user-select: none;
+  font-weight: 300;
+  display: inline-block;
+  border-radius: 3px;
+
+  span {
+    margin: 0 5px;
+  }
+
+  a {
+    color: #939596;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 400;
+
+    &:hover {
+      color: black;
+    }
+  }
+}
+</style>