feat(discover): rewrite filter UI to align with backend DiscoverController 5 params
- Top chips: 推荐(重置) / 丹阳本地(regionCode=321181) / 年龄 / 学历 / 婚姻 - Each chip has real active state bound to applied filter value - Panel expanded to 4 sections: age slider + region + education + maritalStatus - Param names fixed: minAge/maxAge/regionCode/educationCode/maritalStatus - Data flow: panel temp -> onApplyFilter -> applied -> _buildParams -> API - Panel opens with current applied values, closes with openFilterPanel/closeFilterPanel
This commit is contained in:
Codex
@@ -1,24 +1,108 @@
|
||||
<view class="page app-page reference-page">
|
||||
<view class="discover-hero">
|
||||
<view class="discover-nav"><text class="nav-title">找对象</text><view class="nav-search" bindtap="toggleFilter"><image src="/assets/icons/ui/search.png" mode="aspectFit" /></view></view>
|
||||
<view class="search-bar">
|
||||
<view class="search-input"><text class="search-label">搜索</text><input class="search-field" placeholder="姓名、职业或地区" placeholder-class="search-placeholder" value="{{keywordInput}}" bindinput="onKeywordInput" confirm-type="search" bindconfirm="onSearch" /></view>
|
||||
<view class="discover-nav">
|
||||
<text class="nav-title">找对象</text>
|
||||
<view class="nav-search" bindtap="{{showFilter ? 'closeFilterPanel' : 'openFilterPanel'}}">
|
||||
<image src="/assets/icons/ui/search.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="filter-scroll discover-filter-chips"><view class="filter-chips"><view class="filter-chip {{!hasActiveFilter ? 'active' : ''}}" bindtap="onResetFilter">推荐</view><view class="filter-chip {{applied.region === '丹阳' ? 'active' : ''}}" bindtap="onTopRegionTap" data-val="丹阳">丹阳本地</view><view class="filter-chip" bindtap="toggleFilter">附近</view><view class="filter-chip {{applied.ageMin !== 18 || applied.ageMax !== 60 ? 'active' : ''}}" bindtap="toggleFilter">年龄</view><view class="filter-chip" bindtap="toggleFilter">学历</view><view class="filter-chip {{hasActiveFilter ? 'active' : ''}}" bindtap="toggleFilter">更多筛选</view></view></scroll-view>
|
||||
<view class="search-bar">
|
||||
<view class="search-input">
|
||||
<text class="search-label">搜索</text>
|
||||
<input class="search-field" placeholder="姓名、职业或地区" placeholder-class="search-placeholder"
|
||||
value="{{keywordInput}}" bindinput="onKeywordInput" confirm-type="search" bindconfirm="onSearch" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 顶部 chip — 每个都有真实 active 状态，对应后端 5 个筛选参数 -->
|
||||
<scroll-view scroll-x class="filter-scroll">
|
||||
<view class="filter-chips">
|
||||
<view class="filter-chip {{!hasActiveFilter ? 'active' : ''}}" bindtap="onResetFilter">推荐</view>
|
||||
<view class="filter-chip {{applied.regionCode === '321181' ? 'active' : ''}}" bindtap="onTopRegionTap">丹阳本地</view>
|
||||
<view class="filter-chip {{applied.minAge !== 18 || applied.maxAge !== 60 ? 'active' : ''}}" bindtap="openFilterPanel">年龄</view>
|
||||
<view class="filter-chip {{!!applied.educationCode ? 'active' : ''}}" bindtap="openFilterPanel">学历</view>
|
||||
<view class="filter-chip {{!!applied.maritalStatus ? 'active' : ''}}" bindtap="openFilterPanel">婚姻</view>
|
||||
</view>
|
||||
</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">{{tempAgeMin}}–{{tempAgeMax}} 岁</text></view><slider class="range-slider" min="18" max="60" value="{{tempAgeMin}}" activeColor="#FF4F91" backgroundColor="#E9EAF2" block-size="18" bindchange="onMinAgeChange" /><slider class="range-slider" min="18" max="60" value="{{tempAgeMax}}" 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="*this" class="tag {{tempRegion === item ? 'selected' : ''}}" bindtap="onRegionTap" data-val="{{item}}">{{item}}</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 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>
|
||||
|
||||
<!-- 地区 -->
|
||||
<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="result-head" wx:if="{{users.length > 0 || loading}}">
|
||||
<view>
|
||||
<text class="result-title">为你推荐</text>
|
||||
<text class="result-subtitle">{{hasActiveFilter ? '已按当前条件筛选' : '认真认识，再做选择'}}</text>
|
||||
</view>
|
||||
<text class="result-count">{{users.length}} 位</text>
|
||||
</view>
|
||||
|
||||
<view class="result-head" wx:if="{{users.length > 0 || loading}}"><view><text class="result-title">为你推荐</text><text class="result-subtitle">{{hasActiveFilter ? '已按当前条件筛选' : '认真认识，再做选择'}}</text></view><text class="result-count">{{users.length}} 位</text></view>
|
||||
<ui-loading wx:if="{{loading && users.length === 0}}" mode="skeleton" rows="5" />
|
||||
|
||||
<view wx:elif="{{users.length > 0}}" class="user-list candidate-list">
|
||||
<ui-user-card wx:for="{{users}}" wx:key="userId" user="{{item}}" bind:tap="onViewDetail"><view slot="actions" class="card-action" catchtap="onLike" data-user-id="{{item.userId}}"><view class="like-button {{actionLoadingUserId === item.userId ? 'loading' : ''}}"><image src="/assets/brand/logo-mark.png" mode="aspectFit" /></view></view></ui-user-card>
|
||||
<ui-user-card wx:for="{{users}}" wx:key="userId" user="{{item}}" bind:tap="onViewDetail">
|
||||
<view slot="actions" class="card-action" catchtap="onLike" data-user-id="{{item.userId}}">
|
||||
<view class="like-button {{actionLoadingUserId === item.userId ? 'loading' : ''}}">
|
||||
<image src="/assets/brand/logo-mark.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</ui-user-card>
|
||||
<ui-loading wx:if="{{loadingMore}}" mode="spinner" inline text="加载更多…" />
|
||||
<view wx:if="{{!hasMore && users.length > 0}}" class="list-end-hint">真诚相遇，认真选择</view>
|
||||
</view>
|
||||
<view wx:elif="{{!loading}}" class="discover-empty"><image src="/assets/brand/logo-mark.png" mode="aspectFit" /><text class="empty-title">暂无符合条件的人选</text><text class="empty-desc">Required 条件不会自动放宽，可以调整筛选后再看看</text><view class="empty-action" bindtap="onResetFilter">清空筛选</view></view>
|
||||
|
||||
<view wx:elif="{{!loading}}" class="discover-empty">
|
||||
<image src="/assets/brand/logo-mark.png" mode="aspectFit" />
|
||||
<text class="empty-title">暂无符合条件的人选</text>
|
||||
<text class="empty-desc">Required 条件不会自动放宽，可以调整筛选后再看看</text>
|
||||
<view class="empty-action" bindtap="onResetFilter">清空筛选</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user