diff --git a/apis/interfaces/im.js b/apis/interfaces/im.js
index deb8b1c..ba17956 100644
--- a/apis/interfaces/im.js
+++ b/apis/interfaces/im.js
@@ -259,7 +259,7 @@ const removeGroupAdmin = (groupId, userId) => {
  */
 const transferGroupOwner = (groupId, userId) => {
     return request({
-        method: 'DELETE',
+        method: 'POST',
         url: 'im/groups/' + groupId + '/owner/' + userId
     })
 }
diff --git a/pages/im/components/groupUserList.vue b/pages/im/components/groupUserList.vue
new file mode 100644
index 0000000..c328223
--- /dev/null
+++ b/pages/im/components/groupUserList.vue
@@ -0,0 +1,300 @@
+<template>
+    <view class="members">
+        <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="44" shape="square" :src="item.portraitUrl"></u-avatar>
+                <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" size="44" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
+                </u-avatar>
+                <view class="name">邀请好友</view>
+            </view>
+        </view>
+
+        <view @click="loadMore" v-if="members > users.length" class="loadmore">查看更多群成员 ></view>
+
+        <u-action-sheet :actions="actionMap" :title="actionTitle" cancelText="取消" @close="hideAction"
+            @select="handleAction" :show="actionShow">
+        </u-action-sheet>
+    </view>
+</template>
+
+<script>
+    import {
+        getGroupUsers,
+        getGroupBase,
+
+        removeGroupUser,
+        setGroupAdmin,
+        removeGroupAdmin,
+        transferGroupOwner
+    } from '@/apis/interfaces/im.js'
+
+    export default {
+        props: {
+            targetId: {
+                type: String,
+                default: ''
+            },
+            count: {
+                type: Number,
+                default: 0
+            }
+        },
+        data() {
+            return {
+                users: [],
+                isOwner: false,
+                isAdmin: false,
+                adminUid: 0,
+                members: 0,
+                actionShow: false,
+                actionMap: [],
+                actionTitle: '',
+                currentUser: {}
+            }
+        },
+        mounted() {
+            this.initGroupInfo()
+            this.initUsers()
+        },
+        methods: {
+            initGroupInfo() {
+                getGroupBase(this.targetId).then(res => {
+                    this.isOwner = res.is_owner
+                    this.isAdmin = res.is_admin
+                    this.adminUid = res.user_id
+                    this.members = res.members
+                })
+            },
+            initUsers() {
+                getGroupUsers(this.targetId, this.count).then(res => {
+                    this.users = res
+                    console.log('群成员列表', res);
+                })
+            },
+            hideAction(item) {
+                this.actionShow = false
+                this.actionTitle = ''
+                this.currentUser = {}
+            },
+            showAction(item) {
+                this.currentUser = item
+                this.actionTitle = item.name
+                // 只有管理员以上才会弹窗
+                if (this.isAdmin) {
+                    if (this.isOwner) {
+                        if (!item.is_admin) {
+                            this.actionMap = [{
+                                key: 0,
+                                name: '移除成员',
+                                disabled: false
+                            }, {
+                                key: 1,
+                                name: '设置管理',
+                                disabled: false
+                            }, {
+                                key: 2,
+                                name: '转移群主',
+                                disabled: false
+                            }]
+                        } else {
+                            this.actionMap = [{
+                                key: 0,
+                                name: '移除成员',
+                                disabled: false
+                            }, {
+                                key: 4,
+                                name: '取消管理',
+                                disabled: false
+                            }, {
+                                key: 2,
+                                name: '转移群主',
+                                disabled: false
+                            }]
+                        }
+                    } else {
+                        this.actionMap = [{
+                            key: 0,
+                            name: '移除成员',
+                            disabled: false
+                        }]
+                    }
+                    this.actionShow = true
+                }
+            },
+            handleAction(e) {
+                switch (e.key) {
+                    case 0:
+                        removeGroupUser(this.targetId, this.currentUser.targetId).then(res => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '成员移除成功'
+                            })
+                        }).catch(err => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: err.message
+                            })
+                        }).finally(() => {
+                            this.initUsers()
+                        })
+                        break;
+                    case 1:
+                        setGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '设置管理成功'
+                            })
+                        }).catch(err => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: err.message
+                            })
+                        }).finally(() => {
+                            this.initUsers()
+                        })
+                        break;
+                    case 4:
+                        removeGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '取消管理员成功'
+                            })
+                        }).catch(err => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: err.message
+                            })
+                        }).finally(() => {
+                            this.initUsers()
+                        })
+                        break;
+                    case 2:
+                        uni.showModal({
+                            title: '转让群主',
+                            content: '这个操作不可逆转，确定要转让群主身份么？',
+                            success: (res) => {
+                                if (res.confirm) {
+                                    transferGroupOwner(this.targetId, this.currentUser.targetId).then(
+                                        res => {
+                                            uni.showToast({
+                                                icon: 'none',
+                                                title: '群主转让成功'
+                                            })
+                                        }).catch(err => {
+                                        uni.showToast({
+                                            icon: 'none',
+                                            title: err.message
+                                        })
+                                    }).finally(() => {
+                                        this.initUsers()
+                                        this.initGroupInfo()
+                                    })
+                                }
+                            }
+                        })
+                        break;
+                }
+            },
+            inviteUser() {
+                uni.navigateTo({
+                    url: '/pages/im/group/invite?targetId=' + this.targetId
+                })
+            },
+            loadMore() {
+                uni.navigateTo({
+                    url: '/pages/im/group/users?targetId=' + this.targetId
+                })
+            },
+            toUser(item) {
+                if (item.targetId == this.$store.getters.sender.userId) {
+                    uni.navigateTo({
+                        url: '/pages/im/friends/mine?targetId=' + item.targetId
+                    })
+                } else {
+                    uni.navigateTo({
+                        url: '/pages/im/friends/info?targetId=' + item.targetId
+                    })
+                }
+            }
+        }
+    }
+</script>
+
+
+<style lang="scss" scoped>
+    .members {
+
+        .users {
+            flex-direction: row;
+            flex-wrap: wrap;
+            display: flex;
+            padding: 20rpx 0;
+
+            .user {
+                overflow: hidden;
+                position: relative;
+                width: 126rpx;
+                margin-left: 20rpx;
+                margin-bottom: 20rpx;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                border-radius: 0 10rpx 0 0;
+
+                &.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;
+                }
+
+                .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;
+                }
+            }
+        }
+
+        .loadmore {
+            font-size: 26rpx;
+            color: $text-gray-m;
+            text-align: center;
+        }
+    }
+</style>
diff --git a/pages/im/group/info.vue b/pages/im/group/info.vue
index f716b78..b86f58a 100644
--- a/pages/im/group/info.vue
+++ b/pages/im/group/info.vue
@@ -1,22 +1,7 @@
 <template>
     <view class="container">
         <view class="members u-border-bottom">
