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

<template>
  <div>
    <wd-swipe-action>
      <div
        @click="cellClick"
        :class="['chatItem', props.data.is_top === 1 ? 'isTop' : '']"
      >
        <div class="avatarImg">
          <tm-badge
            :count="props.data.unread_num"
            :maxCount="99"
            color="#D03050"
          >
            <tm-image
              :width="96"
              :height="96"
              :round="12"
              :src="avatarCpt"
            ></tm-image>
          </tm-badge>
        </div>
        <div class="chatInfo">
          <div class="chatInfo_1">
            <div class="flex items-center">
              <div class="text-[#000000] text-[32rpx] font-bold opacity-90">
                {{ props.data.name }}
              </div>
              <div>
                <div v-if="props.data.group_type === 2" class="depTag">
                  部门
                </div>
                <div v-if="props.data.group_type === 3" class="projectTag">
                  项目
                </div>
                <div v-if="props.data.group_type === 4" class="companyTag">
                  公司
                </div>
              </div>
            </div>
            <div class="text-[#000000] text-[28rpx] font-medium opacity-26">
              {{ beautifyTime(props.data.updated_at) }}
            </div>
          </div>
          <div class="chatInfo_2 w-full mr-[6rpx]">
            <div class="w-full chatInfo_2_1 textEllipsis">
              {{ props.data.msg_text }}
            </div>
          </div>
        </div>
      </div>
      <template #right>
        <div class="flex flex-row flex-row-center-end">
          <div
            @click="handleTop"
            class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center"
          >
            {{ props.data.is_top === 1 ? "取消置顶" : "置顶" }}
          </div>
          <div
            class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#CF3050] flex items-center justify-center"
          >
            删除
          </div>
        </div>
      </template>
    </wd-swipe-action>
    <div
      v-if="props.index !== talkStore.talkItems.length - 1"
      class="divider"
    ></div>
  </div>
</template>
<script setup>
import { ref, reactive, defineProps,computed } 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";
import zu4989 from "@/static/image/chatList/zu4989@2x.png";
import zu4991 from "@/static/image/chatList/zu4991@2x.png";
import zu4992 from "@/static/image/chatList/zu4992@2x.png";
import zu5296 from "@/static/image/chatList/zu5296@2x.png";

const talkStore = useTalkStore();
const { onToTopTalk } = useSessionMenu();
const dialogueStore = useDialogueStore();
const props = defineProps({
  data: {
    type: Object,
    default: {},
    required: true,
  },
  index: {
    type: Number,
    default: -1,
    required: true,
  },
});

const avatarCpt = computed(() => {
  let avatar = null;
  if (props.data.avatar !== "") {
    avatar = props.data.avatar;
  } else {
    switch (props.data.group_type) {
      case 1:
        avatar = zu4992;
        break;
      case 2:
        avatar = zu4989;
        break;
      case 3:
        avatar = zu4991;
        break;
      case 4:
        avatar = zu5296;
        break;
    }
  }
  return avatar;
});

const cellClick = () => {
  console.log(props.data);
  // 更新编辑信息
  dialogueStore.setDialogue(props.data);

  // 清空消息未读数
  if (props.data.unread_num > 0) {
    ServeClearTalkUnreadNum({
      talk_type: props.data.talk_type,
      receiver_id: props.data.receiver_id,
    }).then(() => {
      talkStore.updateItem({
        index_name: props.data.index_name,
        unread_num: 0,
      });
    });
  }
  uni.navigateTo({
    url: "/pages/dialog/index",
  });
};

const handleTop = () => {
  console.log(props.data, 1);
  onToTopTalk(props.data);
};
</script>
<style lang="scss" scoped>
.chatItem {
  width: 100%;
  height: 154rpx;
  padding: 30rpx 16rpx;
  display: flex;
  align-items: center;

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

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

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

.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%;
}

.companyTag {
  width: 76rpx;
  height: 38rpx;
  line-height: 38rpx;
  border: 1px solid #7a58de;
  font-size: 24rpx;
  text-align: center;
  border-radius: 6rpx;
  color: #7a58de;
  font-weight: bold;
  margin-left: 12rpx;
}

.depTag {
  width: 76rpx;
  height: 38rpx;
  line-height: 38rpx;
  border: 1px solid #377ec6;
  font-size: 24rpx;
  text-align: center;
  border-radius: 6rpx;
  color: #377ec6;
  font-weight: bold;
  margin-left: 12rpx;
}

.projectTag {
  width: 76rpx;
  height: 38rpx;
  line-height: 38rpx;
  border: 1px solid #c1681c;
  font-size: 24rpx;
  text-align: center;
  border-radius: 6rpx;
  color: #c1681c;
  font-weight: bold;
  margin-left: 12rpx;
}

.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>