修复前端迁移后的类型错误
This commit is contained in:
yml2213
@@ -0,0 +1,268 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
export type FilterSection =
|
||||
| {
|
||||
key: string
|
||||
title: string
|
||||
type: 'range'
|
||||
unit?: string
|
||||
minPlaceholder?: string
|
||||
maxPlaceholder?: string
|
||||
}
|
||||
| {
|
||||
key: string
|
||||
title: string
|
||||
type: 'chips'
|
||||
options: string[]
|
||||
}
|
||||
|
||||
type SelectedFilters = Record<string, string[]>
|
||||
type RangeFilters = Record<string, { min: string; max: string }>
|
||||
type RangePresets = Record<string, Array<{ label: string; min: string; max: string }>>
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
selectedFilters: SelectedFilters
|
||||
rangeFilters: RangeFilters
|
||||
sections: FilterSection[]
|
||||
rangePresets: RangePresets
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:show': [value: boolean]
|
||||
'update:selectedFilters': [value: SelectedFilters]
|
||||
'update:rangeFilters': [value: RangeFilters]
|
||||
}>()
|
||||
|
||||
const activeCount = computed(() => {
|
||||
const chipCount = Object.values(props.selectedFilters).reduce((sum, values) => sum + values.length, 0)
|
||||
const rangeCount = Object.values(props.rangeFilters).filter((range) => range.min || range.max).length
|
||||
return chipCount + rangeCount
|
||||
})
|
||||
|
||||
function toggleChip(sectionKey: string, value: string) {
|
||||
const selected = props.selectedFilters[sectionKey] || []
|
||||
const next = selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value]
|
||||
emit('update:selectedFilters', { ...props.selectedFilters, [sectionKey]: next })
|
||||
}
|
||||
|
||||
function updateRange(sectionKey: string, side: 'min' | 'max', value: string) {
|
||||
const current = props.rangeFilters[sectionKey] || { min: '', max: '' }
|
||||
emit('update:rangeFilters', {
|
||||
...props.rangeFilters,
|
||||
[sectionKey]: { ...current, [side]: value },
|
||||
})
|
||||
}
|
||||
|
||||
function applyRangePreset(sectionKey: string, min: string, max: string) {
|
||||
emit('update:rangeFilters', {
|
||||
...props.rangeFilters,
|
||||
[sectionKey]: { min, max },
|
||||
})
|
||||
}
|
||||
|
||||
function isRangePresetActive(sectionKey: string, min: string, max: string) {
|
||||
const range = props.rangeFilters[sectionKey]
|
||||
return range?.min === min && range?.max === max
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
emit('update:selectedFilters', {})
|
||||
emit('update:rangeFilters', {})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-popup
|
||||
:show="show"
|
||||
position="bottom"
|
||||
round
|
||||
class="mobile-filter-sheet"
|
||||
@update:show="emit('update:show', $event)"
|
||||
>
|
||||
<header class="sheet-header">
|
||||
<strong>筛选</strong>
|
||||
<button type="button" @click="emit('update:show', false)">完成</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>
|
||||
|
||||
<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="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>
|
||||
</div>
|
||||
|
||||
<footer class="sheet-footer">
|
||||
<button type="button" @click="resetFilters">重置</button>
|
||||
<button type="button" class="primary" @click="emit('update:show', false)">
|
||||
查看结果{{ activeCount ? ` (${activeCount})` : '' }}
|
||||
</button>
|
||||
</footer>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-filter-sheet {
|
||||
max-height: 86vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sheet-header,
|
||||
.sheet-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.sheet-header strong {
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sheet-header button,
|
||||
.sheet-footer button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sheet-body {
|
||||
max-height: calc(86vh - 112px);
|
||||
overflow-y: auto;
|
||||
padding: 4px 16px 16px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid #e8edf3;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.filter-title h3 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-title span {
|
||||
color: #8b9cb5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chip-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chip-grid button {
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chip-grid button.active {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.range-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 18px 1fr;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.range-row span {
|
||||
height: 1px;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.range-row input {
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sheet-footer {
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.sheet-footer .primary {
|
||||
min-width: 128px;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,389 @@
|
||||
.mobile-shell {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 68px;
|
||||
background: #f6f8fb;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.mobile-hero {
|
||||
padding: 12px 12px 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.mobile-brand strong,
|
||||
.mobile-brand small {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-brand strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mobile-brand small {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.home-search {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fraud-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 34px;
|
||||
margin-top: 10px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #f5e6a3;
|
||||
border-radius: 8px;
|
||||
background: #fffdf0;
|
||||
color: #8a6d1b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fraud-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: #f59e0b;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.announcement-swipe {
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.announcement-swipe span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.banner-swipe {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mobile-banner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 116px;
|
||||
align-items: flex-end;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
background: #0f172a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-warm {
|
||||
background: #7c2d12;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-cool {
|
||||
background: #1e3a8a;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mobile-banner.has-image::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.72));
|
||||
}
|
||||
|
||||
.mobile-banner > div:not(.banner-badge) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
.mobile-banner h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
.mobile-banner span {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.mobile-banner h1 {
|
||||
margin-top: 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 1;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sort-entry,
|
||||
.filter-entry {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sort-entry {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-entry {
|
||||
min-width: 86px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-entry em {
|
||||
display: grid;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.sort-panel {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sort-panel button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 34px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sort-panel button.active {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
margin-bottom: 10px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.result-count strong {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.state-loading {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.mobile-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background: #e2e8f0;
|
||||
color: #64748b;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-cover-labels {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.card-cover-labels em {
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(37, 99, 235, 0.92);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.card-main {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.card-title-row h2 {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin: 6px 0 10px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-badges-row,
|
||||
.card-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.trust-badge,
|
||||
.server-badge,
|
||||
.card-chip-row span {
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.trust-badge {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.price-col strong {
|
||||
color: #ef4444;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rent-sub {
|
||||
margin-left: 8px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.card-chip-row {
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
|
||||
.mobile-load-state {
|
||||
padding: 18px 0 4px;
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.mobile-brand small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user