xyy-m/src/pages/chat/group-all.vue

<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="`没有找到&quot;${showName}&quot;相关成员`"
    />

    <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()
}

// 获取群设置的配置信息
const getList = async () => {
  try {
    loading.value = true
    let { data } = await request('/website/tourGroup/getGroupInfoAndMemberByGroupId', {
      query: {
        groupId: route.query.groupId
      }
    })

    if (Array.isArray(data?.memberList) && data.memberList?.length) {
      searchMember.value = data?.memberList
      groupMember.value = data?.memberList
    } else {
      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>