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

...

Browse Source
This commit is contained in:
Z
2022-02-22 15:28:53 +08:00
parent b92fc0fc7e 66092967cb
commit d1c1c6d5ba
12 changed files with 474 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -7,8 +7,7 @@
"moment": "^2.29.1", "moment": "^2.29.1",
"uni-read-pages": "^1.0.5", "uni-read-pages": "^1.0.5",
"uni-simple-router": "^2.0.7", "uni-simple-router": "^2.0.7",
"uview-ui": "^2.0.19", "uview-ui": "^2.0.27"
"vuex": "^3.6.2"
}, },
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"

1
pages/im/components/groupUserList.vue
View File

@@ -65,6 +65,7 @@
avatarSize: 45, avatarSize: 45,
labelSize: 14, labelSize: 14,
iconSize: 14 iconSize: 14
} }
}, },
computed: { computed: {

45
pages/im/components/sentText.vue
View File

@@ -1,8 +1,7 @@
<template> <template>
<view class="sent--text"> <view class="sent--text">
<input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState" v-model="inputTxt" confirm-type="send" <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState"
@confirm="sent" cursor-spacing="10" /> v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
<!-- <button class="button" size="mini" :disabled="disabled" @click="demo">{{focusState ? '失焦': '聚焦'}}</button> -->
</view> </view>
</template> </template>
@@ -19,10 +18,6 @@
targetId: { targetId: {
type: String, type: String,
default: '' default: ''
},
inputTxt: {
type: String,
default: ''
} }
}, },
computed: { computed: {
@@ -33,7 +28,7 @@
return this.$store.getters.sender return this.$store.getters.sender
} }
}, },
created() { mounted() {
RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({ RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({
draft draft
}) => { }) => {
@@ -41,35 +36,29 @@
}) })
}, },
beforeDestroy() { beforeDestroy() {
RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt, (res) => { // 保存草稿
console.log('销毁组件之前，保存草稿信息，但是没有执行', res); RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt)
}) },
}, data() {
data() { return {
return {
focusState: false, focusState: false,
} inputTxt: ''
}
}, },
methods: { methods: {
// 发送文本消息
sent() { sent() {
if (!this.disabled) { if (!this.disabled) {
RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId) im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => { RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
this.$emit('success') this.$emit('success')
this.inputTxt = '' this.inputTxt = ''
}) })
} }
},
demo(){
console.log(this.focusState)
this.focusState = !this.focusState
}, },
focus() { focus() {
this.$emit('focus') this.$emit('focus')
}, },
blur() { blur() {
uni.hideKeyboard() uni.hideKeyboard()
this.$emit('blur') this.$emit('blur')
} }

164
pages/im/components/showImage.vue
View File

@@ -1,74 +1,110 @@
<template> <template>
<view class=""> <view class="">
<text class="name" v-if="!guest && name">{{ name }}</text> <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view class="msg--image" :class="guest ? 'right': 'left'"> <view class="msg--image" :class="isRemote ? 'left': 'right'">
<image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image> <image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
name: 'showImage',
props: { export default {
msg: { name: 'showImage',
type: Object, props: {
default: () => { message: {
return { type: Object,
local: '', default: () => {
remote: '', return {}
objectName: '', }
thumbnail: '',
isFull: false
}
}
},
guest: {
type: Boolean,
default: true
}, },
name: { isGroup: {
type: String, type: Boolean,
default: '' default: false
} }
}, },
methods: { computed: {
previewImage() { isRemote() {
uni.previewImage({ return this.message.messageDirection == 2
urls: [ },
this.msg.remote content() {
], return this.message.content
current: 1 },
}) contact() {
} return function(targetId) {
} return this.$store.getters.contactInfo(targetId)
} }
</script> }
},
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"> <style scoped lang="scss">
.name { .name {
font-size: 24rpx; font-size: 24rpx;
line-height: 34rpx; color: $text-gray-m;
color: $text-gray-m; }
padding-bottom: 10rpx;
.msg--image {
.img {
width: 180rpx;
}
&.left {
.img {
border-radius: 0 10rpx 10rpx 10rpx;
}
}
&.right {
.img {
border-radius: 10rpx 0 10rpx 10rpx;
}
}
} }
.msg--image {
// padding: 20rpx;
&.left {
border-radius: 0 20rpx 20rpx 20rpx;
// background: white;
}
&.right {
border-radius: 20rpx 0 20rpx 20rpx;
// background: #34CE98;
}
.img {
width: 150rpx;
border-radius: 10rpx;
}
}
</style> </style>

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

