485 lines
11 KiB
Vue
485 lines
11 KiB
Vue
<script lang="ts" setup>
|
||
import { reactive, computed, watch, ref } from 'vue'
|
||
import { NEmpty, NPopover, NPopconfirm } from 'naive-ui'
|
||
import { useUserStore } from '@/store'
|
||
import GroupLaunch from './GroupLaunch.vue'
|
||
import GroupManage from './manage/index.vue'
|
||
import { Comment, Search, Close, Plus } from '@icon-park/vue-next'
|
||
import {
|
||
ServeGroupDetail,
|
||
ServeGetGroupMembers,
|
||
ServeSecedeGroup,
|
||
ServeUpdateGroupCard
|
||
} from '@/api/group'
|
||
import { useInject } from '@/hooks'
|
||
|
||
const userStore = useUserStore()
|
||
const { showUserInfoModal } = useInject()
|
||
|
||
const emit = defineEmits(['close', 'to-talk'])
|
||
const props = defineProps({
|
||
gid: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
})
|
||
|
||
watch(props, () => {
|
||
loadDetail()
|
||
loadMembers()
|
||
})
|
||
|
||
const editCardPopover = ref(false)
|
||
const isShowGroup = ref(false)
|
||
const isShowManage = ref(false)
|
||
const state = reactive({
|
||
keywords: '',
|
||
detail: {
|
||
avatar: '',
|
||
name: '',
|
||
profile: '',
|
||
visit_card: '',
|
||
notice: ''
|
||
},
|
||
remark: ''
|
||
})
|
||
|
||
const members = ref<any[]>([])
|
||
|
||
const search = computed<any[]>(() => {
|
||
if (state.keywords) {
|
||
return members.value.filter((item: any) => {
|
||
return (
|
||
item.nickname.match(state.keywords) != null || item.remark.match(state.keywords) != null
|
||
)
|
||
})
|
||
}
|
||
|
||
return members.value
|
||
})
|
||
|
||
const isLeader = computed(() => {
|
||
return members.value.some((item: any) => {
|
||
return item.user_id == userStore.uid && item.leader >= 1
|
||
})
|
||
})
|
||
|
||
const isAdmin = computed(() => {
|
||
return members.value.some((item: any) => {
|
||
return item.user_id == userStore.uid && item.leader == 2
|
||
})
|
||
})
|
||
|
||
const onShowManage = (vallue: any) => {
|
||
isShowManage.value = vallue
|
||
}
|
||
|
||
const onGroupCallBack = () => {}
|
||
|
||
const onToInfo = (item: any) => {
|
||
showUserInfoModal(item.user_id)
|
||
}
|
||
|
||
/**
|
||
* 加载群信息
|
||
*/
|
||
function loadDetail() {
|
||
ServeGroupDetail({
|
||
group_id: props.gid
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
let result = res.data
|
||
state.detail.avatar = result.avatar
|
||
state.detail.name = result.group_name
|
||
state.detail.profile = result.profile
|
||
state.detail.visit_card = result.visit_card
|
||
state.remark = result.visit_card
|
||
|
||
if (result.notice) {
|
||
state.detail.notice = result.notice
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 加载成员列表
|
||
*/
|
||
function loadMembers() {
|
||
ServeGetGroupMembers({
|
||
group_id: props.gid
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
members.value = res.data.items || []
|
||
}
|
||
})
|
||
}
|
||
|
||
const onClose = () => {
|
||
emit('close')
|
||
}
|
||
|
||
const onSignOut = () => {
|
||
ServeSecedeGroup({
|
||
group_id: props.gid
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
window['$message'].success('已退出群聊')
|
||
onClose()
|
||
} else {
|
||
window['$message'].error(res.message)
|
||
}
|
||
})
|
||
}
|
||
|
||
const onChangeRemark = () => {
|
||
ServeUpdateGroupCard({
|
||
group_id: props.gid,
|
||
visit_card: state.remark
|
||
}).then(({ code, message }) => {
|
||
if (code == 200) {
|
||
// @ts-ignore
|
||
editCardPopover.value.setShow(false)
|
||
state.detail.visit_card = state.remark
|
||
window['$message'].success('已更新群名片')
|
||
|
||
loadMembers()
|
||
} else {
|
||
window['$message'].error(message)
|
||
}
|
||
})
|
||
}
|
||
|
||
loadDetail()
|
||
loadMembers()
|
||
</script>
|
||
<template>
|
||
<section class="el-container is-vertical section">
|
||
<header class="el-header header bdr-b">
|
||
<div class="left-icon" @click="emit('to-talk')">
|
||
<n-icon size="21" :component="Comment" />
|
||
</div>
|
||
<div class="center-text">
|
||
<span>群信息</span>
|
||
</div>
|
||
<div class="right-icon">
|
||
<n-icon size="21" :component="Close" @click="onClose" />
|
||
</div>
|
||
</header>
|
||
|
||
<main class="el-main main me-scrollbar me-scrollbar-thumb">
|
||
<div class="info-box">
|
||
<div class="b-box">
|
||
<div class="block">
|
||
<div class="title">群名称：</div>
|
||
</div>
|
||
<div class="describe">{{ state.detail.name }}</div>
|
||
</div>
|
||
|
||
<div class="b-box">
|
||
<div class="block">
|
||
<div class="title">群名片：</div>
|
||
<div class="text">
|
||
<n-popover trigger="click" placement="left" ref="editCardPopover">
|
||
<template #trigger>
|
||
<n-button type="primary" text> 设置 </n-button>
|
||
</template>
|
||
|
||
<template #header> 设置我的群名片 </template>
|
||
|
||
<div style="display: flex">
|
||
<n-input
|
||
type="text"
|
||
placeholder="设置我的群名片"
|
||
maxlength="10"
|
||
v-model:value="state.remark"
|
||
@keydown.enter="onChangeRemark"
|
||
/>
|
||
<n-button type="primary" class="mt-l5" @click="onChangeRemark"> 确定 </n-button>
|
||
</div>
|
||
</n-popover>
|
||
</div>
|
||
</div>
|
||
<div class="describe">{{ state.detail.visit_card || '未设置' }}</div>
|
||
</div>
|
||
|
||
<div class="b-box">
|
||
<div class="block">
|
||
<div class="title">群成员：</div>
|
||
<div class="text">{{ members.length }}人</div>
|
||
</div>
|
||
<div class="describe">群主已开启“新成员入群可查看所有聊天记录</div>
|
||
</div>
|
||
|
||
<div class="b-box">
|
||
<div class="block">
|
||
<div class="title">群简介：</div>
|
||
</div>
|
||
<div class="describe">
|
||
{{ state.detail.profile ? state.detail.profile : '暂无群简介' }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="b-box">
|
||
<div class="block">
|
||
<div class="title">群公告：</div>
|
||
<div class="text">
|
||
<n-button type="primary" text> 更多 </n-button>
|
||
</div>
|
||
</div>
|
||
<div class="describe">暂无群公告</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="member-box">
|
||
<div class="flex">
|
||
<n-input placeholder="搜索" v-model:value="state.keywords" :clearable="true" round>
|
||
<template #prefix>
|
||
<n-icon :component="Search" />
|
||
</template>
|
||
</n-input>
|
||
|
||
<n-button @click="isShowGroup = true" circle class="mt-l15">
|
||
<template #icon>
|
||
<n-icon :component="Plus" color="rgb(165 165 170)" />
|
||
</template>
|
||
</n-button>
|
||
</div>
|
||
|
||
<div class="table">
|
||
<div class="theader">
|
||
<div class="avatar"></div>
|
||
<div class="nickname">用户昵称</div>
|
||
<div class="card">群名片</div>
|
||
</div>
|
||
|
||
<div class="row pointer" v-for="item in search" :key="item.id" @click="onToInfo(item)">
|
||
<div class="avatar">
|
||
<im-avatar :size="20" :src="item.avatar" :username="item.nickname" />
|
||
</div>
|
||
<div class="nickname text-ellipsis">
|
||
<span>{{ item.nickname ? item.nickname : '-' }}</span>
|
||
<span class="badge master" v-show="item.leader === 2">群主</span>
|
||
<span class="badge leader" v-show="item.leader === 1">管理员</span>
|
||
</div>
|
||
<div class="card text-ellipsis grey">
|
||
{{ item.remark || '-' }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-t20 pd-t20" v-if="search.length == 0">
|
||
<n-empty size="200" description="暂无相关数据">
|
||
<template #icon>
|
||
<img src="@/assets/image/no-data.svg" alt="" />
|
||
</template>
|
||
</n-empty>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="el-footer footer bdr-t">
|
||
<template v-if="!isAdmin">
|
||
<n-popconfirm negative-text="取消" positive-text="确定" @positive-click="onSignOut">
|
||
<template #trigger>
|
||
<n-button class="btn" type="error" ghost> 退出群聊 </n-button>
|
||
</template>
|
||
确定要退出群吗？ 退出后不再接收此群消息！
|
||
</n-popconfirm>
|
||
</template>
|
||
|
||
<n-button
|
||
class="btn"
|
||
type="primary"
|
||
text-color="#ffffff"
|
||
v-if="isLeader"
|
||
@click="onShowManage(true)"
|
||
>
|
||
群聊管理
|
||
</n-button>
|
||
</footer>
|
||
</section>
|
||
|
||
<GroupLaunch
|
||
v-if="isShowGroup"
|
||
:gid="gid"
|
||
@close="isShowGroup = false"
|
||
@on-submit="onGroupCallBack"
|
||
/>
|
||
|
||
<GroupManage v-if="isShowManage" :gid="gid" @close="onShowManage(false)" />
|
||
</template>
|
||
<style lang="less" scoped>
|
||
.section {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.header {
|
||
width: 100%;
|
||
height: 60px;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
> div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.center-text {
|
||
flex: auto;
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.left-icon,
|
||
.right-icon {
|
||
width: 50px;
|
||
height: 100%;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.main {
|
||
padding: 15px;
|
||
|
||
.info-box {
|
||
.b-box {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 30px;
|
||
margin: 12px 0;
|
||
flex-direction: column;
|
||
|
||
&:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.block {
|
||
width: 100%;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
height: 100%;
|
||
line-height: 30px;
|
||
flex: auto;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.text {
|
||
height: 100%;
|
||
line-height: 30px;
|
||
width: 30%;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.describe {
|
||
width: 100%;
|
||
min-height: 24px;
|
||
line-height: 24px;
|
||
font-size: 13px;
|
||
color: #b1b1b1;
|
||
font-weight: 300;
|
||
overflow: hidden;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
}
|
||
|
||
.member-box {
|
||
min-height: 180px;
|
||
padding: 20px 15px;
|
||
margin-bottom: 20px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 10px;
|
||
|
||
.table {
|
||
margin-top: 15px;
|
||
.theader {
|
||
height: 36px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.row {
|
||
height: 30px;
|
||
margin: 3px 0;
|
||
&:hover {
|
||
.nickname {
|
||
color: #1890ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.theader,
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
> div {
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.avatar {
|
||
width: 30px;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.nickname {
|
||
flex: auto;
|
||
}
|
||
|
||
.card {
|
||
width: 100px;
|
||
padding-right: 8px;
|
||
justify-content: flex-end;
|
||
|
||
&.grey {
|
||
font-size: 13px;
|
||
font-weight: 300;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
height: 60px;
|
||
padding: 15px;
|
||
.btn {
|
||
width: 48%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.badge {
|
||
margin-left: 3px;
|
||
&.master {
|
||
color: #dc9b04 !important;
|
||
background-color: #faf1d1 !important;
|
||
}
|
||
|
||
&.leader {
|
||
color: #3370ff;
|
||
background-color: #e1eaff;
|
||
}
|
||
}
|
||
</style>
|