群聊的基础页面

manifest.json

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

pages.json

@@ -432,8 +432,8 @@
             }
         },
         {
-            "path": "pages/im/group/index",
+            "path": "pages/im/group/chat",
-            "name": "imGroup",
+            "name": "imGroupChat",
             "style": {
                 "navigationBarTitleText": "我的群聊"
             }

pages/im/components/conversationGroup.vue

@@ -0,0 +1,208 @@
+<template>
+    <view>
+        <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
+            :data-item="item" @longpress="onLongPress" @click="toDetail(item)">
+            <view class="avatar">
+                <u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
+                <u-avatar text="群" shape="square" size="44" />
+            </view>
+            <view class="content u-border-bottom">
+                <view class="header">
+                    <view class="name">群组名称</view>
+                    <view class="time">{{ item.sentTime|timeCustomCN }}</view>
+                </view>
+                <message-preview class="preview" :msg="item.latestMessage" :user="item.latestMessage.userInfo" />
+            </view>
+        </view>
+
+        <view class="shade" @click="hidePop" v-show="showPop">
+            <view class="pop" :style="popStyle" :class="{'show':showPop}">
+                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
+                    {{item}}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import messagePreview from './messagePreview'
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import im from '@/utils/im/index.js'
+
+    export default {
+        props: {
+            conversations: {
+                type: Array,
+                default: function() {
+                    return []
+                }
+            }
+        },
+        components: {
+            messagePreview
+        },
+        data() {
+            return {
+                /* 窗口尺寸 */
+                winSize: {},
+                /* 显示操作弹窗 */
+                showPop: false,
+                /* 弹窗按钮列表 */
+                popButton: ['置顶聊天', '删除该聊天'],
+                /* 弹窗定位样式 */
+                popStyle: "",
+                pickedItem: {},
+            }
+        },
+        computed: {
+            friend() {
+                return function(targetId) {
+                    return this.$store.getters.userInfo(targetId)
+                }
+            }
+        },
+        methods: {
+            // 隐藏功能菜单
+            hidePop() {
+                this.showPop = false
+                this.pickedItem = {}
+                setTimeout(() => {
+                    this.showShade = false
+                }, 250)
+            },
+            // 点击会话功能菜单
+            pickerMenu(e) {
+                const index = Number(e.currentTarget.dataset.index)
+
+                if (index == 0) {
+                    RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
+                        .pickedItem.isTop)
+                } else {
+                    RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
+                    RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
+                }
+                this.$emit('refresh')
+                im.setNotifyBadge()
+                this.hidePop()
+            },
+            // 长按会话，展示功能菜单
+            onLongPress(e) {
+                let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
+
+                if (touches.clientY > (this.winSize.height / 2)) {
+                    style = `bottom:${this.winSize.height-touches.clientY}px;`
+                } else {
+                    style = `top:${touches.clientY}px;`
+                }
+                if (touches.clientX > (this.winSize.witdh / 2)) {
+                    style += `right:${this.winSize.witdh-touches.clientX}px`
+                } else {
+                    style += `left:${touches.clientX}px`
+                }
+
+                this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
+                this.popStyle = style
+                this.pickedItem = item
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.showPop = true;
+                    }, 10)
+                })
+            },
+            toDetail(item) {
+                uni.navigateTo({
+                    url: '/pages/im/group/chat?targetId=' + item.targetId
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .message {
+        background: white;
+        padding: 20rpx 0 0 20rpx;
+        position: relative;
+        display: flex;
+
+        &.is-top {
+            background: $window-color;
+            border-bottom: #e8e8e8;
+        }
+
+        .avatar {
+            position: relative;
+
+            .u-badge {
+                z-index: 998;
+            }
+        }
+
+        .content {
+            margin-left: 30rpx;
+            width: calc(100% - 46px);
+            box-sizing: border-box;
+            position: relative;
+
+            .header {
+                display: flex;
+                justify-content: space-between;
+
+                .name {
+                    font-size: $title-size + 2;
+                    color: #454545;
+                    color: #454545;
+                }
+
+                .time {
+                    font-size: $title-size-sm;
+                    color: $text-gray-m;
+                    position: absolute;
+                    right: 30rpx;
+                }
+            }
+        }
+    }
+
+    /* 遮罩 */
+    .shade {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+
+        .pop {
+            position: fixed;
+            z-index: 101;
+            width: 200rpx;
+            box-sizing: border-box;
+            font-size: 28rpx;
+            text-align: left;
+            color: #333;
+            background-color: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            line-height: 80rpx;
+            transition: transform 0.15s ease-in-out 0s;
+            user-select: none;
+            -webkit-touch-callout: none;
+            transform: scale(0, 0);
+
+            &.show {
+                transform: scale(1, 1);
+            }
+
+            &>view {
+                padding: 0 20rpx;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                user-select: none;
+                -webkit-touch-callout: none;
+
+                &:active {
+                    background-color: #f3f3f3;
+                }
+            }
+        }
+    }
+</style>

pages/im/components/conversationPrivate.vue

@@ -0,0 +1,216 @@
+<template>
+    <view>
+        <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
+            :data-item="item" @longpress="onLongPress" @click="toDetail(item)">
+            <view class="avatar" @click="toFriend(item.targetId)">
+                <u-badge max="99" shape="horn" absolute :offset="[-5, -8]"
+                    :value="item.unreadMessageCount" />
+                <u-avatar :src="friend(item.targetId).portraitUrl" shape="square" size="44" />
+            </view>
+            <view class="content u-border-bottom">
+                <view class="header">
+                    <view class="name">{{ friend(item.targetId).name }}</view>
+                    <view class="time">{{ item.sentTime|timeCustomCN }}</view>
+                </view>
+                <message-preview class="preview" :msg="item.latestMessage" />
+            </view>
+        </view>
+
+        <view class="shade" @click="hidePop" v-show="showPop">
+            <view class="pop" :style="popStyle" :class="{'show':showPop}">
+                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
+                    {{item}}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import messagePreview from './messagePreview'
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import im from '@/utils/im/index.js'
+    
+    export default {
+        props: {
+            conversations: {
+                type: Array,
+                default: function() {
+                    return []
+                }
+            }
+        },
+        data() {
+            return {
+                /* 窗口尺寸 */
+                winSize: {},
+                /* 显示操作弹窗 */
+                showPop: false,
+                /* 弹窗按钮列表 */
+                popButton: ['置顶聊天', '删除该聊天'],
+                /* 弹窗定位样式 */
+                popStyle: "",
+                pickedItem: {},
+            }
+        },
+        components: {
+            messagePreview
+        },
+        computed: {
+            friend() {
+                return function(targetId) {
+                    return this.$store.getters.userInfo(targetId)
+                }
+            }
+        },
+        methods: {
+            // 隐藏功能菜单
+            hidePop() {
+                this.showPop = false
+                this.pickedItem = {}
+                setTimeout(() => {
+                    this.showShade = false
+                }, 250)
+            },
+            // 点击会话功能菜单
+            pickerMenu(e) {
+                const index = Number(e.currentTarget.dataset.index)
+
+                if (index == 0) {
+                    RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
+                        .pickedItem.isTop)
+                } else {
+                    RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
+                    RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
+                }
+                this.$emit('refresh')
+                im.setNotifyBadge()
+                this.hidePop()
+            },
+            // 长按会话，展示功能菜单
+            onLongPress(e) {
+                let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
+
+                if (touches.clientY > (this.winSize.height / 2)) {
+                    style = `bottom:${this.winSize.height-touches.clientY}px;`
+                } else {
+                    style = `top:${touches.clientY}px;`
+                }
+                if (touches.clientX > (this.winSize.witdh / 2)) {
+                    style += `right:${this.winSize.witdh-touches.clientX}px`
+                } else {
+                    style += `left:${touches.clientX}px`
+                }
+
+                this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
+                this.popStyle = style
+                this.pickedItem = item
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.showPop = true;
+                    }, 10)
+                })
+            },
+            // 进入聊天的详情页面，清理未读消息数量
+            toDetail(item) {
+                this.hidePop()
+                uni.navigateTo({
+                    url: '/pages/im/private/chat?targetId=' + item.targetId
+                })
+            },
+            toFriend(targetId) {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + targetId
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .message {
+        background: white;
+        padding: 20rpx 0 0 20rpx;
+        position: relative;
+        display: flex;
+
+        &.is-top {
+            background: $window-color;
+            border-bottom: #e8e8e8;
+        }
+
+        .avatar {
+            position: relative;
+
+            .u-badge {
+                z-index: 998;
+            }
+        }
+
+        .content {
+            margin-left: 30rpx;
+            width: calc(100% - 46px);
+            box-sizing: border-box;
+            position: relative;
+
+            .header {
+                display: flex;
+                justify-content: space-between;
+
+                .name {
+                    font-size: $title-size + 2;
+                    color: #454545;
+                    color: #454545;
+                }
+
+                .time {
+                    font-size: $title-size-sm;
+                    color: $text-gray-m;
+                    position: absolute;
+                    right: 30rpx;
+                }
+            }
+        }
+    }
+
+    /* 遮罩 */
+    .shade {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+
+        .pop {
+            position: fixed;
+            z-index: 101;
+            width: 200rpx;
+            box-sizing: border-box;
+            font-size: 28rpx;
+            text-align: left;
+            color: #333;
+            background-color: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            line-height: 80rpx;
+            transition: transform 0.15s ease-in-out 0s;
+            user-select: none;
+            -webkit-touch-callout: none;
+            transform: scale(0, 0);
+
+            &.show {
+                transform: scale(1, 1);
+            }
+
+            &>view {
+                padding: 0 20rpx;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                user-select: none;
+                -webkit-touch-callout: none;
+
+                &:active {
+                    background-color: #f3f3f3;
+                }
+            }
+        }
+    }
+</style>

pages/im/components/messagePreview.nvue

@@ -1,28 +1,28 @@
 <template>
     <view>
-        <view v-if="msg.objectName=='RC:TxtMsg'">
+        <view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
-            {{ msg.content || '' }}
+            <text v-if="user.name">{{ user.name }}:</text>{{ msg.content || '' }}
         </view>
-        <view v-if="msg.objectName=='RC:HQVCMsg'">
+        <view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
-            [语音]
+            <text v-if="user.name">{{ user.name }}:</text>[语音]
         </view>
-        <view v-if="msg.objectName=='RC:ImgMsg'">
+        <view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
-            [图片]
+            <text v-if="user.name">{{ user.name }}:</text>[图片]
         </view>
-        <view v-if="msg.objectName=='RC:GIFMsg'">
+        <view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
-            [表情]
+            <text v-if="user.name">{{ user.name }}:</text>[表情]
         </view>
-        <view v-if="msg.objectName=='RC:FileMsg'">
+        <view class="preview" v-if="msg.objectName=='RC:FileMsg'">
-            [文件]
+            <text v-if="user.name">{{ user.name }}:</text>[文件]
         </view>
-        <view v-if="msg.objectName=='RC:LBSMsg'">
+        <view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
-            [位置]
+            <text v-if="user.name">{{ user.name }}:</text>[位置]
         </view>
-        <view v-if="msg.objectName=='RC:AudioMsg'">
+        <view class="preview" v-if="msg.objectName=='RC:AudioMsg'">
-            [语音通话]
+            <text v-if="user.name">{{ user.name }}:</text>[语音通话]
         </view>
-        <view v-if="msg.objectName=='RC:VideoMsg'">
+        <view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
-            [视频通话]
+            <text v-if="user.name">{{ user.name }}:</text>[视频通话]
         </view>
     </view>
 </template>
@@ -33,11 +33,29 @@
             msg: {
                 type: Object,
                 default: {}
+            },
+            user: {
+                type: Object,
+                default: function() {
+                    return {
+                        name: ''
+                    }
+                }
             }
         }
     }
 </script>
 
