165 lines
5.1 KiB
Vue
165 lines
5.1 KiB
Vue
<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>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getGroupBase,
|
||
getGroupUsers
|
||
} from '@/apis/interfaces/im.js'
|
||
|
||
export default {
|
||
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>
|