ylrz_his_scrm_companyUI/src/components/message/message-header.vue

<template>
  <div class="base" :class="[ isMine ? 'right' : 'left']">
    <div class="name text-ellipsis">{{ from }}</div>
    <div class="date">{{ date }}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getFullDate } from '../../utils/date'
import { imUserIdEqual } from '@/utils/common'
export default {
  name: 'MessageHeader',
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapState({
      currentConversation: state => state.conversation.currentConversation,
      currentUserProfile: state => state.imuser.currentUserProfile,
      currentMemberList: state => state.group.currentMemberList
    }),
    date() {
      return getFullDate(new Date(this.message.sendTime))
    },
    from() {
      const isC2C = this.currentConversation.conversationType === 3
      // 自己发送的用昵称渲染
      if (this.isMine) {
        return this.message.senderNickname || this.currentUserProfile.userID
      }
      if (isC2C && !imUserIdEqual(this.message.sendID, this.$store.getters.userID) && this.message.sendID !== 'imAdmin') {
        return (
          this.message.senderNickname ||
          this.message.sendID
        )
      } else {
        return this.message.sessionType === 3
          ? '群系统通知'
          : '系统通知'
      }
      // 2. 群组消息，用消息体中的 nick 渲染。nameCard暂时支持不完善
      return this.message.nameCard ||  this.message.nick || this.message.from
    },
    isMine() {
      return imUserIdEqual(this.message.sendID, this.$store.getters.userID)
    }
  }
}
</script>

<style lang="stylus" scoped>
.right {
  display: flex;
  flex-direction: row-reverse;
}

.left {
  display: flex;
  flex-direction: row;
}

.base {
  color: $secondary;
  font-size: 12px;
}

.name {
  padding: 0 4px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>