群成员组件抽离

pages/im/group/users.vue

@@ -1,164 +1,24 @@
 <template>
-    <view class="members">
-        <view class="users">
-            <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>
+    <group-user-list :targetId="targetId" />
 </template>
 
 <script>
-    import {
-        getGroupBase,
-        getGroupUsers
-    } from '@/apis/interfaces/im.js'
-
+    import groupUserList from '../components/groupUserList'
     export default {
+        components: {
+            groupUserList
+        },
         data() {
             return {
                 targetId: '',
-                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
-            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
-                    })
-                }
-            })
-            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>
 
 <style lang="scss" scoped>
-    .members {
-        background-color: white;
-        padding-bottom: 40rpx;
 
-        .users {
-            flex-direction: row;
-            flex-wrap: wrap;
-            display: flex;
-            padding: 20rpx 0;
-
-            .user {
-                width: 126rpx;
-                margin-left: 20rpx;
-                margin-bottom: 20rpx;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-
-                &.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>