|
@@ -0,0 +1,141 @@
|
|
|
+<template>
|
|
|
+ <div class="w-full h-[100vh]">
|
|
|
+ <ChatHeader title="群成员" />
|
|
|
+ <ChatSearch v-model:searchString="showName" @search="search" />
|
|
|
+
|
|
|
+ <ChatEmpty
|
|
|
+ v-if="!groupMember?.length && !loading"
|
|
|
+ image="search"
|
|
|
+ :title="`没有找到"${showName}"相关成员`"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="groupMember?.length && !showName"
|
|
|
+ class="box-border w-full min-h-400 mt-16 mb-12 pt-12 pl-12"
|
|
|
+ >
|
|
|
+ <van-row>
|
|
|
+ <van-col
|
|
|
+ style="width: 54px"
|
|
|
+ v-for="(item, index) in groupMember"
|
|
|
+ :key="index"
|
|
|
+ span="4"
|
|
|
+ class="mb-12 mr-10"
|
|
|
+ >
|
|
|
+ <div class="w-40 h-40 rounded-full mx-auto overflow-hidden mb-4">
|
|
|
+ <img class="w-full h-full object-cover" :src="item?.headImageUrl" alt="" />
|
|
|
+ </div>
|
|
|
+ <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">
|
|
|
+ {{ item?.showName }}
|
|
|
+ </p>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="4" class="mb-12 mr-10" @click="navigateTo('/chat/group-add')">
|
|
|
+ <div
|
|
|
+ class="w-40 h-40 rounded-full flex justify-center items-center bg-[#F3F3F3] border mx-auto overflow-hidden mb-4"
|
|
|
+ >
|
|
|
+ <van-icon name="plus" size="20" />
|
|
|
+ </div>
|
|
|
+ <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">添加成员</p>
|
|
|
+ </van-col>
|
|
|
+ <van-col v-if="isRankAndFiler(setData?.groupRole)" span="4 mb-12 mr-10">
|
|
|
+ <div
|
|
|
+ @click="navigateTo(`/chat/group-member?group=${setData?.id}`)"
|
|
|
+ class="w-40 h-40 rounded-full flex justify-center items-center bg-[#F3F3F3] border mx-auto overflow-hidden mb-4"
|
|
|
+ >
|
|
|
+ <van-icon name="minus" size="20" />
|
|
|
+ </div>
|
|
|
+ <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">删除成员</p>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ <!-- 搜索后的结果 -->
|
|
|
+ <div v-if="searchMember?.length && showName" class="w-full border-box min-h-400 pl-16">
|
|
|
+ <van-cell
|
|
|
+ v-for="(item, index) in searchMember"
|
|
|
+ :key="item?.id"
|
|
|
+ center
|
|
|
+ clickable
|
|
|
+ size="large"
|
|
|
+ class="border-b-[1px]"
|
|
|
+ :title="item?.nickname"
|
|
|
+ >
|
|
|
+ <template #icon>
|
|
|
+ <div class="w-40 h-40 rounded-full mr-12 overflow-hidden">
|
|
|
+ <img class="w-full h-full object-cover" :src="item?.avatar" alt="" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+const userInfoStore = useUserInfoStore()
|
|
|
+const { userInfo } = storeToRefs(userInfoStore)
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const queryParams = reactive({
|
|
|
+ groupRole: computed(() => route.query?.groupRole ?? '')
|
|
|
+})
|
|
|
+
|
|
|
+const loading = ref(false)
|
|
|
+const showName = ref('')
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getList()
|
|
|
+})
|
|
|
+
|
|
|
+// 全部成员
|
|
|
+const groupMember = ref([])
|
|
|
+
|
|
|
+// 搜索的成员
|
|
|
+const searchMember = ref([])
|
|
|
+
|
|
|
+const setData = ref(null)
|
|
|
+
|
|
|
+// 搜索
|
|
|
+const search = () => {
|
|
|
+ searchMember.value = groupMember.value.filter((el) => el.showName == showName.value)
|
|
|
+
|
|
|
+ // getList()
|
|
|
+}
|
|
|
+// /website/tourGroup/getGroupInfoAndMemberByGroupId
|
|
|
+// 获取群设置的配置信息
|
|
|
+const getList = async () => {
|
|
|
+ try {
|
|
|
+ loading.value = true
|
|
|
+ let {
|
|
|
+ data
|
|
|
+ // } = await request('/website/tourMember/getTourMemberInfoList', {
|
|
|
+ } = await request('/website/tourMember/getTourMemberInfoList', {
|
|
|
+ query: {
|
|
|
+ groupId: route.query.groupId
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ if (Array.isArray(data?.memberList) && data.memberList?.length) {
|
|
|
+ searchMember.value = data?.memberList
|
|
|
+ groupMember.value = data?.memberList
|
|
|
+ } else {
|
|
|
+ showName.value ? (searchMember.value = []) : (groupMember.value = [])
|
|
|
+ }
|
|
|
+
|
|
|
+ loading.value = false
|
|
|
+ } catch (err) {
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 是否是普通成员
|
|
|
+const isRankAndFiler = (role) => {
|
|
|
+ return role == 1 || role == 2 ? true : false
|
|
|
+}
|
|
|
+
|
|
|
+definePageMeta({
|
|
|
+ layout: false
|
|
|
+})
|
|
|
+
|
|
|
+useSeoMeta({
|
|
|
+ title: '群成员'
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped></style>
|