群的系统消息

pages/im/components/groupUserList.vue

@@ -3,13 +3,16 @@
         <view class="users">
             <view :class="['user', {'active': item.targetId == currentUser.targetId}]" @longpress="showAction(item)"
                 v-for="(item, index) in users" :key="index" @click="toUser(item)">
-                <u-avatar :size="avatarSize" shape="square" :src="contact(item.targetId).portraitUrl"></u-avatar>
+                <view class="avatar">
+                    <u-avatar :size="avatarSize" shape="square" :src="contact(item.targetId).portraitUrl"></u-avatar>
+                    <view class="admin" v-if="item.is_admin">管理</view>
+                    <view class="owner" v-if="item.targetId === adminUid">群主</view>
+                </view>
                 <view class="name">{{ item.name }}</view>
-                <view class="admin" v-if="item.is_admin">管理</view>
-                <view class="owner" v-if="item.targetId === adminUid">群主</view>
             </view>
             <view class="user" v-if="isAdmin">
-                <u-avatar @click="inviteUser" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
+                <u-avatar @click="inviteUser" :size="avatarSize" shape="square" icon="plus" bg-color="#eeeeee"
+                    color="#999999">
                 </u-avatar>
                 <view class="name">邀请好友</view>
             </view>
@@ -58,17 +61,16 @@
                 currentUser: {},
                 avatarSize: 40
             }
-        },
+        },
-        computed: {
+        computed: {
-            contact() {
+            contact() {
-                return function(targetId) {
+                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
+                    return this.$store.getters.contactInfo(targetId)
-                }
+                }
-            }
+            }
         },
         created() {
-            this.avatarSize = 126 / 750 * wx.getSystemInfoSync().windowWidth
+            this.avatarSize = 90 / 750 * wx.getSystemInfoSync().windowWidth
-            console.log(this.avatarSize)
         },
         mounted() {
             this.initGroupInfo()
@@ -237,7 +239,6 @@
     }
 </script>
 
-
 <style lang="scss" scoped>
     .users {
         flex-direction: row;
@@ -246,8 +247,6 @@
         padding: 20rpx 0;
 
         .user {
-            overflow: hidden;
-            position: relative;
             width: 126rpx;
             margin-left: 20rpx;
             margin-bottom: 20rpx;
@@ -255,12 +254,46 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            border-radius: 0 10rpx 0 0;
 
             &.active {
                 background-color: $window-color;
             }
 
+            .avatar {
+                border-radius: 0 8rpx 0 0;
+                position: relative;
+                width: 90rpx;
+                height: 90rpx;
+                overflow: hidden;
+
+                .admin {
+                    position: absolute;
+                    background-color: $main-color;
+                    transform: rotate(45deg);
+                    color: #ffffff;
+                    font-size: 12rpx;
+                    width: 100rpx;
+                    padding-top: 30rpx;
+                    text-align: center;
+                    right: -45rpx;
+                    top: -20rpx;
+                }
+
+                .owner {
+                    position: absolute;
+                    background-color: $text-price;
+                    transform: rotate(45deg);
+                    color: #ffffff;
+                    font-size: 12rpx;
+                    width: 100rpx;
+                    padding-top: 30rpx;
+                    text-align: center;
+                    right: -45rpx;
+                    top: -20rpx;
+                }
+
+            }
+
             .name {
                 color: $text-gray-m;
                 width: 126rpx;
@@ -272,31 +305,6 @@
                 word-break: break-word;
             }
 
-            .admin {
-                position: absolute;
-                background-color: $main-color;
-                transform: rotate(45deg);
-                color: #ffffff;
-                font-size: 12rpx;
-                width: 100rpx;
-                padding-top: 30rpx;
-                text-align: center;
-                right: -45rpx;
-                top: -20rpx;
-            }
-
-            .owner {
-                position: absolute;
-                background-color: $text-price;
-                transform: rotate(45deg);
-                color: #ffffff;
-                font-size: 12rpx;
-                width: 100rpx;
-                padding-top: 30rpx;
-                text-align: center;
-                right: -45rpx;
-                top: -20rpx;
-            }
         }
     }
 

pages/im/group/chat.nvue

@@ -2,7 +2,10 @@
     <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'">
+                <view class="cell-system" v-if="item.senderUserId === '__system__'">
+                    <text class="text">{{ item.content.content }}</text>
+                </view>
+                <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
                     <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
                         :src="contact(item.senderUserId).portraitUrl" />
                     <view class="msg">
@@ -25,6 +28,9 @@
     import {
         timeCustomCN
     } from '@/utils/filters.js'
+    import {
+        getGroupBase
+    } from '@/apis/interfaces/im.js'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
     import showVoice from '../components/showVoice'
@@ -73,12 +79,21 @@
             uni.setNavigationBarTitle({
                 title: this.groupInfo.name
             })
+            // 获取群成员数量
+            getGroupBase(this.targetId).then(res => {
+                uni.setNavigationBarTitle({
+                    title: this.groupInfo.name + `(${res.members})`
+                })
+            })
+            // 获取历史消息列表
             this.getMessageList()
+            // 监听收到本群的消息，追加消息
             uni.$on('onReceiveMessage', (msg) => {
                 if (msg.targetId == this.targetId) {
                     this.getNewMessage()
                 }
             })
+            // 清理聊天记录
             uni.$once('cleanGroupMessage', this.getMessageList)
         },
         onNavigationBarButtonTap() {
@@ -87,6 +102,7 @@
             })
         },
         methods: {
+            // 转到好友资料页面
             toUser(item) {
                 if (item.senderUserId == '__system__') {
                     return
@@ -106,9 +122,9 @@
                     this.conversationType,
                     this.targetId,
                     this.latestMessage.sentTime,
-                    1,
+                    10,
                     false,
-                    (messages) => {
+                    (messages) => {
                         this.messages = this.messages.concat(messages)
                         this.scrollBottom()
                     })
@@ -122,7 +138,8 @@
                     100,
                     true,
                     (messages) => {
-                        this.messages = messages.reverse()
+                        console.log(messages);
+                        this.messages = messages.reverse()
                         this.scrollBottom()
                     })
             },
@@ -161,6 +178,14 @@
             .cell {
                 padding: 10rpx 30rpx;
 
+                .cell-system {
+                    align-items: center;
+                    .text {
+                        font-size: 24rpx;
+                        color: $text-gray-m;
+                    }
+                }
+
                 .cell-item {
                     width: 690rpx;
                     justify-content: flex-start;

pages/im/private/chat.nvue

@@ -5,8 +5,8 @@
             <cell class="cell" v-for="(item, index) in messages" :key="index">
                 <view class="time">
                     <text class="text">{{ customCN(item.sentTime) }}</text>
-                </view>
+                </view>
-                <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
+                <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
                     <u-avatar class="avatar" size="36" shape="square" @click="showUser(targetId, item.messageDirection)"
                         :src="contact(item.senderUserId).portraitUrl" />
                     <view class="msg">