xyy-m/src/components/Profile/News/GroupChat.vue

<template>
  <van-swipe-cell>
    <!-- {{ itemData?.unreadMessageCount }}
    {{ itemData?.dfGroupImage }} -->
    <div
      @click="$emit('onChatPage')"
      class="w-full relative h-82 flex justify-start items-center px-16"
    >
      <div class="w-48 h-48">
        <van-badge
          v-if="itemData?.unreadMessageCount > 0"
          v-bind="messageNumber(itemData?.unreadMessageCount)"
          max="99"
        >
          <MultiHeader :imgUrls="itemData?.dfGroupImage" />
        </van-badge>
        <MultiHeader v-else :imgUrls="itemData?.dfGroupImage" />
      </div>

      <div class="h-48 w-245 ml-12 flex flex-wrap">
        <h1 class="line-clamp-1 mb-8 w-full text-xl text-black-3 font-semibold">
          {{ itemData?.groupName }}
        </h1>
        <p class="line-clamp-1 w-full h-20 text-base text-black/[0.6] leading-3xl">
          {{ itemData?.lastMessage?.messageContent }}
        </p>
      </div>

      <div class="w-35 h-48 shrink-0">
        <p class="text-black/[0.6] mb-12 text-sm text-end">{{ itemData?.updateTime }}</p>

        <div v-if="itemData?.isNotDisturb == 1" class="w-full shrink-0 flex justify-end">
          <span class="iconfont icon-close-remind text-black-6" style="font-size: 16px"></span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
    </div>
    <template #right>
      <div class="pl-2 h-full">
        <van-button
          style="height: 100%"
          square
          :text="itemData?.isNotDisturb == 1 ? '取消免打扰' : '设为免打扰'"
          @click="$emit('onNoBother')"
          type="danger"
          color="#FF9300"
          class="delete-button"
        />
        <van-button
          style="height: 100%"
          square
          :text="itemData?.isTop == 1 ? '取消置顶' : '置顶聊天'"
          @click="$emit('onIsTop')"
          type="danger"
          color="#E37318"
          class="delete-button"
        />
        <van-button
          style="height: 100%"
          square
          :text="itemData?.isShow == 1 ? '不显示聊天' : '显示聊天'"
          @click="$emit('onConvDelete')"
          type="danger"
          color="#D54941"
          class="delete-button"
        />
      </div>
    </template>
  </van-swipe-cell>
</template>

<script setup>
import { messageContentParse } from '~/utils/detalTime.js'
defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  }
})
defineEmits(['onNoBother', 'onIsTop', 'onConvDelete', 'onChatPage'])

// 消息数量通知的展示  需要动态的展示
const messageNumber = (content) => {
  let messageNumberObj = {}
  if (content <= 1) {
    messageNumberObj = {
      offset: [-5, 4],
      dot: true,
      content
    }
  }
  if (content > 1) {
    messageNumberObj = {
      offset: [-10, 7],
      content
    }
  }
  return messageNumberObj
}
</script>

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