-            <view class="users">
-                <view :class="['user', {'active': item.targetId == currentUser.targetId}]"
-                    v-for="(item, index) in users" :key="index" @click="toUser(item)"
-                    @longpress="showUserActionSheet(item)">
-                    <u-avatar size="44" shape="square" :src="item.portraitUrl">
-                    </u-avatar>
-                    <view class="name">{{ item.name }}</view>
-                </view>
-                <view class="user" v-if="group.can_invite">
-                    <u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee"
-                        color="#999999"></u-avatar>
-                    <view class="name">邀请好友</view>
-                </view>
-            </view>
-
-            <view @click="loadMore" v-if="members > users.length" class="loadmore">查看更多群成员 ></view>
+            <group-user-list :targetId="targetId" :count="14" />
         </view>
 
         <u-cell-group class="cells">
@@ -60,10 +45,6 @@
         <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions"
             @close="showActions=false">
         </u-action-sheet>
-
-        <u-action-sheet @select="handleUserAction" :actions="userActionMap" cancelText="取消" :show="showUserAction"
-            @close="hideUserAction">
-        </u-action-sheet>
     </view>
 </template>
 
@@ -72,27 +53,24 @@
         getGroupInfo,
         updateGroup,
         quitGroup,
-        removeGroupUser,
-        setGroupAdmin,
-        removeGroupAdmin,
-        dismissGroup,
-        transferGroupOwner,
-        getGroupUsers
+        dismissGroup
     } from '@/apis/interfaces/im.js'
     import {
         uploads
     } from '@/apis/interfaces/uploading'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import groupUserList from '../components/groupUserList'
 
     export default {
+        components: {
+            groupUserList
+        },
         data() {
             return {
                 targetId: '',
                 group: {},
                 conversationType: 3,
                 announcement: '',
-                users: [],
-                members: 0,
                 status: false,
                 isTop: false,
                 loaded: false,
@@ -102,24 +80,7 @@
                 qrContent: 'JOINGROUP|',
                 joinType: '',
                 joinTypeMap: [],
-                showActions: false,
-                showUserAction: false,
-                userActionMap: [{
-                        key: 0,
-                        name: '移除成员',
-                        disabled: false
-                    }, {
-                        key: 1,
-                        name: '设置管理',
-                        disabled: true
-                    },
-                    {
-                        key: 2,
-                        name: '转移群主',
-                        disabled: true
-                    }
-                ],
-                currentUser: {}
+                showActions: false
             }
         },
         onLoad(e) {
@@ -139,18 +100,12 @@
                 }
             })
             this.initData()
