chat-app/src/pages/chatSettings/groupManage/manageGroupMembers.vue

59 lines
1.7 KiB
Vue

<template>
<div class="outer-layer manage-group-members-page">
<div class="root">
<ZPaging
ref="zPaging"
:show-scrollbar="false"
:use-virtual-list="true"
:virtual-list-col="5"
:auto="false"
:refresher-enabled="false"
:loading-more-enabled="false"
>
<template #top>
<tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
<div class="navBar-title flex flex-col items-center justify-center">
<span class="text-[34rpx] font-medium">
{{ $t('chat.settings.groupMember') }}
</span>
</div>
</tm-navbar>
</template>
<div class="group-members-list">
<groupMemberList
:memberList="talkParams?.memberList"
></groupMemberList>
</div>
</ZPaging>
</div>
</div>
</template>
<script setup>
import groupMemberList from '../components/groupMembersList.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { ref, computed, reactive } from 'vue'
import { useDialogueStore } from '@/store'
const dialogueStore = useDialogueStore()
const talkParams = reactive({
memberList: computed(() => dialogueStore.members),
})
const zPaging = ref()
useZPaging(zPaging)
</script>
<style scoped lang="scss">
.outer-layer {
flex: 1;
background-image: url('@/static/image/clockIn/z3280@3x.png');
background-size: cover;
background-repeat: no-repeat;
}
.group-members-list {
margin: 20rpx 32rpx;
padding: 0 0 32rpx;
background-color: #fff;
}
</style>