群组信息的页面间联动

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 {
-        getGroupInfo,
+    import {
+        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
-            getGroupInfo(this.targetId).then(res => {
-            
-            })
-            getGroupUsers(this.targetId).then(res => {
-                this.members = res
+            this.targetId = e.targetId
+            getGroupBase(this.targetId).then(res => {
+                this.isOwner = res.is_owner
+                this.isAdmin = res.is_admin
+                if (this.isOwner) {
+                    this.userActions.push({
+                        type: 3,
+                        name: '转移群主',
+                        disabled: false
+                    })
+                }
             })
-        },
-        methods: {
-            toUser(item) {
-                uni.navigateTo({
-                    url: '/pages/im/friends/info?targetId=' + item.targetId
-                })
-            }
+            this.getUserList()
+        },
+        methods: {
+            getUserList() {
+                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 {
-                    width: 126rpx;
-                    text-align: center;
-                    font-size: 28rpx;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    word-break: break-word;
+                &.active {
+                    background-color: $window-color;
+                }
+
+                .name {
+                    color: $text-gray-m;
+                    width: 126rpx;
+                    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>