Эх сурвалжийг харах

fix: 1.群聊的人员的页面添加

suwenjiang 2 сар өмнө
parent
commit
991e1755ca

+ 141 - 0
src/pages/chat/group-all.vue

@@ -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="`没有找到&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()
+}
+// /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>

+ 14 - 8
src/pages/chat/group-member.vue

@@ -22,9 +22,11 @@
           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?.avatar" alt="" />
+            <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?.name }}</p>
+          <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
@@ -87,23 +89,27 @@ const setData = ref(null)
 
 // 搜索
 const search = () => {
-  getList()
-}
+  searchMember.value = groupMember.value.filter((el) => el.showName == showName.value)
 
+  // getList()
+}
+// /website/tourGroup/getGroupInfoAndMemberByGroupId
 // 获取群设置的配置信息
 const getList = async () => {
   try {
     loading.value = true
     let {
-      data: { dataList, totalCount }
+      data
+      // } = await request('/website/tourMember/getTourMemberInfoList', {
     } = await request('/website/tourMember/getTourMemberInfoList', {
       query: {
-        groupId: '0'
+        groupId: route.query.groupId
       }
     })
 
-    if (Array.isArray(dataList) && dataList?.length) {
-      showName.value ? (searchMember.value = dataList) : (groupMember.value = dataList)
+    if (Array.isArray(data?.memberList) && data.memberList?.length) {
+      searchMember.value = data?.memberList
+      groupMember.value = data?.memberList
     } else {
       showName.value ? (searchMember.value = []) : (groupMember.value = [])
     }

+ 4 - 2
src/pages/chat/set.vue

@@ -58,7 +58,9 @@
               @click="
                 navigateTo({
                   path: '/chat/group-member',
-                  query: setData?.id
+                  query: {
+                    groupId: setData?.id
+                  }
                 })
               "
               class="w-40 h-40 rounded-full flex justify-center items-center bg-[#F3F3F3] border mx-auto overflow-hidden mb-4"
@@ -71,7 +73,7 @@
 
         <div
           v-if="changeState(userGroupData?.groupRole) && setData?.memberList?.lenght == 13"
-          @click="navigateTo('/chat/group-member')"
+          @click="navigateTo(`/chat/group-member?groupId=${userGroupData?.groupId}`)"
           class="w-full flex pb-5 box-border justify-center items-center leading-3xl text-sm text-black"
         >
           查看更多群成员