xuchao/hhrs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 场馆/折扣/权益待使用列表新增「所属县区 + 所属类型」筛选条

Browse Source 
- 新增 components/hhrs-filter-bar：两个等宽入口平分并占满容器宽、无底色、蓝字选中态；
  面板首项「全部 X」即清空该维度（因此没有独立重置按钮）
- 三页接入；选项与各选项命中条数由列表接口在响应里一并返回（后端已按关键词与另一维度算好）
- 筛选与关键词为 AND；切筛选回第 1 页，复用各页现有 reqSeq 竞态保护
- 某维度无可选项时（如商铺未录入所在地区）该入口自动不渲染，避免点开空面板
- 三页头部间距统一为「搜索栏↔筛选条 = 筛选条↔列表 = 10px」

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-09-28 15:12:38 +08:00
co-authored by Claude Fable 5
parent 6bc9b2c0d7
commit eeb6b91e0a
4 changed files with 322 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/hhrs-filter-bar/hhrs-filter-bar.vue
+211
View File
@@ -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>
pages/discount/discount.vue
+30 -5
View File
@@ -13,6 +13,9 @@
<view class="search-btn" @click="onSearch">搜索</view>
</view>
</view>
<!-- xuchao: 所属县区 + 所属类型筛选，选项与联动条数由列表接口一并返回 -->
<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
:district-id="districtId" :category="category" @change="onFilterChange" />
</view>
<!-- 商户列表 -->
@@ -40,7 +43,11 @@
</template>
<script>
// xuchao: 县区 + 类型筛选条，三个列表页共用（pages.json 的 easycom 只给 u- 前缀配了规则，这里显式引入）
import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
export default {
components: { HhrsFilterBar },
data() {
return {
keyword: '',
@@ -53,7 +60,11 @@ export default {
lat: '',
loadStatus: 'loadmore',
hasScrolled: false,
reqSeq: 0
reqSeq: 0,
// xuchao: 筛选条件与面板选项（选项由列表响应带回）
districtId: '',
category: '',
filters: { districts: [], categories: [] }
}
},
onLoad() {
@@ -91,9 +102,16 @@ export default {
}
if (this.lng) params.lng = this.lng
if (this.lat) params.lat = this.lat
if (this.districtId) params.districtId = this.districtId
if (this.category) params.category = this.category
this.$u.api.getStoreList(params).then(res => {
if (seq !== this.reqSeq) return
if (res.errcode === 0 && res.data) {
// xuchao: 面板选项随列表一起回来（后端已按关键词与另一维度算好条数）
this.filters = {
districts: res.data.districts || [],
categories: res.data.categories || []
}
const list = res.data.list || []
if (this.pageNo === 1) {
this.list = list
@@ -140,6 +158,12 @@ export default {
this.pageNo = 1
this.list = []
this.loadList()
},
// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
onFilterChange(e) {
this.districtId = e.districtId
this.category = e.category
this.onSearch()
}
}
}
@@ -154,11 +178,11 @@ export default {
.search-area {
background-color: #ffffff;
padding: 6px 12px;
// xuchao: 滚动时固定在页面顶部
padding: 6px 12px 0;
// xuchao: 滚动时固定在页面顶部；z-index 高于筛选遮罩(90)，保证面板与选中态不被压住
position: sticky;
top: 0;
z-index: 10;
z-index: 100;
}
.nav-row {
@@ -209,7 +233,8 @@ export default {
}
.list-area {
padding: 12px;
// xuchao: 顶部留白交给筛选条的 20rpx 下内边距，保证「搜索栏↔筛选条」与「筛选条↔列表」间距一致
padding: 0 12px 12px;
// xuchao: border-box 防止 padding 撑出页面横向滚动
box-sizing: border-box;
}
pages/rights/rights.vue
+46 -4
View File
@@ -89,7 +89,9 @@
</view>
</view>
</view>
</view>
<!-- xuchao: Tab + 搜索 + 县区/类型筛选一起吸顶；筛选只作用于「待使用」（另两个 Tab 的接口不返回地址与分类） -->
<view class="info-sticky">
<!-- Tab 切换 -->
<view class="tab-bar">
<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
@@ -97,13 +99,16 @@
<text class="tab-text">{{ tab }}</text>
</view>
</view>
</view>
<!-- 搜索栏 -->
<view class="search-area" v-if="currentTab==0">
<view class="search-bar">
<u-icon name="search" color="#cccccc" size="24"></u-icon>
<input class="search-input" v-model="keyword" placeholder="搜索权益商家" @confirm="onSearch" />
</view>
<!-- xuchao: 所属县区 + 所属类型筛选，选项与联动条数由列表接口一并返回 -->
<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
:district-id="districtId" :category="category" @change="onFilterChange" />
</view>
</view>
<!-- 权益列表 -->
@@ -171,7 +176,11 @@
</template>
<script>
// xuchao: 县区 + 类型筛选条，三个列表页共用（pages.json 的 easycom 只给 u- 前缀配了规则，这里显式引入）
import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
export default {
components: { HhrsFilterBar },
data() {
return {
status: 'auth',
@@ -189,6 +198,14 @@
tabs: ['待使用', '已预约', '已使用'],
currentTab: 0,
keyword: '',
// xuchao: 待使用列表的县区/类型筛选条件与面板选项（选项由列表响应带回）
districtId: '',
category: '',
filters: { districts: [], categories: [] },
// xuchao: 待使用列表的县区/类型筛选条件与面板选项（选项由列表响应带回）
districtId: '',
category: '',
filters: { districts: [], categories: [] },
rightsList: [],
appointmentList: [],
checkList: [],
@@ -495,10 +512,19 @@
params.keyword = this.keyword
params.lng = this.lng
params.lat = this.lat
if (this.districtId) params.districtId = this.districtId
if (this.category) params.category = this.category
request = this.$u.api.getRightsList(params)
}
request.then(res => {
if (seq !== p.reqSeq) return
// xuchao: 筛选面板选项只随「待使用」列表返回，另两个 Tab 不覆盖
if (tab === 0 && res.errcode === 0 && res.data) {
this.filters = {
districts: res.data.districts || [],
categories: res.data.categories || []
}
}
if (res.errcode === 0 && res.data) {
const list = res.data.list || []
const prev = this.listOf(tab)
@@ -538,6 +564,12 @@
onSearch() {
this.loadList(0, true)
},
// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
onFilterChange(e) {
this.districtId = e.districtId
this.category = e.category
this.loadList(0, true)
},
goDetail(item) {
uni.navigateTo({
url: '/pages/rights/detail?id=' + item.ruleId
@@ -794,11 +826,20 @@
background-color: #eeeeee;
}
/* xuchao: Tab + 搜索 + 筛选条一起吸顶。padding-top 替代原 tab-bar 的 margin-top，
否则吸顶后顶部会留一条能透出列表内容的缝隙；z-index 需高于筛选遮罩(90) */
.info-sticky {
background-color: #ffffff;
padding-top: 12px;
position: sticky;
top: 0;
z-index: 100;
}
/* Tab 切换 */
.tab-bar {
display: flex;
background-color: #ffffff;
margin-top: 12px;
padding: 0 16px;
}
@@ -833,7 +874,8 @@
/* 搜索栏 */
.search-area {
padding: 12px;
/* xuchao: 底部留白交给筛选条的 20rpx 上内边距，保证三段间距一致 */
padding: 12px 12px 0;
}
.search-bar {
pages/venue/venue.vue
+30 -5
View File
@@ -13,6 +13,9 @@
<view class="search-btn" @click="onSearch">搜索</view>
</view>
</view>
<!-- xuchao: 所属县区 + 所属类型筛选，选项与联动条数由列表接口一并返回 -->
<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
:district-id="districtId" :category="category" @change="onFilterChange" />
</view>
<!-- 场馆列表 -->
@@ -37,7 +40,11 @@
</template>
<script>
// xuchao: 县区 + 类型筛选条，三个列表页共用（pages.json 的 easycom 只给 u- 前缀配了规则，这里显式引入）
import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
export default {
components: { HhrsFilterBar },
data() {
return {
keyword: '',
@@ -50,7 +57,11 @@ export default {
lat: '',
loadStatus: 'loadmore',
hasScrolled: false,
reqSeq: 0
reqSeq: 0,
// xuchao: 筛选条件与面板选项（选项由列表响应带回）
districtId: '',
category: '',
filters: { districts: [], categories: [] }
}
},
onLoad() {
@@ -81,9 +92,16 @@ export default {
}
if (this.lng) params.lng = this.lng
if (this.lat) params.lat = this.lat
if (this.districtId) params.districtId = this.districtId
if (this.category) params.category = this.category
this.$u.api.getStoreList(params).then(res => {
if (seq !== this.reqSeq) return
if (res.errcode === 0 && res.data) {
// xuchao: 面板选项随列表一起回来（后端已按关键词与另一维度算好条数）
this.filters = {
districts: res.data.districts || [],
categories: res.data.categories || []
}
const list = res.data.list || []
if (this.pageNo === 1) {
this.list = list
@@ -126,6 +144,12 @@ export default {
this.pageNo = 1
this.list = []
this.loadList()
},
// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
onFilterChange(e) {
this.districtId = e.districtId
this.category = e.category
this.onSearch()
}
}
}
@@ -140,11 +164,11 @@ export default {
.search-area {
background-color: #ffffff;
padding: 6px 12px;
/* xuchao: 滚动时固定在页面顶部 */
padding: 6px 12px 0;
/* xuchao: 滚动时固定在页面顶部；z-index 高于筛选遮罩(90)，保证面板与选中态不被压住 */
position: sticky;
top: 0;
z-index: 10;
z-index: 100;
}
.nav-row {
@@ -195,7 +219,8 @@ export default {
}
.list-area {
padding: 12px;
/* xuchao: 顶部留白交给筛选条的 20rpx 下内边距，保证「搜索栏↔筛选条」与「筛选条↔列表」间距一致 */
padding: 0 12px 12px;
}
.venue-card {