cansnow
156 lines
3.3 KiB
Vue
156 lines
3.3 KiB
Vue
<template>
|
|
<view @tap.prevent="clickConversationItem" :class="['conversation_item',source.isPinned?'pinned' : '']">
|
|
<view class="left_info">
|
|
<my-avatar :isGroup="isGroup" :isNotify="isNotify" :src="source.faceURL" :desc="source.showName"
|
|
size="46" />
|
|
<view class="details">
|
|
<view class="title">
|
|
<text class="conversation_name">
|
|
{{ source.showName }}
|
|
</text>
|
|
<view class="right_desc">
|
|
<text class="send_time">{{ latestMessageTime }}</text>
|
|
<u-badge max="99" :value="source.unreadCount"></u-badge>
|
|
</view>
|
|
</view>
|
|
<view class="lastest_msg_wrap">
|
|
<text class="lastest_msg_content">{{ latestMessage }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {SessionType,} from "openim-uniapp-polyfill";
|
|
import MyAvatar from "@/components/MyAvatar/index.vue";
|
|
import UParse from "@/components/gaoyia-parse/parse.vue";
|
|
import {getConversationContent,formatConversionTime,prepareConversationState,} from "@/util/imCommon";
|
|
|
|
export default {
|
|
components: {
|
|
MyAvatar,
|
|
UParse,
|
|
},
|
|
props: {
|
|
source: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
},
|
|
created() {
|
|
console.log(this.source)
|
|
},
|
|
computed: {
|
|
latestMessage() {
|
|
if (this.source.latestMsg === "") return "";
|
|
let parsedMessage;
|
|
try {
|
|
parsedMessage = JSON.parse(this.source.latestMsg);
|
|
} catch (e) {}
|
|
if (!parsedMessage) return "";
|
|
return getConversationContent(parsedMessage);
|
|
},
|
|
latestMessageTime() {
|
|
return this.source.latestMsgSendTime ?
|
|
formatConversionTime(this.source.latestMsgSendTime) :
|
|
"";
|
|
},
|
|
isGroup() {
|
|
return this.source.conversationType === SessionType.WorkingGroup;
|
|
},
|
|
isNotify() {
|
|
return this.source.conversationType === SessionType.Notification;
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
methods: {
|
|
clickConversationItem() {
|
|
//console.log(this.source);
|
|
prepareConversationState(this.source);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.conversation_item {
|
|
@include btwBox();
|
|
flex-direction: row;
|
|
padding: 12rpx 44rpx 20rpx;
|
|
position: relative;
|
|
&.pinned{
|
|
background-color: #ededed;
|
|
}
|
|
|
|
&_active {
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.left_info {
|
|
@include btwBox();
|
|
flex:1;
|
|
|
|
.details {
|
|
@include colBox(true);
|
|
flex:1;
|
|
margin-left: 24rpx;
|
|
height: 46px;
|
|
color: $uni-text-color;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom:20rpx;
|
|
.title{
|
|
@include btwBox();
|
|
.conversation_name {
|
|
@include nomalEllipsis();
|
|
max-width: 40vw;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.right_desc {
|
|
@include colBox(true);
|
|
align-items: flex-end;
|
|
width: max-content;
|
|
justify-content: space-between;
|
|
|
|
.send_time {
|
|
width: max-content;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.u-badge {
|
|
width: fit-content;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lastest_msg_wrap {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
margin: 10rpx 0;
|
|
color: #666;
|
|
|
|
.lastest_msg_prefix {
|
|
margin-right: 6rpx;
|
|
|
|
&_active {
|
|
color: $u-primary;
|
|
}
|
|
}
|
|
|
|
.lastest_msg_content {
|
|
flex: 1;
|
|
margin-right: 160rpx;
|
|
// ::v-deepuni-view {
|
|
@include ellipsisWithLine(1);
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |