91 lines
2.6 KiB
Vue
91 lines
2.6 KiB
Vue
<template>
|
|
<view class="message--cell">
|
|
<view class="avatar">
|
|
<u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
|
|
<u-avatar :src="contact(item.targetId).portraitUrl" shape="square" size="44" />
|
|
</view>
|
|
<view class="content">
|
|
<view class="header">
|
|
<view class="name">{{ contact(item.targetId).name }} <span v-if="item.conversationType === 3" class='qun'>[群]</span></view>
|
|
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
|
|
</view>
|
|
<message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
|
|
:user="item.latestMessage.userInfo" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import messagePreview from './messagePreview'
|
|
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
contact() {
|
|
return function(targetId) {
|
|
return this.$store.getters.contactInfo(targetId)
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
messagePreview
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.message--cell {
|
|
display: flex;
|
|
padding: 20rpx 0 0 20rpx;
|
|
|
|
.avatar {
|
|
position: relative;
|
|
|
|
.u-badge {
|
|
z-index: 998;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-left: 30rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
flex: 1;
|
|
|
|
border-bottom-width: 0.5px !important;
|
|
border-color: $u-border-color !important;
|
|
border-bottom-style: solid;
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.name {
|
|
font-size: $title-size + 2;
|
|
color: #454545;
|
|
color: #454545;
|
|
.qun{
|
|
color: $main-color;
|
|
font-size: $title-size-m;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
font-size: $title-size-sm;
|
|
color: $text-gray-m;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|