uni-im-conversation.vue

<template>
  <uni-list-chat 
    :id="conversation.id" 
    :note="canCheck?'':conversation.note"
    :show-badge="!canCheck && conversation.unread_count>0" 
    :badge-text="!canCheck ? conversation.unread_count : ''"
    :title="conversation.title" 
    :avatar="avatarUrl"
    :time="canCheck?'':friendlyTime(conversation.time)" 
    :is-pinned="conversation.pinned"
    :is-mute="canCheck?false:conversation.mute" 
    :red-note="redNote" 
    :tags="conversation.tag"
    @click="handleClick"
    link
  >
    <template v-slot:left>
      <slot name="left"></slot>
    </template>
    <template v-slot:over-avatar>
      <template v-for="overlay in avatarOverlayList" :key="overlay.component.name">
        <component
          :is="overlay.component"
          v-bind="overlay.props"
          cementing="ConversationAvatarOverlay"
        />
      </template>
    </template>
  </uni-list-chat>
</template>

<script>
  import uniIm from '@/uni_modules/uni-im/sdk/index.js';
  import {
    markRaw
  } from "vue";
  export default {
    name: 'UniImConversation',
    props: {
      conversation: {
        type: Object,
        default: () => {}
      },
      canCheck: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      redNote() {
        if (this.canCheck) {
          return ''
        } else if (this.conversation.call_list.length > 0) {
          return '[有人@我]'
        } else if (this.conversation.hasDraft) {
          return '[草稿]'
        } else if (this.conversation.group_id && this.conversation.group_info.mute_all_members) {
          return '[已禁言]'
        }
      }
    },
    emits: ['click'],
    data() {
      // 调用扩展点，扩展程序可以为该会话增加覆盖的图标元素。
      let avatarOverlayList = uniIm.extensions
        .invokeExts("conversation-avatar-overlay", this.conversation)
        .filter((result) => result && result.component)
        .map((result) => {
          return {
            component: markRaw(result.component),
            props: result.props || {},
            handlers: result.handlers || {},
          };
        });
      return {
        avatarUrl: "/uni_modules/uni-im/static/avatarUrl.png",
        avatarOverlayList
      };
    },
    watch: {
      'conversation.avatar_file': {
        async handler(avatar_file) {
          if (typeof avatar_file == 'object' && avatar_file.url) {
            this.avatarUrl = await uniIm.utils.getTempFileURL(avatar_file.url);
          }
        },
        immediate: true,
      },
    },
    methods: {
      handleClick() {
        this.$emit('click', this.conversation)
      },
      friendlyTime(timestamp) {
        // 使得时间会随着心跳动态更新
        timestamp = timestamp + uniIm.heartbeat * 0
        let friendlyTime = uniIm.utils.toFriendlyTime(timestamp)
        // console.log('friendlyTime',friendlyTime);
        let friendlyTimeArr = friendlyTime.split(' ')
        let friendlyTimeArrL = friendlyTimeArr.length
        // 如果含 年/月（不在3天内，且不是同一周），去掉时间
        if (friendlyTimeArrL == 3 && friendlyTime.includes('/')) {
          friendlyTime = friendlyTimeArr[0]
        }
        return friendlyTime
      }
    }
  };
</script>

<style lang="scss">
</style>