chat-app/src/pages/chooseChat/components/chatItem.vue

<template>
  <div>
    <div
      @click="cellClick"
      :class="['chatItem', props.data.is_top === 1 ? 'isTop' : '']"
    >
      <div>
        <tm-checkbox
          v-if="props.isMultiSelect"
          :round="10"
          :modelValue="props.data.isCheck"
          @update:modelValue="props.data.isCheck = !props.data.isCheck"
          :size="32"
          :color="props.data.isCheck ? '#46299D' : '#BABABA'"
          class="pr-[4rpx]"
        ></tm-checkbox>
      </div>
      <div class="avatarImg">
        <avatarModule
          :mode="props?.data?.group_type === 0 ? 1 : 2"
          :avatar="props?.data?.avatar"
          :groupType="props?.data?.group_type"
          :userName="props?.data?.name"
          :customStyle="{ width: '96rpx', height: '96rpx' }"
          :customTextStyle="{
            fontSize: '32rpx',
            fontWeight: 'bold',
            color: '#fff',
            lineHeight: '44rpx',
          }"
        ></avatarModule>
      </div>
      <div class="chatInfo">
        <div class="chatInfo_1">
          <div class="flex items-center">
            <div
              class="text-[#171717] text-[32rpx] font-medium leading-[44rpx]"
            >
              <span>{{ props.data.name }}</span>
              <span v-if="props.data.talk_type === 2">
                （{{ props.data.group_member_num }}）
              </span>
              <span v-if="props.data.group_type === 2" class="depTag tag">
                部门
              </span>
              <span v-if="props.data.group_type === 3" class="projectTag tag">
                项目
              </span>
              <span v-if="props.data.group_type === 4" class="companyTag tag">
                公司
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="props.index !== talkStore.talkItems.length - 1"
      class="divider"
    ></div>
  </div>
</template>
<script setup>
import avatarModule from '@/components/avatar-module/index.vue'
import { ref, reactive, defineProps, defineEmits } from 'vue'
import dayjs from 'dayjs'
import { beautifyTime } from '@/utils/datetime'
import { ServeClearTalkUnreadNum } from '@/api/chat'
import { useTalkStore, useDialogueStore } from '@/store'
import { useSessionMenu } from '@/hooks'

const talkStore = useTalkStore()
const { onToTopTalk } = useSessionMenu()
const dialogueStore = useDialogueStore()
const emit = defineEmits(['itemClick'])
const props = defineProps({
  data: {
    type: Object,
    default: {},
    required: true,
  },
  index: {
    type: Number,
    default: -1,
    required: true,
  },
  isMultiSelect: {
    type: Boolean,
    default: false,
  },
})

const cellClick = () => {
  emit('itemClick', props.data)
}
</script>
<style lang="scss" scoped>
.chatItem {
  width: 100%;
  height: 154rpx;
  padding: 24rpx 18rpx;
  display: flex;
  align-items: center;

  &.isTop {
    background-color: #f3f3f3;
  }
}

.avatarImg {
  height: 96rpx;
  width: 96rpx;
}

.chatInfo {
  flex: 1;
  margin-left: 16rpx;
}

.chatInfo_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chatInfo_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6rpx;
}

.chatInfo_2_1 {
  font-size: 28rpx;
  color: #000000;
  opacity: 40%;
}

.tag {
  display: inline-flex;
  align-items: center;
  text-align: center;
  // margin-left: 10rpx;
  margin-top: 4rpx;
  vertical-align: top;
  height: 38rpx;
  line-height: 38rpx;
  padding: 0 10rpx;
  font-size: 24rpx;
  border-radius: 6rpx;
  font-weight: bold;
}
.companyTag {
  border: 1px solid #7a58de;
  color: #7a58de;
}
.depTag {
  border: 1px solid #377ec6;
  color: #377ec6;
}
.projectTag {
  border: 1px solid #c1681c;
  color: #c1681c;
}

.textEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.divider {
  background-color: rgba(243, 243, 243, 1);
  height: 1rpx;
  margin: 0 18rpx;
}
</style>