129 lines
2.6 KiB
Vue
129 lines
2.6 KiB
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="42" :color="props.data.isCheck ? '#46299D' : '#BABABA'"></tm-checkbox>
|
||
|
|
</div>
|
||
|
|
<div class="avatarImg">
|
||
|
|
<tm-image :width="96" :height="96" :round="12" :src="props.data.avatar"></tm-image>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="props.index !== talkStore.talkItems.length - 1" class="divider"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
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: 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>
|