yijianbao_user_uniapp/pages_im/pages/moments/interactiveMessage/IMessageItem.vue

<template>
  <view @click="clickItem" class="message_item">
    <my-avatar size="42" :src="opItem.faceURL" :desc="opItem.nickname" />
    <view class="message_item_details">
      <view class="content_wrap">
        <view class="main_content">
          <view class="i_name">
            {{ opItem.nickname }}
          </view>
          <view class="i_content">
            <image
              v-if="item.type === 1"
              src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_i_like.png"
            />
            <text v-if="item.type === 1">为你点了赞</text>
            <text class="comment_content" v-if="item.type === 3 && item.comments[0].replyUserID === ''">{{
              `评论了你：${opItem.content}`
            }}</text>
            <text class="comment_content" v-if="item.type === 3 && item.comments[0].replyUserID !== ''">{{
              `${item.comments[0].nickname}回复了${item.comments[0].replyNickname}：${opItem.content}`
            }}</text>
            <text v-if="item.type === 2">提到了你</text>
          </view>
          <view class="i_time">
            {{ opTimeStr }}
          </view>
        </view>
        <u--image
          v-if="mediaUrl"
          :showLoading="true"
          width="62"
          height="62"
          :src="mediaUrl"
        >
          <template v-slot:loading>
            <u-loading-icon color="red"></u-loading-icon>
          </template>
        </u--image>
      </view>
      <view class="bottom_line"></view>
    </view>
  </view>
</template>

<script>
import MyAvatar from "../../../components/MyAvatar/index.vue";
import { formatConversionTime } from "../../../util/imCommon";
export default {
  name: "UserItem",
  components: {
    MyAvatar,
  },
  props: {
    item: Object,
  },
  data() {
    return {};
  },
  computed: {
    opItem() {
      if (this.item.type === 1) {
        return this.item.likeUsers[0];
      }
      if (this.item.type === 2) {
        return this.item;
      }
      return this.item.comments[0];
    },
    opTimeStr() {
      if (this.item.type === 3) {
        return formatConversionTime(this.item.comments[0].createTime)
      }
      return formatConversionTime(this.item.createTime)
    },
    mediaUrl() {
      let url;
      try {
        url = this.item.content.metas[0]?.thumb;
      } catch (e) {}
      return url;
    },
  },
  methods: {
    clickItem() {
      uni.$u.route("/pages_im/pages/moments/momentsDetails/index", {
        workMomentID: this.item.workMomentID,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.message_item {
  display: flex;
  padding: 24rpx 32rpx;
  color: $uni-text-color;
  position: relative;

  &_details {
    @include vCenterBox();
    margin-left: 24rpx;
    width: 100%;
    position: relative;

    .content_wrap {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .main_content {
        margin-right: 36rpx;

        .i_name {
          @include nomalEllipsis;
          max-width: 360rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #333;
        }

        .i_content {
          @include ellipsisWithLine(5);
          margin-top: 12rpx;
          margin-bottom: 24rpx;

          image {
            width: 13px;
            height: 13px;
            margin-right: 12rpx;
          }
        }

        .i_time {
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    .bottom_line {
      height: 1px;
      width: 100%;
      background-color: #f0f0f0;
      position: absolute;
      bottom: -20rpx;
      z-index: 9;
    }
  }
}
</style>