-<style>
+<style lang="scss" scoped>
-
+    .preview {
+        word-break: break-all;
+        color: $text-gray-m;
+        padding-top: $padding - 20;
+        padding-bottom: $padding;
+        font-size: $title-size-m;
+        height: 32rpx;
+        line-height: 32rpx;
+        width: 520rpx;
+        @extend .nowrap;
+    }
 </style>

pages/im/components/sentMessageBar.nvue

@@ -0,0 +1,84 @@
+<template>
+    <view class="">
+        <!-- footer -->
+        <view class="footer">
+            <view class="msg-type" @click="changeMessageType">
+                <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
+                </image>
+                <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
+                </image>
+            </view>
+            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
+                @success="onSuccess" />
+            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
+                @success="onSuccess" />
+            <view class="msg-type msg-popups" @click="scrollBottom('msgPopups')">
+                <image class="icon" src="@/static/icon/popups-icon.png"></image>
+            </view>
+        </view>
+        <!-- 弹出层 -->
+        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
+            @success="() => {showPopups = false, onSuccess()}"></sent-popups>
+    </view>
+</template>
+
+<script>
+    import sentText from '../components/sentText'
+    import sentVoice from '../components/sentVoice'
+    import sentPopups from '../components/sentPopups'
+
+
+    export default {
+        props: {
+            conversationType: {
+                type: Number,
+                default: 0
+            },
+            targetId: {
+                type: String,
+                default: ''
+            }
+        },
+        components: {
+            sentText,
+            sentVoice,
+            sentPopups
+        },
+        data() {
+            return {
+                chatType: 1, // 0 语音，1 文本
+                showPopups: false
+            }
+        },
+        methods: {
+            // 切换聊天类型，语音/文本
+            changeMessageType() {
+                this.chatType = this.chatType === 1 ? 0 : 1
+            },
+            onSuccess() {
+                this.$emit('onSuccess')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .footer {
+        background: white;
+        padding: 20rpx 30rpx;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: row;
+
+        .msg-type {
+            width: 70rpx;
+            height: 70rpx;
+
+            .icon {
+                margin: 5rpx;
+                width: 60rpx;
+                height: 60rpx;
+            }
+        }
+    }
+</style>

pages/im/components/sentPopups.nvue

@@ -63,6 +63,11 @@
                 default: ''
             }
         },
+        computed: {
+            user() {
+                return this.$store.getters.sender
+            }
+        },
         methods: {
             singleCall(e) {
                 uni.showToast({
@@ -81,10 +86,11 @@
                             count: 9,
                             sourceType: ['album'],
                             success: res => {
-                                im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0], (
+                                im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
-                                    res) => {
+                                    this.user, (
-                                    this.success()
+                                        res) => {
-                                })
+                                        this.success()
+                                    })
                             }
                         })
                         break;
