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

merge

Browse Source
This commit is contained in:
唐明明
2022-02-23 16:50:26 +08:00
parent 00836ac209 c840e9ee6b
commit 29757fadeb
30 changed files with 777 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
App.vue
View File

@@ -7,12 +7,12 @@
export default {
onLaunch: function() {
im.initIm('lmxuhwaglu76d')
// return
return
//#ifdef APP-PLUS
// 获取系统版本号
getVersions({
platform: plus.os.name,
version: plus.runtime.versionCode
version: plus.runtime.version
}).then(res => {
if (res.update) {
uni.showModal({

4
manifest.json
View File

@@ -2,8 +2,8 @@
"name" : "ZH-HEALTH",
"appid" : "__UNI__C29473D",
"description" : "ZH-HEALTH，您手上的健康管理专家",
"versionName" : "1.0.2",
"versionCode" : 112,
"versionName" : "1.0.15",
"versionCode" : 113,
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {

4
pages/im/components/friendApplyCell.vue
View File

@@ -70,7 +70,9 @@
clearMessages() {
RongIMLib.deleteMessages(RongIMLib.ConversationType.SYSTEM, this.message.sourceUserId)
this.$emit('success')
uni.$emit('onContactNotification')
uni.$emit('onNewContactConversation', message)
uni.$emit('onNewContactFriends', message)
uni.$emit('onNewContactPendings', message)
}
}
}

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

@@ -83,7 +83,6 @@
mounted() {
this.initGroupInfo()
getGroupUsers(this.targetId, this.count).then(res => {
console.log("res..",res)
this.users = res
res.map(item => {
this.$store.dispatch('updateContact', item)

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

@@ -6,8 +6,10 @@
</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='group'>[群]</text>
</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" :draft="item.draft"
@@ -80,10 +82,8 @@
.name {
font-size: $title-size + 2;
color: #454545;
display: flex;
align-items: center;
.qun {
.group {
color: $main-color;
font-size: $title-size-m - 4;
margin-left: 4px;

23
pages/im/components/sentVoice.vue
View File

@@ -1,14 +1,16 @@
<template>
<view class="send--voice">
<view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
<view class="voice" hover-class="chat-hover" @click="onShowLay">
<text class="button">按住说话</text>
</view>
<!-- 录音中提示 -->
<view class="modal" v-if="showRecordTip">
<view class="voice--lay" v-if="showRecordTip" @touchstart="startRecord" @touchend="stopRecord">
<view class="modal">
<image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="text">录音中 {{recordTime}} s</text>
</view>
</view>
</view>
</template>
<script>
@@ -44,6 +46,14 @@
this.recorderManager = uni.getRecorderManager()
},
methods: {
onShowLay(){
// this.showRecordTip = true
uni.vibrateShort({
complete: com => {
console.log(com)
}
})
},
// 检查安卓录制权限
async getAndroidPermission() {
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
@@ -116,6 +126,15 @@
}
}
.voice--lay{
position: absolute;
left: 0;
bottom: 0;
background: rgba($color: #000000, $alpha: .2);
height: 100vh;
width: 100vw;
}
.modal {
display: flex;
background: rgba(0, 0, 0, .6);

81
pages/im/components/show/messageState.vue Normal file
View 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>

36
pages/im/components/show/showCall.vue
View File

@@ -1,10 +1,9 @@
<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>
@@ -16,24 +15,33 @@
export default {
name: 'showText',
props: {
msg: {
message: {
type: Object,
default: () => {
return {}
}
},
name: {
type: String,
default: ''
},
guest: {
isGroup: {
type: Boolean,
default: true
default: false
}
},
mounted() {
},
computed: {
message() {
return JSON.parse(this.msg.message)
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) {

62
pages/im/components/show/showImage.vue
View File

@@ -1,14 +1,19 @@
<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="msg--image" :class="isRemote ? 'left': 'right'">
<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',
@@ -24,6 +29,9 @@
default: false
}
},
components: {
messageState
},
computed: {
isRemote() {
return this.message.messageDirection == 2
@@ -38,43 +46,27 @@
}
},
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
showImage(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);
previewImage() {
if (this.content.local && this.content.local.indexOf('///data/user/') < 0) {
this.showImage(this.content.local)
} else {
RongIMLib.downloadMediaMessage(this.message.messageId, {
success: (path) => {
this.content.local = path
this.showImage(path)
},
error: (errorCode, messageId) => {
console.log('errorCode', errorCode);
uni.showToast({
icon: 'none',
title: errorCode
})
}
})
}
@@ -84,12 +76,16 @@
</script>
<style scoped lang="scss">
.msg--image {
display: flex;
align-items: flex-end;
.name {
font-size: 24rpx;
color: $text-gray-m;
}
.msg--image {
.image {
.img {
width: 180rpx;
}
@@ -105,6 +101,6 @@
border-radius: 10rpx 0 10rpx 10rpx;
}
}
}
}
</style>

69
pages/im/components/show/showText.vue
View File

@@ -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;

61
pages/im/components/show/showVoice.vue
View File

@@ -1,22 +1,30 @@
<template>
<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>
<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>
</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,
@@ -29,6 +37,9 @@
default: false
}
},
components: {
messageState
},
data() {
return {
onPlay: false,
@@ -64,11 +75,6 @@
}
})
},
created() {
console.log(this.message.messageId)
},
methods: {
// 播放语音消息
startPlay() {
@@ -77,8 +83,9 @@
this.stopPlay()
return
}
this.onPlay = true
// 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
if (this.message.content.local) {
if (this.message.content.local && this.message.content.local.indexOf('///data/user/') < 0) {
this.playVoice(this.message.content.local)
} else {
RongIMLib.downloadMediaMessage(this.message.messageId, {
@@ -104,11 +111,11 @@
this.innerAC.autoplay = false
this.msgId = this.message.messageId
this.innerAC.onCanplay(res => {
console.log('onCanplay')
this.innerAC.play()
})
this.innerAC.onPlay(res => {
this.onPlay = true
console.log('onPlay')
uni.$emit('onVoiceMessagePlay', this.message.messageId)
})
this.innerAC.onEnded(res => {
@@ -129,7 +136,6 @@
})
},
stopPlay() {
// 停止播放语音消息
if (this.innerAC) {
this.innerAC.stop()
}
@@ -143,9 +149,11 @@
0% {
opacity: 1;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
@@ -157,12 +165,34 @@
</style>
<style scoped lang="scss">
.msg--voice {
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;
}
.msg--voice {
.msg-voice {
display: flex;
align-items: center;
@@ -214,4 +244,5 @@
}
}
}
}
</style>

37
pages/im/components/showMessageCell.vue
View File

@@ -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
})
}
}
)
}
}
}

58
pages/im/friends/index.vue
View File

@@ -2,40 +2,33 @@
<view>
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<view class="friend-flex" @click="toPending">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')" />
<u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
<view class="info">新的朋友</view>
</view>
<view class="friend-flex" @click="toGroup">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')" />
<view class="info">我的群聊</view>
</view>
<block v-if="friends.length > 0">
<u-index-item v-for="(item, fkey) in friends" :key="fkey">
<u-index-anchor :text="indexs[fkey]" bgColor="#f9f9f9" height="20" size="12" color="#666"
class="anchor" />
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
@click="toFriend(friendItem.targetId)">
<u-avatar class="avatar-img" size="40" shape="square"
:src="contact(friendItem.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ contact(friendItem.targetId).name }}</view>
<!-- <view class="address">地址:{{ friendItem.address }}</view> -->
</view>
<u-index-anchor :text="indexs[fkey]" bgColor="#f9f9f9" height="20" size="12" color="#666" class="anchor" />
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex" @click="toFriend(friendItem.targetId)">
<u-avatar class="avatar-img" size="40" shape="square" :src="contact(friendItem.targetId).portraitUrl" />
<view class="info"> <view class="name">{{ contact(friendItem.targetId).name }}</view> </view>
</view>
</u-index-item>
</block>
<block v-else>
<u-empty class="pages-null" mode="data" text="暂无好友" />
</block>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx" :src=" require('@/static/imgs/no-friend.png')" :lazy-load="true" />
<span>暂无好友列表~</span>
</view>
</u-index-list>
</view>
</template>
<script>
import {
getFriendsLetter
} from '@/apis/interfaces/im';
import {getFriendsLetter} from '@/apis/interfaces/im';
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
@@ -54,14 +47,18 @@
}
}
},
onLoad() {
onShow() {
this.getFriendList()
this.checkNewFriendPending()
uni.$on('onContactNotification', this.checkNewFriendPending)
},
onUnload() {
uni.$off("onContactNotification")
},
methods: {
getFriendList() {
getFriendsLetter().then(res => {
console.log(res)
this.indexs = res.indexList
this.friends = res.itemArr
})
@@ -86,18 +83,9 @@
},
// 新朋友
toPending() {
// if (this.pendingCount > 0) {
uni.navigateTo({
url: '/pages/im/friends/pending'
});
// } else {
// uni.showToast({
// title: ` 暂无好友申请 ~ `,
// icon: "none",
// mask: true,
// duration: 3000
// })
// }
}
},
onNavigationBarButtonTap(e) {
@@ -172,4 +160,18 @@
line-height: 24px;
background-color: #fff;
}
.no-lists {
padding-top: $padding * 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
span {
padding-top: $padding;
}
}
</style>

10
pages/im/friends/info.vue
View File

@@ -113,7 +113,6 @@
onLoad(e) {
this.targetId = e.targetId
getFriendInfo(e.targetId).then(res => {
console.log(res, "获取朋友的信息")
this.userInfo = res
// 获取到用户信息之后，去检查一下要不要更新
this.$store.dispatch('updateContact', res)
@@ -148,7 +147,7 @@
})
},
toPrivate() {
uni.redirectTo({
uni.navigateTo({
url: '/pages/im/private/chat?targetId=' + this.targetId
});
},
@@ -209,7 +208,7 @@
})
return
}
pedingFriend(this.targetId, 'message').then(res => {
pedingFriend(this.targetId, '').then(res => {
uni.showToast({
title: ` 申请成功,等待审核 `,
icon: 'none',
@@ -228,8 +227,9 @@
})
},
singleCall(e) {
uni.redirectTo({
url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type + '&isCall=true'
uni.navigateTo({
url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type +
'&isCall=true'
})
}
}

25
pages/im/friends/pending.vue
View File

@@ -6,9 +6,16 @@
:disabled="true" :show-action="false" />
</view>
</u-sticky>
<block v-if="pendings.length > 0">
<view v-for="(item, index) in pendings" :key="index">
<apply-cell :message="item.latestMessage" @success="getPendingList" />
</view>
</block>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
:src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
<span> 暂无好友申请 ~ </span>
</view>
</view>
</template>
@@ -22,16 +29,26 @@
},
data() {
return {
pendings: []
pendings: [],
bg: '#fff'
}
},
onLoad() {
onShow() {
this.getPendingList()
uni.$on('onContactNotification', this.getPendingList)
uni.$on('onNewContactPendings', this.getPendingList)
},
onUnload() {
uni.$off('onNewContactPendings')
},
methods: {
getPendingList() {
im.getPendingList((pendings) => {
console.log(pendings,'res......')
if (pendings.length > 0) {
this.bg = '#f9f9f9'
} else {
this.bg = '#fff'
}
this.pendings = pendings
})
}
@@ -46,7 +63,7 @@
}
.no-lists {
padding-top: $padding * 3;
padding-top: $padding * 5;
display: flex;
flex-direction: column;
align-items: center;

4
pages/im/group/announceCreate.vue
View File

@@ -16,8 +16,12 @@
createGroupAnnouncement,
getGroupAnnouncement
} from '@/apis/interfaces/im.js'
import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
export default {
mixins: [
onGroupDismiss
],
data() {
return {
targetId: '',

4
pages/im/group/announcement.vue
View File

@@ -35,8 +35,12 @@
deleteGroupAnnouncement,
topGroupAnnouncement
} from '@/apis/interfaces/im.js'
import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
export default {
mixins: [
onGroupDismiss
],
data() {
return {
targetId: '',

4
pages/im/group/apply.vue
View File

@@ -20,8 +20,12 @@
joinGroupPre,
joinGroup
} from '@/apis/interfaces/im.js'
import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
export default {
mixins: [
onGroupDismiss
],
data() {
return {
targetId: '',

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

@@ -21,8 +21,12 @@
import sentMessageBar from '../components/sentMessageBar'
import showMessageCell from '../components/showMessageCell'
import utils from '@/utils/index.js'
import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
export default {
mixins: [
onGroupDismiss
],
components: {
sentMessageBar,
showMessageCell
@@ -59,11 +63,9 @@
})
// 获取历史消息列表
this.getMessageList()
// 监听收到本群的消息，追加消息
uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) {
// 监听新消息
uni.$on('onReceiveMessage_' + this.targetId, (message) => {
this.getNewMessage()
}
})
uni.$on('onReceiptRequest', (msg) => {
if (msg.targetId == this.targetId) {
@@ -74,8 +76,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)
@@ -92,6 +103,7 @@
})
},
onUnload() {
uni.$off('onReceiveMessage_' + this.targetId)
uni.$off('onRecallMessage')
uni.$off('onReceiptRequest')
uni.$off('onReceiptResponse')
@@ -127,9 +139,17 @@
true,
(messages) => {
console.log('获取消息列表', messages);
RongIMLib.sendReadReceiptResponse(3, this.targetId, messages, (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()
})
@@ -147,7 +167,7 @@
},
onHide() {
// console.log(JSON.stringify(this.$refs))
this.$refs.voice.stopPlay()
// this.$refs.voice.stopPlay()
}
}
</script>

43
pages/im/group/index.vue
View File

@@ -1,13 +1,20 @@
<template>
<view class="group">
<view class="group" :style="`background-color:${bg};`">
<block v-if="groups.length > 0">
<view class="title"> 群聊 </view>
<view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
<u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ item.name }}</view>
<view class="name">{{item.name}} <span class="total">共10人</span></view>
</view>
</view>
<view class="group-count"> {{groups.length}}个群聊 </view>
</block>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
:src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
<span>空空如也~</span>
</view>
<u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
@confirm="onCreateGroup">
<view class="slot-content">
@@ -28,7 +35,8 @@
return {
groups: [],
createModal: false,
groupName: ''
groupName: '',
bg: '#fff'
}
},
computed: {
@@ -41,13 +49,18 @@
onNavigationBarButtonTap() {
this.createModal = true
},
onLoad() {
onShow() {
this.initData()
uni.$on('onGroupDismiss', this.initData)
},
methods: {
initData() {
getMyGroups().then((res) => {
if (res.length > 0) {
this.bg = '#f9f9f9'
} else {
this.bg = '#fff'
}
this.groups = res
res.map(item => {
this.$store.dispatch('updateContact', item)
@@ -88,11 +101,13 @@
.group {
min-height: 100vh;
background-color: $window-color;
.title {
font-size: $title-size-m;
color: $text-gray-m;
padding: 10rpx $padding;
}
.group-count {
text-align: center;
font-size: $title-size;
@@ -123,6 +138,11 @@
font-size: $title-size + 1;
color: #454545 !important;
}
.total{
color: $text-gray-m;
font-size: $title-size-m - 5;
padding-left: 10rpx;
}
.address {
color: $text-gray-m;
@@ -130,4 +150,19 @@
}
}
}
.no-lists {
padding-top: $padding * 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
span {
padding-top: $padding;
}
}
</style>

25
pages/im/group/info.vue
View File

@@ -9,8 +9,7 @@
<view slot="label" class="announcement-label "> {{announcement}} </view>
</u-cell>
<u-cell :border="false" class="u-border-bottom" isLink title="二维码" @click="showGroupQrCode" />
<u-cell :border="false" class="u-border-bottom" v-if="group.can_makesure" isLink title="群聊邀请确认"
@click="showGroupsSure" />
<u-cell :border="false" class="u-border-bottom" v-if="group.can_makesure" isLink title="群聊邀请确认" @click="showGroupsSure" />
<u-cell :border="false" class="u-border-bottom" title="聊天置顶">
<u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop" />
</u-cell>
@@ -25,8 +24,7 @@
<u-cell :border="false" class="u-border-bottom" isLink title="修改群头像" @click="onGroupAvatar">
<u-avatar slot="value" size="25" shape="square" :src="group.cover" />
</u-cell>
<u-cell :border="false" class="u-border-bottom" isLink v-if="group.is_owner" title="准入方式" :value="joinType"
@click="onChangeJoinType" />
<u-cell :border="false" class="u-border-bottom" isLink v-if="group.is_owner" title="准入方式" :value="joinType" @click="onChangeJoinType" />
</u-cell-group>
<view class="cells actions" v-if="loaded">
@@ -35,21 +33,15 @@
<view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view>
</view>
<u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal"
@confirm="onChangeGroupName">
<view class="slot-content">
<u--input placeholder="群名称" border="surround" focus v-model="groupName" />
</view>
<u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal" @confirm="onChangeGroupName">
<view class="slot-content"> <u--input placeholder="群名称" border="surround" focus v-model="groupName" maxlength="14" /> </view>
</u-modal>
<u-modal :show="qrCodeShow" :title="group.name" @confirm="qrCodeShow = false">
<view class="slot-content">
<uqrcode class="info-code-src" :size="198" :text="qrContent" />
</view>
<view class="slot-content"> <uqrcode class="info-code-src" :size="198" :text="qrContent" /> </view>
</u-modal>
<u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions"
@close="showActions=false" />
<u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions" @close="showActions=false" />
</view>
</template>
@@ -65,11 +57,15 @@
} from '@/apis/interfaces/uploading'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import groupUserList from '../components/groupUserList'
import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
export default {
components: {
groupUserList
},
mixins: [
onGroupDismiss
],
data() {
return {
targetId: '',
@@ -133,7 +129,6 @@
return item.key == res.join_type
})[0].name
}).catch(err => {
console.log('getGroupInfo ERR', err);
uni.showToast({
icon: 'none',
title: '群不存在'

10
pages/im/group/invite.vue
View File

@@ -8,8 +8,9 @@
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<u-checkbox-group v-if="friends.length > 0" v-model="checkboxValue" placement="column">
<u-index-item v-for="(item, fkey) in friends" :key="fkey">
<u-index-anchor :text="indexs[fkey]" v-if="indexs[fkey]" bgColor="#f9f9f9f" height="20" size="12"
color="#666" style="border:none !important;padding: 10rpx 30rpx;background-color: #f9f9f9 !important;" />
<u-index-anchor :text="indexs[fkey]" v-if="indexs[fkey]" bgColor="#f9f9f9f" height="20"
size="12" color="#666"
style="border:none !important;padding: 10rpx 30rpx;background-color: #f9f9f9 !important;" />
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
@click="addContact(friendItem.targetId)">
<u-checkbox :name="friendItem.targetId" shape="circle" activeColor="#34ce98"
@@ -44,10 +45,13 @@
getGroupUsers
} from '@/apis/interfaces/im';
import utils from '@/utils/index.js'
import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default {
mixins: [
onGroupDismiss
],
data() {
return {
searchTxt: '',

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

@@ -34,9 +34,12 @@
} from "@/apis/interfaces/im.js"
import im from '@/utils/im/message.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
export default {
mixins: [
onGroupDismiss
],
data() {
return {
targetId: '',
@@ -153,6 +156,7 @@
}
}
.no-lists {
padding-top: $padding * 5;
display: flex;

5
pages/im/group/users.vue
View File

@@ -4,7 +4,12 @@
<script>
import groupUserList from '../components/groupUserList'
import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
export default {
mixins: [
onGroupDismiss
],
components: {
groupUserList
},

16
pages/im/index.vue
View File

@@ -57,24 +57,28 @@
// 好友申请数量
this.checkNewFriendPending()
// 监听新的好友申请
uni.$on('onContactNotification', () => {
this.checkNewFriendPending()
})
uni.$on('onNewContactConversation', this.checkNewFriendPending)
},
onShow() {
if (this.$store.state.token !== '') {
this.getConversationList()
}
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
})
// 监听新消息
uni.$on('onReceiveMessage', (msg) => {
this.getConversationList()
})
// 监听网络状态变化
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
if (status == 0) {
this.getConversationList()
}
})
},
onHide() {
// 页面隐藏的时候，不监听了，性能可能会好一点
uni.$off('onReceiveMessage')
uni.$off('onConnectionStatusChange')
},
methods: {
checkNewFriendPending() {

2
pages/im/private/call.nvue
View File

@@ -150,7 +150,7 @@
} else {
IMLib.insertIncomingMessage(1, targetId, targetId, sentStatus, messageContent, sentTime)
}
uni.$emit('onReceiveMessage', {
uni.$emit('onReceiveMessage_' + this.targetId, {
targetId: this.targetId
})
},

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

@@ -60,6 +60,10 @@
})
// 获取消息列表
this.getMessageList()
// 监听新消息
uni.$on('onReceiveMessage_' + this.targetId, (message) => {
this.getNewMessage()
})
// 监听消息已读状态
uni.$on('onReadReceiptReceived', (data) => {
if (data.targetId == this.targetId) {
@@ -72,14 +76,21 @@
})
}
})
// 监听收到新消息，判断是否是当前会话，更新会话内容
uni.$on('onReceiveMessage', (msg) => {
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() {
uni.$off('onReceiveMessage_' + this.targetId)
uni.$off('onRecallMessage')
uni.$off('onReadReceiptReceived')
},
methods: {

BIN
static/.DS_Store vendored
View File

Binary file not shown.

91
utils/im/listeners.js
View File

@@ -20,35 +20,14 @@ const onReceiveMessage = (message) => {
}
})
im.setNotifyBadge()
// 发布全局事件，有新消息，刷新会话列表
uni.$emit('onReceiveMessage', message)
// 这个是为了更新消息列表页的
uni.$emit('onReceiveMessage_' + message.targetId, message)
}
// 允许通知的消息类型，触发更新消息列表操作,提示音
const notifyMsgTypes = [
IMLib.ObjectName.Text,
IMLib.ObjectName.File,
IMLib.ObjectName.Image,
IMLib.ObjectName.GIF,
IMLib.ObjectName.Location,
IMLib.ObjectName.Voice,
IMLib.ObjectName.HQVoice,
IMLib.ObjectName.Sight,
IMLib.ObjectName.Text,
IMLib.ObjectName.Text,
IMLib.ObjectName.Text
]
const imLibListeners = () => {
// 添加连接状态监听函数
IMLib.addConnectionStatusListener((res) => {
console.error('连接状态监听', res.data.status)
uni.$emit('onConnectionStatusChange', res.data.status)
})
// 添加消息监听函数
IMLib.addReceiveMessageListener((res) => {
const message = res.data.message
console.error('[收到消息]', message)
if (utils.inArray(message.objectName, notifyMsgTypes)) {
// 检测联系人信息，不存在的时候，从服务端获取
const checkContactExists = (message) => {
if (!store.getters.contactIsExist(message.targetId)) {
getUserInfo(message.targetId).then(res => {
store.dispatch('initContact', res)
@@ -63,16 +42,43 @@ const imLibListeners = () => {
console.error('getUserInfo ERR', err)
})
}
}
// 允许通知的消息类型，触发更新消息列表操作,提示音
const notifyMsgTypes = [
IMLib.ObjectName.Text,
IMLib.ObjectName.File,
IMLib.ObjectName.Image,
IMLib.ObjectName.GIF,
IMLib.ObjectName.Location,
IMLib.ObjectName.Voice,
IMLib.ObjectName.HQVoice,
IMLib.ObjectName.Sight
]
const imLibListeners = () => {
// 添加连接状态监听函数
IMLib.addConnectionStatusListener((res) => {
console.error('连接状态监听', res.data.status)
uni.$emit('onConnectionStatusChange', res.data.status)
})
// 添加消息监听函数
IMLib.addReceiveMessageListener((res) => {
const message = res.data.message
console.error('[收到消息]', message)
checkContactExists(message)
if (utils.inArray(message.objectName, notifyMsgTypes)) {
onReceiveMessage(message)
} else if (message.objectName === IMLib.ObjectName.ProfileNotification) {
// 更新会话信息
// 更新联系人信息
store.dispatch('updateContact', JSON.parse(message.content.data))
// 调用完更新之后，删除这条消息
IMLib.deleteMessagesByIds([message.messageId])
} else if (message.objectName === IMLib.ObjectName.ContactNotification) {
console.error('触发一个新好友的通知事件', message);
// 触发一个新好友的通知事件
uni.$emit('onContactNotification', message)
// 触发一个新好友的通知事件，【会话列表，通讯录，新朋友】页面
uni.$emit('onNewContactConversation', message)
uni.$emit('onNewContactFriends', message)
uni.$emit('onNewContactPendings', message)
} else if (message.objectName === IMLib.ObjectName.GroupNotification) {
// 解散群
if (message.content.operation === 'Dismiss') {
@@ -80,8 +86,11 @@ const imLibListeners = () => {
false)
// 解散了就删了吧
IMLib.removeConversation(message.conversationType, message.targetId)
uni.$emit('onGroupDismiss', message.targetId)
// 发布群解散的消息
uni.$emit('onGroupDismiss')
uni.$emit('onGroupDismiss_' + message.targetId)
}
// 触发刷新会话列表
uni.$emit('onReceiveMessage', message)
}
})
@@ -103,12 +112,26 @@ const imLibListeners = () => {
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)
})
})
})
}

16
utils/im/onGroupDismiss.js Normal file
View File

@@ -0,0 +1,16 @@
// 监听群解散的消息，直接跳转到会话列表页面
const onGroupDismiss = {
onLoad(e) {
uni.$once('onGroupDismiss_' + e.targetId, () => {
uni.showToast({
icon: 'none',
title: '当前群已解散'
})
uni.switchTab({
url: '/pages/im/index'
})
})
}
}
export default onGroupDismiss