筛选使用弹窗
This commit is contained in:
yml
+108
-104
@@ -353,111 +353,115 @@ function insuranceLabel(value: string) {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="filterOpen" class="filter-panel">
|
||||
<div class="filter-head">
|
||||
<strong>筛选条件</strong>
|
||||
<button type="button" @click="resetFilters">重置</button>
|
||||
<Teleport to="body">
|
||||
<div v-if="filterOpen" class="filter-overlay" @click.self="filterOpen = false">
|
||||
<section class="filter-panel">
|
||||
<div class="filter-head">
|
||||
<strong>筛选条件</strong>
|
||||
<button type="button" @click="resetFilters">重置</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-body">
|
||||
<label class="filter-field filter-field-wide">
|
||||
<span>账号编号</span>
|
||||
<input v-model="filters.keyword" placeholder="输入编号搜索" @keyup.enter="confirmFilters" />
|
||||
</label>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>体力等级</strong>
|
||||
<div class="filter-chips">
|
||||
<button
|
||||
v-for="option in levelOptions"
|
||||
:key="`stamina-${option}`"
|
||||
:class="{ active: isSelected(filters.stamina, option) }"
|
||||
type="button"
|
||||
@click="toggleListValue(filters.stamina, option)"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>负重等级</strong>
|
||||
<div class="filter-chips">
|
||||
<button
|
||||
v-for="option in levelOptions"
|
||||
:key="`load-${option}`"
|
||||
:class="{ active: isSelected(filters.load, option) }"
|
||||
type="button"
|
||||
@click="toggleListValue(filters.load, option)"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>保险格数</strong>
|
||||
<div class="filter-chips">
|
||||
<button
|
||||
v-for="option in insuranceOptions"
|
||||
:key="`insurance-${option}`"
|
||||
:class="{ active: isSelected(filters.insurance, option) }"
|
||||
type="button"
|
||||
@click="toggleListValue(filters.insurance, option)"
|
||||
>
|
||||
{{ insuranceLabel(option) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="section in skinSections" :key="section.key" class="filter-group filter-group-wide">
|
||||
<strong>{{ section.title }}</strong>
|
||||
<div class="filter-chips">
|
||||
<button
|
||||
v-for="option in section.options"
|
||||
:key="`${section.key}-${option}`"
|
||||
:class="{ active: isSelected(filters.skinNames, option) }"
|
||||
type="button"
|
||||
@click="toggleListValue(filters.skinNames, option)"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-range filter-group-wide">
|
||||
<strong>哈夫币范围(M)</strong>
|
||||
<div>
|
||||
<input v-model="filters.minCoin" inputmode="numeric" placeholder="最小" @keyup.enter="confirmFilters" />
|
||||
<span>-</span>
|
||||
<input v-model="filters.maxCoin" inputmode="numeric" placeholder="最大" @keyup.enter="confirmFilters" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-range filter-group-wide">
|
||||
<strong>价格范围</strong>
|
||||
<div>
|
||||
<input v-model="filters.minPrice" inputmode="numeric" placeholder="最低¥" @keyup.enter="confirmFilters" />
|
||||
<span>-</span>
|
||||
<input v-model="filters.maxPrice" inputmode="numeric" placeholder="最高¥" @keyup.enter="confirmFilters" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-range filter-group-wide">
|
||||
<strong>KD 范围</strong>
|
||||
<div>
|
||||
<input v-model="filters.minKd" inputmode="decimal" placeholder="最小" @keyup.enter="confirmFilters" />
|
||||
<span>-</span>
|
||||
<input v-model="filters.maxKd" inputmode="decimal" placeholder="最大" @keyup.enter="confirmFilters" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<button type="button" @click="filterOpen = false">取消</button>
|
||||
<button type="button" @click="confirmFilters">确定筛选</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="filter-body">
|
||||
<label class="filter-field filter-field-wide">
|
||||
<span>账号编号</span>
|
||||
<input v-model="filters.keyword" placeholder="输入编号搜索" @keyup.enter="confirmFilters" />
|
||||
</label>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>体力等级</strong>
|
||||
<div class="filter-chips">
|
||||
<button
|
||||
v-for="option in levelOptions"
|
||||
:key="`stamina-${option}`"
|
||||
:class="{ active: isSelected(filters.stamina, option) }"
|
||||
type="button"
|
||||
@click="toggleListValue(filters.stamina, option)"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>负重等级</strong>
|
||||
<div class="filter-chips">
|
||||
<button
|
||||
v-for="option in levelOptions"
|
||||
:key="`load-${option}`"
|
||||
:class="{ active: isSelected(filters.load, option) }"
|
||||
type="button"
|
||||
@click="toggleListValue(filters.load, option)"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>保险格数</strong>
|
||||
<div class="filter-chips">
|
||||
<button
|
||||
v-for="option in insuranceOptions"
|
||||
:key="`insurance-${option}`"
|
||||
:class="{ active: isSelected(filters.insurance, option) }"
|
||||
type="button"
|
||||
@click="toggleListValue(filters.insurance, option)"
|
||||
>
|
||||
{{ insuranceLabel(option) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="section in skinSections" :key="section.key" class="filter-group filter-group-wide">
|
||||
<strong>{{ section.title }}</strong>
|
||||
<div class="filter-chips">
|
||||
<button
|
||||
v-for="option in section.options"
|
||||
:key="`${section.key}-${option}`"
|
||||
:class="{ active: isSelected(filters.skinNames, option) }"
|
||||
type="button"
|
||||
@click="toggleListValue(filters.skinNames, option)"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-range filter-group-wide">
|
||||
<strong>哈夫币范围(M)</strong>
|
||||
<div>
|
||||
<input v-model="filters.minCoin" inputmode="numeric" placeholder="最小" @keyup.enter="confirmFilters" />
|
||||
<span>-</span>
|
||||
<input v-model="filters.maxCoin" inputmode="numeric" placeholder="最大" @keyup.enter="confirmFilters" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-range filter-group-wide">
|
||||
<strong>价格范围</strong>
|
||||
<div>
|
||||
<input v-model="filters.minPrice" inputmode="numeric" placeholder="最低¥" @keyup.enter="confirmFilters" />
|
||||
<span>-</span>
|
||||
<input v-model="filters.maxPrice" inputmode="numeric" placeholder="最高¥" @keyup.enter="confirmFilters" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-range filter-group-wide">
|
||||
<strong>KD 范围</strong>
|
||||
<div>
|
||||
<input v-model="filters.minKd" inputmode="decimal" placeholder="最小" @keyup.enter="confirmFilters" />
|
||||
<span>-</span>
|
||||
<input v-model="filters.maxKd" inputmode="decimal" placeholder="最大" @keyup.enter="confirmFilters" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<button type="button" @click="filterOpen = false">取消</button>
|
||||
<button type="button" @click="confirmFilters">确定筛选</button>
|
||||
</div>
|
||||
</section>
|
||||
</Teleport>
|
||||
|
||||
<div v-if="loading && !listings.length" class="state">
|
||||
<LoaderCircle class="spin" :size="22" />
|
||||
|
||||
+41
-5
@@ -245,14 +245,30 @@ button {
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
width: min(1120px, calc(100vw - 24px));
|
||||
max-height: min(760px, 82vh);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
margin: -8px 0 20px;
|
||||
border-top: 1px solid #f0f1f4;
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: 0 8px 18px rgba(24, 26, 32, 0.05);
|
||||
border-radius: 14px 14px 10px 10px;
|
||||
box-shadow: 0 -12px 32px rgba(24, 26, 32, 0.18);
|
||||
overflow: hidden;
|
||||
animation: sheetUp 0.18s ease-out;
|
||||
}
|
||||
|
||||
.filter-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding: 18px 12px;
|
||||
background: rgba(24, 26, 32, 0.28);
|
||||
}
|
||||
|
||||
.filter-head {
|
||||
flex: none;
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -269,10 +285,12 @@ button {
|
||||
}
|
||||
|
||||
.filter-body {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px 28px;
|
||||
padding: 16px 10px 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.filter-field,
|
||||
@@ -340,6 +358,7 @@ button {
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
flex: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
@@ -363,6 +382,17 @@ button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes sheetUp {
|
||||
from {
|
||||
transform: translateY(18px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -600,8 +630,14 @@ button {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-overlay {
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
margin-top: -10px;
|
||||
width: 100vw;
|
||||
max-height: 86vh;
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.filter-body {
|
||||
|
||||
Reference in New Issue
Block a user