feat(防抖搜索功能): 新增搜索状态,防止并发请求

This commit is contained in:
hzj 2025-12-15 15:46:32 +08:00
parent ca1feeebe1
commit dfa7418441
5 changed files with 86 additions and 62 deletions

View File

@ -38,7 +38,7 @@
name="" name=""
id="" id=""
:placeholder="t('enter_user_id')" :placeholder="t('enter_user_id')"
@keyup.enter="handleEnterPress" @keyup.enter="debouncedSearch"
@input="handleInputChange" @input="handleInputChange"
style=" style="
width: 100%; width: 100%;
@ -225,13 +225,7 @@ import { useDebounce } from '@/utils/useDebounce'
import { handleAvatarImageError } from '@/utils/imageHandler.js' import { handleAvatarImageError } from '@/utils/imageHandler.js'
import { searchUser } from '@/api/userInfo' import { searchUser } from '@/api/userInfo'
import { import { invitedList, inviteToBeAgency, cancelInvite } from '@/api/bdCenter.js'
invitedList,
beInvitedList,
inviteToBeAgency,
handleInvite,
cancelInvite,
} from '@/api/bdCenter.js'
import GeneralHeader from '@/components/GeneralHeader.vue' import GeneralHeader from '@/components/GeneralHeader.vue'
@ -246,6 +240,8 @@ const searchResults = ref([]) //搜索结果
const disInvite = ref(true) // const disInvite = ref(true) //
const selectedUser = ref({}) // const selectedUser = ref({}) //
const loading = ref(false) //
// //
const showUserList = computed(() => { const showUserList = computed(() => {
if (searchQuery.value) { if (searchQuery.value) {
@ -278,27 +274,33 @@ const handleInputChange = () => {
// //
const debouncedSearch = useDebounce( const debouncedSearch = useDebounce(
async () => { async () => {
if (loading.value) return
loading.value = true
console.log('搜索用户id', searchQuery.value) console.log('搜索用户id', searchQuery.value)
searchResults.value = [] searchResults.value = []
selectedUser.value = {} selectedUser.value = {}
disInvite.value = true disInvite.value = true
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value) try {
if (resSearchUser.status && resSearchUser.body) { if (searchQuery.value.trim()) {
let targetUserInfo = { userProfile: resSearchUser.body } const resSearchUser = await searchUser(searchQuery.value)
searchResults.value.push(targetUserInfo) if (resSearchUser.status && resSearchUser.body) {
let targetUserInfo = { userProfile: resSearchUser.body }
searchResults.value.push(targetUserInfo)
}
} }
} catch (error) {
showError(error.response?.errorMsg)
} finally {
loading.value = false
} }
}, },
500, 500,
true true
) )
//
const handleEnterPress = async () => {
debouncedSearch()
}
// //
const toggleUserSelection = (user) => { const toggleUserSelection = (user) => {
console.log('选择用户:', user) console.log('选择用户:', user)

View File

@ -38,7 +38,7 @@
name="" name=""
id="" id=""
:placeholder="t('enter_user_id')" :placeholder="t('enter_user_id')"
@keyup.enter="handleEnterPress" @keyup.enter="debouncedSearch"
@input="handleInputChange" @input="handleInputChange"
style=" style="
width: 100%; width: 100%;
@ -244,6 +244,8 @@ const searchResults = ref([]) //搜索结果
const disInvite = ref(true) // const disInvite = ref(true) //
const selectedUser = ref({}) // const selectedUser = ref({}) //
const loading = ref(false) //
// //
const showUserList = computed(() => { const showUserList = computed(() => {
if (searchQuery.value) { if (searchQuery.value) {
@ -276,27 +278,33 @@ const handleInputChange = () => {
// //
const debouncedSearch = useDebounce( const debouncedSearch = useDebounce(
async () => { async () => {
if (loading.value) return
loading.value = true
console.log('搜索用户id', searchQuery.value) console.log('搜索用户id', searchQuery.value)
searchResults.value = [] searchResults.value = []
selectedUser.value = {} selectedUser.value = {}
disInvite.value = true disInvite.value = true
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value) try {
if (resSearchUser.status && resSearchUser.body) { if (searchQuery.value.trim()) {
let targetUserInfo = { userProfile: resSearchUser.body } const resSearchUser = await searchUser(searchQuery.value)
searchResults.value.push(targetUserInfo) if (resSearchUser.status && resSearchUser.body) {
let targetUserInfo = { userProfile: resSearchUser.body }
searchResults.value.push(targetUserInfo)
}
} }
} catch (error) {
showError(error.response?.errorMsg)
} finally {
loading.value = false
} }
}, },
500, 500,
true true
) )
//
const handleEnterPress = async () => {
debouncedSearch()
}
// //
const toggleUserSelection = (user) => { const toggleUserSelection = (user) => {
console.log('选择用户:', user) console.log('选择用户:', user)

View File

@ -38,7 +38,7 @@
name="" name=""
id="" id=""
:placeholder="t('enter_user_id')" :placeholder="t('enter_user_id')"
@keyup.enter="handleEnterPress" @keyup.enter="debouncedSearch"
@input="handleInputChange" @input="handleInputChange"
style=" style="
width: 100%; width: 100%;
@ -243,6 +243,8 @@ const searchResults = ref([]) //搜索结果
const disInvite = ref(true) // const disInvite = ref(true) //
const selectedUser = ref({}) // const selectedUser = ref({}) //
const loading = ref(false) //
// //
const showUserList = computed(() => { const showUserList = computed(() => {
if (searchQuery.value) { if (searchQuery.value) {
@ -275,27 +277,33 @@ const handleInputChange = () => {
// //
const debouncedSearch = useDebounce( const debouncedSearch = useDebounce(
async () => { async () => {
if (loading.value) return
loading.value = true
console.log('搜索用户id', searchQuery.value) console.log('搜索用户id', searchQuery.value)
searchResults.value = [] searchResults.value = []
selectedUser.value = {} selectedUser.value = {}
disInvite.value = true disInvite.value = true
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value) try {
if (resSearchUser.status && resSearchUser.body) { if (searchQuery.value.trim()) {
let targetUserInfo = { userProfile: resSearchUser.body } const resSearchUser = await searchUser(searchQuery.value)
searchResults.value.push(targetUserInfo) if (resSearchUser.status && resSearchUser.body) {
let targetUserInfo = { userProfile: resSearchUser.body }
searchResults.value.push(targetUserInfo)
}
} }
} catch (error) {
showError(error.response?.errorMsg)
} finally {
loading.value = false
} }
}, },
500, 500,
true true
) )
//
const handleEnterPress = async () => {
debouncedSearch()
}
// //
const toggleUserSelection = (user) => { const toggleUserSelection = (user) => {
console.log('选择用户:', user) console.log('选择用户:', user)

View File

@ -38,7 +38,7 @@
name="" name=""
id="" id=""
:placeholder="t('enter_user_id')" :placeholder="t('enter_user_id')"
@keyup.enter="handleEnterPress" @keyup.enter="debouncedSearch"
@input="handleInputChange" @input="handleInputChange"
style=" style="
width: 100%; width: 100%;
@ -223,6 +223,8 @@ const searchResults = ref([]) //搜索结果
const disInvite = ref(true) // const disInvite = ref(true) //
const selectedUser = ref({}) // const selectedUser = ref({}) //
const loading = ref(false) //
// //
const showUserList = computed(() => { const showUserList = computed(() => {
if (searchQuery.value) { if (searchQuery.value) {
@ -255,27 +257,33 @@ const handleInputChange = () => {
// //
const debouncedSearch = useDebounce( const debouncedSearch = useDebounce(
async () => { async () => {
if (loading.value) return
loading.value = true
console.log('搜索用户id', searchQuery.value) console.log('搜索用户id', searchQuery.value)
searchResults.value = [] searchResults.value = []
selectedUser.value = {} selectedUser.value = {}
disInvite.value = true disInvite.value = true
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value) try {
if (resSearchUser.status && resSearchUser.body) { if (searchQuery.value.trim()) {
let targetUserInfo = { userProfile: resSearchUser.body } const resSearchUser = await searchUser(searchQuery.value)
searchResults.value.push(targetUserInfo) if (resSearchUser.status && resSearchUser.body) {
let targetUserInfo = { userProfile: resSearchUser.body }
searchResults.value.push(targetUserInfo)
}
} }
} catch (error) {
showError(error.response?.errorMsg)
} finally {
loading.value = false
} }
}, },
500, 500,
true true
) )
//
const handleEnterPress = () => {
debouncedSearch()
}
// //
const toggleUserSelection = (user) => { const toggleUserSelection = (user) => {
console.log('选择用户:', user) console.log('选择用户:', user)

View File

@ -39,11 +39,11 @@
color: black; color: black;
padding: 10px 8px; padding: 10px 8px;
" "
@keyup.enter="performSearch" @keyup.enter="debouncedSearch"
/> />
</div> </div>
<div v-if="!hasSearched && searchQuery" style="font-weight: 600" @click="performSearch"> <div v-if="!hasSearched && searchQuery" style="font-weight: 600" @click="debouncedSearch">
{{ t('search') }} {{ t('search') }}
</div> </div>
<div v-else style="font-weight: 600" @click="clearSearch">{{ t('cancel') }}</div> <div v-else style="font-weight: 600" @click="clearSearch">{{ t('cancel') }}</div>
@ -290,9 +290,8 @@ const incomeLoadmore = ref(null)
const expenditureLoadmore = ref(null) const expenditureLoadmore = ref(null)
const searchQuery = ref('') const searchQuery = ref('')
const searchResults = ref([]) //
const isSearching = ref(false)
const hasSearched = ref(false) const hasSearched = ref(false)
const searchResults = ref([]) //
const selectedTab = ref({ id: 0, langKey: 'income' }) const selectedTab = ref({ id: 0, langKey: 'income' })
const tabItems = ref([]) // DOM const tabItems = ref([]) // DOM
@ -396,8 +395,8 @@ const clearSearch = async () => {
reSetObserve() // reSetObserve() //
} }
// //
const performSearch = useDebounce( const debouncedSearch = useDebounce(
async () => { async () => {
console.log('searchQuery.value:', searchQuery.value) console.log('searchQuery.value:', searchQuery.value)
@ -406,8 +405,10 @@ const performSearch = useDebounce(
return return
} }
isSearching.value = true // 使 loading
hasSearched.value = false if (loading.value) return
hasSearched.value = true //
searchResults.value = [] searchResults.value = []
if (searchQuery.value.trim()) { if (searchQuery.value.trim()) {
@ -416,9 +417,6 @@ const performSearch = useDebounce(
await fetchRecords() // await fetchRecords() //
reSetObserve() // reSetObserve() //
} }
isSearching.value = false
hasSearched.value = true
}, },
500, 500,
true true