From 3a3517b5bee565c40e6ab9775a591ca89fe1fc87 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Thu, 17 Feb 2022 09:37:05 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=A4=E7=9A=84=E7=B3=BB=E7=BB=9F=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                             | Bin 12292 -> 14340 bytes
 pages/im/components/groupUserList.vue |  92 ++++++++++++++------------
 pages/im/group/chat.nvue              |  33 +++++++--
 pages/im/private/chat.nvue            |   4 +-
 4 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index 0451fa5350573968a44737610eb8813fa8341acb..c1a2c05689ed421f0ce5b68a5d14a53025647039 100644
GIT binary patch
delta 210
zcmZokXem%&U|?W$DortDU@!nOIe-{M3-ADmHU<U-o{0+jq7gt2Gf<F$p_rjKC*3eO
zIX|~xVxjV6109yh+>C;gB?JT~>nezEekh^EKCwY^Gdl+h2cyPj4S~n}6B}eUb1R%<
z+WcQBpJlQD<HOCa632jwBqUjZrUHQhH;`~ewsNx|(|hL0{5ravj6kUaK+G`NhDVx*
f3F1Brut0{+M3&;*e3!|ds`8uNR5h4@X72$2PY5d?

delta 248
zcmZoEXh~3DU|?W$DortDV9)?EIe-{M3-ADifgA<yi3<9nkw6h<pdbT7F+*`ud2vBf
zPJYtFi;E{4n6OOj7MvWSes%Ik1+j%!*fz6suy8PHPMjdSnOEQu|7LE5b4*Ii3^@#$
z3`w3j`N<%SAmf3i%K~Y=|6std`KnSe%j6nyiOE^w4N?rOKq(;5;06+|$d1`~@jdfo
qeiL0CkTfF@H-H#G0Aw>kX%;9A@(M`YU~-Ph#LbsgN|~S*)BymjsWe9b

diff --git a/pages/im/components/groupUserList.vue b/pages/im/components/groupUserList.vue
index 5a3cfcf..ad222ad 100644
--- a/pages/im/components/groupUserList.vue
+++ b/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: {
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            }
+        },
+        computed: {
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
         },
         created() {
-            this.avatarSize = 126 / 750 * wx.getSystemInfoSync().windowWidth
-            console.log(this.avatarSize)
+            this.avatarSize = 90 / 750 * wx.getSystemInfoSync().windowWidth
         },
         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;
-            }
         }
     }
 
diff --git a/pages/im/group/chat.nvue b/pages/im/group/chat.nvue
index a6d6faa..2c65ff1 100644
--- a/pages/im/group/chat.nvue
+++ b/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;
diff --git a/pages/im/private/chat.nvue b/pages/im/private/chat.nvue
index bf07114..ddbb87a 100644
--- a/pages/im/private/chat.nvue
+++ b/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 class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
+                </view>
+                <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">