fix(discover): filter panel as bottom sheet with mask, add debug log

- Changed filter panel from in-flow to fixed bottom drawer with semi-transparent mask
- Mask click closes panel (closeFilterPanel)
- Added console.log in openFilterPanel for debugging event firing
- Panel now z-index:11 above mask z-index:10, guaranteeing visibility
This commit is contained in:
Codex
2026-09-14 11:19:25 +08:00
parent 3e5d2314aa
commit adfa4ff31e
3 changed files with 96 additions and 49 deletions
+48 -45
View File
@@ -26,55 +26,58 @@
</scroll-view>
</view>
<!-- 筛选面板:年龄 + 地区 + 学历 + 婚姻状态(与后端 DiscoverController 参数完全对齐) -->
<view wx:if="{{showFilter}}" class="filter-panel">
<!-- 年龄范围 -->
<view class="filter-section">
<view class="filter-heading">
<text class="filter-label">年龄范围</text>
<text class="filter-value">{{tempMinAge}}–{{tempMaxAge}} 岁</text>
<!-- 遮罩 + 底部抽屉筛选面板 -->
<block wx:if="{{showFilter}}">
<view class="filter-mask" bindtap="closeFilterPanel"></view>
<view class="filter-panel-wrap">
<!-- 年龄范围 -->
<view class="filter-section">
<view class="filter-heading">
<text class="filter-label">年龄范围</text>
<text class="filter-value">{{tempMinAge}}–{{tempMaxAge}} 岁</text>
</view>
<slider class="range-slider" min="18" max="60" value="{{tempMinAge}}" activeColor="#FF4F91"
backgroundColor="#E9EAF2" block-size="18" bindchange="onMinAgeChange" />
<slider class="range-slider" min="18" max="60" value="{{tempMaxAge}}" activeColor="#7B63D9"
backgroundColor="#E9EAF2" block-size="18" bindchange="onMaxAgeChange" />
</view>
<slider class="range-slider" min="18" max="60" value="{{tempMinAge}}" activeColor="#FF4F91"
backgroundColor="#E9EAF2" block-size="18" bindchange="onMinAgeChange" />
<slider class="range-slider" min="18" max="60" value="{{tempMaxAge}}" activeColor="#7B63D9"
backgroundColor="#E9EAF2" block-size="18" bindchange="onMaxAgeChange" />
</view>
<!-- 地区 -->
<view class="filter-section">
<text class="filter-label">地区</text>
<view class="tag-group">
<view wx:for="{{regions}}" wx:key="code"
class="tag {{tempRegionCode === item.code ? 'selected' : ''}}"
bindtap="onPanelRegionTap" data-code="{{item.code}}">{{item.label}}</view>
<!-- 地区 -->
<view class="filter-section">
<text class="filter-label">地区</text>
<view class="tag-group">
<view wx:for="{{regions}}" wx:key="code"
class="tag {{tempRegionCode === item.code ? 'selected' : ''}}"
bindtap="onPanelRegionTap" data-code="{{item.code}}">{{item.label}}</view>
</view>
</view>
<!-- 学历 -->
<view class="filter-section">
<text class="filter-label">学历</text>
<view class="tag-group">
<view wx:for="{{educations}}" wx:key="code"
class="tag {{tempEducationCode === item.code ? 'selected' : ''}}"
bindtap="onPanelEducationTap" data-code="{{item.code}}">{{item.label}}</view>
</view>
</view>
<!-- 婚姻状态 -->
<view class="filter-section">
<text class="filter-label">婚姻状态</text>
<view class="tag-group">
<view wx:for="{{maritalStatuses}}" wx:key="code"
class="tag {{tempMaritalStatus === item.code ? 'selected' : ''}}"
bindtap="onPanelMaritalTap" data-code="{{item.code}}">{{item.label}}</view>
</view>
</view>
<view class="filter-actions">
<ui-button variant="ghost" size="md" block bind:tap="onResetFilter">重置</ui-button>
<ui-button variant="primary" size="md" block bind:tap="onApplyFilter">应用筛选</ui-button>
</view>
</view>
<!-- 学历 -->
<view class="filter-section">
<text class="filter-label">学历</text>
<view class="tag-group">
<view wx:for="{{educations}}" wx:key="code"
class="tag {{tempEducationCode === item.code ? 'selected' : ''}}"
bindtap="onPanelEducationTap" data-code="{{item.code}}">{{item.label}}</view>
</view>
</view>
<!-- 婚姻状态 -->
<view class="filter-section">
<text class="filter-label">婚姻状态</text>
<view class="tag-group">
<view wx:for="{{maritalStatuses}}" wx:key="code"
class="tag {{tempMaritalStatus === item.code ? 'selected' : ''}}"
bindtap="onPanelMaritalTap" data-code="{{item.code}}">{{item.label}}</view>
</view>
</view>
<view class="filter-actions">
<ui-button variant="ghost" size="md" block bind:tap="onResetFilter">重置</ui-button>
<ui-button variant="primary" size="md" block bind:tap="onApplyFilter">应用筛选</ui-button>
</view>
</view>
</block>
<!-- 结果区 -->
<view class="result-head" wx:if="{{users.length > 0 || loading}}">