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

<template>
	<div>
		<wd-swipe-action class="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"
					>
						<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>
					</tm-badge>
				</div>
				<div class="chatInfo">
					<div class="chatInfo_1">
						<div class="name_center">
							<div class="text-[#000000] text-[32rpx]
              font-bold opacity-90 name_text">
                {{ formatNameText(props.data.name) }}
                <span v-if="props.data.group_member_num > 0">（{{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 style="flex-shrink: 0;"
							class="text-[#000000] text-[28rpx] font-medium opacity-26 ml-[24rpx] time_right"
						>
							{{ 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 style="width: 1px"></div>
					<div
						@click="handleTop"
						class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center"
					>
						{{ props.data.is_top === 1 ? "取消置顶" : "置顶" }}
					</div>
					<div
						@click="handleDelete"
						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 avatarModule from "@/components/avatar-module/index.vue";
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";

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

// 添加格式化方法
const formatNameText = (text, maxLength = 16) => {
  return text.length > maxLength ? `${text.slice(0, maxLength - 1)}...` : text;
};

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?sessionId=" + props.data.id,
	});
};

const handleTop = () => {
	console.log(props.data, 1);
	onToTopTalk(props.data);
};

//点击删除会话
const handleDelete = () => {
	console.log(props.data);
	onRemoveTalk(props.data);
};
</script>
<style lang="scss" scoped>
::v-deep .swipe_action {
	// border: 1px solid #fff;
	// transform: translate3d(1px, 0px, 0px) !important;
}
.chatItem {
	width: 100%;
	height: 154rpx;
	padding: 30rpx 16rpx;
	display: flex;
	align-items: center;

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

.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: rgba($color: #000000, $alpha: 0.4);
}
.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;
}
.name_center{
  flex: 1;
  min-width: 0;
}
.name_text{
  display: inline-block;
  max-height: 88rpx; // 两行文字的高度
  line-height: 44rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.time_right {
	/* white-space: nowrap;
	max-width: 146rpx; */
  flex: 0 0 auto; /* 不伸缩，保持内容宽度 */
  white-space: nowrap;
}

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