feat: 场馆/折扣/权益待使用列表新增「所属县区 + 所属类型」筛选条
- 新增 components/hhrs-filter-bar：两个等宽入口平分并占满容器宽、无底色、蓝字选中态； 面板首项「全部 X」即清空该维度（因此没有独立重置按钮） - 三页接入；选项与各选项命中条数由列表接口在响应里一并返回（后端已按关键词与另一维度算好） - 筛选与关键词为 AND；切筛选回第 1 页，复用各页现有 reqSeq 竞态保护 - 某维度无可选项时（如商铺未录入所在地区）该入口自动不渲染，避免点开空面板 - 三页头部间距统一为「搜索栏↔筛选条 = 筛选条↔列表 = 10px」 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
co-authored by
Claude Fable 5
Claude Fable 5
parent
6bc9b2c0d7
commit
eeb6b91e0a
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<!-- xuchao: 列表页「所属县区 + 所属类型」筛选条。两个入口等宽平分并占满容器宽，无底色，
|
||||
选中态只用品牌蓝字表达；面板第一行「全部 X」即清空该维度（所以没有独立重置按钮）。
|
||||
选项与各选项条数由列表接口在响应里一并返回，已按关键词与另一维度筛算好（districts/categories 首项即「全部」）。 -->
|
||||
<view class="hfb" v-if="ready">
|
||||
<view class="hfb-row">
|
||||
<view class="hfb-item" v-if="districtReady" :class="{ 'hfb-item--on': !!districtId }" @click="toggle('district')">
|
||||
<text class="hfb-text">{{ districtText }}</text>
|
||||
<view class="hfb-caret" :class="{ 'hfb-caret--up': openKey === 'district' }">
|
||||
<u-icon name="arrow-down-fill" size="20" :color="districtId ? '#0088ff' : '#bbbbbb'"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hfb-item" v-if="categoryReady" :class="{ 'hfb-item--on': !!category }" @click="toggle('category')">
|
||||
<text class="hfb-text">{{ categoryText }}</text>
|
||||
<view class="hfb-caret" :class="{ 'hfb-caret--up': openKey === 'category' }">
|
||||
<u-icon name="arrow-down-fill" size="20" :color="category ? '#0088ff' : '#bbbbbb'"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="hfb-mask" v-if="openKey" @click="close"></view>
|
||||
<view class="hfb-panel" v-if="openKey">
|
||||
<scroll-view scroll-y class="hfb-list">
|
||||
<view class="hfb-opt" v-for="o in openOptions" :key="o.value"
|
||||
:class="{ 'hfb-opt--sel': current === o.value }" @click="pick(o.value)">
|
||||
<text class="hfb-opt-label">{{ o.label }}</text>
|
||||
<text class="hfb-opt-count">{{ o.count }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'hhrs-filter-bar',
|
||||
props: {
|
||||
// xuchao: [{value,label,count}]，首项为「全部 X」(value='')，县区 value 是行政区划码
|
||||
districts: { type: Array, default: () => [] },
|
||||
categories: { type: Array, default: () => [] },
|
||||
districtId: { type: String, default: '' },
|
||||
category: { type: String, default: '' }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openKey: '',
|
||||
// xuchao: 记住见过的 value→label，避免关键词把选中项挤出选项列表后入口只能显示区划码
|
||||
labelCache: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// xuchao: 选项首项固定是「全部」，长度>1 才算该维度真有可选项。
|
||||
// 某维度没有可选项（如商铺未录入「所在地区」）时只隐藏它自己的入口，
|
||||
// 两个都没有则整条筛选不渲染，避免出现点开是空面板
|
||||
districtReady() { return this.districts.length > 1 },
|
||||
categoryReady() { return this.categories.length > 1 },
|
||||
ready() { return this.districtReady || this.categoryReady },
|
||||
openOptions() {
|
||||
return this.openKey === 'district' ? this.districts : this.categories
|
||||
},
|
||||
current() {
|
||||
return this.openKey === 'district' ? this.districtId : this.category
|
||||
},
|
||||
districtText() {
|
||||
return this.districtId ? this.cachedLabel('district', this.districtId) : '所属县区'
|
||||
},
|
||||
categoryText() {
|
||||
return this.category ? this.cachedLabel('category', this.category) : '所属类型'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
districts(list) { this.remember(list, 'district') },
|
||||
categories(list) { this.remember(list, 'category') }
|
||||
},
|
||||
created() {
|
||||
this.remember(this.districts, 'district')
|
||||
this.remember(this.categories, 'category')
|
||||
},
|
||||
methods: {
|
||||
remember(list, kind) {
|
||||
// xuchao: 必须用 $set，Vue2 对新增对象键不做响应，入口文字会跟不上缓存
|
||||
(list || []).forEach(o => {
|
||||
if (o.value) this.$set(this.labelCache, kind + ':' + o.value, o.label)
|
||||
})
|
||||
},
|
||||
cachedLabel(kind, value) {
|
||||
return this.labelCache[kind + ':' + value] || value
|
||||
},
|
||||
toggle(key) {
|
||||
// xuchao: 再点同一个入口即收起，避免面板卡在打开态
|
||||
this.openKey = this.openKey === key ? '' : key
|
||||
},
|
||||
close() {
|
||||
this.openKey = ''
|
||||
},
|
||||
pick(value) {
|
||||
if (this.openKey === 'district') {
|
||||
this.$emit('change', { districtId: value, category: this.category })
|
||||
} else {
|
||||
this.$emit('change', { districtId: this.districtId, category: value })
|
||||
}
|
||||
this.openKey = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/* xuchao: 根节点贴在 sticky 头部内，面板绝对定位到筛选条下方，遮罩 fixed 盖住整屏 */
|
||||
.hfb {
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.hfb-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.hfb-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hfb-item--on {
|
||||
color: #0088ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hfb-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hfb-caret {
|
||||
display: flex;
|
||||
transition: transform 0.18s;
|
||||
}
|
||||
|
||||
.hfb-caret--up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.hfb-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
/* xuchao: 面板左右各超出 12px（与页面头部的 12px 内边距等值，用 px 才能在各屏宽下都对齐），
|
||||
使面板与手机边缘齐平 */
|
||||
.hfb-panel {
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
top: 100%;
|
||||
z-index: 100;
|
||||
background: #ffffff;
|
||||
border-radius: 0 0 28rpx 28rpx;
|
||||
box-shadow: 0 20rpx 48rpx rgba(0, 0, 0, 0.12);
|
||||
padding: 12rpx 12rpx 16rpx;
|
||||
}
|
||||
|
||||
.hfb-list {
|
||||
max-height: 620rpx;
|
||||
}
|
||||
|
||||
.hfb-opt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 84rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hfb-opt--sel {
|
||||
background: #e6f2ff;
|
||||
color: #0088ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hfb-opt-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.hfb-opt-count {
|
||||
flex-shrink: 0;
|
||||
font-size: 24rpx;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user