Friendship-and-chat-uniapp/src/components/chat-item/chat-item.vue

<template>
  <view class="chat-item" :class="active ? 'active' : ''">
    <!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
    <view class="mask" @tap="showChatBox()"></view>
    <view class="left">
      <head-image :url="chat.headImage" :name="chat.showName" :online="online"></head-image>
    </view>
    <view class="chat-right">
      <view class="chat-name">
        <view class="chat-name-text">
          <view>{{ chat.showName }}</view>
        </view>
        <view class="chat-time">{{ $date.toTimeText(chat.lastSendTime, true) }}</view>
      </view>
      <view class="chat-content">
        <view class="chat-at-text">{{ atText }}</view>
        <view class="chat-send-name" v-if="isShowSendName">
          {{ chat.sendNickName + ':&nbsp;' }}
        </view>
        <view v-if="isGiftMessage" class="chat-content-text">[礼物]</view>
        <view v-else-if="!isTextMessage" class="chat-content-text">{{ chat.lastContent }}</view>
        <rich-text v-else class="chat-content-text" :nodes="nodesText"></rich-text>
        <view v-if="chat.isDnd" class="icon iconfont icon-dnd"></view>
        <wd-badge v-else-if="chat.unreadCount > 0" :max="99" :model-value="chat.unreadCount" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'chatItem',
  data() {
    return {};
  },
  props: {
    userId: {
      type: Number,
    },
    chat: {
      type: Object,
    },
    index: {
      type: Number,
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    showChatBox() {
      // 初始化期间进入会话会导致消息不刷新
      if (!this.configStore.appInit || this.chatStore.loading) {
        uni.showToast({
          title: '正在初始化页面,请稍后...',
          icon: 'none',
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/message/chat-box?chatIdx=${this.index}&memberId=${this.userId}`,
      });
    },
  },
  computed: {
    isShowSendName() {
      if (!this.chat.sendNickName) {
        return false;
      }
      let size = this.chat.messages.length;
      if (size == 0) {
        return false;
      }
      // 只有群聊的普通消息需要显示名称
      let lastMsg = this.chat.messages[size - 1];
      return this.$msgType.isNormal(lastMsg.type);
    },
    atText() {
      if (this.chat.atMe) {
        return '[有人@我]';
      } else if (this.chat.atAll) {
        return '[@全体成员]';
      }
      return '';
    },
    isTextMessage() {
      if (this.chat.messages.length == 0) {
        return false;
      }
      let idx = this.chat.messages.length - 1;
      let messageType = this.chat.messages[idx].type;
      return messageType == this.$enums.MESSAGE_TYPE.TEXT;
    },
    isGiftMessage() {
      if (this.chat.messages.length == 0) {
        return false;
      }
      let idx = this.chat.messages.length - 1;
      let messageType = this.chat.messages[idx].type;
      return messageType == this.$enums.MESSAGE_TYPE.GIFT;
    },
    nodesText() {
      let text = this.$str.html2Escape(this.chat.lastContent);
      return this.$emo.transform(text, 'emoji-small');
    },
    online() {
      if (this.chat.type == 'PRIVATE') {
        let friend = this.friendStore.findFriend(this.chat.targetId);
        return friend && friend.online;
      }
      return false;
    },
  },
};
</script>

<style scoped lang="scss">
.chat-item {
  height: 96rpx;
  display: flex;
  margin-bottom: 2rpx;
  position: relative;
  padding: 18rpx 20rpx;
  align-items: center;
  background-color: $im-bg;
  white-space: nowrap;
  border-top: 1px solid $im-border;

  &:hover {
    background-color: $im-bg-active;
  }

  &.active {
    background-color: $im-bg-active;
  }

  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }

  .left {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
  }

  .chat-right {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20rpx;
    text-align: left;
    overflow: hidden;

    .chat-name {
      display: flex;

      .chat-name-text {
        flex: 1;
        font-size: $im-font-size-large;
        white-space: nowrap;
        overflow: hidden;
        display: flex;
        align-items: center;
      }

      .chat-time {
        font-size: $im-font-size-smaller-extra;
        color: $im-text-color-lighter;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .chat-content {
      display: flex;
      font-size: $im-font-size-smaller;
      color: $im-text-color-lighter;
      padding: 8rpx 30rpx 0 0;
      align-items: center;

      .chat-at-text {
        color: $im-color-danger;
      }

      .chat-send-name {
        font-size: $im-font-size-smaller;
      }

      .chat-content-text {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 30rpx;
      }

      .icon {
        font-size: $im-font-size;
      }
    }
  }
}
</style>