群组聊天的基础功能，nvue

pages/im/group/chat.nvue

@@ -3,7 +3,7 @@
         <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" />
+                    <u-avatar class="avatar" size="36" shape="square" :src="item.content.userInfo.portraitUrl" />
                     <view class="msg">
                         <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
                             :msg="item.content" :name="item.content.userInfo.name" />
@@ -38,26 +38,38 @@
             showVoice,
             showImage,
             showText,
-            sentMessageBar
+            sentMessageBar,
         },
         data() {
             return {
                 targetId: '',
                 conversationType: 3,
-                messages: []
+                messages: [],
+                groupInfo: {
+                    name: ''
+                }
             }
         },
         onLoad(e) {
             this.targetId = e.targetId
+            this.groupInfo = this.$store.getters.contactInfo(this.targetId)
+            uni.setNavigationBarTitle({
+                title: this.groupInfo.name
+            })
             this.getMessageList()
-            uni.$on('onReceiveGroupMessage', (msg) => {
+            uni.$on('onReceiveMessage', (msg) => {
                 if (msg.targetId == this.targetId) {
                     this.getMessageList()
                 }
             })
         },
         onBackPress() {
-            uni.$off('onReceiveGroupMessage')
+            uni.$off('onReceiveMessage')
+        },
+        onNavigationBarButtonTap() {
+            uni.navigateTo({
+                url: '/pages/im/group/info'
+            })
         },
         methods: {
             // 获取消息列表
@@ -76,12 +88,12 @@
             // 滚动到底部
             scrollBottom(type) {
                 // 清理当前会话，未读消息数量
-                RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime() + 1100)
-                // 发送消息已读状态给对方
-                RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
-                // 更新badge提醒数量
-                im.setNotifyBadge()
-                
+                RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime() + 1100)
+                // 发送消息已读状态给对方
+                RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
+                // 更新badge提醒数量
+                im.setNotifyBadge()
+
                 setTimeout(() => {
                     let el = this.$refs.chatBottom
                     ChatList.scrollToElement(el, {

pages/im/group/create.nvue

@@ -0,0 +1,23 @@
+<template>
+    <view>
+        
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            
+        },
+        onLoad() {
+            
+        },
+        methods: {
+            
+        }
+    }
+</script>
+
+<style>
+
+</style>

pages/im/group/index.nvue

@@ -0,0 +1,79 @@
+<template>
+    <view>
+        <view v-for="(item, index) in groups" :key="index" class="friend-flex u-border-bottom"
+            @click="toGroup(item.targetId)">
+            <u-avatar size="40" shape="square" :src="contact(item.targetId).portraitUrl" />
+            <view class="info">
+                <view class="name">{{ item.name }}</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import {
+        getMyGroups
+    } from '@/apis/interfaces/im.js'
+
+    export default {
+        data() {
+            return {
+                groups: []
+            }
+        },
+        computed: {
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
+        onNavigationBarButtonTap() {
+            uni.navigateTo({
+                url: 'pages/im/group/create'
+            })
+        },
+        onLoad() {
+            getMyGroups().then((res) => {
+                this.groups = res
+                res.map(item => {
+                    this.$store.dispatch('updateContact', item)
+                })
+            })
+        },
+        methods: {
+            toGroup(targetId) {
+                uni.navigateTo({
+                    url: '/pages/im/group/chat?targetId=' + targetId
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    // 好友列表
+    .friend-flex {
+        position: relative;
+        padding: 20rpx $padding;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .info {
+            flex: 1;
+            margin-left: $padding;
+
+            .name {
+                font-size: $title-size + 2;
+                font-size: $title-size + 2;
+                color: #454545 !important;
+            }
+
+            .address {
+                color: $text-gray-m;
+                font-size: $title-size-m - 5;
+            }
+        }
+    }
+</style>

pages/im/group/info.nvue

@@ -0,0 +1,33 @@
+<template>
+    <view>
+        <view class="">
+            
+        </view>
+        <view>
+            查看更多群成员
+        </view>
+        
+        群聊名称
+        群公告
+        
+        <view class="">
+            置顶
+        </view>
+        <view class="">
+            免打扰
+        </view>
+        清空聊天记录
+        删除并退出
+        解散群聊
+    </view>
+</template>
+
+<script>
+    export default {
+        
+    }
+</script>
+
+<style>
+
+</style>