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
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
+51 -9
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,12 +99,15 @@
<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 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 {