@@ -1,29 +1,65 @@
<template> <template>
<view class="msg--text"> <view class="msg--text">
<text class="name" v-if="!guest && name">{{ name }}</text> <view class="state" v-if="!isGroup && !isRemote">
<view> <!-- 已发送 -->
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text> <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>
<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> </view>
</view> </view>
</template> </template>
<script> <script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default { export default {
name: 'showText', name: 'showText',
props: { props: {
msg: { message: {
type: Object, type: Object,
default: () => { default: () => {
return {} return {}
} }
}, },
name: { isGroup: {
type: String,
default: ''
},
guest: {
type: Boolean, type: Boolean,
default: true default: false
}
},
computed: {
isRemote() {
return this.message.messageDirection == 2
},
content() {
return this.message.content.content
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
methods: {
// 撤回消息测试
backMessage() {
console.log('撤回消息');
const pushContent = '推送内容'
RongIMLib.recallMessage(this.message.messageId, pushContent,
({
code,
message
}) => {
console.error(code);
// 撤回消息成功
if (code === 0) {
console.error(message);
}
}
)
} }
} }
} }
@@ -31,23 +67,46 @@
<style scoped lang="scss"> <style scoped lang="scss">
.msg--text { .msg--text {
.name { display: flex;
font-size: 26rpx; align-items: flex-end;
color: $text-gray-m;
display: inline-block; .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;
}
} }
.im--text {
max-width: 508rpx; .name {
font-size: 24rpx;
color: $text-gray-m;
}
.text {
box-sizing: border-box;
max-width: 502rpx;
padding: 20rpx; padding: 20rpx;
line-height: 46rpx; line-height: 46rpx;
font-size: 32rpx; font-size: 32rpx;
color: $text-color; color: $text-color;
display: inline-block; word-break: break-all;
word-break: break-all;
&.left { &.left {
border-radius: 0 20rpx 20rpx 20rpx; border-radius: 0 20rpx 20rpx 20rpx;
background: white; background: white;
} }
&.right { &.right {
border-radius: 20rpx 0 20rpx 20rpx; border-radius: 20rpx 0 20rpx 20rpx;
background: $main-color; background: $main-color;

206
pages/im/components/showVoice.vue
View File

@@ -1,62 +1,129 @@
<template> <template>
<view class=""> <view class="">
<text class="name" v-if="!guest && name">{{ name }}</text> <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg"> <view class="msg--voice">
<image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image> <view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}" @click="startPlay">
<text class="duration">{{msg.duration}}"</text> <image v-if="isRemote" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image> <image v-else class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
<text class="duration">{{ duration }}"</text>
</view>
<u-badge isDot :show="message.content.local =='' && isRemote" />
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default { export default {
name: 'showVoice', name: 'showVoice',
props: { props: {
msg: { message: {
type: Object, type: Object,
default: () => { default: () => {
return { return {}
local: '',
remote: '',
objectName: '',
duration: 0
}
} }
}, },
name: { isGroup: {
type: String,
default: ''
},
guest: {
type: Boolean, type: Boolean,
default: true default: false
} }
}, },
data() {
return {
onPlay: false,
innerAC: null,
}
},
computed: {
duration() {
return this.message.content.duration
},
isRemote() {
return this.message.messageDirection == 2
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
},
width() {
if (this.duration > 3) {
return (this.duration * 5) + 150
} else {
return 120
}
}
},
mounted() {
// 这样能临时解决，但是会一直监听
uni.$on('onVoiceMessagePlay', (messageId) => {
if (this.message.messageId != messageId) {
this.stopPlay()
}
})
},
methods: { methods: {
// 播放语音消息 // 播放语音消息
onPlayMsg() { startPlay() {
uni.downloadFile({ // 如果是正在播放的，停止当前播放
url: this.msg.remote, if (this.onPlay) {
success: (res) => { this.stopPlay()
if (res.statusCode === 200) { return
let innerAudioContext = uni.createInnerAudioContext() }
innerAudioContext.src = res.tempFilePath // 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
if (this.audioContextPaused) { if (this.message.content.local) {
innerAudioContext.play() this.playVoice(this.message.content.local)
this.audioContextPaused = false } else {
return RongIMLib.downloadMediaMessage(this.message.messageId, {
} success: (path) => {
innerAudioContext.stop() this.message.content.local = path
innerAudioContext.onStop(resStop => { this.playVoice(path)
this.audioContextPaused = true },
}) progress: (progress, messageId) => {},
innerAudioContext.onError(err => { cancel: (messageId) => {},
console.log(err); error: (errorCode, messageId) => {
}) uni.showToast({
icon: 'none',
title: '语音播放失败'
})
} }
} })
}
},
playVoice(path) {
console.log('准备播放', this.message.content);
this.innerAC = uni.createInnerAudioContext()
this.innerAC.src = path
this.innerAC.autoplay = false
this.innerAC.onCanplay(res => {
this.innerAC.play()
}) })
this.innerAC.onPlay(res => {
this.onPlay = true
uni.$emit('onVoiceMessagePlay', this.message.messageId)
})
this.innerAC.onEnded(res => {
this.innerAC.stop()
})
this.innerAC.onStop(() => {
this.onPlay = false
this.innerAC.destroy()
this.innerAC = null
uni.$emit('onVoiceMessageStop', this.message.messageId)
})
this.innerAC.onError(err => {
uni.showToast({
icon: 'none',
title: '语音播放失败'
})
})
},
stopPlay() {
// 停止播放语音消息
if (this.innerAC) {
this.innerAC.stop()
}
} }
} }
} }
@@ -65,41 +132,58 @@
<style scoped lang="scss"> <style scoped lang="scss">
.name { .name {
font-size: 24rpx; font-size: 24rpx;
line-height: 34rpx;
color: $text-gray-m; color: $text-gray-m;
} }
.msg--voice { .msg--voice {
flex-direction: row; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
height: 79rpx;
width: 170rpx;
padding: 0 20rpx;
box-sizing: border-box;
.icon { .u-badge {
width: 38rpx; margin-left: 20rpx;
height: 38rpx;
} }
&.left { .voice {
border-radius: 0 20rpx 20rpx 20rpx; display: flex;
background: white; flex-direction: row;
justify-content: space-between;
align-items: center;
height: 84rpx;
padding: 0 30rpx;
box-sizing: border-box;
.duration { .icon {
color: #333; width: 38rpx;
font-size: 30rpx; height: 38rpx;
} }
}
&.right { &.left {
border-radius: 20rpx 0 20rpx 20rpx; border-radius: 0 20rpx 20rpx 20rpx;
background: $main-color; background: white;
.duration { &.onPlay {
color: white; background-color: #EEEEEE;
font-size: 30rpx; }
.duration {
color: #333;
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;
}
} }
} }
} }

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

@@ -10,12 +10,9 @@
<u-avatar class="avatar" @click="toUser(item)" :size="avatarSize" shape="square" <u-avatar class="avatar" @click="toUser(item)" :size="avatarSize" shape="square"
:src="contact(item.senderUserId).portraitUrl" /> :src="contact(item.senderUserId).portraitUrl" />
<view class="msg"> <view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" isGroup />
:msg="item.content" :name="contact(item.senderUserId).name" /> <show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" isGroup />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" <show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" isGroup />
:msg="item.content" :name="contact(item.senderUserId).name" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="contact(item.senderUserId).name" />
</view> </view>
</view> </view>
</view> </view>
@@ -80,7 +77,6 @@
this.targetId = e.targetId this.targetId = e.targetId
// 获取群成员数量 // 获取群成员数量
getGroupBase(this.targetId).then(res => { getGroupBase(this.targetId).then(res => {
console.log(res);
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: res.name + `(${res.members})` title: res.name + `(${res.members})`
}) })
@@ -93,6 +89,11 @@
this.getNewMessage() this.getNewMessage()
} }
}) })
uni.$on('onReceiptRequested', (msg) => {
if (msg.targetId == this.targetId) {
console.log('群聊消息是否已读', msg);
}
})
// 清理聊天记录 // 清理聊天记录
uni.$once('cleanGroupMessage', this.getMessageList) uni.$once('cleanGroupMessage', this.getMessageList)
}, },
@@ -141,14 +142,32 @@
this.scrollBottom() this.scrollBottom()
}) })
}, },
// 发送已读回执
sendReadReceiptResponse(messages) {
const msgs = messages.map((item) => {
if (item.receivedStatus == 0) {
return {
conversationType: 3,
targetId: this.targetId,
messageId: item.messageId,
messageDirection: item.messageDirection,
objectName: item.objectName
}
}
}).filter(Boolean)
if (msgs.length) {
console.error('发送群聊已读回执', msgs);
RongIMLib.sendReadReceiptResponse(3, this.targetId, msgs, (res) => {
console.error('发送群聊已读回执成功', res);
})
}
},
// 滚动到底部 // 滚动到底部
scrollBottom(type) { scrollBottom(type) {
if (this.latestMessage) { if (this.latestMessage) {
// 清理当前会话，未读消息数量 // 清理当前会话，未读消息数量
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
.sentTime) .sentTime)
// // 发送消息已读状态给对方
// RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime)
// 更新badge提醒数量 // 更新badge提醒数量
im.setNotifyBadge() im.setNotifyBadge()
} }
@@ -178,7 +197,7 @@
justify-content: flex-end; justify-content: flex-end;
.cell { .cell {
padding: 10rpx 30rpx; padding: 10rpx 20rpx;
.time { .time {
text-align: center; text-align: center;
@@ -188,7 +207,7 @@
.cell-item { .cell-item {
display: flex; display: flex;
width: 690rpx; width: 710rpx;
justify-content: flex-start; justify-content: flex-start;
&.left { &.left {
@@ -206,20 +225,6 @@
.msg { .msg {
margin: 0 20rpx; margin: 0 20rpx;
.state {
padding-top: 10rpx;
.state-text {
font-size: $title-size-m - 2;
color: rgba($color: $main-color, $alpha: 0.3)
}
.state-text-active {
font-size: $title-size-m - 2;
color: #cecece;
}
}
} }
} }

41
pages/im/group/reviewed.vue
View File

@@ -3,19 +3,19 @@
<view class="reviewed"> <view class="reviewed">
<block v-if="pendings.length > 0"> <block v-if="pendings.length > 0">
<view class="reviewed-item" v-for="(item, index) in pendings" :key="index"> <view class="reviewed-item" v-for="(item, index) in pendings" :key="index">
<u-avatar class="avatar" <u-avatar class="avatar"
:src="JSON.parse(item.latestMessage.extra).portraitUrl || require('@/static/user/cover.png')" :src="JSON.parse(item.content.extra).portraitUrl || require('@/static/user/cover.png')"
shape="square" size="46" /> shape="square" size="46" />
<view style="flex:1;" v-if="item.latestMessage.operation == 'GroupPending'"> <view style="flex:1;" v-if="item.content.operation == 'GroupPending'">
<view class="nickname">{{ JSON.parse(item.latestMessage.extra).name }} 申请加入群聊</view> <view class="nickname">{{ JSON.parse(item.content.extra).name }} 申请加入群聊</view>
<view> 申请原因：{{ item.latestMessage.message }}</view> <view> 申请原因：{{ item.content.message }}</view>
</view> </view>
<view style="flex:1;" v-if="item.latestMessage.operation == 'GroupInvite'"> <view style="flex:1;" v-if="item.content.operation == 'GroupInvite'">
<view class="nickname"> <view class="nickname">
<text>{{ contact(item.latestMessage.sourceUserId )}}</text>想邀请<span>{{ JSON.parse(item.latestMessage.extra).name }}</span>加入群聊 <text>{{ contact(item.content.sourceUserId).name }}</text>想邀请<span>{{ JSON.parse(item.content.extra).name }}</span>加入群聊
</view> </view>
</view> </view>
<view class="sure" @click="sure(item.latestMessage.targetUserId,item.latestMessageId)"> 通过 </view> <view class="sure" @click="sure(item.content.targetUserId,item.messageId)"> 通过 </view>
</view> </view>
</block> </block>
@@ -81,11 +81,26 @@
}) })
}).catch(err => { }).catch(err => {
uni.showToast({ // uni.showToast({
title: err.message, // title: err.message,
icon: 'none', // icon: 'none',
mask: true, // mask: true,
duration: 2000 // duration: 2000
// })
RongIMLib.deleteMessagesByIds([latestMessageId], ({
code
}) => {
console.log('code', code)
if (code == 0) {
uni.showToast({
title:err.message,
icon: 'none',
mask: true,
duration: 500
})
this.getList()
uni.$emit('groupInvitedUser')
}
}) })
}) })
// 直接调用通过或拒绝的接口 // 直接调用通过或拒绝的接口

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

