...
This commit is contained in:
81
pages/im/components/show/messageState.vue
Normal file
81
pages/im/components/show/messageState.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view v-if="!isRemote">
|
||||
<view class="state" v-if="isGroup">
|
||||
<!-- 已发送 -->
|
||||
<u-icon name="checkbox-mark" :size="iconSize" class="sent"
|
||||
:color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
|
||||
<!-- 已阅读 -->
|
||||
<text class="readers">{{ readers }}</text>
|
||||
</view>
|
||||
<view class="state" v-else>
|
||||
<!-- 已发送 -->
|
||||
<u-icon name="checkbox-mark" :size="iconSize" class="sent"
|
||||
:color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
|
||||
<!-- 已阅读 -->
|
||||
<u-icon name="checkbox-mark" :size="iconSize" class="receive"
|
||||
:color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import utils from '@/utils/index.js'
|
||||
|
||||
export default {
|
||||
name: 'showText',
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isRemote: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconSize() {
|
||||
return utils.rpx2px(28)
|
||||
},
|
||||
readers() {
|
||||
if (this.message.extra) {
|
||||
return JSON.parse(this.message.extra).readers || 0
|
||||
}
|
||||
|
||||
return 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.state {
|
||||
padding: 10rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: #ddd;
|
||||
display: flex;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.sent {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.receive {
|
||||
z-index: 1;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
|
||||
.readers {
|
||||
font-size: 20rpx;
|
||||
margin-left: -6rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +1,55 @@
|
||||
<template>
|
||||
<view class="msg--call">
|
||||
<view class="name" v-if="!guest && name">{{ name }}</view>
|
||||
<view class="im--text" :class="guest ? 'right': 'left'">
|
||||
<u-icon name="camera" size="22" v-if="message.mediaType == 1"
|
||||
:label="message.connected ? '通话时长：' + duration : '未接通'" />
|
||||
<u-icon name="phone" size="22" v-else :label="message.connected ? '通话时长：' + duration : '未接通'" />
|
||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||
<view class="im--text" :class="isRemote ? 'left': 'right'">
|
||||
<u-icon name="camera" size="22" v-if="msg.mediaType == 1" :label="label" />
|
||||
<u-icon name="phone" size="22" v-else :label="label" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from '@/utils/index.js'
|
||||
import moment from 'moment'
|
||||
|
||||
import utils from '@/utils/index.js'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'showText',
|
||||
props: {
|
||||
msg: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
guest: {
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
message() {
|
||||
return JSON.parse(this.msg.message)
|
||||
},
|
||||
duration() {
|
||||
if (this.message.duration > 3600) {
|
||||
return moment.utc(this.message.duration * 1000).format('HH:mm:ss')
|
||||
} else {
|
||||
return moment.utc(this.message.duration * 1000).format('mm:ss')
|
||||
}
|
||||
}
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
msg() {
|
||||
return JSON.parse(this.message.content.message)
|
||||
},
|
||||
label() {
|
||||
return this.msg.connected ? '通话时长：' + duration : '未接通'
|
||||
},
|
||||
isRemote() {
|
||||
return this.message.messageDirection == 2
|
||||
},
|
||||
contact() {
|
||||
return function(targetId) {
|
||||
return this.$store.getters.contactInfo(targetId)
|
||||
}
|
||||
},
|
||||
duration() {
|
||||
if (this.message.duration > 3600) {
|
||||
return moment.utc(this.message.duration * 1000).format('HH:mm:ss')
|
||||
} else {
|
||||
return moment.utc(this.message.duration * 1000).format('mm:ss')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,110 +1,122 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||
<view class="msg--image" :class="isRemote ? 'left': 'right'">
|
||||
<image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
|
||||
export default {
|
||||
name: 'showImage',
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isRemote() {
|
||||
return this.message.messageDirection == 2
|
||||
},
|
||||
content() {
|
||||
return this.message.content
|
||||
},
|
||||
contact() {
|
||||
return function(targetId) {
|
||||
return this.$store.getters.contactInfo(targetId)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImage() {
|
||||
if (this.content.local) {
|
||||
uni.previewImage({
|
||||
urls: [
|
||||
this.content.local
|
||||
],
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
},
|
||||
fail: (er) => {
|
||||
console.log(er);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
RongIMLib.downloadMediaMessage(this.messageId, {
|
||||
success: (path) => {
|
||||
this.content.local = path
|
||||
uni.previewImage({
|
||||
urls: [
|
||||
path
|
||||
],
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
},
|
||||
fail: (er) => {
|
||||
console.log(er);
|
||||
}
|
||||
})
|
||||
},
|
||||
progress: (progress, messageId) => {
|
||||
console.log('progress', progress);
|
||||
},
|
||||
cancel: (messageId) => {
|
||||
console.log('cancel', messageId);
|
||||
},
|
||||
error: (errorCode, messageId) => {
|
||||
console.log('errorCode', errorCode);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
.msg--image {
|
||||
.img {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
&.left {
|
||||
.img {
|
||||
border-radius: 0 10rpx 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.img {
|
||||
border-radius: 10rpx 0 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
<template>
|
||||
<view class="msg--image">
|
||||
<message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
|
||||
|
||||
<view class="">
|
||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||
<view class="image" :class="isRemote ? 'left': 'right'">
|
||||
<image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import messageState from './messageState'
|
||||
|
||||
export default {
|
||||
name: 'showImage',
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
messageState
|
||||
},
|
||||
computed: {
|
||||
isRemote() {
|
||||
return this.message.messageDirection == 2
|
||||
},
|
||||
content() {
|
||||
return this.message.content
|
||||
},
|
||||
contact() {
|
||||
return function(targetId) {
|
||||
return this.$store.getters.contactInfo(targetId)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImage() {
|
||||
if (this.content.local) {
|
||||
uni.previewImage({
|
||||
urls: [
|
||||
this.content.local
|
||||
],
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
},
|
||||
fail: (er) => {
|
||||
console.log(er);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
RongIMLib.downloadMediaMessage(this.messageId, {
|
||||
success: (path) => {
|
||||
this.content.local = path
|
||||
uni.previewImage({
|
||||
urls: [
|
||||
path
|
||||
],
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
},
|
||||
fail: (er) => {
|
||||
console.log(er);
|
||||
}
|
||||
})
|
||||
},
|
||||
progress: (progress, messageId) => {
|
||||
console.log('progress', progress);
|
||||
},
|
||||
cancel: (messageId) => {
|
||||
console.log('cancel', messageId);
|
||||
},
|
||||
error: (errorCode, messageId) => {
|
||||
console.log('errorCode', errorCode);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.msg--image {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
.image {
|
||||
.img {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
&.left {
|
||||
.img {
|
||||
border-radius: 0 10rpx 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.img {
|
||||
border-radius: 10rpx 0 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,16 @@
|
||||
<template>
|
||||
<view class="msg--text">
|
||||
<view class="state" v-if="!isGroup && !isRemote">
|
||||
<!-- 已发送 -->
|
||||
<u-icon name="checkbox-mark" class="sent" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
|
||||
<!-- 已阅读 -->
|
||||
<u-icon name="checkbox-mark" class="receive" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
|
||||
</view>
|
||||
<message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
|
||||
|
||||
<view class="">
|
||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||
<view @longpress="backMessage" :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
|
||||
<view :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import messageState from './messageState'
|
||||
|
||||
export default {
|
||||
name: 'showText',
|
||||
@@ -30,6 +26,9 @@
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
messageState
|
||||
},
|
||||
computed: {
|
||||
isRemote() {
|
||||
return this.message.messageDirection == 2
|
||||
@@ -42,42 +41,6 @@
|
||||
return this.$store.getters.contactInfo(targetId)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 撤回消息测试
|
||||
backMessage() {
|
||||
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
|
||||
}) => {
|
||||
if (code === 0) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '消息撤回成功'
|
||||
})
|
||||
RongIMLib.getMessage(this.message.messageId, res => {
|
||||
uni.$emit('onRecallMessage', res.message)
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '撤回失败' + code
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -87,24 +50,6 @@
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.state {
|
||||
padding: 10rpx;
|
||||
border-radius: 30rpx;
|
||||
width: 40rpx;
|
||||
background-color: #ddd;
|
||||
display: flex;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.sent {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.receive {
|
||||
z-index: 1;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: $text-gray-m;
|
||||
|
||||
@@ -1,25 +1,30 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||
<view class="msg--voice">
|
||||
<view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}"
|
||||
@click="startPlay">
|
||||
<image v-if="isRemote" class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
|
||||
src="@/static/icon/audio_green.png" mode="widthFix"></image>
|
||||
<image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
|
||||
src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
||||
<text class="duration">{{ duration }}"</text>
|
||||
<view class="msg--voice">
|
||||
<message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
|
||||
|
||||
<view class="">
|
||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||
<view class="msg-voice">
|
||||
<view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}"
|
||||
@click="startPlay">
|
||||
<image v-if="isRemote" class="icon"
|
||||
:class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
|
||||
src="@/static/icon/audio_green.png" mode="widthFix"></image>
|
||||
<image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
|
||||
src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
||||
<text class="duration">{{ duration }}"</text>
|
||||
</view>
|
||||
<u-badge isDot :show="message.content.local =='' && isRemote" />
|
||||
</view>
|
||||
<u-badge isDot :show="message.content.local =='' && isRemote" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import messageState from './messageState'
|
||||
|
||||
export default {
|
||||
name: 'showVoice',
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
@@ -32,6 +37,9 @@
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
messageState
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
onPlay: false,
|
||||
@@ -79,8 +87,8 @@
|
||||
if (this.onPlay) {
|
||||
this.stopPlay()
|
||||
return
|
||||
}
|
||||
this.onPlay = true
|
||||
}
|
||||
this.onPlay = true
|
||||
// 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
|
||||
if (this.message.content.local && this.message.content.local.indexOf('///data/user/') < 0) {
|
||||
this.playVoice(this.message.content.local)
|
||||
@@ -162,59 +170,82 @@
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
.msg--voice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
|
||||
.u-badge {
|
||||
margin-left: 20rpx;
|
||||
.state {
|
||||
padding: 10rpx;
|
||||
border-radius: 30rpx;
|
||||
width: 40rpx;
|
||||
background-color: #ddd;
|
||||
display: flex;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.sent {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.receive {
|
||||
z-index: 1;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.voice {
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
.msg-voice {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 84rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
.u-badge {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
.voice {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 84rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.onPlay {
|
||||
background-color: #EEEEEE;
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
|
||||
&.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: $main-color;
|
||||
flex-direction: row-reverse;
|
||||
&.onPlay {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
&.onPlay {
|
||||
background-color: darken($main-color, 10);
|
||||
.duration {
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
&.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: $main-color;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
&.onPlay {
|
||||
background-color: darken($main-color, 10);
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<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">
|
||||
<view class="msg" @longpress="backMessage">
|
||||
<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" />
|
||||
@@ -22,6 +22,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import showVoice from './show/showVoice'
|
||||
import showImage from './show/showImage'
|
||||
import showText from './show/showText'
|
||||
@@ -73,6 +74,40 @@
|
||||
url: '/pages/im/friends/info?targetId=' + item.senderUserId
|
||||
})
|
||||
}
|
||||
},
|
||||
// 撤回消息测试
|
||||
backMessage() {
|
||||
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 + '撤回了一条消息'
|
||||
IMLib.recallMessage(this.message.messageId, pushContent,
|
||||
({
|
||||
code,
|
||||
message
|
||||
}) => {
|
||||
if (code === 0) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '消息撤回成功'
|
||||
})
|
||||
IMLib.getMessage(this.message.messageId, res => {
|
||||
uni.$emit('onRecallMessage', res.message)
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '撤回失败' + code
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,8 +74,17 @@
|
||||
})
|
||||
}
|
||||
})
|
||||
// 群已读回执
|
||||
uni.$on('onReceiptResponse', (msg) => {
|
||||
console.log('远端消息已读，本地获取有几个人读了', msg);
|
||||
if (msg.targetId == this.targetId) {
|
||||
this.messages = this.messages.map(item => {
|
||||
if (msg.messageId == item.messageId) {
|
||||
return msg
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// 清理聊天记录
|
||||
uni.$once('cleanGroupMessage', this.getMessageList)
|
||||
@@ -127,9 +136,17 @@
|
||||
true,
|
||||
(messages) => {
|
||||
console.log('获取消息列表', messages);
|
||||
RongIMLib.sendReadReceiptResponse(3, this.targetId, messages, (res) => {
|
||||
console.error('发送群聊已读回执成功', res);
|
||||
})
|
||||
const msgs = messages.filter(item => item.receivedStatus == 0)
|
||||
console.log('未读消息', msgs);
|
||||
if (msgs.length) {
|
||||
RongIMLib.sendReadReceiptResponse(3, this.targetId, msgs, (res) => {
|
||||
console.error('发送群聊已读回执成功', res);
|
||||
msgs.map(item => {
|
||||
RongIMLib.setMessageReceivedStatus(item.messageId, 1)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
this.messages = messages
|
||||
this.scrollBottom()
|
||||
})
|
||||
@@ -144,10 +161,10 @@
|
||||
im.setNotifyBadge()
|
||||
}
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
// console.log(JSON.stringify(this.$refs))
|
||||
this.$refs.voice.stopPlay()
|
||||
},
|
||||
onHide() {
|
||||
// console.log(JSON.stringify(this.$refs))
|
||||
this.$refs.voice.stopPlay()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -77,9 +77,21 @@
|
||||
if (msg.targetId == this.targetId) {
|
||||
this.getNewMessage()
|
||||
}
|
||||
})
|
||||
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() {
|
||||
onUnload() {
|
||||
uni.$off('onRecallMessage')
|
||||
uni.$off('onReadReceiptReceived')
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -93,22 +93,36 @@ const imLibListeners = () => {
|
||||
uni.$emit('onReadReceiptReceived', data)
|
||||
})
|
||||
// 监听消息撤回操作
|
||||
IMLib.addRecallMessageListener((res) => {
|
||||
IMLib.getMessage(res.data.messageId, (res) => {
|
||||
console.error("消息撤回: ", res.message);
|
||||
uni.$emit('onRecallMessage', res.message)
|
||||
IMLib.addRecallMessageListener((res) => {
|
||||
IMLib.getMessage(res.data.messageId, (res) => {
|
||||
console.error("消息撤回: ", res.message);
|
||||
uni.$emit('onRecallMessage', res.message)
|
||||
})
|
||||
})
|
||||
// 监听需要群聊消息回执
|
||||
IMLib.addReceiptRequestListener(({
|
||||
data
|
||||
}) => {
|
||||
console.error('onReceiptRequested', data);
|
||||
}) => {
|
||||
uni.$emit('onReceiptRequest', data)
|
||||
})
|
||||
// 群消息已读的回执
|
||||
IMLib.addReceiptResponseListener((res) => {
|
||||
console.error('onReceiptResponse', res);
|
||||
IMLib.addReceiptResponseListener(({
|
||||
data
|
||||
}) => {
|
||||
// 获取本地消息
|
||||
IMLib.getMessageByUId(data.messageUId, ({
|
||||
message
|
||||
}) => {
|
||||
const readers = Object.keys(data.users).length
|
||||
const extra = JSON.stringify({
|
||||
readers
|
||||
})
|
||||
// 在消息的扩展数据中，设置已读数量
|
||||
IMLib.setMessageExtra(message.messageId, extra, (result) => {
|
||||
message.extra = extra
|
||||
uni.$emit('onReceiptResponse', message)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user