134 lines
3.9 KiB
TypeScript
134 lines
3.9 KiB
TypeScript
import { ref, onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
|
|
import { fetchListingsPage, type Listing, type PublicListingQuery } from '../api/listings'
|
|
import type { HomeFilters } from './useHomeFilters'
|
|
|
|
const homePageSize = 12
|
|
|
|
export function useListingQuery(
|
|
filters: HomeFilters,
|
|
sortBy: Ref<string>,
|
|
activeZone: Ref<string>
|
|
) {
|
|
const loading = ref(false)
|
|
const loadingMore = ref(false)
|
|
const listings = ref<Listing[]>([])
|
|
const totalListings = ref(0)
|
|
const zoneCounts = ref<Record<string, number>>({})
|
|
const currentPage = ref(1)
|
|
const hasMoreListings = ref(true)
|
|
let listingRequestSeq = 0
|
|
|
|
function joinCSV(values: string[]) {
|
|
return values.filter(Boolean).join(',') || undefined
|
|
}
|
|
|
|
function buildListingQuery(page: number): PublicListingQuery {
|
|
return {
|
|
page,
|
|
page_size: homePageSize,
|
|
keyword: filters.keyword.trim(),
|
|
sort: sortBy.value,
|
|
zone: activeZone.value,
|
|
server: filters.server,
|
|
region: joinCSV(filters.region),
|
|
login_method: joinCSV(filters.loginMethod),
|
|
rank: joinCSV(filters.rank),
|
|
insurance: joinCSV(filters.insurance),
|
|
stamina: joinCSV(filters.stamina),
|
|
load: joinCSV(filters.load),
|
|
// 多选皮肤名；后端 skin_name CSV 为 AND 匹配（账号需包含所有选中皮肤）
|
|
skin_name: joinCSV(filters.skinNames),
|
|
min_coin: filters.minCoin,
|
|
max_coin: filters.maxCoin,
|
|
min_ratio: filters.minRatio,
|
|
max_ratio: filters.maxRatio,
|
|
min_price: filters.minPrice,
|
|
max_price: filters.maxPrice,
|
|
min_deposit: filters.minDeposit,
|
|
max_deposit: filters.maxDeposit,
|
|
min_total: filters.minTotal,
|
|
max_total: filters.maxTotal,
|
|
min_fire_level: filters.minFireLevel,
|
|
max_fire_level: filters.maxFireLevel,
|
|
resource_awmAmmo_min: filters.minAwmAmmo,
|
|
resource_awmAmmo_max: filters.maxAwmAmmo,
|
|
}
|
|
}
|
|
|
|
function listingQuerySignature() {
|
|
return JSON.stringify(buildListingQuery(1))
|
|
}
|
|
|
|
async function loadListingsPage(reset = false) {
|
|
if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return
|
|
const requestSeq = ++listingRequestSeq
|
|
if (reset) {
|
|
currentPage.value = 1
|
|
hasMoreListings.value = true
|
|
}
|
|
loadingMore.value = true
|
|
try {
|
|
const page = await fetchListingsPage(buildListingQuery(currentPage.value))
|
|
if (requestSeq !== listingRequestSeq) return
|
|
listings.value = reset ? page.items : [...listings.value, ...page.items]
|
|
totalListings.value = page.total
|
|
zoneCounts.value = page.zone_counts
|
|
hasMoreListings.value = listings.value.length < page.total
|
|
currentPage.value = page.page + 1
|
|
requestAnimationFrame(handleWindowScroll)
|
|
} catch {
|
|
if (reset) {
|
|
listings.value = []
|
|
totalListings.value = 0
|
|
zoneCounts.value = {}
|
|
hasMoreListings.value = false
|
|
}
|
|
} finally {
|
|
if (requestSeq === listingRequestSeq) {
|
|
loadingMore.value = false
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleWindowScroll() {
|
|
if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 480) return
|
|
loadListingsPage(false)
|
|
}
|
|
|
|
function zoneCount(key: string) {
|
|
if (key === 'all') return zoneCounts.value.all ?? totalListings.value
|
|
return zoneCounts.value[key] ?? 0
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', handleWindowScroll, { passive: true })
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', handleWindowScroll)
|
|
})
|
|
|
|
// 使用防抖优化搜索
|
|
let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
|
watch(
|
|
() => listingQuerySignature(),
|
|
() => {
|
|
if (debounceTimer) clearTimeout(debounceTimer)
|
|
debounceTimer = setTimeout(() => {
|
|
loadListingsPage(true)
|
|
}, 300)
|
|
}
|
|
)
|
|
|
|
return {
|
|
loading,
|
|
loadingMore,
|
|
listings,
|
|
totalListings,
|
|
zoneCounts,
|
|
hasMoreListings,
|
|
loadListingsPage,
|
|
zoneCount,
|
|
}
|
|
}
|