@@ -92,10 +98,11 @@
                         uni.chooseImage({
                             sourceType: ['camera'],
                             success: res => {
-                                im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0], (
+                                im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
-                                    res) => {
+                                    this.user, (
-                                    this.success()
+                                        res) => {
-                                })
+                                        this.success()
+                                    })
                             }
                         })
                         break;

pages/im/components/sentText.nvue

@@ -1,15 +1,7 @@
 <template>
     <view class="sent--text">
-        <input
+        <input class="input" type="text" @focus="focus" @blur="blur" v-model="inputTxt" confirm-type="send"
-            class="input"
+            @confirm="sent" cursor-spacing="10" />
-            type="text"
-            @focus="focus"
-            @blur="blur"
-            v-model="inputTxt"
-            confirm-type="send"
-            @confirm="sent"
-            cursor-spacing="10"
-        />
         <!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
     </view>
 </template>
@@ -36,6 +28,9 @@
         computed: {
             disabled() {
                 return this.inputTxt.length === 0
+            },
+            user() {
+                return this.$store.getters.sender
             }
         },
         created() {
@@ -55,18 +50,18 @@
             sent() {
                 if (!this.disabled) {
                     RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
-                    im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
+                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.user, () => {
                         this.$emit('success')
                         this.inputTxt = ''
                     })
                 }
-            },
+            },
-            focus() {
+            focus() {
-                this.$emit('focus')
+                this.$emit('focus')
-            },
+            },
-            blur() {
+            blur() {
-               this.$emit('blur') 
+                this.$emit('blur')
-            }
+            }
         }
     }
 </script>
@@ -75,30 +70,15 @@
     .sent--text {
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
+        justify-content: space-between;
-        
+
-        .input {
+        .input {
-            background: #F3F6FB;
+            background: #F3F6FB;
-            height: 70rpx;
+            height: 70rpx;
-            width: 500rpx;
+            width: 500rpx;
-            border-radius: 10rpx;
+            border-radius: 10rpx;
-            margin-right: 15rpx;
+            margin-right: 15rpx;
-            padding: 0 20rpx;
+            padding: 0 20rpx;
-        }
+        }
-        
-        // .button {
-        //     border: none;
-        //     background: #34CE98;
-        //     color: white;
-        //     width: 120rpx;
-        //     line-height: 70rpx;
-        //     text-align: center;
-        //     border-radius: 10rpx;
-        //     font-size: 30rpx;
-        //     font-weight: bold;
-        // }
-        // .button[disabled] {
-        //     background-color: #555555;
-        // }
     }
 </style>

