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

miniapp/pages/discover/discover.ts

@@ -188,6 +188,7 @@ Page({
 
   /** 打开筛选面板，并同步当前 applied 状态到 temp */
   openFilterPanel() {
+    console.log('[discover] openFilterPanel called');
     const a = this.data.applied;
     this.setData({
       showFilter: true,
@@ -196,6 +197,8 @@ Page({
       tempMaxAge: a.maxAge,
       tempEducationCode: a.educationCode,
       tempMaritalStatus: a.maritalStatus,
+    }, () => {
+      console.log('[discover] showFilter set to true, current state:', JSON.stringify(this.data.applied));
     });
   },
 

miniapp/pages/discover/discover.wxml

@@ -26,55 +26,58 @@
     </scroll-view>
   </view>
 
-  <!-- 筛选面板：年龄 + 地区 + 学历 + 婚姻状态（与后端 DiscoverController 参数完全对齐） -->
+  <!-- 遮罩 + 底部抽屉筛选面板 -->
-  <view wx:if="{{showFilter}}" class="filter-panel">
+  <block wx:if="{{showFilter}}">
-    <!-- 年龄范围 -->
+    <view class="filter-mask" bindtap="closeFilterPanel"></view>
-    <view class="filter-section">
+    <view class="filter-panel-wrap">
-      <view class="filter-heading">
+      <!-- 年龄范围 -->
-        <text class="filter-label">年龄范围</text>
+      <view class="filter-section">
-        <text class="filter-value">{{tempMinAge}}–{{tempMaxAge}} 岁</text>
+        <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">
+      <view class="filter-section">
-      <text class="filter-label">地区</text>
+        <text class="filter-label">地区</text>
-      <view class="tag-group">
+        <view class="tag-group">
-        <view wx:for="{{regions}}" wx:key="code"
+          <view wx:for="{{regions}}" wx:key="code"
-              class="tag {{tempRegionCode === item.code ? 'selected' : ''}}"
+                class="tag {{tempRegionCode === item.code ? 'selected' : ''}}"
-              bindtap="onPanelRegionTap" data-code="{{item.code}}">{{item.label}}</view>
+                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>
-
+  </block>
-    <!-- 学历 -->
-    <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="result-head" wx:if="{{users.length > 0 || loading}}">

miniapp/pages/discover/discover.wxss

@@ -1,4 +1,45 @@
-.page{min-height:100vh;background:#F4F5FA}.discover-hero{padding:env(safe-area-inset-top) 24rpx 24rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 34rpx 34rpx;box-shadow:var(--mini-shadow)}.discover-nav{height:88rpx;display:flex;align-items:center;justify-content:center;position:relative;color:#fff}.nav-title{font-size:31rpx;font-weight:700}.nav-search{position:absolute;right:0;width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border:1rpx solid rgba(255,255,255,.18);border-radius:32rpx;background:rgba(255,255,255,.08)}.nav-search image{width:38rpx;height:38rpx;filter:brightness(0) invert(1)}
+.page{min-height:100vh;background:#F4F5FA}
-.search-bar{display:flex;align-items:center}.search-input{height:70rpx;flex:1;display:flex;align-items:center;padding:0 20rpx;border-radius:35rpx;background:rgba(255,255,255,.12);border:1rpx solid rgba(255,255,255,.14)}.search-label{margin-right:14rpx;padding-right:14rpx;border-right:1rpx solid rgba(255,255,255,.2);font-size:20rpx;color:#fff}.search-field{flex:1;font-size:23rpx;color:#fff}.search-placeholder{font-size:23rpx;color:rgba(255,255,255,.52)}.filter-scroll{margin-top:16rpx;white-space:nowrap}.filter-chips{display:inline-flex;gap:12rpx}.filter-chip{padding:11rpx 20rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:20rpx}.filter-chip.active{background:#fff;color:var(--mini-accent-pink);font-weight:650}
+.discover-hero{padding:env(safe-area-inset-top) 24rpx 24rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 34rpx 34rpx;box-shadow:var(--mini-shadow);position:relative;z-index:1}
-.filter-panel{position:relative;z-index:3;margin:-8rpx 24rpx 0;padding:28rpx;background:#fff;border-radius:0 0 26rpx 26rpx;box-shadow:0 14rpx 36rpx rgba(31,32,89,.12)}.filter-section{margin-bottom:28rpx}.filter-heading{display:flex;justify-content:space-between}.filter-label{display:block;font-size:24rpx;font-weight:650;color:#282D4E}.filter-value{font-size:21rpx;color:#777E99}.range-slider{margin:8rpx 0}.tag-group{display:flex;gap:14rpx;margin-top:16rpx}.tag{padding:10rpx 22rpx;border-radius:22rpx;background:#F1F2F7;color:#626981;font-size:21rpx}.tag.selected{background:#FCEBF3;color:var(--mini-accent-pink)}.filter-actions{display:flex;gap:18rpx}
+.discover-nav{height:88rpx;display:flex;align-items:center;justify-content:center;position:relative;color:#fff}
-.result-head{padding:30rpx 26rpx 16rpx;display:flex;align-items:flex-end;justify-content:space-between}.result-head>view{display:flex;flex-direction:column}.result-title{font-size:30rpx;font-weight:700;color:#252A49}.result-subtitle{margin-top:5rpx;font-size:20rpx;color:#8A8FA4}.result-count{font-size:20rpx;color:#8A8FA4}.user-list{margin:0 24rpx;padding:4rpx 0;background:#fff;border-radius:28rpx;overflow:hidden;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.card-action{display:flex;align-items:center}.like-button{width:62rpx;height:62rpx;display:flex;align-items:center;justify-content:center;border-radius:31rpx;background:#FFF0F5;box-shadow:0 6rpx 18rpx rgba(255,79,145,.16)}.like-button image{width:42rpx;height:42rpx}.like-button.loading{opacity:.45}.list-end-hint{text-align:center;padding:24rpx;font-size:20rpx;color:#9A9EB0}.discover-empty{margin:70rpx 40rpx 0;padding:34rpx;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:28rpx;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.discover-empty image{width:112rpx;height:112rpx}.empty-title{margin-top:12rpx;font-size:28rpx;font-weight:650;color:#252A49}.empty-desc{margin-top:10rpx;text-align:center;font-size:21rpx;line-height:1.55;color:#858A9E}.empty-action{margin-top:24rpx;min-width:180rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:23rpx;font-weight:650}
+.nav-title{font-size:31rpx;font-weight:700}
+.nav-search{position:absolute;right:0;width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border:1rpx solid rgba(255,255,255,.18);border-radius:32rpx;background:rgba(255,255,255,.08)}
+.nav-search image{width:38rpx;height:38rpx;filter:brightness(0) invert(1)}
+.search-bar{display:flex;align-items:center}
+.search-input{height:70rpx;flex:1;display:flex;align-items:center;padding:0 20rpx;border-radius:35rpx;background:rgba(255,255,255,.12);border:1rpx solid rgba(255,255,255,.14)}
+.search-label{margin-right:14rpx;padding-right:14rpx;border-right:1rpx solid rgba(255,255,255,.2);font-size:20rpx;color:#fff}
+.search-field{flex:1;font-size:23rpx;color:#fff}
+.search-placeholder{font-size:23rpx;color:rgba(255,255,255,.52)}
+.filter-scroll{margin-top:16rpx;white-space:nowrap}
+.filter-chips{display:inline-flex;gap:12rpx}
+.filter-chip{padding:11rpx 20rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:20rpx}
+.filter-chip.active{background:#fff;color:var(--mini-accent-pink);font-weight:650}
+
+/* 遮罩层 + 底部抽屉样式 */
+.filter-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:10}
+.filter-panel-wrap{position:fixed;left:0;right:0;bottom:0;z-index:11;background:#fff;border-radius:28rpx 28rpx 0 0;max-height:78vh;padding:32rpx 28rpx calc(28rpx + env(safe-area-inset-bottom));box-shadow:0 -10rpx 40rpx rgba(31,32,89,.15);overflow-y:auto}
+.filter-section{margin-bottom:28rpx}
+.filter-heading{display:flex;justify-content:space-between}
+.filter-label{display:block;font-size:24rpx;font-weight:650;color:#282D4E}
+.filter-value{font-size:21rpx;color:#777E99}
+.range-slider{margin:8rpx 0}
+.tag-group{display:flex;flex-wrap:wrap;gap:14rpx;margin-top:16rpx}
+.tag{padding:10rpx 22rpx;border-radius:22rpx;background:#F1F2F7;color:#626981;font-size:21rpx}
+.tag.selected{background:#FCEBF3;color:var(--mini-accent-pink)}
+.filter-actions{display:flex;gap:18rpx;margin-top:8rpx}
+
+.result-head{padding:30rpx 26rpx 16rpx;display:flex;align-items:flex-end;justify-content:space-between}
+.result-head>view{display:flex;flex-direction:column}
+.result-title{font-size:30rpx;font-weight:700;color:#252A49}
+.result-subtitle{margin-top:5rpx;font-size:20rpx;color:#8A8FA4}
+.result-count{font-size:20rpx;color:#8A8FA4}
+.user-list{margin:0 24rpx;padding:4rpx 0;background:#fff;border-radius:28rpx;overflow:hidden;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
+.card-action{display:flex;align-items:center}
+.like-button{width:62rpx;height:62rpx;display:flex;align-items:center;justify-content:center;border-radius:31rpx;background:#FFF0F5;box-shadow:0 6rpx 18rpx rgba(255,79,145,.16)}
+.like-button image{width:42rpx;height:42rpx}
+.like-button.loading{opacity:.45}
+.list-end-hint{text-align:center;padding:24rpx;font-size:20rpx;color:#9A9EB0}
+.discover-empty{margin:70rpx 40rpx 0;padding:34rpx;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:28rpx;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
+.discover-empty image{width:112rpx;height:112rpx}
+.empty-title{margin-top:12rpx;font-size:28rpx;font-weight:650;color:#252A49}
+.empty-desc{margin-top:10rpx;text-align:center;font-size:21rpx;line-height:1.55;color:#858A9E}
+.empty-action{margin-top:24rpx;min-width:180rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:23rpx;font-weight:650}