-            this.initUsers()
             uni.$on('groupAnnouncementCreated', this.initData)
         },
         onUnload() {
             uni.$off('groupAnnouncementCreated')
         },
         methods: {
-            initUsers() {
-                getGroupUsers(this.targetId, 14).then(res => {
-                    this.users = res
-                })
-            },
             initData() {
                 getGroupInfo(this.targetId).then(res => {
                     this.group = res.group
@@ -190,27 +145,6 @@
                     })
                 })
             },
-            toUser(item) {
-                if (item.targetId == this.$store.getters.sender.userId) {
-                    uni.navigateTo({
-                        url: '/pages/im/friends/mine?targetId=' + item.targetId
-                    })
-                } else {
-                    uni.navigateTo({
-                        url: '/pages/im/friends/info?targetId=' + item.targetId
-                    })
-                }
-            },
-            inviteUser() {
-                uni.navigateTo({
-                    url: '/pages/im/group/invite?targetId=' + this.targetId
-                })
-            },
-            loadMore() {
-                uni.navigateTo({
-                    url: '/pages/im/group/users?targetId=' + this.targetId
-                })
-            },
             toAnnouncement() {
                 uni.navigateTo({
                     url: '/pages/im/group/announcement?targetId=' + this.targetId
@@ -360,86 +294,19 @@
                                 uni.showToast({
                                     icon: 'none',
                                     title: '退出群聊成功'
-                                })
-                                // 移除指定的会话
-                                RongIMLib.removeConversation(this.conversationType, this.targetId)
-                                
+                                })
+                                // 移除指定的会话
+                                RongIMLib.removeConversation(this.conversationType, this.targetId)
+
                                 uni.switchTab({
                                     url: '/pages/im/index'
                                 })
-                            }).catch(err => {
-                                console.log(err);
+                            }).catch(err => {
+                                console.log(err);
                             })
                         }
                     }
                 })
-            },
-            showUserActionSheet(item) {
-                this.currentUser = item
-                // 只有管理员以上才会弹窗
-                if (this.group.is_admin) {
-                    if (this.group.is_owner) {
-                        this.userActionMap.map((item) => {
-                            item.disabled = false
-                            return item
-                        })
-                    }
-                    this.showUserAction = true
-                }
-            },
-            hideUserAction() {
-                this.currentUser = {}
-                this.showUserAction = false
-            },
-            handleUserAction(e) {
-                switch (e.key) {
-                    case 0:
-                        removeGroupUser(this.targetId, this.currentUser.targetId).then(res => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '成员移除成功'
-                            })
-                        }).catch(err => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: err.message
-                            })
-                        }).finally(() => {
-                            this.initUsers()
-                        })
-                        break;
-                    case 1:
-                        setGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '设置管理成功'
-                            })
-                        }).catch(err => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: err.message
-                            })
-                        }).finally(() => {
-                            this.initUsers()
-                        })
-                        break;
-                    case 2:
-                        transferGroupOwner(this.targetId, this.currentUser.targetId).then(res => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '群主转让成功'
-                            })
-                        }).catch(err => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: err.message
-                            })
-                        }).finally(() => {
-                            this.initUsers()
-                            this.initData()
-                        })
-                        break;
-                }
             }
         }
     }
@@ -459,44 +326,6 @@
     .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;
-        }
     }
 
     .actions {
diff --git a/pages/im/group/users.vue b/pages/im/group/users.vue
index 6daa258..f356d8b 100644
--- a/pages/im/group/users.vue
+++ b/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>
diff --git a/lib/emoji.js b/utils/emoji.js
similarity index 100%
rename from lib/emoji.js
rename to utils/emoji.js
diff --git a/utils/im/index.js b/utils/im/index.js
index 7fdf5dc..e68329b 100644
--- a/utils/im/index.js
+++ b/utils/im/index.js
@@ -210,7 +210,6 @@ const newMessage = (msg) => {
     }) => {
         if (code === 0) {
             if (status) {
-                uni.vibrateLong()
                 triTone()
             }
         }