feat(团队成员页): 对接搜索功能

src/api/userInfo.js

@@ -74,3 +74,15 @@ export const getFreightAgencys = async () => {
     throw error
   }
 }
+
+// 搜索团队成员
+export const getTeamMember = async (account) => {
+  try {
+    const response = await get(`/team/search-members?account=${account}`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get team member:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}

src/views/AgencyCenter/TeamMember.vue

@@ -14,6 +14,7 @@
         <div
           style="
             flex: 1;
+            min-width: 0;
             border-radius: 32px;
             border: 1px solid #fff;
 
@@ -27,9 +28,8 @@
         >
           <img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
           <input
+            v-model="searchQuery"
             type="text"
-            name=""
-            id=""
             :placeholder="t('enter_host_id')"
             style="
               width: 100%;
@@ -39,10 +39,14 @@
               color: black;
               padding: 10px 8px;
             "
-            v-model="targetUserId"
+            @keyup.enter="performSearch"
           />
         </div>
-        <div style="font-weight: 600">{{ t('cancel') }}</div>
+
+        <div v-if="!hasSearched && searchQuery" style="font-weight: 600" @click="performSearch">
+          {{ t('search') }}
+        </div>
+        <div v-else style="font-weight: 600" @click="clearSearch">{{ t('cancel') }}</div>
       </div>
 
       <!-- 团队信息 -->
@@ -85,10 +89,9 @@
       </div>
 
       <!-- 成员列表 -->
-      <div v-if="members.length > 0" class="member-list" ref="memberListRef">
+      <div v-if="searchResults.length > 0" class="member-list" ref="memberListRef">
         <div
-          v-for="member in members"
-          :key="member.id"
+          v-for="member in searchResults"
           style="
             background-color: white;
             padding: 16px;
@@ -244,19 +247,22 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { ref, onMounted, nextTick, onUnmounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import GeneralHeader from '@/components/GeneralHeader.vue'
+import { useI18n } from 'vue-i18n'
+import { setDocumentDirection } from '@/locales/i18n'
+import { showError } from '@/utils/toast.js'
+import { getTeamId } from '@/utils/userStore.js'
+
 import {
   getTeamMembers,
   getBdAgentList,
   deleteMember as deleteMemberApi,
   getAgentMonthTarget,
 } from '@/api/teamBill.js'
-import { getTeamId } from '@/utils/userStore.js'
-import { showError } from '@/utils/toast.js'
-import { setDocumentDirection } from '@/locales/i18n'
+import { getTeamMember } from '@/api/userInfo.js'
+
+import GeneralHeader from '@/components/GeneralHeader.vue'
 
 const { t, locale } = useI18n()
 const route = useRoute()
@@ -273,7 +279,10 @@ const showDeleteModal = ref(false)
 const memberToDelete = ref(null)
 const memberListRef = ref(null)
 
-const targetUserId = ref('') //搜索目标id
+const searchQuery = ref('') //搜索目标id
+const searchResults = ref([]) //展示结果
+const isSearching = ref(false)
+const hasSearched = ref(false)
 
 // 分页相关状态
 const loadingMore = ref(false)
@@ -287,6 +296,37 @@ const isFromBdCenter = ref(false)
 
 const agentMonthTarget = ref({})
 
+// 执行搜索
+const performSearch = async () => {
+  console.log('searchQuery.value:', searchQuery.value)
+
+  if (!searchQuery.value.trim()) {
+    searchResults.value = members.value
+    return
+  }
+
+  isSearching.value = true
+  hasSearched.value = false
+
+  searchResults.value = []
+  if (searchQuery.value.trim()) {
+    const resSearchUser = await getTeamMember(searchQuery.value)
+    if (resSearchUser.status && resSearchUser.body) {
+      searchResults.value = resSearchUser.body
+    }
+  }
+
+  isSearching.value = false
+  hasSearched.value = true
+}
+
+// 清除搜索
+const clearSearch = () => {
+  hasSearched.value = false
+  searchQuery.value = ''
+  searchResults.value = members.value
+}
+
 // 获取团队成员列表
 const fetchTeamMembers = async (isLoadMore = false) => {
   try {
@@ -320,9 +360,11 @@ const fetchTeamMembers = async (isLoadMore = false) => {
       if (isLoadMore) {
         // 加载更多时，追加到现有列表
         members.value = [...members.value, ...newMembers]
+        searchResults.value = members.value
       } else {
         // 初始加载时，替换列表
         members.value = newMembers
+        searchResults.value = members.value
       }
 
       // 更新lastId用于下次分页
@@ -474,6 +516,19 @@ const getAgentMonth = async () => {
   }
 }
 
+watch(
+  () => searchQuery.value,
+  (newQuery) => {
+    if (hasSearched.value) {
+      hasSearched.value = false
+    }
+    if (!newQuery.trim()) {
+      searchResults.value = members.value
+    }
+  },
+  { immediate: true }
+)
+
 // 组件挂载时获取数据
 onMounted(async () => {
   console.log('Component mounted')