xsx
3 years ago
8 changed files with 771 additions and 6 deletions
@ -0,0 +1,97 @@ |
|||||
|
<template> |
||||
|
<view class="page friend-add"> |
||||
|
<view class="search-bar"> |
||||
|
<uni-search-bar v-model="searchText" :focus="true" @confirm="onSearch()" @cancel="onCancel()" |
||||
|
placeholder="用户名/昵称"></uni-search-bar> |
||||
|
</view> |
||||
|
<view class="user-items"> |
||||
|
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true"> |
||||
|
<view v-for="(user) in users" :key="user.id" v-show="user.id != $store.state.userStore.userInfo.id"> |
||||
|
<uni-list-chat :avatar="user.headImage" :title="user.userName" :note="'昵称:'+user.nickName" |
||||
|
:clickable="true" @click="onShowUserInfo(user)"> |
||||
|
<view class="chat-custom-right"> |
||||
|
<button type="primary" v-show="!isFriend(user.id)" size="mini" |
||||
|
@click.stop="onAddFriend(user)">加为好友</button> |
||||
|
<button type="default" v-show="isFriend(user.id)" size="mini" disabled>已添加</button> |
||||
|
</view> |
||||
|
</uni-list-chat> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
searchText: "", |
||||
|
users: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onCancel() { |
||||
|
uni.navigateBack(); |
||||
|
}, |
||||
|
onSearch() { |
||||
|
console.log("onSearch") |
||||
|
this.$http({ |
||||
|
url: "/user/findByName?name=" + this.searchText, |
||||
|
method: "GET" |
||||
|
}).then((data) => { |
||||
|
this.users = data; |
||||
|
}) |
||||
|
}, |
||||
|
onAddFriend(user) { |
||||
|
this.$http({ |
||||
|
url: "/friend/add?friendId=" + user.id, |
||||
|
method: "POST" |
||||
|
}).then((data) => { |
||||
|
let friend = { |
||||
|
id: user.id, |
||||
|
nickName: user.nickName, |
||||
|
headImage: user.headImage, |
||||
|
online: user.online |
||||
|
} |
||||
|
this.$store.commit("addFriend", friend); |
||||
|
uni.showToast({ |
||||
|
title: "添加成功，对方已成为您的好友", |
||||
|
icon: "none" |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
onShowUserInfo(user) { |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/common/user-info?id=" + user.id |
||||
|
}) |
||||
|
}, |
||||
|
isFriend(userId) { |
||||
|
let friends = this.$store.state.friendStore.friends; |
||||
|
let friend = friends.find((f) => f.id == userId); |
||||
|
return friend != undefined; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.friend-add { |
||||
|
position: relative; |
||||
|
border: #dddddd solid 1px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.search-bar { |
||||
|
background: white; |
||||
|
} |
||||
|
.user-items{ |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
.scroll-bar { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,146 @@ |
|||||
|
<template> |
||||
|
<view class="page group-edit"> |
||||
|
<uni-forms ref="form" :modelValue="group" :rules="rules" validate-trigger="bind" label-position="top" |
||||
|
label-width="100%"> |
||||
|
<uni-forms-item label="群聊头像:" name="headImage"> |
||||
|
<image-upload :disabled="!isOwner" :onSuccess="onUnloadImageSuccess"> |
||||
|
<image :src="group.headImage" class="head-image"></image> |
||||
|
</image-upload> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="群聊名称:" name="name" :required="true"> |
||||
|
<uni-easyinput type="text" v-model="group.name" :disabled="!isOwner" placeholder="请输入群聊名称" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="群聊备注:" name="remark"> |
||||
|
<uni-easyinput v-model="group.remark" type="text" placeholder="请输入群聊备注" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="我在本群的昵称:" name="email"> |
||||
|
<uni-easyinput v-model="group.aliasName" type="text" placeholder="请输入群聊昵称" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="群公告:" name="notice"> |
||||
|
<uni-easyinput type="textarea" v-model="group.notice" :disabled="!isOwner" placeholder="请输入群公告" /> |
||||
|
</uni-forms-item> |
||||
|
</uni-forms> |
||||
|
<button type="primary" @click="submit()">提交</button> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
group: {}, |
||||
|
rules: { |
||||
|
name: { |
||||
|
rules: [{ |
||||
|
required: true, |
||||
|
errorMessage: '请输入群聊名称', |
||||
|
}] |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
submit() { |
||||
|
if (this.group.id) { |
||||
|
this.modifyGroup(); |
||||
|
} else { |
||||
|
this.createNewGroup(); |
||||
|
} |
||||
|
}, |
||||
|
onUnloadImageSuccess(file, res) { |
||||
|
console.log(res) |
||||
|
this.group.headImage = res.data.originUrl; |
||||
|
this.group.headImageThumb = res.data.thumbUrl; |
||||
|
}, |
||||
|
modifyGroup() { |
||||
|
this.$http({ |
||||
|
url: "/group/modify", |
||||
|
method: "PUT", |
||||
|
data: this.group |
||||
|
}).then((group) => { |
||||
|
this.$store.commit("updateGroup", group); |
||||
|
uni.showToast({ |
||||
|
title: "修改群聊信息成功", |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
setTimeout(()=>{ |
||||
|
uni.navigateBack(); |
||||
|
},1000); |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
createNewGroup() { |
||||
|
this.$http({ |
||||
|
url: "/group/create", |
||||
|
method: 'POST', |
||||
|
data: this.group |
||||
|
}).then((group) => { |
||||
|
this.$store.commit("addGroup", group); |
||||
|
uni.showToast({ |
||||
|
title: `群聊创建成功，快邀请小伙伴进群吧`, |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
setTimeout(()=>{ |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/group/group-info?id="+group.id |
||||
|
}); |
||||
|
},2000) |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
loadGroupInfo(id) { |
||||
|
this.$http({ |
||||
|
url: `/group/find/${id}`, |
||||
|
method: 'GET' |
||||
|
}).then((group) => { |
||||
|
this.group = group; |
||||
|
// 更新聊天页面的群聊信息 |
||||
|
this.$store.commit("updateChatFromGroup", group); |
||||
|
// 更新聊天列表的群聊信息 |
||||
|
this.$store.commit("updateGroup", group); |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
initNewGroup() { |
||||
|
let userInfo = this.$store.state.userStore.userInfo; |
||||
|
this.group = { |
||||
|
name: `${userInfo.userName}创建的群聊`, |
||||
|
headImage: userInfo.headImage, |
||||
|
headImageThumb: userInfo.headImageThumb, |
||||
|
aliasName: userInfo.nickName, |
||||
|
ownerId: this.$store.state.userStore.userInfo.id |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
isOwner() { |
||||
|
return this.$store.state.userStore.userInfo.id == this.group.ownerId |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
if (options.id) { |
||||
|
// 修改群聊 |
||||
|
this.loadGroupInfo(options.id); |
||||
|
} else { |
||||
|
// 创建群聊 |
||||
|
this.initNewGroup(); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.group-edit { |
||||
|
padding: 20rpx; |
||||
|
|
||||
|
.head-image { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,283 @@ |
|||||
|
<template> |
||||
|
<view class="page group-info"> |
||||
|
<view class="group-members"> |
||||
|
<view class="member-items"> |
||||
|
<view v-for="(member,idx) in groupMembers" :key="idx"> |
||||
|
<view class="member-item" v-if="idx<9" @click="onShowUserInfo(member.userId)"> |
||||
|
<view class="avatar"> |
||||
|
<image class="head-image" :src="member.headImage" mode="aspectFill"> </image> |
||||
|
</view> |
||||
|
<view class="text"> |
||||
|
<text>{{member.aliasName}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="invite-btn" @click="onInviteMember()"> |
||||
|
<view class="iconfont icon-add-circle"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="member-more" @click="onShowMoreMmeber()">查看更多群成员 ></view> |
||||
|
</view> |
||||
|
<view class="group-detail"> |
||||
|
<uni-section title="群聊名称:" titleFontSize="30rpx"> |
||||
|
<template v-slot:right> |
||||
|
<text>{{group.name}}</text> |
||||
|
</template> |
||||
|
</uni-section> |
||||
|
<uni-section title="群主:" titleFontSize="30rpx"> |
||||
|
<template v-slot:right> |
||||
|
<text>{{ownerName}}</text> |
||||
|
</template> |
||||
|
</uni-section> |
||||
|
|
||||
|
<uni-section title="群聊备注:" titleFontSize="30rpx"> |
||||
|
<template v-slot:right> |
||||
|
<text> {{group.remark}}</text> |
||||
|
</template> |
||||
|
</uni-section> |
||||
|
<uni-section title="我在本群的昵称:" titleFontSize="30rpx"> |
||||
|
<template v-slot:right> |
||||
|
<text> {{group.aliasName}}</text> |
||||
|
</template> |
||||
|
</uni-section> |
||||
|
<uni-section title="群公告:" titleFontSize="30rpx"> |
||||
|
<uni-notice-bar :text="group.notice" /> |
||||
|
</uni-section> |
||||
|
<view class="group-edit" @click="onEditGroup()">修改群聊资料 > </view> |
||||
|
</view> |
||||
|
<view class="btn-group"> |
||||
|
<button class="btn" type="primary" @click="onSendMessage()">发消息</button> |
||||
|
<button class="btn" v-show="!isOwner" type="warn" @click="onQuitGroup()">退出群聊</button> |
||||
|
<button class="btn" v-show="isOwner" type="warn" @click="onDissolveGroup()">解散群聊</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
group: {}, |
||||
|
groupMembers: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onFocusSearch() {}, |
||||
|
onInviteMember(){ |
||||
|
uni.navigateTo({ |
||||
|
url: `/pages/group/group-invite?id=${this.group.id}` |
||||
|
}) |
||||
|
}, |
||||
|
onShowUserInfo(userId) { |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/common/user-info?id=" + userId |
||||
|
}) |
||||
|
}, |
||||
|
onShowMoreMmeber(){ |
||||
|
uni.navigateTo({ |
||||
|
url: `/pages/group/group-member?id=${this.group.id}` |
||||
|
}) |
||||
|
}, |
||||
|
onEditGroup() { |
||||
|
uni.navigateTo({ |
||||
|
url: `/pages/group/group-edit?id=${this.group.id}` |
||||
|
}) |
||||
|
}, |
||||
|
onSendMessage() { |
||||
|
let chat = { |
||||
|
type: 'GROUP', |
||||
|
targetId: this.group.id, |
||||
|
showName: this.group.remark, |
||||
|
headImage: this.group.headImage, |
||||
|
}; |
||||
|
this.$store.commit("openChat", chat); |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/chat/chat-box?chatIdx=0" |
||||
|
}) |
||||
|
}, |
||||
|
onQuitGroup() { |
||||
|
uni.showModal({ |
||||
|
title: '确认退出?', |
||||
|
content: `退出群聊后将不再接受群里的消息，确认退出吗?`, |
||||
|
success: () => { |
||||
|
this.$http({ |
||||
|
url: `/group/quit/${this.group.id}`, |
||||
|
method: 'DELETE' |
||||
|
}).then(() => { |
||||
|
this.$store.commit("removeGroup", this.group.id); |
||||
|
this.$store.commit("removeGroupChat", this.group.id); |
||||
|
uni.showModal({ |
||||
|
title: `退出成功`, |
||||
|
content: `您已退出群聊'${this.group.name}'`, |
||||
|
showCancel: false, |
||||
|
success:()=>{ |
||||
|
uni.navigateBack(); |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
onDissolveGroup() { |
||||
|
uni.showModal({ |
||||
|
title: '确认解散?', |
||||
|
content: `确认要解散群聊'${this.group.name}'吗?`, |
||||
|
success:()=>{ |
||||
|
this.$http({ |
||||
|
url: `/group/delete/${this.group.id}`, |
||||
|
method: 'delete' |
||||
|
}).then(() => { |
||||
|
this.$store.commit("removeGroup", this.group.id); |
||||
|
this.$store.commit("removeGroupChat", this.group.id); |
||||
|
uni.showModal({ |
||||
|
title: `解散成功`, |
||||
|
content: `群聊'${this.group.name}'已解散`, |
||||
|
showCancel: false, |
||||
|
success:()=>{ |
||||
|
uni.navigateBack(); |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
loadGroupInfo(id) { |
||||
|
this.$http({ |
||||
|
url: `/group/find/${id}`, |
||||
|
method: 'GET' |
||||
|
}).then((group) => { |
||||
|
this.group = group; |
||||
|
// 更新聊天页面的群聊信息 |
||||
|
this.$store.commit("updateChatFromGroup", group); |
||||
|
// 更新聊天列表的群聊信息 |
||||
|
this.$store.commit("updateGroup", group); |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
loadGroupMembers(id) { |
||||
|
this.$http({ |
||||
|
url: `/group/members/${id}`, |
||||
|
method: "GET" |
||||
|
}).then((members) => { |
||||
|
this.groupMembers = members.filter(m => !m.quit); |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
ownerName() { |
||||
|
let member = this.groupMembers.find((m) => m.userId == this.group.ownerId); |
||||
|
return member && member.aliasName; |
||||
|
}, |
||||
|
isOwner() { |
||||
|
return this.group.ownerId == this.$store.state.userStore.userInfo.id; |
||||
|
}, |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
// 查询群聊信息 |
||||
|
this.loadGroupInfo(options.id); |
||||
|
// 查询群聊成员 |
||||
|
this.loadGroupMembers(options.id) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.group-info { |
||||
|
.group-members { |
||||
|
padding: 30rpx; |
||||
|
background: white; |
||||
|
|
||||
|
.member-items { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.member-item { |
||||
|
width: 120rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
margin: 8rpx 2rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
align-items: center; |
||||
|
padding-right: 5px; |
||||
|
background-color: #fafafa; |
||||
|
white-space: nowrap; |
||||
|
|
||||
|
.avatar { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
|
||||
|
.head-image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 10%; |
||||
|
border: #d8d8d8 solid 1px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
width: 100%; |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
text-align: center; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.invite-btn { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
margin: 10rpx; |
||||
|
border: #686868 dashed 2px; |
||||
|
border-radius: 10%; |
||||
|
|
||||
|
.iconfont { |
||||
|
font-size: 70rpx; |
||||
|
color: #888888; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.member-more { |
||||
|
padding: 20rpx; |
||||
|
text-align: center; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.group-detail { |
||||
|
margin-top: 30rpx; |
||||
|
padding: 30rpx; |
||||
|
background: white; |
||||
|
|
||||
|
|
||||
|
.group-edit { |
||||
|
padding: 20rpx; |
||||
|
text-align: center; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.btn-group { |
||||
|
margin-top: 30rpx; |
||||
|
padding: 30rpx; |
||||
|
background: white; |
||||
|
|
||||
|
|
||||
|
.btn { |
||||
|
margin: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,130 @@ |
|||||
|
<template> |
||||
|
<view class="page group-invite"> |
||||
|
<view class="search-bar"> |
||||
|
<uni-search-bar v-model="searchText" cancelButton="none" placeholder="输入好友昵称搜索"></uni-search-bar> |
||||
|
</view> |
||||
|
<view class="friend-items"> |
||||
|
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true"> |
||||
|
<view v-for="friend in friendItems" |
||||
|
v-show="!searchText || friend.nickName.startsWith(searchText)" :key="friend.id"> |
||||
|
<uni-list-chat :avatar="friend.headImage" :title="friend.nickName" |
||||
|
:clickable="true" @click="onShowUserInfo(friend.id)"> |
||||
|
<view class="chat-custom-right"> |
||||
|
<radio :checked="friend.checked" :disabled="friend.disabled" @click.stop="onSwitchChecked(friend)"/> |
||||
|
</view> |
||||
|
</uni-list-chat> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
<view> |
||||
|
<button type="primary" :disabled="inviteSize==0" @click="onInviteFriends()">邀请({{inviteSize}}) </button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
groupId: null, |
||||
|
searchText: "", |
||||
|
groupMembers: [], |
||||
|
friendItems:[] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onInviteFriends(){ |
||||
|
let inviteVo = { |
||||
|
groupId: this.groupId, |
||||
|
friendIds: [] |
||||
|
} |
||||
|
this.friendItems.forEach((f) => { |
||||
|
if (f.checked && !f.disabled) { |
||||
|
inviteVo.friendIds.push(f.id); |
||||
|
} |
||||
|
}) |
||||
|
if (inviteVo.friendIds.length > 0) { |
||||
|
this.$http({ |
||||
|
url: "/group/invite", |
||||
|
method: 'POST', |
||||
|
data: inviteVo |
||||
|
}).then(() => { |
||||
|
uni.showToast({ |
||||
|
title: "邀请成功", |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
setTimeout(()=>{ |
||||
|
uni.navigateBack(); |
||||
|
},1000); |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
onShowUserInfo(userId){ |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/common/user-info?id=" + userId |
||||
|
}) |
||||
|
}, |
||||
|
onSwitchChecked(friend){ |
||||
|
if(!friend.disabled){ |
||||
|
console.log(friend.disabled) |
||||
|
friend.checked = !friend.checked; |
||||
|
} |
||||
|
}, |
||||
|
initFriendItems(){ |
||||
|
this.friendItems = []; |
||||
|
let friends = this.$store.state.friendStore.friends; |
||||
|
friends.forEach((f=>{ |
||||
|
let item = { |
||||
|
id: f.id, |
||||
|
headImage:f.headImage, |
||||
|
nickName: f.nickName, |
||||
|
} |
||||
|
item.disabled = this.isGroupMember(f.id); |
||||
|
item.checked = item.disabled; |
||||
|
this.friendItems.push(item); |
||||
|
})) |
||||
|
}, |
||||
|
loadGroupMembers(id) { |
||||
|
this.$http({ |
||||
|
url: `/group/members/${id}`, |
||||
|
method: "GET" |
||||
|
}).then((members) => { |
||||
|
this.groupMembers = members.filter(m => !m.quit); |
||||
|
this.initFriendItems(); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
isGroupMember(id){ |
||||
|
return this.groupMembers.some(m => m.userId==id); |
||||
|
} |
||||
|
}, |
||||
|
computed:{ |
||||
|
inviteSize(){ |
||||
|
return this.friendItems.filter(f => !f.disabled && f.checked).length; |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.groupId = options.id; |
||||
|
this.loadGroupMembers(options.id); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.group-invite{ |
||||
|
position: relative; |
||||
|
border: #dddddd solid 1px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.friend-items{ |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
.scroll-bar { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,105 @@ |
|||||
|
<template> |
||||
|
<view class="page group-member"> |
||||
|
<view class="search-bar"> |
||||
|
<uni-search-bar v-model="searchText" cancelButton="none" placeholder="输入成员昵称搜索"></uni-search-bar> |
||||
|
</view> |
||||
|
<view class="member-items"> |
||||
|
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true"> |
||||
|
<view v-for="(member,idx) in groupMembers" |
||||
|
v-show="!searchText || member.aliasName.startsWith(searchText)" :key="idx"> |
||||
|
<uni-list-chat :avatar="member.headImage" :title="member.aliasName" :clickable="true" |
||||
|
@click="onShowUserInfo(member.userId)"> |
||||
|
<view class="chat-custom-right"> |
||||
|
<button type="warn" v-show="isOwner && !isSelf(member.userId)" size="mini" |
||||
|
@click.stop="onKickOut(member,idx)">移出群聊</button> |
||||
|
</view> |
||||
|
</uni-list-chat> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
searchText: "", |
||||
|
group: {}, |
||||
|
groupMembers: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onShowUserInfo(userId) { |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/common/user-info?id=" + userId |
||||
|
}) |
||||
|
}, |
||||
|
onKickOut(member, idx) { |
||||
|
uni.showModal({ |
||||
|
title: '确认移出?', |
||||
|
content: `确定将成员'${member.aliasName}'移出群聊吗？`, |
||||
|
success: () => { |
||||
|
this.$http({ |
||||
|
url: `/group/kick/${this.group.id}?userId=${member.userId}`, |
||||
|
method: 'DELETE' |
||||
|
}).then(() => { |
||||
|
uni.showToast({ |
||||
|
title: `已将${member.aliasName}移出群聊`, |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
this.groupMembers.splice(idx, 1); |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
loadGroupInfo(id) { |
||||
|
this.$http({ |
||||
|
url: `/group/find/${id}`, |
||||
|
method: 'GET' |
||||
|
}).then((group) => { |
||||
|
this.group = group; |
||||
|
}); |
||||
|
}, |
||||
|
loadGroupMembers(id) { |
||||
|
this.$http({ |
||||
|
url: `/group/members/${id}`, |
||||
|
method: "GET" |
||||
|
}).then((members) => { |
||||
|
this.groupMembers = members.filter(m => !m.quit); |
||||
|
}) |
||||
|
}, |
||||
|
isSelf(userId) { |
||||
|
return this.$store.state.userStore.userInfo.id == userId |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
isOwner() { |
||||
|
return this.$store.state.userStore.userInfo.id == this.group.ownerId; |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.loadGroupInfo(options.id); |
||||
|
this.loadGroupMembers(options.id); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.group-invite{ |
||||
|
position: relative; |
||||
|
border: #dddddd solid 1px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.member-items{ |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
.scroll-bar { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue