群组信息的页面间联动

apis/interfaces/im.js

@@ -107,6 +107,15 @@ const getGroupInfo = (groupId) => {
         url: 'im/groups/' + groupId
     })
 }
+
+/**
+ * 群组基础信息
+ */
+const getGroupBase = (groupId) => {
+    return request({
+        url: 'im/groups/' + groupId+ '/base'
+    })
+}
 
 const getGroupUsers = (groupId) => {
     return request({
@@ -194,7 +203,8 @@ export {
     getMyGroups,
     createGroup,
     updateGroup,
-    getGroupInfo,
+    getGroupInfo,
+    getGroupBase,
     getGroupUsers,
     getGroupAnnouncements,
     createGroupAnnouncement,

pages/im/components/messageCell.vue

@@ -1,12 +1,13 @@
 <template>
     <view class="message--cell">
         <view class="avatar">
-            <u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
+            <u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
             <u-avatar :src="contact(item.targetId).portraitUrl" shape="square" size="44" />
         </view>
         <view class="content">
             <view class="header">
-                <view class="name">{{ contact(item.targetId).name }} <span v-if="item.conversationType === 3" class='qun'>[群]</span></view>
+                <view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3"
+                        class='qun'>[群]</text></view>
                 <view class="time">{{ item.sentTime|timeCustomCN }}</view>
             </view>
             <message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
@@ -41,22 +42,22 @@
 </script>
 
 <style lang="scss" scoped>
-    .message--cell {
+    .message--cell {
-        display: flex;
+        display: flex;
-        padding: 20rpx 0 0 20rpx;
+        padding: 20rpx 0 0 20rpx;
-        
+
         .avatar {
             position: relative;
 
             .u-badge {
                 z-index: 998;
-            }
+            }
         }
 
-        .content {
+        .content {
             margin-left: 30rpx;
             box-sizing: border-box;
-            position: relative;
+            position: relative;
             flex: 1;
 
             border-bottom-width: 0.5px !important;
@@ -69,9 +70,11 @@
 
                 .name {
                     font-size: $title-size + 2;
-                    color: #454545;
+                    color: #454545;
-                    color: #454545;
+                    display: flex;
-                    .qun{
+                    align-items: center;
+
+                    .qun {
                         color: $main-color;
                         font-size: $title-size-m;
                         margin-left: 4px;

pages/im/friends/search.vue

@@ -12,7 +12,7 @@
         <u-sticky>
             <view class="header-search">
                 <u-search placeholder="输入用户账号、手机号" height="74" searchIcon="search" @custom="search"
-                    v-model="searchValue" @search="search" inputAlign="center" bgColor="#f9f9f9" :focus="focused" />
+                    v-model="searchValue" @search="search" bgColor="#f9f9f9" :focus="focused" />
             </view>
         </u-sticky>
         <block v-if="searchResult.length > 0">

pages/im/group/announceCreate.vue

@@ -23,7 +23,8 @@
         },
         methods: {
             onCreate() {
-                createGroupAnnouncement(this.targetId, this.content).then(res => {
+                createGroupAnnouncement(this.targetId, this.content).then(res => {
+                    uni.$emit('groupAnnouncementCreated')
                     uni.showToast({
                         title: '发布成功',
                         success: () => {

pages/im/group/announcement.vue

@@ -38,11 +38,15 @@
                 this.isAdmin = res.group.is_admin
             })
             this.initData()
+            uni.$on('groupAnnouncementCreated', this.initData)
+        },
+        onUnload() {
+            uni.$off('groupAnnouncementCreated')
         },
         onNavigationBarButtonTap() {
             if (this.isAdmin) {
                 uni.navigateTo({
-                    url: '/pages/im/group/announceCreate?targetId=' + this.targetId
+                    url: '/pages/im/group/announceCreate?targetId=' + this.targetId
                 })
             } else {
                 uni.showToast({
@@ -55,7 +59,6 @@
             initData() {
                 getGroupAnnouncements(this.targetId).then(res => {
                     this.announcements = res
-                    console.log(res);
                     this.loading = false
                 })
             },

pages/im/group/chat.nvue

@@ -61,10 +61,12 @@
                 if (msg.targetId == this.targetId) {
                     this.getMessageList()
                 }
-            })
+            })
+            uni.$once('cleanGroupMessage', this.getMessageList)
         },
         onBackPress() {
-            uni.$off('onReceiveMessage')
+            uni.$off('onReceiveMessage')
+            console.log('Off onReceiveMessage');
         },
         onNavigationBarButtonTap() {
             uni.navigateTo({

pages/im/group/info.vue

@@ -11,9 +11,9 @@
                         color="#999999"></u-avatar>
                     <view class="name">邀请用户</view>
                 </view>
-            </view>
+            </view>
-            
+
-            <view @click="loadMore" class="loadmore">查看更多群成员</view>
+            <view @click="loadMore" class="loadmore">查看更多群成员 ></view>
         </view>
 
         <u-cell-group class="cells">
@@ -26,19 +26,19 @@
             </u-cell>
         </u-cell-group>
 
-        <u-cell-group class="cells" v-if="group.is_owner">
+        <u-cell-group class="cells" v-if="group.is_admin">
             <u-cell isLink title="修改群聊名称" :value="group.name" @click="onGroupName"></u-cell>
             <u-cell isLink title="修改群头像">
                 <u-avatar slot="value" size="24" shape="square" :src="group.cover"></u-avatar>
             </u-cell>
         </u-cell-group>
 
-        <view class="cells actions u-border-top">
+        <view class="cells actions u-border-top" v-if="loaded">
             <view class="action u-border-bottom" @click="onClean">清空聊天记录</view>
             <view class="action u-border-bottom" v-if="group.is_owner" @click="onDismiss">解散群聊</view>
             <view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view>
-        </view>
+        </view>
-        
+
     </view>
 </template>
 
@@ -58,16 +58,11 @@
                 members: [],
                 status: false,
                 isTop: false,
+                loaded: false
             }
         },
         onLoad(e) {
             this.targetId = e.targetId
-            getGroupInfo(this.targetId).then(res => {
-                this.group = res.group
-                console.log(this.group);
-                this.announcement = res.announcement
-                this.members = res.members
-            })
             RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
                 status
             }) => {
@@ -80,9 +75,22 @@
                 if (code == 0) {
                     this.isTop = conversation.isTop
                 }
-            })
+            })
+            this.initData()
+            uni.$on('groupAnnouncementCreated', this.initData)
+        },
+        onUnload() {
+            uni.$off('groupAnnouncementCreated')
         },
         methods: {
+            initData() {
+                getGroupInfo(this.targetId).then(res => {
+                    this.group = res.group
+                    this.announcement = res.announcement
+                    this.members = res.members
+                    this.loaded = true
+                })
+            },
             setStatus() {
                 RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status,
                     ({
@@ -132,6 +140,7 @@
                                     icon: 'none',
                                     title: '清空成功'
                                 })
+                                uni.$emit('cleanGroupMessage')
                             })
                         }
                     }
@@ -178,23 +187,26 @@
                 width: 126rpx;
                 margin-left: 20rpx;
                 margin-bottom: 20rpx;
+                display: flex;
+                flex-direction: column;
                 justify-content: center;
                 align-items: center;
 
-                .name {
+                .name {
+                    color: $text-gray-m;
                     width: 126rpx;
                     text-align: center;
-                    font-size: 28rpx;
+                    font-size: 26rpx;
                     overflow: hidden;
-                    text-overflow: ellipsis;
+                    text-overflow: ellipsis;
-                    white-space: nowrap;
+                    white-space: nowrap;
-                    word-break: break-word;
+                    word-break: break-word;
                 }
             }
         }
 
         .loadmore {
-            font-size: 28rpx;
+            font-size: 26rpx;
             color: $text-gray-m;
             text-align: center;
         }

pages/im/group/users.vue

@@ -1,17 +1,28 @@
 <template>
     <view class="members">
         <view class="users">
-            <view class="user" v-for="(item, index) in members" :key="index" @click="toUser(item)">
+            <view class="user" v-if="isAdmin">
+                <u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
+                </u-avatar>
+                <view class="name">邀请用户</view>
+            </view>
+            <view :class="['user', {'active': item.targetId == currentUser.targetId}]" @longpress="showAction(item)"
+                v-for="(item, index) in members" :key="index" @click="toUser(item)">
                 <u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
                 <view class="name">{{ item.name }}</view>
             </view>
         </view>
+        <view class="loadmore">成员总数（{{ members.length }}）</view>
+
+        <u-action-sheet :actions="userActions" :title="actionTitle" cancelText="取消" @close="hideAction"
+            @select="doAction" :show="actionShow">
+        </u-action-sheet>
     </view>
 </template>
 
 <script>
-    import {
+    import {
-        getGroupInfo,
+        getGroupBase,
         getGroupUsers
     } from '@/apis/interfaces/im.js'
 
@@ -19,24 +30,90 @@
         data() {
             return {
                 targetId: '',
-                members: []
+                members: [],
+                isOwner: false,
+                isAdmin: false,
+                actionShow: false,
+                userActions: [{
+                        type: 0,
+                        name: '设置管理员',
+                        disabled: false
+                    },
+                    {
+                        type: 1,
+                        name: '解除管理员',
+                        disabled: false
+                    },
+                    {
+                        type: 2,
+                        name: '移除成员',
+                        disabled: false
+                    }
+                ],
+                actionTitle: '',
+                currentUser: {}
             }
         },
         onLoad(e) {
-            this.targetId = e.targetId
+            this.targetId = e.targetId
-            getGroupInfo(this.targetId).then(res => {
+            getGroupBase(this.targetId).then(res => {
-            
+                this.isOwner = res.is_owner
-            })
+                this.isAdmin = res.is_admin
-            getGroupUsers(this.targetId).then(res => {
+                if (this.isOwner) {
-                this.members = res
+                    this.userActions.push({
+                        type: 3,
+                        name: '转移群主',
+                        disabled: false
+                    })
+                }
             })
-        },
+            this.getUserList()
-        methods: {
+        },
-            toUser(item) {
+        methods: {
-                uni.navigateTo({
+            getUserList() {
-                    url: '/pages/im/friends/info?targetId=' + item.targetId
+                getGroupUsers(this.targetId).then(res => {
-                })
+                    this.members = res
-            }
+                })
+            },
+            toUser(item) {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + item.targetId
+                })
+            },
+            showAction(item) {
+                this.currentUser = item
+                this.actionTitle = item.name
+                this.actionShow = true
+                // 根据当前用户，是不是管理，来控制按钮的可用性
+                this.userActions[0].disabled = true
+            },
+            hideAction(item) {
+                this.actionShow = false
+                this.actionTitle = ''
+                this.currentUser = {}
+                this.userActions[0].disabled = false
+                this.userActions[1].disabled = false
+            },
+            doAction(e) {
+                switch (e.type) {
+                    case 0:
+                        // 设置管理
+                        break;
+                    case 1:
+                        // 取消管理
+                        break;
+                    case 2:
+                        // 移除成员
+                        break;
+                    case 3:
+                        // 转移管理员
+                        break;
+                }
+                this.getUserList()
+            },
+            inviteUser() {
+
+            }
         }
     }
 </script>
@@ -56,19 +133,32 @@
                 width: 126rpx;
                 margin-left: 20rpx;
                 margin-bottom: 20rpx;
+                display: flex;
+                flex-direction: column;
                 justify-content: center;
                 align-items: center;
 
-                .name {
+                &.active {
-                    width: 126rpx;
+                    background-color: $window-color;
-                    text-align: center;
+                }
-                    font-size: 28rpx;
+
-                    overflow: hidden;
+                .name {
-                    text-overflow: ellipsis;
+                    color: $text-gray-m;
-                    white-space: nowrap;
+                    width: 126rpx;
-                    word-break: break-word;
+                    text-align: center;
+                    font-size: 26rpx;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    word-break: break-word;
                 }
             }
         }
+
+        .loadmore {
+            font-size: 26rpx;
+            color: $text-gray-m;
+            text-align: center;
+        }
     }
 </style>