From adfa4ff31e5a93b0c80326a5f0a4397f8ba486e6 Mon Sep 17 00:00:00 2001 From: Codex Date: Mon, 14 Sep 2026 11:19:25 +0800 Subject: [PATCH] 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 | 3 + miniapp/pages/discover/discover.wxml | 93 ++++++++++++++-------------- miniapp/pages/discover/discover.wxss | 49 +++++++++++++-- 3 files changed, 96 insertions(+), 49 deletions(-) diff --git a/miniapp/pages/discover/discover.ts b/miniapp/pages/discover/discover.ts index 1f06187..0e12955 100644 --- a/miniapp/pages/discover/discover.ts +++ b/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)); }); }, diff --git a/miniapp/pages/discover/discover.wxml b/miniapp/pages/discover/discover.wxml index d57a8c4..eec427a 100644 --- a/miniapp/pages/discover/discover.wxml +++ b/miniapp/pages/discover/discover.wxml @@ -26,55 +26,58 @@ - - - - - - 年龄范围 - {{tempMinAge}}–{{tempMaxAge}} 岁 + + + + + + + + 年龄范围 + {{tempMinAge}}–{{tempMaxAge}} 岁 + + + - - - - - - 地区 - - {{item.label}} + + + 地区 + + {{item.label}} + + + + + + 学历 + + {{item.label}} + + + + + + 婚姻状态 + + {{item.label}} + + + + + 重置 + 应用筛选 - - - - 学历 - - {{item.label}} - - - - - - 婚姻状态 - - {{item.label}} - - - - - 重置 - 应用筛选 - - + diff --git a/miniapp/pages/discover/discover.wxss b/miniapp/pages/discover/discover.wxss index 69b6c2b..4dd95e7 100644 --- a/miniapp/pages/discover/discover.wxss +++ b/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)} -.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-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} -.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} +.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);position:relative;z-index:1} +.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)} +.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}