组件整理
This commit is contained in:
95
pages/im/components/conversation/messageCell.vue
Normal file
95
pages/im/components/conversation/messageCell.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<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="avatarSize" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<view class="name">
|
||||
{{ contact(item.targetId).name }}
|
||||
<text v-if="item.conversationType === 3" class='group'>[群]</text>
|
||||
</view>
|
||||
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
|
||||
</view>
|
||||
<message-preview class="preview" :msg="item.latestMessage" :draft="item.draft"
|
||||
:conversationType="item.conversationType" :user="item.latestMessage.userInfo" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import messagePreview from './messagePreview'
|
||||
import utils from '@/utils/index.js'
|
||||
import imBase from '../../mixins/imBase.js'
|
||||
|
||||
export default {
|
||||
mixins: [
|
||||
imBase
|
||||
],
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
messagePreview
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message--cell {
|
||||
display: flex;
|
||||
padding: 20rpx 10rpx 0 30rpx;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
padding-top: 5rpx;
|
||||
|
||||
.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: #eee !important;
|
||||
border-bottom-style: solid;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: $title-size + 2;
|
||||
color: #454545;
|
||||
|
||||
.group {
|
||||
color: $main-color;
|
||||
font-size: $title-size-m - 4;
|
||||
margin-left: 4px;
|
||||
position: relative;
|
||||
top: -4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: $title-size-sm - 3;
|
||||
color: $text-gray-m;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
padding-top: 4rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
pages/im/components/conversation/messagePreview.vue
Normal file
85
pages/im/components/conversation/messagePreview.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="preview" v-if="draft">
|
||||
<text class="draft">[草稿]</text> {{ draft }}
|
||||
</view>
|
||||
<block v-else>
|
||||
<view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}：</text>{{ msg.content || '' }}
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}：</text>[图片]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}：</text>[表情]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:FileMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}：</text>[文件]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}：</text>[位置]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType==0">
|
||||
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType==1">
|
||||
<text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
|
||||
[{{ msg.message }}]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:RcNtf'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}：</text> 撤回了一条消息
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
msg: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
conversationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
draft: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
user: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.preview {
|
||||
word-break: break-all;
|
||||
color: $text-gray-m;
|
||||
padding-top: 6rpx;
|
||||
padding-bottom: $padding;
|
||||
font-size: $title-size-m - 2;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
width: 520rpx;
|
||||
@extend .nowrap;
|
||||
|
||||
.draft {
|
||||
color: $text-price;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user