hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/Invitation/inviteAgency.vue
View File

@ -38,7 +38,7 @@
name=""
id=""
:placeholder="t('enter_user_id')"
@keyup.enter="handleEnterPress"
@keyup.enter="debouncedSearch"
@input="handleInputChange"
style="
width: 100%;
@ -225,13 +225,7 @@ import { useDebounce } from '@/utils/useDebounce'
import { handleAvatarImageError } from '@/utils/imageHandler.js'
import { searchUser } from '@/api/userInfo'
import {
invitedList,
beInvitedList,
inviteToBeAgency,
handleInvite,
cancelInvite,
} from '@/api/bdCenter.js'
import { invitedList, inviteToBeAgency, cancelInvite } from '@/api/bdCenter.js'
import GeneralHeader from '@/components/GeneralHeader.vue'
@ -246,6 +240,8 @@ const searchResults = ref([]) //搜索结果
const disInvite = ref(true) //不可邀请
const selectedUser = ref({}) //选中的用户
const loading = ref(false) //正在获取数据
//展示的用户列表
const showUserList = computed(() => {
if (searchQuery.value) {
@ -278,27 +274,33 @@ const handleInputChange = () => {
// 创建防抖版本的搜索函数
const debouncedSearch = useDebounce(
async () => {
if (loading.value) return
loading.value = true
console.log('搜索用户id：', searchQuery.value)
searchResults.value = []
selectedUser.value = {}
disInvite.value = true
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value)
if (resSearchUser.status && resSearchUser.body) {
let targetUserInfo = { userProfile: resSearchUser.body }
searchResults.value.push(targetUserInfo)
try {
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value)
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,
true
)
// 回车防抖搜索
const handleEnterPress = async () => {
debouncedSearch()
}
// 选择用户
const toggleUserSelection = (user) => {
console.log('选择用户:', user)

30
src/views/Invitation/inviteBD.vue
View File

@ -38,7 +38,7 @@
name=""
id=""
:placeholder="t('enter_user_id')"
@keyup.enter="handleEnterPress"
@keyup.enter="debouncedSearch"
@input="handleInputChange"
style="
width: 100%;
@ -244,6 +244,8 @@ const searchResults = ref([]) //搜索结果
const disInvite = ref(true) //不可邀请
const selectedUser = ref({}) //选中的用户
const loading = ref(false) //正在获取数据
//展示的用户列表
const showUserList = computed(() => {
if (searchQuery.value) {
@ -276,27 +278,33 @@ const handleInputChange = () => {
// 创建防抖版本的搜索函数
const debouncedSearch = useDebounce(
async () => {
if (loading.value) return
loading.value = true
console.log('搜索用户id：', searchQuery.value)
searchResults.value = []
selectedUser.value = {}
disInvite.value = true
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value)
if (resSearchUser.status && resSearchUser.body) {
let targetUserInfo = { userProfile: resSearchUser.body }
searchResults.value.push(targetUserInfo)
try {
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value)
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,
true
)
// 回车防抖搜索
const handleEnterPress = async () => {
debouncedSearch()
}
// 选择用户
const toggleUserSelection = (user) => {
console.log('选择用户:', user)

30
src/views/Invitation/inviteBDLeader.vue
View File

@ -38,7 +38,7 @@
name=""
id=""
:placeholder="t('enter_user_id')"
@keyup.enter="handleEnterPress"
@keyup.enter="debouncedSearch"
@input="handleInputChange"
style="
width: 100%;
@ -243,6 +243,8 @@ const searchResults = ref([]) //搜索结果
const disInvite = ref(true) //不可邀请
const selectedUser = ref({}) //选中的用户
const loading = ref(false) //正在获取数据
//展示的用户列表
const showUserList = computed(() => {
if (searchQuery.value) {
@ -275,27 +277,33 @@ const handleInputChange = () => {
// 创建防抖版本的搜索函数
const debouncedSearch = useDebounce(
async () => {
if (loading.value) return
loading.value = true
console.log('搜索用户id：', searchQuery.value)
searchResults.value = []
selectedUser.value = {}
disInvite.value = true
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value)
if (resSearchUser.status && resSearchUser.body) {
let targetUserInfo = { userProfile: resSearchUser.body }
searchResults.value.push(targetUserInfo)
try {
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value)
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,
true
)
// 回车防抖搜索
const handleEnterPress = async () => {
debouncedSearch()
}
// 选择用户
const toggleUserSelection = (user) => {
console.log('选择用户:', user)

30
src/views/Invitation/inviteRechargeAgency.vue
View File

@ -38,7 +38,7 @@
name=""
id=""
:placeholder="t('enter_user_id')"
@keyup.enter="handleEnterPress"
@keyup.enter="debouncedSearch"
@input="handleInputChange"
style="
width: 100%;
@ -223,6 +223,8 @@ const searchResults = ref([]) //搜索结果
const disInvite = ref(true) //不可邀请
const selectedUser = ref({}) //选中的用户
const loading = ref(false) //正在获取数据
//展示的用户列表
const showUserList = computed(() => {
if (searchQuery.value) {
@ -255,27 +257,33 @@ const handleInputChange = () => {
// 创建防抖版本的搜索函数
const debouncedSearch = useDebounce(
async () => {
if (loading.value) return
loading.value = true
console.log('搜索用户id：', searchQuery.value)
searchResults.value = []
selectedUser.value = {}
disInvite.value = true
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value)
if (resSearchUser.status && resSearchUser.body) {
let targetUserInfo = { userProfile: resSearchUser.body }
searchResults.value.push(targetUserInfo)
try {
if (searchQuery.value.trim()) {
const resSearchUser = await searchUser(searchQuery.value)
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,
true
)
// 回车防抖搜索
const handleEnterPress = () => {
debouncedSearch()
}
// 选择用户
const toggleUserSelection = (user) => {
console.log('选择用户:', user)

20
src/views/RechargeAgency/SellerRecordsView.vue
View File

@ -39,11 +39,11 @@
color: black;
padding: 10px 8px;
"
@keyup.enter="performSearch"
@keyup.enter="debouncedSearch"
/>
</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') }}
</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 searchQuery = ref('')
const searchResults = ref([]) //搜索结果
const isSearching = ref(false)
const hasSearched = ref(false)
const searchResults = ref([]) //搜索结果
const selectedTab = ref({ id: 0, langKey: 'income' })
const tabItems = ref([]) // 存储标签DOM引用
@ -396,8 +395,8 @@ const clearSearch = async () => {
reSetObserve() // 重新绑定观察器
}
// 执行搜索
const performSearch = useDebounce(
// 创建防抖版本的搜索函数
const debouncedSearch = useDebounce(
async () => {
console.log('searchQuery.value:', searchQuery.value)
@ -406,8 +405,10 @@ const performSearch = useDebounce(
return
}
isSearching.value = true
hasSearched.value = false
// 使用已有的 loading 状态来防止并发请求
if (loading.value) return
hasSearched.value = true // 设置搜索状态
searchResults.value = []
if (searchQuery.value.trim()) {
@ -416,9 +417,6 @@ const performSearch = useDebounce(
await fetchRecords() //搜索记录
reSetObserve() // 重新绑定观察器
}
isSearching.value = false
hasSearched.value = true
},
500,
true