cansnow
124 lines
2.9 KiB
Vue
124 lines
2.9 KiB
Vue
<template>
|
|
<view class="message-search-item" @click="handleClick">
|
|
<view class="message-content">
|
|
<view class="message-meta">
|
|
<text class="sender-name" v-if="!isSelf && !isGroup">{{ message.senderNickname }}</text>
|
|
<text class="message-time">{{ formattedTime }}</text>
|
|
</view>
|
|
<view class="message-preview">
|
|
<text class="message-text">{{ messagePreview }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from "vuex";
|
|
import MyAvatar from "@/components/MyAvatar/index.vue";
|
|
import {MessageType, SessionType} from "openim-uniapp-polyfill";
|
|
import {formatMessageTime, parseMessageByType} from "@/util/imCommon";
|
|
|
|
export default {
|
|
name: "MessageSearchItem",
|
|
components: {
|
|
MyAvatar
|
|
},
|
|
props: {
|
|
message: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
conversation: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
"storeSelfInfo"
|
|
]),
|
|
isGroup() {
|
|
if(this.conversation){
|
|
return this.conversation.conversationType === SessionType.WorkingGroup || this.conversation.conversationType === 2;
|
|
}
|
|
return this.message.sessionType === SessionType.WorkingGroup || this.message.sessionType === 2;
|
|
},
|
|
isSelf() {
|
|
return this.message.sendID === this.storeSelfInfo?.userID;
|
|
},
|
|
formattedTime() {
|
|
return formatMessageTime(this.message.sendTime);
|
|
},
|
|
messagePreview() {
|
|
// 根据消息类型显示预览
|
|
switch(this.message.contentType) {
|
|
case MessageType.TextMessage:
|
|
return this.message.textElem?.content || '[文本消息]';
|
|
case MessageType.FileMessage:
|
|
return `[文件] ${this.message.fileElem?.fileName || '未知文件'}`;
|
|
case MessageType.LocationMessage:
|
|
return `[位置] ${this.message.locationElem?.description || '位置信息'}`;
|
|
case MessageType.PictureMessage:
|
|
return '[图片]';
|
|
case MessageType.VideoMessage:
|
|
return '[视频]';
|
|
case MessageType.SoundMessage:
|
|
return '[语音]';
|
|
default:
|
|
return parseMessageByType(this.message) || '[消息]';
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick() {
|
|
this.$emit('click', {
|
|
message: this.message,
|
|
conversation: this.conversation
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.message-search-item {
|
|
background-color: #fff;
|
|
padding: 20rpx 44rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
&:active {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.message-content {
|
|
.message-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
.sender-name {
|
|
font-size: 26rpx;
|
|
color: #1d6bed;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.message-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.message-preview {
|
|
.message-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
@include ellipsisWithLine(2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|