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

消息列表组件化，统一私聊和群聊样式

Browse Source
This commit is contained in:
Jason.Chen
2022-02-22 16:48:49 +08:00
parent ab35229331
commit 01627f6794
11 changed files with 171 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,6 +31,9 @@
<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>

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

@@ -16,9 +16,9 @@
</template>
<script>
import sentText from '../components/sentText'
import sentVoice from '../components/sentVoice'
import sentPopups from '../components/sentPopups'
import sentText from './sentText'
import sentVoice from './sentVoice'
import sentPopups from './sentPopups'
export default {
props: {

0
pages/im/components/showCall.vue → pages/im/components/show/showCall.vue
View File

0
pages/im/components/showImage.vue → pages/im/components/show/showImage.vue
View File

27
pages/im/components/showText.vue → pages/im/components/show/showText.vue
View File

@@ -46,17 +46,34 @@
methods: {
// 撤回消息测试
backMessage() {
console.log('撤回消息');
const pushContent = '推送内容'
if (this.$store.getters.sender.userId != this.message.senderUserId) {
uni.showToast({
icon: 'none',
title: '不能撤回别人的消息'
})
return
}
// 判断时间超过了多久 就不能撤回 TODO
// this.message.sentTime
const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
RongIMLib.recallMessage(this.message.messageId, pushContent,
({
code,
message
}) => {
console.error(code);
// 撤回消息成功
if (code === 0) {
console.error(message);
uni.showToast({
icon: 'none',
title: '消息撤回成功'
})
RongIMLib.getMessage(this.message.messageId, res => {
uni.$emit('onRecallMessage', res.message)
})
} else {
uni.showToast({
icon: 'none',
title: '撤回失败' + code
})
}
}
)

0
pages/im/components/showVoice.vue → pages/im/components/show/showVoice.vue
View File

110
pages/im/components/showMessageCell.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<view class="">
<view class="notify" v-if="message.objectName === 'RC:GrpNtf'">{{ message.content.message }}</view>
<view class="notify" v-else-if="message.objectName === 'RC:RcNtf'">
{{ contact(message.senderUserId).name }} 撤回了一条消息
</view>
<view v-else :class="['cell-item', message.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(message)" :size="avatarSize" shape="square"
:src="contact(message.senderUserId).portraitUrl" />
<view class="msg">
<show-text v-if="message.objectName === 'RC:TxtMsg'" :message="message" :isGroup="isGroup" />
<show-voice v-else-if="message.objectName === 'RC:HQVCMsg'" :message="message" :isGroup="isGroup" />
<show-image v-else-if="message.objectName === 'RC:ImgMsg'" :message="message" :isGroup="isGroup" />
<show-call v-else-if="message.objectName === 'RC:InfoNtf'" :message="message" :isGroup="isGroup" />
<view v-else class="">
[未处理的消息类型 {{ message.objectName }}]
</view>
</view>
<!-- <view class="time">{{ item.sentTime|timeCustomCN }}</view> 时间判断，最好是隔一段时间没有消息才展示一个 -->
</view>
</view>
</template>
<script>
import showVoice from './show/showVoice'
import showImage from './show/showImage'
import showText from './show/showText'
import showCall from './show/showCall'
import utils from '@/utils/index.js'
export default {
components: {
showCall,
showVoice,
showImage,
showText
},
props: {
message: {
type: Object,
default: function() {
return {}
}
},
isGroup: {
type: Boolean,
default: false
}
},
data() {
return {
avatarRpx: 84
}
},
computed: {
avatarSize() {
return utils.rpx2px(this.avatarRpx)
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
methods: {
toUser(item) {
if (item.messageDirection == 1) {
uni.navigateTo({
url: '/pages/im/friends/mine?targetId=' + item.senderUserId
})
} else {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + item.senderUserId
})
}
}
}
}
</script>
<style lang="scss" scoped>
.notify {
text-align: center;
font-size: 24rpx;
color: #666;
}
.cell-item {
display: flex;
width: 710rpx;
justify-content: flex-start;
&.left {
flex-direction: row;
}
&.right {
flex-direction: row-reverse;
.state {
flex-direction: row;
justify-content: flex-end;
}
}
.msg {
margin: 0 20rpx;
}
}
</style>

89
pages/im/group/chat.vue
View File

@@ -4,17 +4,8 @@
<view class="body">
<view class="scroll">
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
<view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(item)" :size="avatarSize" shape="square"
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" isGroup />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" isGroup />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" isGroup />
</view>
</view>
<view class="cell" v-for="(message, index) in messages" :key="index">
<show-message-cell :message="message" isGroup />
</view>
</view>
</view>
@@ -22,26 +13,19 @@
</template>
<script>
import {
timeCustomCN
} from '@/utils/filters.js'
import {
getGroupBase
} from '@/apis/interfaces/im.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import showVoice from '../components/showVoice'
import showImage from '../components/showImage'
import showText from '../components/showText'
import sentMessageBar from '../components/sentMessageBar'
import showMessageCell from '../components/showMessageCell'
import utils from '@/utils/index.js'
export default {
components: {
showVoice,
showImage,
showText,
sentMessageBar
sentMessageBar,
showMessageCell
},
data() {
return {
@@ -55,9 +39,6 @@
}
},
computed: {
avatarSize() {
return utils.rpx2px(this.avatarRpx)
},
latestMessage() {
if (this.messages.length) {
return this.messages[0]
@@ -66,11 +47,6 @@
sentTime: 0
}
}
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
onLoad(e) {
@@ -103,8 +79,20 @@
})
// 清理聊天记录
uni.$once('cleanGroupMessage', this.getMessageList)
uni.$on('onRecallMessage', (res) => {
if (res.targetId == this.targetId) {
this.messages = this.messages.map(item => {
if (res.messageId == item.messageId) {
return res
} else {
return item
}
})
}
})
},
onUnload() {
uni.$off('onRecallMessage')
uni.$off('onReceiptRequest')
uni.$off('onReceiptResponse')
},
@@ -117,17 +105,6 @@
onScroll(e) {
this.$refs.messageBar.onHidePopus()
},
toUser(item) {
if (item.messageDirection == 1) {
uni.navigateTo({
url: '/pages/im/friends/mine?targetId=' + item.senderUserId
})
} else {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + item.senderUserId
})
}
},
getNewMessage() {
im.getMessageList(
this.conversationType,
@@ -149,6 +126,7 @@
20,
true,
(messages) => {
console.log('获取消息列表', messages);
RongIMLib.sendReadReceiptResponse(3, this.targetId, messages, (res) => {
console.error('发送群聊已读回执成功', res);
})
@@ -193,38 +171,7 @@
.cell {
padding: 10rpx 20rpx;
.time {
text-align: center;
font-size: 24rpx;
color: #666;
}
.cell-item {
display: flex;
width: 710rpx;
justify-content: flex-start;
&.left {
flex-direction: row;
}
&.right {
flex-direction: row-reverse;
.state {
flex-direction: row;
justify-content: flex-end;
}
}
.msg {
margin: 0 20rpx;
}
}
.cell-footer {
height: 20rpx;
}
}
}
}

37
pages/im/private/chat.vue
View File

@@ -4,45 +4,28 @@
<!-- chat -->
<view class="body">
<view class="scroll">
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" :size="avatarSize" shape="square"
@click="showUser(item.senderUserId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" />
<show-call v-if="item.objectName === 'RC:InfoNtf'" :message="item" />
</view>
</view>
<view class="cell" v-for="(message, index) in messages" :key="index">
<show-message-cell :message="message" />
</view>
</view>
</view>
</view>
</template>
<script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import showVoice from '../components/showVoice'
import showImage from '../components/showImage'
import showText from '../components/showText'
import showCall from '../components/showCall'
import sentMessageBar from '../components/sentMessageBar'
import showMessageCell from '../components/showMessageCell'
import utils from '@/utils/index.js'
export default {
components: {
sentMessageBar,
showVoice,
showImage,
showText,
showCall
showMessageCell
},
data() {
return {
avatarRpx: 84,
targetId: '',
messages: [],
conversationType: 1,
@@ -54,9 +37,6 @@
}
},
computed: {
avatarSize() {
return utils.rpx2px(this.avatarRpx)
},
latestMessage() {
if (this.messages.length) {
return this.messages[0]
@@ -128,13 +108,6 @@
this.scrollBottom()
})
},
// 展示好友信息, type 1 是自己， 2 是对方
showUser(targetId, type) {
uni.navigateTo({
url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId :
'/pages/im/friends/info?targetId=' + targetId
})
},
// 滚动到底部
scrollBottom(type) {
if (this.latestMessage) {

5
utils/im/listeners.js
View File

@@ -94,7 +94,10 @@ const imLibListeners = () => {
})
// 监听消息撤回操作
IMLib.addRecallMessageListener((res) => {
console.error("消息撤回: ", res);
IMLib.getMessage(res.data.messageId, (res) => {
console.error("消息撤回: ", res.message);
uni.$emit('onRecallMessage', res.message)
})
})
// 监听需要群聊消息回执
IMLib.addReceiptRequestListener(({

3
utils/im/message.js
View File

@@ -17,7 +17,8 @@ const getMessageList = (conversationType, targetId, timeStamp, count, isForward,
'RC:ReferenceMsg',
'RC:CombineMsg',
'RC:GrpNtf',
'RC:InfoNtf'
'RC:InfoNtf',
'RC:RcNtf'
]
RongIMLib.getHistoryMessagesByTimestamp(