@@ -11,18 +11,10 @@
@click="showUser(item.senderUserId, item.messageDirection)" @click="showUser(item.senderUserId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" /> :src="contact(item.senderUserId).portraitUrl" />
<view class="msg"> <view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" />
:msg="item.content" /> <show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" <show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" />
:msg="item.content" /> <show-call v-if="item.objectName === 'RC:InfoNtf'" :message="item" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<show-call v-if="item.objectName === 'RC:InfoNtf'" :guest="item.messageDirection == 1"
:msg="item.content" />
<view class="state" v-if="item.messageDirection == 1">
<text
:class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -37,9 +29,9 @@
import showImage from '../components/showImage' import showImage from '../components/showImage'
import showText from '../components/showText' import showText from '../components/showText'
import showCall from '../components/showCall' import showCall from '../components/showCall'
import sentMessageBar from '../components/sentMessageBar' import sentMessageBar from '../components/sentMessageBar'
import utils from '@/utils/index.js' import utils from '@/utils/index.js'
export default { export default {
components: { components: {
sentMessageBar, sentMessageBar,
@@ -49,7 +41,7 @@
showCall showCall
}, },
data() { data() {
return { return {
avatarRpx: 84, avatarRpx: 84,
targetId: '', targetId: '',
messages: [], messages: [],
@@ -61,9 +53,9 @@
} }
} }
}, },
computed: { computed: {
avatarSize() { avatarSize() {
return utils.rpx2px(this.avatarRpx) return utils.rpx2px(this.avatarRpx)
}, },
latestMessage() { latestMessage() {
if (this.messages.length) { if (this.messages.length) {
@@ -101,7 +93,7 @@
} }
}) })
// 监听收到新消息，判断是否是当前会话，更新会话内容 // 监听收到新消息，判断是否是当前会话，更新会话内容
uni.$on('onReceiveMessage', (msg) => { uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) { if (msg.targetId == this.targetId) {
this.getNewMessage() this.getNewMessage()
} }
@@ -180,18 +172,18 @@
justify-content: flex-end; justify-content: flex-end;
.cell { .cell {
padding: 10rpx 30rpx; padding: 10rpx 20rpx;
.time { .time {
text-align: center; text-align: center;
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.cell-item { .cell-item {
display: flex; display: flex;
width: 690rpx; width: 710rpx;
justify-content: flex-start; justify-content: flex-start;
&.left { &.left {
@@ -208,20 +200,6 @@
.msg { .msg {
margin: 0 20rpx; margin: 0 20rpx;
.state {
padding-top: 10rpx;
.state-text {
font-size: $title-size-m - 2;
color: rgba($color: $main-color, $alpha: 0.3)
}
.state-text-active {
font-size: $title-size-m - 2;
color: #cecece;
}
}
} }
} }

37
utils/im/listeners.js
View File

@@ -41,7 +41,7 @@ const notifyMsgTypes = [
const imLibListeners = () => { const imLibListeners = () => {
// 添加连接状态监听函数 // 添加连接状态监听函数
IMLib.addConnectionStatusListener((res) => { IMLib.addConnectionStatusListener((res) => {
console.log('连接状态监听', res.data.status) console.error('连接状态监听', res.data.status)
uni.$emit('onConnectionStatusChange', res.data.status) uni.$emit('onConnectionStatusChange', res.data.status)
}) })
// 添加消息监听函数 // 添加消息监听函数
@@ -69,7 +69,7 @@ const imLibListeners = () => {
store.dispatch('updateContact', JSON.parse(message.content.data)) store.dispatch('updateContact', JSON.parse(message.content.data))
// 调用完更新之后，删除这条消息 // 调用完更新之后，删除这条消息
IMLib.deleteMessagesByIds([message.messageId]) IMLib.deleteMessagesByIds([message.messageId])
} else if (message.objectName === IMLib.ObjectName.ContactNotification) { } else if (message.objectName === IMLib.ObjectName.ContactNotification) {
console.error('触发一个新好友的通知事件', message); console.error('触发一个新好友的通知事件', message);
// 触发一个新好友的通知事件 // 触发一个新好友的通知事件
uni.$emit('onContactNotification', message) uni.$emit('onContactNotification', message)
@@ -85,13 +85,28 @@ const imLibListeners = () => {
uni.$emit('onReceiveMessage', message) uni.$emit('onReceiveMessage', message)
} }
}) })
// 监听私聊消息已读回执
// 监听消息回执
IMLib.addReadReceiptReceivedListener(({ IMLib.addReadReceiptReceivedListener(({
data data
}) => { }) => {
console.error("监听私聊消息已读回执: ", data);
uni.$emit('onReadReceiptReceived', data) uni.$emit('onReadReceiptReceived', data)
}) })
// 监听消息撤回操作
IMLib.addRecallMessageListener((res) => {
console.error("消息撤回: ", res);
})
// 监听需要群聊消息回执
IMLib.addReceiptRequestListener(({
data
}) => {
console.error('onReceiptRequested', data);
uni.$emit('onReceiptRequested', data)
})
// 群消息已读的回执
IMLib.addReceiptResponseListener((res) => {
console.error('addReceiptResponseListener', res);
})
} }
const callLibListeners = () => { const callLibListeners = () => {
@@ -100,7 +115,7 @@ const callLibListeners = () => {
CallLib.onCallReceived(({ CallLib.onCallReceived(({
data data
}) => { }) => {
console.log('onCallReceived'); console.error('onCallReceived');
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' + url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
data.mediaType data.mediaType
@@ -112,27 +127,27 @@ const callLibListeners = () => {
}) })
// 外呼 // 外呼
CallLib.onCallOutgoing((res) => { CallLib.onCallOutgoing((res) => {
console.log('onCallOutgoing', res); console.error('onCallOutgoing', res);
uni.$emit('onCallOutgoing') uni.$emit('onCallOutgoing')
}) })
// 远端响铃 // 远端响铃
CallLib.onRemoteUserRinging((res) => { CallLib.onRemoteUserRinging((res) => {
console.log('onRemoteUserRinging', res); console.error('onRemoteUserRinging', res);
uni.$emit('onRemoteUserRinging') uni.$emit('onRemoteUserRinging')
}) })
// 远端加入 // 远端加入
CallLib.onRemoteUserJoined((res) => { CallLib.onRemoteUserJoined((res) => {
console.log('远端接听'); console.error('远端接听');
uni.$emit('onRemoteUserJoined') uni.$emit('onRemoteUserJoined')
}) })
// 断开链接 // 断开链接
CallLib.onCallDisconnected((res) => { CallLib.onCallDisconnected((res) => {
console.log('断开链接', res) console.error('断开链接', res)
uni.$emit('onCallDisconnected') uni.$emit('onCallDisconnected')
}) })
// 远端挂断 // 远端挂断
CallLib.onRemoteUserLeft((res) => { CallLib.onRemoteUserLeft((res) => {
console.log('远端离开', res) console.error('远端离开', res)
uni.$emit('onRemoteUserLeft') uni.$emit('onRemoteUserLeft')
}) })
} }

27
utils/im/message.js
View File

@@ -16,8 +16,8 @@ const getMessageList = (conversationType, targetId, timeStamp, count, isForward,
'RC:SightMsg', 'RC:SightMsg',
'RC:ReferenceMsg', 'RC:ReferenceMsg',
'RC:CombineMsg', 'RC:CombineMsg',
'RC:GrpNtf', 'RC:GrpNtf',
'RC:InfoNtf' 'RC:InfoNtf'
] ]
RongIMLib.getHistoryMessagesByTimestamp( RongIMLib.getHistoryMessagesByTimestamp(
@@ -60,18 +60,16 @@ const getPendingList = (callback, total) => {
// 群组申请列表，邀请列表 // 群组申请列表，邀请列表
const getGroupPendinglist = (targetId, callback) => { const getGroupPendinglist = (targetId, callback) => {
let total = 1000 const conversationType = RongIMLib.ConversationType.SYSTEM
RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], total, 0, (res) => { const objectNames = ['RC:ContactNtf']
if (res.code === 0) {
const pendings = res.conversations.filter((item) => {
return item.targetId == targetId &&
item.objectName == RongIMLib.ObjectName.ContactNotification &&
item.latestMessage.operation === 'GroupPending'
})
callback(pendings) RongIMLib.getHistoryMessagesByTimestamp(conversationType, targetId, objectNames, 0, 1000, true,
({
messages
}) => {
callback(messages)
} }
}) )
} }
/** /**
@@ -97,6 +95,11 @@ const sentText = (conversationType, targetId, content, user, callback) => {
messageId messageId
}) => { }) => {
if (code === 0) { if (code === 0) {
if (conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId, (res) => {
console.log('发送回执请求', res);
})
}
callback(messageId) callback(messageId)
} else { } else {
console.log('发送失败', msg); console.log('发送失败', msg);

37
yarn.lock
View File

@@ -2,27 +2,22 @@
# yarn lockfile v1 # yarn lockfile v1
"moment@^2.29.1": moment@^2.29.1:
"integrity" "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" version "2.29.1"
"resolved" "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz" resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
"version" "2.29.1" integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
"uni-read-pages@^1.0.5": uni-read-pages@^1.0.5:
"integrity" "sha512-GkrrZ0LX0vn9R5k6RKEi0Ez3Q3e2vUpjXQ8Z6/K/d28KudI9ajqgt8WEjQFlG5EPm1K6uTArN8LlqmZTEixDUA==" version "1.0.5"
"resolved" "https://registry.npmjs.org/uni-read-pages/-/uni-read-pages-1.0.5.tgz" resolved "https://registry.npmjs.org/uni-read-pages/-/uni-read-pages-1.0.5.tgz"
"version" "1.0.5" integrity sha512-GkrrZ0LX0vn9R5k6RKEi0Ez3Q3e2vUpjXQ8Z6/K/d28KudI9ajqgt8WEjQFlG5EPm1K6uTArN8LlqmZTEixDUA==
"uni-simple-router@^2.0.7": uni-simple-router@^2.0.7:
"integrity" "sha512-8FKv5dw7Eoonm0gkO8udprrxzin0fNUI0+AvIphFkFRH5ZmP5ZWJ2pvnWzb2NiiqQSECTSU5VSB7HhvOSwD5eA==" version "2.0.7"
"resolved" "https://registry.npmjs.org/uni-simple-router/-/uni-simple-router-2.0.7.tgz" resolved "https://registry.npmjs.org/uni-simple-router/-/uni-simple-router-2.0.7.tgz"
"version" "2.0.7" integrity sha512-8FKv5dw7Eoonm0gkO8udprrxzin0fNUI0+AvIphFkFRH5ZmP5ZWJ2pvnWzb2NiiqQSECTSU5VSB7HhvOSwD5eA==
"uview-ui@^2.0.19": uview-ui@^2.0.27:
"integrity" "sha512-ddZiaP7R9wsUxMzAuhuXgh5OswgCm2lKuulTqjnRXFr0uUWsgL1iBifU3GbOwpwP0LtTHKJOo9rYv1LP0WXmzA==" version "2.0.27"
"resolved" "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.19.tgz" resolved "https://registry.yarnpkg.com/uview-ui/-/uview-ui-2.0.27.tgz#1a7dde9c6246e851d768f3efd44b5fb26774a2e1"
"version" "2.0.19" integrity sha512-fl35rlguNPfXnwNoVv0w4zS1blFFxxSPuGR1+9SbpFGC33aiTBaoFWs/4Fppj0foS/kDCqSWcJiymNmQjPBD4g==
"vuex@^3.6.2":
"integrity" "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
"resolved" "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz"
"version" "3.6.2"