144 lines
4.2 KiB
Vue
144 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="members">
|
|
<view class="users">
|
|
<view class="user" v-for="(item, index) in members" :key="index" @click="toUser(item)">
|
|
<u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
|
|
<text class="name">{{ item.name }}</text>
|
|
</view>
|
|
<view class="user">
|
|
<u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee"
|
|
color="#999999"></u-avatar>
|
|
<text class="name">邀请用户</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="">
|
|
<text @click="loadMore" class="loadmore">查看更多群成员</text>
|
|
</view>
|
|
</view>
|
|
|
|
<u-cell-group>
|
|
<u-cell isLink title="群公告" :label="announcement" @click="toAnnouncement"></u-cell>
|
|
<u-cell isLink title="聊天置顶"></u-cell>
|
|
<u-cell isLink title="免打扰"></u-cell>
|
|
</u-cell-group>
|
|
|
|
<u-cell-group v-if="group.is_owner">
|
|
<u-cell isLink title="修改群聊名称" :value="group.name"></u-cell>
|
|
<u-cell isLink title="修改群头像"></u-cell>
|
|
</u-cell-group>
|
|
|
|
<view class="actions u-border-top">
|
|
<view class="action u-border-bottom" @click="onClean">
|
|
<text>清空聊天记录</text>
|
|
</view>
|
|
<view class="action u-border-bottom" v-if="group.is_owner" @click="onDismiss">
|
|
<text>解散群聊</text>
|
|
</view>
|
|
<view class="action u-border-bottom" v-else @click="onQuite">
|
|
<text>删除并退出</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getGroupInfo
|
|
} from '@/apis/interfaces/im.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
targetId: '',
|
|
group: {},
|
|
announcement: '',
|
|
members: []
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.targetId = e.targetId
|
|
getGroupInfo(this.targetId).then(res => {
|
|
this.group = res.group
|
|
this.announcement = res.announcement
|
|
this.members = res.members
|
|
})
|
|
},
|
|
methods: {
|
|
toUser(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/im/friends/info?targetId=' + item.targetId
|
|
})
|
|
},
|
|
inviteUser() {
|
|
|
|
},
|
|
loadMore() {
|
|
uni.navigateTo({
|
|
url: '/pages/im/group/users?targetId=' + this.targetId
|
|
})
|
|
},
|
|
toAnnouncement() {
|
|
uni.navigateTo({
|
|
url: '/pages/im/group/announcement?targetId=' + this.targetId
|
|
})
|
|
},
|
|
onClean() {
|
|
|
|
},
|
|
onDismiss() {
|
|
|
|
},
|
|
onQuite() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.name {
|
|
width: 126rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loadmore {
|
|
font-size: 28rpx;
|
|
color: $text-gray-m;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
margin-top: $padding;
|
|
|
|
.action {
|
|
color: $text-price;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|