feat: 场馆/折扣/权益待使用列表新增「所属县区 + 所属类型」筛选条
- 新增 components/hhrs-filter-bar:两个等宽入口平分并占满容器宽、无底色、蓝字选中态; 面板首项「全部 X」即清空该维度(因此没有独立重置按钮) - 三页接入;选项与各选项命中条数由列表接口在响应里一并返回(后端已按关键词与另一维度算好) - 筛选与关键词为 AND;切筛选回第 1 页,复用各页现有 reqSeq 竞态保护 - 某维度无可选项时(如商铺未录入所在地区)该入口自动不渲染,避免点开空面板 - 三页头部间距统一为「搜索栏↔筛选条 = 筛选条↔列表 = 10px」 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Fable 5
parent
6bc9b2c0d7
commit
eeb6b91e0a
+30
-5
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user