pages/im/components/sentVoice.nvue

@@ -35,6 +35,11 @@
                 recorderManager: null
             }
         },
+        computed: {
+            user() {
+                return this.$store.getters.sender
+            }
+        },
         created() {
             this.recorderManager = uni.getRecorderManager()
         },
@@ -81,7 +86,7 @@
                 this.recorderManager.onStop(res => {
                     im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
                         this
-                        .recordTime), () => {
+                        .recordTime), this.user, () => {
                         setTimeout(() => {
                             this.$emit('success')
                         }, 500)

pages/im/components/showImage.nvue

@@ -1,7 +1,10 @@
-<template>
+<template>
-    <view class="msg--image" :class="guest ? 'right': 'left'">
+    <view class="">
-        <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
+        <text class="name" v-if="!guest && name">{{ name }}</text>
-    </view>
+        <view class="msg--image" :class="guest ? 'right': 'left'">
+            <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
+        </view>
+    </view>
 </template>
 
 <script>
@@ -23,6 +26,10 @@
             guest: {
                 type: Boolean,
                 default: true
+            },
+            name: {
+                type: String,
+                default: ''
             }
         },
         methods: {
@@ -38,7 +45,13 @@
     }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="scss">
+    .name {
+        font-size: 24rpx;
+        line-height: 34rpx;
+        color: $text-gray-m;
+    }
+    
     .msg--image {
         padding: 20rpx;
 

pages/im/components/showText.nvue

@@ -1,5 +1,6 @@
 <template>
     <view class="msg--text">
+        <text class="name" v-if="!guest && name">{{ name }}</text>
         <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
     </view>
 </template>
@@ -12,6 +13,10 @@
                 type: Object,
                 default: {}
             },
+            name: {
+                type: String,
+                default: ''
+            },
             guest: {
                 type: Boolean,
                 default: true
@@ -21,21 +26,29 @@
 </script>
 
 <style scoped lang="scss">
-    .im--text {
+    .msg--text {
-        max-width: 400rpx;
+        .name {
-        padding: 20rpx;
+            font-size: 24rpx;
-        font-size: 28rpx;
+            line-height: 34rpx;
-        line-height: 40rpx;
+            color: $text-gray-m;
-
-        &.left {
-            border-radius: 0 20rpx 20rpx 20rpx;
-            background: white;
         }
 
-        &.right {
+        .im--text {
-            border-radius: 20rpx 0 20rpx 20rpx;
+            max-width: 500rpx;
-            background: $main-color;
+            padding: 20rpx;
-            color: white;
+            line-height: 44rpx;
+            font-size: 32rpx;
+
+            &.left {
+                border-radius: 0 20rpx 20rpx 20rpx;
+                background: white;
+            }
+
+            &.right {
+                border-radius: 20rpx 0 20rpx 20rpx;
+                background: $main-color;
+                color: white;
+            }
         }
     }
 </style>

pages/im/components/showVoice.nvue

@@ -1,9 +1,12 @@
-<template>
+<template>
-    <view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
+    <view class="">
-        <image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+        <text class="name" v-if="!guest && name">{{ name }}</text>
-        <text class="duration">{{msg.duration}}"</text>
+        <view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
-        <image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+            <image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-    </view>
+            <text class="duration">{{msg.duration}}"</text>
+            <image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+        </view>
+    </view>
 </template>
 
 <script>
@@ -20,6 +23,10 @@
                         duration: 0
                     }
                 }
+            },
+            name: {
+                type: String,
+                default: ''
             },
             guest: {
                 type: Boolean,
@@ -55,7 +62,13 @@
     }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="scss">
+    .name {
+        font-size: 24rpx;
+        line-height: 34rpx;
+        color: $text-gray-m;
+    }
+    
     .msg--voice {
         flex-direction: row;
         justify-content: space-between;

pages/im/group/chat.nvue

@@ -0,0 +1,171 @@
+<template>
+    <view class="group--chat">
+        <list class="body" :show-scrollbar="false">
+            <cell class="cell" v-for="(item, index) in messages" :key="index">
+                <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
+                    <u-avatar class="avatar" size="36" text="Ad" />
+                    <view class="msg">
+                        <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
+                            :msg="item.content" :name="item.content.userInfo.name" />
+                        <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
+                            :msg="item.content" :name="item.content.userInfo.name" />
+                        <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
+                            :msg="item.content" :name="item.content.userInfo.name" />
+                    </view>
+                </view>
+            </cell>
+            <cell class="cell-footer" ref="chatBottom"></cell>
+        </list>
+        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getMessageList()" />
+    </view>
+</template>
+
+<script>
+    import {
+        timeCustomCN
+    } from '@/utils/filters.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'
+
+    const ChatList = uni.requireNativePlugin('dom')
+
+    export default {
+        components: {
+            showVoice,
+            showImage,
+            showText,
+            sentMessageBar
+        },
+        data() {
+            return {
+                targetId: '',
+                conversationType: 3,
+                messages: []
+            }
+        },
+        onLoad(e) {
+            this.targetId = e.targetId
+            this.initMessageList()
+            uni.$on('onReceiveGroupMessage', (msg) => {
+                if (msg.targetId == this.targetId) {
+                    this.initMessageList()
+                }
+            })
+        },
+        methods: {
+            initMessageList() {
+                this.getMessageList()
+                // 清理当前会话，未读消息数量
+                RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
+                // 发送消息已读状态给对方
+                RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
+                // 更新badge提醒数量
+                im.setNotifyBadge()
+            },
+            // 获取消息列表
+            getMessageList() {
+                im.getMessageList(
+                    this.conversationType,
+                    this.targetId,
+                    new Date().getTime(),
+                    20,
+                    true,
+                    (messages) => {
+                        console.log('获取到的消息', messages);
+                        this.messages = messages.reverse()
+                        this.scrollBottom()
+                    })
+            },
+            // 滚动到底部
+            scrollBottom(type) {
+                if (type === 'msgPopups') {
+                    this.showPopups = !this.showPopups
+                }
+                setTimeout(() => {
+                    let el = this.$refs.chatBottom
+                    ChatList.scrollToElement(el, {
+                        offset: 0,
+                        animated: false
+                    })
+                }, 50)
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .group--chat {
+        background: $window-color;
+        flex: 1;
+
+        .body {
+            flex: 1;
+
+            .cell {
+                padding: 10rpx 30rpx;
+
+                .cell-item {
+                    width: 690rpx;
+                    justify-content: flex-start;
+
+
+                    &.left {
+                        flex-direction: row;
+                    }
+
+                    &.right {
+                        flex-direction: row-reverse;
+
+                        .state {
+                            flex-direction: row;
+                            justify-content: flex-end;
+                        }
+                    }
+
+                    .avatar {
+                        width: 78rpx;
+                        height: 78rpx;
+                        background-color: white;
+                        border-radius: 10rpx;
+                    }
+
+                    .msg {
+                        margin: 0 20rpx;
+
+                        .user {
+                            font-size: 18rpx;
+                            line-height: 40rpx;
+                        }
+                    }
+                }
+
+                .cell-footer {
+                    height: 20rpx;
+                }
+            }
+        }
+
+        .footer {
+            background: white;
+            padding: 20rpx 30rpx;
+            display: flex;
+            justify-content: space-between;
+            flex-direction: row;
+
+            .msg-type {
+                width: 70rpx;
+                height: 70rpx;
+
+                .icon {
+                    margin: 5rpx;
+                    width: 60rpx;
+                    height: 60rpx;
+                }
+            }
+        }
+    }
+</style>

pages/im/group/index.vue

@@ -1,11 +0,0 @@
-<template>
-    <view class="">
-        
-    </view>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

pages/im/index.vue

@@ -5,16 +5,15 @@
         <view class="custom-header">
             <view class="header-flex">
                 <view class="tabs">
-                    <view class="item show">
+                    <view :class="['item', {'active': showType == 0}]" @click="showPrivate">
                         私聊
                         <u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="privateUnread" />
                     </view>
-                    <view class="item" @click="onNav('', {})">
+                    <view :class="['item', {'active': showType == 1}]" @click="showGroup">
                         群聊
                         <u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="groupUnread" />
                     </view>
                 </view>
-
                 <view class="btns">
                     <view class="item" @click="scanQrCode">
                         <uni-icons color="#555" type="scan" size="22" />
@@ -26,39 +25,13 @@
                 </view>
             </view>
         </view>
+        <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
         <!-- content -->
-        <view v-if="$store.state.token != ''">
+        <view v-if="$store.state.token !== ''">
-            <block v-if="conversations.length < 1">
+            <conversation-private v-show="showType == 0" @refresh="getPrivateConversationList()"
-                <view class="vertical null-list">
+                :conversations="conversations" />
-                    <u-empty mode="message" textColor="#999" text="暂无好友消息" />
+            <conversation-group v-show="showType == 1" @refresh="getGroupConversationList()"
-                </view>
+                :conversations="groupConversations" />
-            </block>
-            <block v-else>
-                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
-                <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
-                    @click="toDetail(item)" @longpress="onLongPress" :data-item="item">
-                    <view class="avatar" @click="toFriend(item.targetId)">
-                        <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
-                            :value="item.unreadMessageCount" />
-                        <u-avatar :src="friend(item.targetId).portraitUrl" shape="square" size="44" />
-                    </view>
-                    <view class="content u-border-bottom">
-                        <view class="header">
-                            <view class="name">{{ friend(item.targetId).name }}</view>
-                            <view class="time">{{ item.sentTime|timeCustomCN }}</view>
-                        </view>
-                        <message-preview class="preview" :msg="item.latestMessage" />
-                    </view>
-                </view>
-
-                <view class="shade" @click="hidePop" v-show="showPop">
-                    <view class="pop" :style="popStyle" :class="{'show':showPop}">
-                        <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
-                            {{item}}
-                        </view>
-                    </view>
-                </view>
-            </block>
         </view>
         <!-- 未登录 -->
         <view v-else class="vertical null-list">
@@ -75,67 +48,52 @@
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
     import userAuth from '@/public/userAuth'
-    import messagePreview from './components/messagePreview'
+    import conversationPrivate from './components/conversationPrivate'
-    import {
+    import conversationGroup from './components/conversationGroup'
-        getImToken
+
-    } from '@/apis/interfaces/im.js'
     export default {
         data() {
             return {
                 isShown: true, // 当前页面显示状态
+                showType: 1, // 0 单聊，1 群聊
                 conversations: [], // 会话列表
+                groupConversations: [],
                 connection: 0,
-                /* 窗口尺寸 */
-                winSize: {},
-                /* 显示操作弹窗 */
-                showPop: false,
-                /* 弹窗按钮列表 */
-                popButton: ['置顶聊天', '删除该聊天'],
-                /* 弹窗定位样式 */
-                popStyle: "",
-                pickedItem: {},
                 privateUnread: 0,
                 groupUnread: 0,
                 hasNewFriends: 0
             }
         },
         components: {
-            messagePreview
+            conversationPrivate,
-        },
+            conversationGroup
-        computed: {
-            friend() {
-                return function(targetId) {
-                    return this.$store.getters.userInfo(targetId)
-                }
-            }
         },
         onLoad() {
-            // 好友申请数量
+            // 好友申请数量
             this.checkNewFriendPending()
             uni.$on('onConnectionStatusChange', (status) => {
                 this.connection = status
             })
             uni.$on('onContactNotification', this.checkNewFriendPending)
         },
-        onShow() {
+        onShow() {
             if (this.$store.state.token !== '') {
-                this.getConversationList()
+                this.getPrivateConversationList()
-            }
+                this.getGroupConversationList()
+            }
             // 监听新消息
-            uni.$on('onReceiveMessage', (msg) => {
+            uni.$on('onReceivePrivateMessage', (msg) => {
-                console.log('收到消息，刷新列表');
+                this.getPrivateConversationList()
-                this.getConversationList()
+            })
-                // todo ，不知道这个获取未读数量的，有没有办法能获取私聊的，还有群组的
+            uni.$on('onReceiveGroupMessage', (msg) => {
-                // RongIMLib.getTotalUnreadCount(({
+                this.getGroupConversationList()
-                //     count
+            })
-                // }) => {
+            
-                //     this.privateUnread = count
-                // })
-            })
             this.isShown = true
         },
         onHide() {
-            uni.$off('onReceiveMessage')
+            uni.$off('onReceivePrivateMessage')
+            uni.$off('onReceiveGroupMessage')
             this.isShown = false
         },
         onNavigationBarButtonTap(e) {
@@ -154,6 +112,14 @@
             }
         },
         methods: {
+            showPrivate() {
+                console.log('切换到单聊');
+                this.showType = 0
+            },
+            showGroup() {
+                console.log('切换到群聊');
+                this.showType = 1
+            },
             checkNewFriendPending() {
                 // 获取是否有新的好友申请
                 RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
@@ -164,52 +130,6 @@
                     }
                 })
             },
-            // 隐藏功能菜单
-            hidePop() {
-                this.showPop = false
-                this.pickedItem = {}
-                setTimeout(() => {
-                    this.showShade = false
-                }, 250)
-            },
-            // 点击会话功能菜单
-            pickerMenu(e) {
-                const index = Number(e.currentTarget.dataset.index)
-
-                if (index == 0) {
-                    RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
-                        .pickedItem.isTop)
-                } else {
-                    RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
-                }
-                im.setNotifyBadge()
-                this.getConversationList()
-                this.hidePop()
-            },
-            // 长按会话，展示功能菜单
-            onLongPress(e) {
-                let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
-
-                if (touches.clientY > (this.winSize.height / 2)) {
-                    style = `bottom:${this.winSize.height-touches.clientY}px;`
-                } else {
-                    style = `top:${touches.clientY}px;`
-                }
-                if (touches.clientX > (this.winSize.witdh / 2)) {
-                    style += `right:${this.winSize.witdh-touches.clientX}px`
-                } else {
-                    style += `left:${touches.clientX}px`
-                }
-
-                this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
-                this.popStyle = style
-                this.pickedItem = item
-                this.$nextTick(() => {
-                    setTimeout(() => {
-                        this.showPop = true;
-                    }, 10)
-                })
-            },
             // 检查登录
             toLogin() {
                 if (this.$store.state.token === '') {
@@ -219,7 +139,8 @@
                 }
                 return true
             },
-            getConversationList() {
+            // 获取私聊的会话列表
+            getPrivateConversationList() {
                 const count = 1000
                 const timestamp = 0
                 RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
@@ -228,16 +149,14 @@
                     }
                 })
             },
-            // 进入聊天的详情页面，清理未读消息数量
+            // 获取群组会话列表
-            toDetail(item) {
+            getGroupConversationList() {
-                this.hidePop()
+                const count = 1000
-                uni.navigateTo({
+                const timestamp = 0
-                    url: '/pages/im/private/chat?targetId=' + item.targetId
+                RongIMLib.getConversationList([RongIMLib.ConversationType.GROUP], count, timestamp, (res) => {
-                })
+                    if (res.code === 0) {
-            },
+                        this.groupConversations = res.conversations
-            toFriend(targetId) {
+                    }
-                uni.navigateTo({
-                    url: '/pages/im/friends/info?targetId=' + targetId
                 })
             },
             // 点击按钮
@@ -306,7 +225,7 @@
                         margin: 0;
                     }
 
-                    &.show {
+                    &.active {
                         background: rgba($color: $main-color, $alpha: .1);
                         color: $main-color;
                         font-weight: bold;
@@ -346,105 +265,6 @@
                 box-sizing: border-box;
             }
         }
-
-        .message {
-            background: white;
-            padding: 20rpx 0 0 20rpx;
-            position: relative;
-            display: flex;
-
-
-            &.is-top {
-                background: $window-color;
-                border-bottom: #e8e8e8;
-            }
-
-            .avatar {
-                position: relative;
-
-                .u-badge {
-                    z-index: 998;
-                }
-            }
-
-            .content {
-                margin-left: 30rpx;
-                width: calc(100% - 46px);
-                box-sizing: border-box;
-                position: relative;
-
-                .header {
-                    display: flex;
-                    justify-content: space-between;
-
-                    .name {
-                        font-size: $title-size + 2;
-                        color: #454545;
-                        color: #454545;
-                    }
-
-                    .time {
-                        font-size: $title-size-sm;
-                        color: $text-gray-m;
-                        position: absolute;
-                        right: 30rpx;
-                    }
-                }
-
-                .preview {
-                    word-break: break-all;
-                    color: $text-gray-m;
-                    padding-top: $padding - 20;
-                    padding-bottom: $padding;
-                    font-size: $title-size-m;
-                    height: 32rpx;
-                    line-height: 32rpx;
-                    width: 500rpx;
-                    @extend .nowrap;
-                }
-            }
-        }
-    }
-
-    /* 遮罩 */
-    .shade {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-
-        .pop {
-            position: fixed;
-            z-index: 101;
-            width: 200rpx;
-            box-sizing: border-box;
-            font-size: 28rpx;
-            text-align: left;
-            color: #333;
-            background-color: #fff;
-            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-            line-height: 80rpx;
-            transition: transform 0.15s ease-in-out 0s;
-            user-select: none;
-            -webkit-touch-callout: none;
-            transform: scale(0, 0);
-
-            &.show {
-                transform: scale(1, 1);
-            }
-
-            &>view {
-                padding: 0 20rpx;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                user-select: none;
-                -webkit-touch-callout: none;
-
-                &:active {
-                    background-color: #f3f3f3;
-                }
-            }
-        }
     }
 
     .u-border-bottom {

pages/im/private/chat.nvue

@@ -24,25 +24,7 @@
             </cell>
             <cell class="cell-footer" ref="chatBottom"></cell>
         </list>
-        <!-- footer -->
+        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getMessageList()" />
-        <view class="footer">
-            <view class="msg-type" @click="changeMessageType">
-                <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
-                </image>
-                <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
-                </image>
-            </view>
-            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
-                @success="getMessageList" />
-            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
-                @success="getMessageList" />
-            <view class="msg-type msg-popups" @click="scrollBottom('msgPopups')">
-                <image class="icon" src="@/static/icon/popups-icon.png"></image>
-            </view>
-        </view>
-        <!-- 弹出层 -->
-        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
-            @success="() => {showPopups = false, getMessageList()}"></sent-popups>
     </view>
 </template>
 
@@ -55,9 +37,7 @@
     import showVoice from '../components/showVoice'
     import showImage from '../components/showImage'
     import showText from '../components/showText'
-    import sentText from '../components/sentText'
+    import sentMessageBar from '../components/sentMessageBar'
-    import sentVoice from '../components/sentVoice'
-    import sentPopups from '../components/sentPopups'
 
     const ChatList = uni.requireNativePlugin('dom')
 
@@ -71,19 +51,14 @@
                     name: '',
                     userId: '',
                     portraitUrl: ''
-                },
+                }
-                chatType: 1, // 0 语音，1 文本
-                showPopups: false,
-                inputFocus: false // 输入框是否获得了焦点
             }
         },
