<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="props.data.avatar"></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 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 } 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 props = defineProps({ data: { type: Object, default: {}, required: true, }, index: { type: Number, default: -1, required: true, } }); 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; border: 1px solid #7A58DE; font-size: 24rpx; text-align: center; border-radius: 6rpx; color: #7A58DE; 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>