首页布局优化-1
This commit is contained in:
yml
@@ -62,7 +62,7 @@ function isNavActive(path: string) {
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #1477ff;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.nav-item span {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { computed, nextTick, ref, watch } from 'vue'
|
||||
|
||||
export type FilterSection =
|
||||
| {
|
||||
@@ -46,6 +46,36 @@ const activeCount = computed(() => {
|
||||
return chipCount + rangeCount
|
||||
})
|
||||
|
||||
const visibleSections = computed(() =>
|
||||
props.sections.filter(section => section.type === 'range' || section.options.length)
|
||||
)
|
||||
const activeSectionKey = ref('')
|
||||
const navRef = ref<HTMLElement | null>(null)
|
||||
const contentRef = ref<HTMLElement | null>(null)
|
||||
|
||||
watch(
|
||||
[() => props.show, () => visibleSections.value.map(section => section.key).join(',')],
|
||||
async ([show]) => {
|
||||
if (!show) return
|
||||
activeSectionKey.value = visibleSections.value[0]?.key || ''
|
||||
await nextTick()
|
||||
if (contentRef.value) contentRef.value.scrollTop = 0
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(activeSectionKey, async sectionKey => {
|
||||
if (!sectionKey) return
|
||||
await nextTick()
|
||||
centerActiveNavItem(sectionKey)
|
||||
})
|
||||
|
||||
function sectionCount(section: FilterSection) {
|
||||
if (section.type === 'chips') return props.selectedFilters[section.key]?.length || 0
|
||||
const range = props.rangeFilters[section.key]
|
||||
return range?.min || range?.max ? 1 : 0
|
||||
}
|
||||
|
||||
function toggleChip(sectionKey: string, value: string) {
|
||||
const selected = props.selectedFilters[sectionKey] || []
|
||||
const next = selected.includes(value)
|
||||
@@ -78,6 +108,58 @@ function resetFilters() {
|
||||
emit('update:selectedFilters', {})
|
||||
emit('update:rangeFilters', {})
|
||||
}
|
||||
|
||||
function scrollToSection(sectionKey: string) {
|
||||
activeSectionKey.value = sectionKey
|
||||
const body = contentRef.value
|
||||
if (!body) return
|
||||
const section = findSectionElement(sectionKey)
|
||||
if (!section) return
|
||||
body.scrollTo({ top: Math.max(sectionTopInBody(section, body) - 8, 0), behavior: 'auto' })
|
||||
}
|
||||
|
||||
function syncActiveSection() {
|
||||
const body = contentRef.value
|
||||
if (!body) return
|
||||
const sections = Array.from(body.querySelectorAll<HTMLElement>('[data-filter-section]'))
|
||||
const currentTop = body.scrollTop + 28
|
||||
let current = sections[0]
|
||||
for (const section of sections) {
|
||||
if (sectionTopInBody(section, body) <= currentTop) {
|
||||
current = section
|
||||
continue
|
||||
}
|
||||
break
|
||||
}
|
||||
activeSectionKey.value = current?.dataset.filterSection || visibleSections.value[0]?.key || ''
|
||||
}
|
||||
|
||||
function centerActiveNavItem(sectionKey: string) {
|
||||
const nav = navRef.value
|
||||
if (!nav) return
|
||||
const navItem =
|
||||
Array.from(nav.querySelectorAll<HTMLElement>('[data-filter-nav]')).find(
|
||||
item => item.dataset.filterNav === sectionKey
|
||||
) || null
|
||||
if (!navItem) return
|
||||
const itemTop = navItem.getBoundingClientRect().top - nav.getBoundingClientRect().top
|
||||
const targetTop = nav.scrollTop + itemTop - nav.clientHeight / 2 + navItem.clientHeight / 2
|
||||
nav.scrollTo({ top: Math.max(targetTop, 0), behavior: 'auto' })
|
||||
}
|
||||
|
||||
function findSectionElement(sectionKey: string) {
|
||||
const body = contentRef.value
|
||||
if (!body) return null
|
||||
return (
|
||||
Array.from(body.querySelectorAll<HTMLElement>('[data-filter-section]')).find(
|
||||
section => section.dataset.filterSection === sectionKey
|
||||
) || null
|
||||
)
|
||||
}
|
||||
|
||||
function sectionTopInBody(section: HTMLElement, body: HTMLElement) {
|
||||
return section.getBoundingClientRect().top - body.getBoundingClientRect().top + body.scrollTop
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -89,66 +171,96 @@ function resetFilters() {
|
||||
@update:show="emit('update:show', $event)"
|
||||
>
|
||||
<header class="sheet-header">
|
||||
<span></span>
|
||||
<strong>筛选</strong>
|
||||
<button type="button" @click="emit('update:show', false)">完成</button>
|
||||
<button
|
||||
class="sheet-close"
|
||||
type="button"
|
||||
aria-label="关闭筛选"
|
||||
@click="emit('update:show', false)"
|
||||
>
|
||||
<van-icon name="cross" :size="24" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="sheet-body">
|
||||
<section v-for="section in sections" :key="section.key" class="filter-section">
|
||||
<div class="filter-title">
|
||||
<h3>{{ section.title }}</h3>
|
||||
<span v-if="section.type === 'range' && section.unit">单位：{{ section.unit }}</span>
|
||||
</div>
|
||||
<nav ref="navRef" class="filter-nav" aria-label="筛选分类">
|
||||
<button
|
||||
v-for="section in visibleSections"
|
||||
:key="section.key"
|
||||
type="button"
|
||||
class="filter-nav-item"
|
||||
:data-filter-nav="section.key"
|
||||
:class="{ active: activeSectionKey === section.key }"
|
||||
@click="scrollToSection(section.key)"
|
||||
>
|
||||
<span>{{ section.title }}</span>
|
||||
<em v-if="sectionCount(section)">{{ sectionCount(section) }}</em>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<template v-if="section.type === 'range'">
|
||||
<div class="range-row">
|
||||
<input
|
||||
:value="rangeFilters[section.key]?.min || ''"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
:placeholder="section.minPlaceholder || '最低'"
|
||||
@input="updateRange(section.key, 'min', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<span></span>
|
||||
<input
|
||||
:value="rangeFilters[section.key]?.max || ''"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
:placeholder="section.maxPlaceholder || '最高'"
|
||||
@input="updateRange(section.key, 'max', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<div ref="contentRef" class="filter-content" @scroll.passive="syncActiveSection">
|
||||
<section
|
||||
v-for="section in visibleSections"
|
||||
:key="section.key"
|
||||
class="filter-section"
|
||||
:data-filter-section="section.key"
|
||||
>
|
||||
<div class="filter-title">
|
||||
<h3>{{ section.title }}</h3>
|
||||
<span v-if="section.type === 'range' && section.unit">单位：{{ section.unit }}</span>
|
||||
</div>
|
||||
<div v-if="rangePresets[section.key]?.length" class="chip-grid">
|
||||
|
||||
<template v-if="section.type === 'range'">
|
||||
<div class="range-row">
|
||||
<input
|
||||
:value="rangeFilters[section.key]?.min || ''"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
:placeholder="section.minPlaceholder || '最低'"
|
||||
@input="updateRange(section.key, 'min', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<span></span>
|
||||
<input
|
||||
:value="rangeFilters[section.key]?.max || ''"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
:placeholder="section.maxPlaceholder || '最高'"
|
||||
@input="updateRange(section.key, 'max', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="rangePresets[section.key]?.length" class="chip-grid">
|
||||
<button
|
||||
v-for="preset in rangePresets[section.key]"
|
||||
:key="`${section.key}-${preset.label}`"
|
||||
type="button"
|
||||
:class="{ active: isRangePresetActive(section.key, preset.min, preset.max) }"
|
||||
@click="applyRangePreset(section.key, preset.min, preset.max)"
|
||||
>
|
||||
{{ preset.label }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="chip-grid">
|
||||
<button
|
||||
v-for="preset in rangePresets[section.key]"
|
||||
:key="`${section.key}-${preset.label}`"
|
||||
v-for="option in section.options"
|
||||
:key="`${section.key}-${option}`"
|
||||
type="button"
|
||||
:class="{ active: isRangePresetActive(section.key, preset.min, preset.max) }"
|
||||
@click="applyRangePreset(section.key, preset.min, preset.max)"
|
||||
:class="{ active: selectedFilters[section.key]?.includes(option) }"
|
||||
@click="toggleChip(section.key, option)"
|
||||
>
|
||||
{{ preset.label }}
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="chip-grid">
|
||||
<button
|
||||
v-for="option in section.options"
|
||||
:key="`${section.key}-${option}`"
|
||||
type="button"
|
||||
:class="{ active: selectedFilters[section.key]?.includes(option) }"
|
||||
@click="toggleChip(section.key, option)"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="sheet-footer">
|
||||
<button type="button" @click="resetFilters">重置</button>
|
||||
<button type="button" class="primary" @click="emit('update:show', false)">
|
||||
查看结果{{ activeCount ? ` (${activeCount})` : '' }}
|
||||
确定{{ activeCount ? ` (${activeCount})` : '' }}
|
||||
</button>
|
||||
</footer>
|
||||
</van-popup>
|
||||
@@ -156,8 +268,13 @@ function resetFilters() {
|
||||
|
||||
<style scoped>
|
||||
.mobile-filter-sheet {
|
||||
display: grid;
|
||||
grid-template-rows: 50px minmax(0, 1fr) auto;
|
||||
height: 86vh;
|
||||
max-height: 86vh;
|
||||
overflow: hidden;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sheet-header,
|
||||
@@ -170,32 +287,118 @@ function resetFilters() {
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(0, 1fr) 36px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
padding: 0 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sheet-header strong {
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.sheet-header button,
|
||||
.sheet-footer button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #2563eb;
|
||||
color: #ff6a00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sheet-close {
|
||||
display: grid;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.sheet-body {
|
||||
max-height: calc(86vh - 112px);
|
||||
display: grid;
|
||||
grid-template-columns: 96px minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.filter-nav {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 4px 16px 16px;
|
||||
background: #f7f8fa;
|
||||
background: #f6f6f6;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.filter-nav::-webkit-scrollbar,
|
||||
.filter-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-nav-item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
place-items: center;
|
||||
gap: 3px;
|
||||
padding: 6px 6px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
background: transparent;
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.filter-nav-item.active {
|
||||
background: #fff;
|
||||
color: #ff6a00;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.filter-nav-item.active::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
background: #ff6a00;
|
||||
content: '';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.filter-nav-item span {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.filter-nav-item em {
|
||||
display: grid;
|
||||
min-width: 15px;
|
||||
height: 15px;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.filter-content {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid #e8edf3;
|
||||
padding: 14px 14px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
@@ -208,41 +411,42 @@ function resetFilters() {
|
||||
|
||||
.filter-title h3 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
color: #2b2b2b;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.filter-title span {
|
||||
color: #8b9cb5;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.chip-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.chip-grid button {
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dbe3ee;
|
||||
min-height: 34px;
|
||||
padding: 0 7px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chip-grid button.active {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.range-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 18px 1fr;
|
||||
grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -256,20 +460,53 @@ function resetFilters() {
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sheet-footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
border-top: 1px solid #edf2f7;
|
||||
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.sheet-footer button {
|
||||
height: 38px;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
color: #222;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.sheet-footer .primary {
|
||||
min-width: 128px;
|
||||
min-width: 0;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
background: #2563eb;
|
||||
border-color: #ffcc00;
|
||||
border-radius: 10px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.sheet-body {
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.filter-nav-item {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,27 @@
|
||||
.mobile-shell {
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 68px;
|
||||
background: #f6f8fb;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.mobile-hero {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
padding: 12px 12px 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
@@ -26,12 +33,13 @@
|
||||
|
||||
.mobile-logo {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #2563eb;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #ff8a1f 0%, #ff5a00 100%);
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -43,25 +51,37 @@
|
||||
|
||||
.mobile-brand strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.mobile-brand small {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home-search {
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content) {
|
||||
height: 38px;
|
||||
background: #f2f5f9;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-field__control) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
flex: 0 0 auto;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
color: #2563eb;
|
||||
color: #ff6a00;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -108,25 +128,58 @@
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicators) {
|
||||
right: 16px;
|
||||
bottom: 12px;
|
||||
left: auto;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: rgba(255, 255, 255, 0.52);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator--active) {
|
||||
width: 16px;
|
||||
border-radius: 999px;
|
||||
background: #ff6a00;
|
||||
}
|
||||
|
||||
.mobile-banner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 116px;
|
||||
min-height: 128px;
|
||||
align-items: flex-end;
|
||||
padding: 16px;
|
||||
padding: 16px 16px 24px;
|
||||
overflow: hidden;
|
||||
background: #0f172a;
|
||||
background: #9a3412;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-warm {
|
||||
background: #7c2d12;
|
||||
background: #9a3412;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-cool {
|
||||
background: #1e3a8a;
|
||||
background: #7c2d12;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-blue {
|
||||
background: #7c2d12;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-green {
|
||||
background: #854d0e;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-orange {
|
||||
background: #c2410c;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
@@ -141,12 +194,16 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.72));
|
||||
background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.58));
|
||||
}
|
||||
|
||||
.mobile-banner > div:not(.banner-badge) {
|
||||
.banner-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
max-width: 270px;
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
@@ -154,30 +211,116 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
.mobile-banner span {
|
||||
.mobile-banner p {
|
||||
color: rgba(255, 247, 237, 0.86);
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.mobile-banner h1 {
|
||||
margin-top: 4px;
|
||||
font-size: 20px;
|
||||
font-size: 19px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
.banner-pill {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
color: #ffedd5;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.mobile-banner.has-image .banner-pill {
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.34);
|
||||
color: #fff7ed;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 1;
|
||||
padding: 4px 8px;
|
||||
padding: 4px 9px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: #0f172a;
|
||||
background: rgba(255, 247, 237, 0.94);
|
||||
color: #9a3412;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.zone-strip {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 0 -12px 12px;
|
||||
padding: 0 12px 2px;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.zone-strip::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zone-pill {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-areas:
|
||||
'label count'
|
||||
'hint hint';
|
||||
column-gap: 6px;
|
||||
row-gap: 3px;
|
||||
flex: 0 0 74px;
|
||||
min-height: 54px;
|
||||
align-items: center;
|
||||
padding: 8px 9px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.zone-pill strong {
|
||||
grid-area: label;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zone-pill span {
|
||||
grid-area: count;
|
||||
color: #ff6a00;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zone-pill small {
|
||||
grid-area: hint;
|
||||
overflow: hidden;
|
||||
color: #7b8798;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zone-pill.active {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
color: #9a3412;
|
||||
}
|
||||
|
||||
.zone-pill.active span {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@@ -213,7 +356,7 @@
|
||||
height: 18px;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #2563eb;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
@@ -242,24 +385,50 @@
|
||||
}
|
||||
|
||||
.sort-panel button.active {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 1px;
|
||||
margin-bottom: 10px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.result-count strong {
|
||||
color: #2563eb;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.state-loading {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.mobile-empty {
|
||||
min-height: 280px;
|
||||
justify-content: center;
|
||||
padding: 36px 0 28px;
|
||||
}
|
||||
|
||||
.mobile-empty :deep(.van-empty__image) {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
.mobile-empty :deep(.van-empty__description) {
|
||||
margin-top: 12px;
|
||||
color: #8b95a1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mobile-empty :deep(.van-button--primary) {
|
||||
border-color: #ff6a00;
|
||||
background: #ff6a00;
|
||||
}
|
||||
|
||||
.mobile-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
@@ -303,7 +472,7 @@
|
||||
.card-cover-labels em {
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(37, 99, 235, 0.92);
|
||||
background: rgba(255, 106, 0, 0.92);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
@@ -329,8 +498,8 @@
|
||||
margin-top: 6px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -389,7 +558,14 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||
.mobile-logo {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,6 +29,7 @@ import {
|
||||
formatListingCode,
|
||||
getLoginMethod,
|
||||
getServerRegion,
|
||||
assetRegions,
|
||||
hasAcceleratedSaleRatio,
|
||||
hasGiftResources,
|
||||
} from '@/utils/listingDisplay'
|
||||
@@ -41,11 +42,13 @@ const loadingMore = ref(false)
|
||||
const loadFailed = ref(false)
|
||||
const listings = ref<Listing[]>([])
|
||||
const totalListings = ref(0)
|
||||
const zoneCounts = ref<Record<string, number>>({})
|
||||
const currentPage = ref(1)
|
||||
const hasMoreListings = ref(true)
|
||||
const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions)
|
||||
const sortOpen = ref(false)
|
||||
const activeSort = ref('comprehensive')
|
||||
const activeSort = ref('recommended')
|
||||
const activeZone = ref('all')
|
||||
const filterOpen = ref(false)
|
||||
const selectedFilters = ref<Record<string, string[]>>({})
|
||||
const rangeFilters = ref<Record<string, { min: string; max: string }>>({})
|
||||
@@ -56,23 +59,57 @@ const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners)
|
||||
const supportLoading = ref(false)
|
||||
const mobilePageSize = 10
|
||||
let listingRequestSeq = 0
|
||||
let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const sortOptions = [
|
||||
{ key: 'comprehensive', label: '综合排序' },
|
||||
{ key: 'published', label: '发布时间' },
|
||||
{ key: 'recommended', label: '综合推荐' },
|
||||
{ key: 'coinDesc', label: '哈夫币' },
|
||||
{ key: 'awmDesc', label: 'AWM数量' },
|
||||
{ key: 'priceAsc', label: '价格最低' },
|
||||
{ key: 'priceDesc', label: '价格最高' },
|
||||
{ key: 'published', label: '最新发布' },
|
||||
]
|
||||
|
||||
const zoneOptions = [
|
||||
{ key: 'all', label: '全部', hint: '当前可租' },
|
||||
{ key: 'sale', label: '特惠', hint: '价格更划算' },
|
||||
{ key: 'gift', label: '赠送', hint: '含赠送物品' },
|
||||
{ key: 'night', label: '夜间', hint: '夜间好上号' },
|
||||
{ key: 'password', label: '账密', hint: '交接更快' },
|
||||
{ key: 'highCoin', label: '高币', hint: '100M以上' },
|
||||
]
|
||||
|
||||
const rangePresets: Record<string, Array<{ label: string; min: string; max: string }>> = {
|
||||
coin: [
|
||||
price: [
|
||||
{ label: '0-50', min: '0', max: '50' },
|
||||
{ label: '50-100', min: '50', max: '100' },
|
||||
{ label: '100-200', min: '100', max: '200' },
|
||||
{ label: '200-300', min: '200', max: '300' },
|
||||
{ label: '200以上', min: '200', max: '' },
|
||||
],
|
||||
coin: [
|
||||
{ label: '0-100', min: '0', max: '100' },
|
||||
{ label: '100-300', min: '100', max: '300' },
|
||||
{ label: '300-500', min: '300', max: '500' },
|
||||
{ label: '500以上', min: '500', max: '' },
|
||||
],
|
||||
deposit: [
|
||||
{ label: '0-50', min: '0', max: '50' },
|
||||
{ label: '50-100', min: '50', max: '100' },
|
||||
{ label: '100-200', min: '100', max: '200' },
|
||||
{ label: '200以上', min: '200', max: '' },
|
||||
],
|
||||
total: [
|
||||
{ label: '0-500', min: '0', max: '500' },
|
||||
{ label: '500-1000', min: '500', max: '1000' },
|
||||
{ label: '1000-2000', min: '1000', max: '2000' },
|
||||
{ label: '2000-5000', min: '2000', max: '5000' },
|
||||
],
|
||||
fireLevel: [
|
||||
{ label: '38-50', min: '38', max: '50' },
|
||||
{ label: '50-60', min: '50', max: '60' },
|
||||
{ label: '60-70', min: '60', max: '70' },
|
||||
{ label: '70以上', min: '70', max: '' },
|
||||
],
|
||||
resource_awmAmmo: [
|
||||
{ label: '0-20', min: '0', max: '20' },
|
||||
{ label: '20-50', min: '20', max: '50' },
|
||||
@@ -111,6 +148,13 @@ const loginMethodFilterOptions = computed(() =>
|
||||
uniqueOptions(publishOptions.value.login_method_options.map(item => item.trim()).filter(Boolean))
|
||||
)
|
||||
|
||||
const regionFilterOptions = computed(() =>
|
||||
uniqueOptions([
|
||||
...publishOptions.value.region_options,
|
||||
...listings.value.flatMap(item => assetRegions(item)),
|
||||
])
|
||||
)
|
||||
|
||||
const filterSections = computed<FilterSection[]>(() => [
|
||||
{
|
||||
key: 'price',
|
||||
@@ -129,6 +173,7 @@ const filterSections = computed<FilterSection[]>(() => [
|
||||
maxPlaceholder: '最高',
|
||||
},
|
||||
{ key: 'server', title: '区服', type: 'chips', options: serverFilterOptions.value },
|
||||
{ key: 'region', title: '资产地区', type: 'chips', options: regionFilterOptions.value },
|
||||
{ key: 'login', title: '上号方式', type: 'chips', options: loginMethodFilterOptions.value },
|
||||
{
|
||||
key: 'insurance',
|
||||
@@ -159,6 +204,13 @@ const filterSections = computed<FilterSection[]>(() => [
|
||||
minPlaceholder: '最低',
|
||||
maxPlaceholder: '最高',
|
||||
},
|
||||
{
|
||||
key: 'fireLevel',
|
||||
title: '等级',
|
||||
type: 'range',
|
||||
minPlaceholder: '最低',
|
||||
maxPlaceholder: '最高',
|
||||
},
|
||||
{ key: 'rank', title: '段位', type: 'chips', options: publishOptions.value.rank_options },
|
||||
{
|
||||
key: 'deposit',
|
||||
@@ -168,6 +220,14 @@ const filterSections = computed<FilterSection[]>(() => [
|
||||
minPlaceholder: '最低',
|
||||
maxPlaceholder: '最高',
|
||||
},
|
||||
{
|
||||
key: 'total',
|
||||
title: '合计金额',
|
||||
type: 'range',
|
||||
unit: '元',
|
||||
minPlaceholder: '最低',
|
||||
maxPlaceholder: '最高',
|
||||
},
|
||||
])
|
||||
|
||||
const activeFilterCount = computed(() => {
|
||||
@@ -185,6 +245,13 @@ const displayListings = computed(() => {
|
||||
return listings.value
|
||||
})
|
||||
|
||||
const visibleZoneOptions = computed(() =>
|
||||
zoneOptions.map(zone => ({
|
||||
...zone,
|
||||
count: zoneCount(zone.key),
|
||||
}))
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
loadListings()
|
||||
loadHomeConfig()
|
||||
@@ -193,15 +260,23 @@ onMounted(() => {
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', handleWindowScroll)
|
||||
if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => listingQuerySignature(),
|
||||
() => filterQuerySignature(),
|
||||
() => {
|
||||
loadListings(true)
|
||||
}
|
||||
)
|
||||
|
||||
watch(searchValue, () => {
|
||||
if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
|
||||
searchDebounceTimer = setTimeout(() => {
|
||||
loadListings(true)
|
||||
}, 300)
|
||||
})
|
||||
|
||||
async function loadListings(reset = true) {
|
||||
if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return
|
||||
const requestSeq = ++listingRequestSeq
|
||||
@@ -217,6 +292,7 @@ async function loadListings(reset = true) {
|
||||
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)
|
||||
@@ -224,6 +300,7 @@ async function loadListings(reset = true) {
|
||||
if (reset) {
|
||||
listings.value = []
|
||||
totalListings.value = 0
|
||||
zoneCounts.value = {}
|
||||
hasMoreListings.value = false
|
||||
loadFailed.value = true
|
||||
}
|
||||
@@ -277,10 +354,16 @@ function selectSort(sortKey: string) {
|
||||
sortOpen.value = false
|
||||
}
|
||||
|
||||
function selectZone(zoneKey: string) {
|
||||
activeZone.value = zoneKey
|
||||
sortOpen.value = false
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
selectedFilters.value = {}
|
||||
rangeFilters.value = {}
|
||||
searchValue.value = ''
|
||||
activeZone.value = 'all'
|
||||
}
|
||||
|
||||
function buildListingQuery(page: number): PublicListingQuery {
|
||||
@@ -289,6 +372,7 @@ function buildListingQuery(page: number): PublicListingQuery {
|
||||
page_size: mobilePageSize,
|
||||
keyword: searchValue.value.trim(),
|
||||
sort: activeSort.value,
|
||||
zone: activeZone.value,
|
||||
}
|
||||
const skinGroups: string[] = []
|
||||
const skinNames: string[] = []
|
||||
@@ -296,6 +380,7 @@ function buildListingQuery(page: number): PublicListingQuery {
|
||||
const value = values.filter(Boolean).join(',')
|
||||
if (!value) continue
|
||||
if (key === 'server') query.server = value
|
||||
else if (key === 'region') query.region = value
|
||||
else if (key === 'login') query.login_method = value
|
||||
else if (key === 'insurance') query.insurance = value
|
||||
else if (key === 'stamina') query.stamina = value
|
||||
@@ -325,6 +410,12 @@ function buildListingQuery(page: number): PublicListingQuery {
|
||||
} else if (key === 'deposit') {
|
||||
query.min_deposit = min
|
||||
query.max_deposit = max
|
||||
} else if (key === 'total') {
|
||||
query.min_total = min
|
||||
query.max_total = max
|
||||
} else if (key === 'fireLevel') {
|
||||
query.min_fire_level = min
|
||||
query.max_fire_level = max
|
||||
} else if (key.startsWith('resource_')) {
|
||||
const resourceKey = key.replace('resource_', '')
|
||||
query[`resource_${resourceKey}_min`] = min
|
||||
@@ -334,8 +425,13 @@ function buildListingQuery(page: number): PublicListingQuery {
|
||||
return query
|
||||
}
|
||||
|
||||
function listingQuerySignature() {
|
||||
return JSON.stringify(buildListingQuery(1))
|
||||
function filterQuerySignature() {
|
||||
return JSON.stringify({
|
||||
sort: activeSort.value,
|
||||
zone: activeZone.value,
|
||||
selected: selectedFilters.value,
|
||||
ranges: rangeFilters.value,
|
||||
})
|
||||
}
|
||||
|
||||
function parseOptionalNumber(value: string) {
|
||||
@@ -361,6 +457,11 @@ function parseQuantityUnit(price: string) {
|
||||
function uniqueOptions(values: string[]) {
|
||||
return [...new Set(values.map(item => item.trim()).filter(Boolean))]
|
||||
}
|
||||
|
||||
function zoneCount(key: string) {
|
||||
if (key === 'all') return zoneCounts.value.all ?? totalListings.value
|
||||
return zoneCounts.value[key] ?? 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -375,12 +476,6 @@ function uniqueOptions(values: string[]) {
|
||||
<small>哈夫币租号</small>
|
||||
</div>
|
||||
</div>
|
||||
<van-search
|
||||
v-model="searchValue"
|
||||
shape="round"
|
||||
placeholder="搜编号 / 区服 / 段位"
|
||||
class="home-search"
|
||||
/>
|
||||
<button
|
||||
class="mobile-service"
|
||||
type="button"
|
||||
@@ -390,6 +485,12 @@ function uniqueOptions(values: string[]) {
|
||||
{{ supportLoading ? '接入中' : '客服' }}
|
||||
</button>
|
||||
</div>
|
||||
<van-search
|
||||
v-model="searchValue"
|
||||
shape="round"
|
||||
placeholder="搜编号 / 区服 / 段位"
|
||||
class="home-search"
|
||||
/>
|
||||
|
||||
<!-- 防骗提示卡片（不用 van-notice-bar） -->
|
||||
<div class="fraud-tip">
|
||||
@@ -425,16 +526,31 @@ function uniqueOptions(values: string[]) {
|
||||
:src="slide.image_url"
|
||||
:alt="slide.title || slide.eyebrow || '首页轮播图'"
|
||||
/>
|
||||
<div>
|
||||
<div class="banner-copy">
|
||||
<p v-if="slide.eyebrow">{{ slide.eyebrow }}</p>
|
||||
<h1 v-if="slide.title">{{ slide.title }}</h1>
|
||||
<span v-if="slide.pill">{{ slide.pill }}</span>
|
||||
<span v-if="slide.pill" class="banner-pill">{{ slide.pill }}</span>
|
||||
</div>
|
||||
<div v-if="slide.badge" class="banner-badge">{{ slide.badge }}</div>
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
<div class="zone-strip" aria-label="账号专区">
|
||||
<button
|
||||
v-for="zone in visibleZoneOptions"
|
||||
:key="zone.key"
|
||||
type="button"
|
||||
class="zone-pill"
|
||||
:class="{ active: activeZone === zone.key }"
|
||||
@click="selectZone(zone.key)"
|
||||
>
|
||||
<strong>{{ zone.label }}</strong>
|
||||
<span>{{ zone.count }}</span>
|
||||
<small>{{ zone.hint }}</small>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="list-toolbar">
|
||||
<button type="button" class="sort-entry" @click="toggleSortPanel">
|
||||
<span>{{ activeSortLabel }}</span>
|
||||
@@ -476,6 +592,7 @@ function uniqueOptions(values: string[]) {
|
||||
/>
|
||||
<van-empty
|
||||
v-else-if="displayListings.length === 0"
|
||||
class="mobile-empty"
|
||||
image="search"
|
||||
description="没有符合条件的账号"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user