-        components: {
+        components: {
+            sentMessageBar,
             showVoice,
             showImage,
-            showText,
+            showText
-            sentText,
-            sentVoice,
-            sentPopups
         },
         onLoad(e) {
             this.targetId = e.targetId
@@ -100,7 +75,7 @@
                 }
             })
             // 监听收到新消息，判断是否是当前会话，更新会话内容
-            uni.$on('onReceiveMessage', (msg) => {
+            uni.$on('onReceivePrivateMessage', (msg) => {
                 if (msg.targetId == this.targetId) {
                     this.initMessageList()
                 }
@@ -119,10 +94,6 @@
             customCN(val) {
                 return timeCustomCN(val)
             },
-            // 切换聊天类型，语音/文本
-            changeMessageType() {
-                this.chatType = this.chatType === 1 ? 0 : 1
-            },
             // 获取消息列表
             getMessageList() {
                 im.getMessageList(
@@ -232,24 +203,5 @@
                 }
             }
         }
-
-        .footer {
-            background: white;
-            padding: 20rpx 30rpx;
-            display: flex;
-            justify-content: space-between;
-            flex-direction: row;
-
-            .msg-type {
-                width: 70rpx;
-                height: 70rpx;
-
-                .icon {
-                    margin: 5rpx;
-                    width: 60rpx;
-                    height: 60rpx;
-                }
-            }
-        }
     }
 </style>

pages/user/index.vue

@@ -155,12 +155,10 @@
                 if (this.$store.state.token === '') return;
                 info()
                     .then(res => {
-                        console.log(res);
                         uni.setNavigationBarTitle({
                             title: res.nickname
                         });
                         this.userInfo = res;
-                        console.log(res);
                     })
                     .catch(err => {
                         uni.showToast({

router/index.js

@@ -13,6 +13,9 @@ const ROUTES = [{
 },{
     'path': '/pages/im/private/chat',
     'name': 'imPrivateChat'
+},{
+    'path': '/pages/im/group/chat',
+    'name': 'imGroupChat'
 }]
 // #endif
 

store/modules/im.js

@@ -3,7 +3,7 @@ import im from "@/utils/im/index.js"
 export default {
     state: {
         friends: {},
-        sender: {},
+        myInfo: {}
     },
     getters: {
         friends(state) {
@@ -27,7 +27,7 @@ export default {
             }
         },
         sender(state) {
-            return state.sender
+            return state.myInfo
         }
     },
     mutations: {
@@ -35,7 +35,11 @@ export default {
             Vue.set(state.friends, userInfo.userId, userInfo)
         },
         SET_state_sender(state, userInfo) {
-            state.sender = userInfo
+            state.myInfo = {
+                userId: userInfo.userId,
+                name: userInfo.name,
+                portraitUrl: userInfo.portraitUrl
+            }
         }
     },
     actions: {
@@ -58,7 +62,6 @@ export default {
             model.find('userId=' + userInfo.userId, (err, result) => {
                 if (userInfo.hash != result[0].hash) {
                     commit('updateFriendInfo', userInfo)
-                    console.log(userInfo);
                     if (userInfo.portraitUrl && userInfo.portraitUrl != result[0].portraitUrl) {
                         saveAvatar(userInfo, (savedFilePath) => {
                             const info = {
@@ -69,7 +72,6 @@ export default {
                                 localAvatar: savedFilePath
                             }
                             model.update('userId=' + userInfo.userId, info, (err, res) => {
-                                console.log('保存结果', err, res);
                             })
                             commit('updateFriendInfo', info)
                         })
@@ -82,11 +84,9 @@ export default {
                             localAvatar: result[0].localAvatar
                         }
                         model.update('userId=' + userInfo.userId, info, (err, res) => {
-                            console.log('保存结果', err, res);
                         })
                     }
                 } else {
-                    console.log('不用更新的用户', userInfo.userId, userInfo.name);
                 }
             })
         },
@@ -108,7 +108,6 @@ export default {
                         localAvatar: savedFilePath
                     }
                     model.insert(info, (err, res) => {
-                        console.log('保存结果', err, res);
                     })
                     // 保存头像后，更新信息
                     commit('updateFriendInfo', info)
@@ -123,7 +122,6 @@ export default {
                     localAvatar: ''
                 }
                 model.insert(info, (err, res) => {
-                    console.log('保存结果', err, res);
                 })
             }
         }
@@ -146,7 +144,6 @@ const saveAvatar = (userInfo, callback) => {
             })
         },
         fail: (err) => {
-            console.log('头像保存失败', err);
         }
     })
 }

utils/im/index.js

@@ -51,7 +51,7 @@ const setNotifyBadge = () => {
  */
 const connect = (token, userInfo, callback) => {
     RongIMLib.connect(token, res => {
-        callback(res)
+        callback(res)
         // 更新个人信息
         store.dispatch('setSenderInfo', userInfo)
         // 设置未读消息数量
@@ -61,7 +61,7 @@ const connect = (token, userInfo, callback) => {
 
         uni.getStorage({
             key: FK,
-            success: () => {
+            success: () => {
                 const model = uni.model.friendModel
                 model.find((err, results) => {
                     results.map(item => {
@@ -193,7 +193,7 @@ const addListeners = () => {
 }
 
 // 维护消息列表，检查是否需要通知声音，设置新消息提醒的数量
-const newMessage = (msg) => {
+const newMessage = (msg) => {
     RongIMLib.getConversationNotificationStatus(msg.conversationType, msg.targetId, ({
         code,
         status
@@ -204,10 +204,12 @@ const newMessage = (msg) => {
             }
         }
     });
-
+    setNotifyBadge()
-    setNotifyBadge()
+    if (msg.conversationType === RongIMLib.ConversationType.PRIVATE) {
-
+        uni.$emit('onReceivePrivateMessage', msg);
-    uni.$emit('onReceiveMessage', msg);
+    } else {
+        uni.$emit('onReceiveGroupMessage', msg);
+    }
 }
 
 // 播放状态

utils/im/message.js

@@ -1,4 +1,5 @@
 import store from '@/store/index.js'
+
 import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
 
 const getMessageList = (conversationType, targetId, timeStamp, count, isForward, callback) => {
@@ -47,24 +48,24 @@ const getMessageList = (conversationType, targetId, timeStamp, count, isForward,
  * @param {string}  content 消息内容
  * @param {function}  callback 回调函数
  */
-const sentText = (conversationType, targetId, content, callback) => {
+const sentText = (conversationType, targetId, content, user, callback) => {
-    console.log('发送');
     const msg = {
         conversationType: conversationType,
         targetId: String(targetId),
         content: {
             objectName: 'RC:TxtMsg',
             content: content,
-            user: store.getters.sender
+            userInfo: user
         }
-    }
+    }
+    
     RongIMLib.sendMessage(msg, ({
         code,
         messageId
     }) => {
         if (code === 0) {
             callback(messageId)
-        } else {
+        } else {
             uni.showToast({
                 icon: 'none',
                 title: '发送失败'
@@ -81,14 +82,15 @@ const sentText = (conversationType, targetId, content, callback) => {
  * @param {integer}  time 录音时长
  * @param {function}  callback 录音时长
  */
-const sentVoice = (conversationType, targetId, voiceUrl, time, callback) => {
+const sentVoice = (conversationType, targetId, voiceUrl, time, user, callback) => {
     const msg = {
         conversationType: conversationType,
         targetId: String(targetId),
         content: {
             objectName: 'RC:HQVCMsg',
             local: 'file:///' + plus.io.convertLocalFileSystemURL(voiceUrl),
-            duration: time
+            duration: time,
+            userInfo: user
         }
     }
     RongIMLib.sendMediaMessage(msg, {
@@ -107,13 +109,14 @@ const sentVoice = (conversationType, targetId, voiceUrl, time, callback) => {
     })
 }
 
-const sentImage = (conversationType, targetId, imageUrl, callback) => {
+const sentImage = (conversationType, targetId, imageUrl, user, callback) => {
     const msg = {
         conversationType: conversationType,
         targetId: String(targetId),
         content: {
             objectName: 'RC:ImgMsg',
-            local: 'file:///' + plus.io.convertLocalFileSystemURL(imageUrl)
+            local: 'file:///' + plus.io.convertLocalFileSystemURL(imageUrl),
+            userInfo: user
         }
     }
     RongIMLib.sendMediaMessage(msg, {

utils/im/群聊的会话列表.json

@@ -0,0 +1,27 @@
+[{
+    "latestMessage": {
+        "content": "你好，这是 725 条消息条消息条消息条消息条消息条消息条消息条消息条消息0.47447800 1644388415",
+        "objectName": "RC:TxtMsg",
+        "userInfo": {
+            "userId": "10051",
+            "name": "Jason.Chen",
+            "extra": "",
+            "portraitUrl": ""
+        }
+    },
+    "objectName": "RC:TxtMsg",
+    "receivedTime": 1644388414889,
+    "sentTime": 1644388415510,
+    "draft": "",
+    "conversationType": 3,
+    "receivedStatus": 0,
+    "conversationTitle": "",
+    "sentStatus": 30,
+    "mentionedCount": 0,
+    "latestMessageId": 98,
+    "isTop": false,
+    "senderUserId": "10005",
+    "unreadMessageCount": 3,
+    "hasUnreadMentioned": false,
+    "targetId": "TG001"
+}]