TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

调整聊天窗口

Browse Source
This commit is contained in:
唐明明
2022-02-18 17:03:26 +08:00
parent 88c6a85d07 780ffd647a
commit 18f0332fa2
25 changed files with 570 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/im/components/messageCell.vue
View File

@@ -6,11 +6,12 @@
</view>
<view class="content">
<view class="header">
<view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3" class='qun'>[群]</text></view>
<view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3"
class='qun'>[群]</text></view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
:user="item.latestMessage.userInfo" />
<message-preview class="preview" :msg="item.latestMessage" :draft="item.draft"
:conversationType="item.conversationType" :user="item.latestMessage.userInfo" />
</view>
</view>
</template>
@@ -26,6 +27,9 @@
return {}
}
}
},
mounted() {
console.log(this.item);
},
computed: {
contact() {
@@ -58,7 +62,7 @@
box-sizing: border-box;
position: relative;
flex: 1;
border-bottom-width: 0.5px !important;
border-color: #f9f9f9 !important;

78
pages/im/components/messagePreview.vue
View File

@@ -1,32 +1,37 @@
<template>
<view>
<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:AudioMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
<view>
<view class="preview" v-if="draft">
<text class="draft">[草稿]</text> {{ draft }}
</view>
<view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
[{{ msg.message }}]
</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:AudioMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
[{{ msg.message }}]
</view>
</block>
</view>
</template>
@@ -36,10 +41,14 @@
msg: {
type: Object,
default: {}
},
conversationType: {
type: Number,
default: 0
},
conversationType: {
type: Number,
default: 0
},
draft: {
type: String,
default: ''
},
user: {
type: Object,
@@ -63,6 +72,11 @@
height: 32rpx;
line-height: 32rpx;
width: 520rpx;
@extend .nowrap;
@extend .nowrap;
.draft {
color: $text-price;
padding-right: 10rpx;
}
}
</style>

40
pages/im/components/sentMessageBar.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="">
<view class="messageBar">
<!-- footer -->
<view class="footer">
<view class="msg-type" @click="changeMessageType">
@@ -60,23 +60,25 @@
}
</script>
<style lang="scss" scoped>
.footer {
background: white;
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
}
<style lang="scss" scoped>
.messageBar{
border-radius: ($radius*2) ($radius*2) 0 0;
background: white;
.footer {
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
}
}
}
</style>

21
pages/im/components/showText.vue
View File

@@ -1,7 +1,9 @@
<template>
<view class="msg--text">
<text class="name" v-if="!guest && name">{{ name }}</text>
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
<text class="name" v-if="!guest && name">{{ name }}</text>
<view>
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
</view>
</view>
</template>
@@ -11,7 +13,9 @@
props: {
msg: {
type: Object,
default: {}
default: () => {
return {}
}
},
name: {
type: String,
@@ -29,22 +33,21 @@
.msg--text {
.name {
font-size: 26rpx;
padding-bottom: 10rpx;
color: $text-gray-m;
color: $text-gray-m;
display: inline-block;
}
.im--text {
max-width: 508rpx;
padding: 20rpx;
line-height: 46rpx;
font-size: 32rpx;
color: $text-color;
color: $text-color;
display: inline-block;
word-break: break-all;
&.left {
border-radius: 0 20rpx 20rpx 20rpx;
background: white;
}
&.right {
border-radius: 20rpx 0 20rpx 20rpx;
background: $main-color;