132 lines
3.7 KiB
Plaintext
132 lines
3.7 KiB
Plaintext
<!-- 找对象页 U19-U20（重构：ui-user-card + matchStore + recommendationService.discover） -->
|
||
<view class="page">
|
||
<!-- 搜索栏 -->
|
||
<view class="search-bar">
|
||
<view class="search-input">
|
||
<text class="search-icon">🔍</text>
|
||
<input
|
||
class="search-field"
|
||
placeholder="搜索符合条件的对象"
|
||
placeholder-class="search-placeholder"
|
||
value="{{keywordInput}}"
|
||
bindinput="onKeywordInput"
|
||
confirm-type="search"
|
||
bindconfirm="onSearch"
|
||
/>
|
||
</view>
|
||
<view class="filter-btn {{showFilter ? 'active' : ''}} {{hasActiveFilter ? 'has-filter' : ''}}" bindtap="toggleFilter">
|
||
<text>筛选</text>
|
||
<view wx:if="{{hasActiveFilter}}" class="filter-dot"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 筛选面板 -->
|
||
<view wx:if="{{showFilter}}" class="filter-panel">
|
||
<view class="filter-section">
|
||
<text class="filter-label">年龄范围</text>
|
||
<view class="range-row">
|
||
<text class="range-value">{{tempAgeMin}} 岁</text>
|
||
<slider
|
||
class="range-slider"
|
||
min="{{18}}"
|
||
max="{{60}}"
|
||
value="{{tempAgeMin}}"
|
||
activeColor="{{'#E96B6B'}}"
|
||
backgroundColor="{{'#F0F0F0'}}"
|
||
block-size="{{20}}"
|
||
bindchange="onMinAgeChange"
|
||
/>
|
||
<text class="range-value">{{tempAgeMax}} 岁</text>
|
||
</view>
|
||
<slider
|
||
class="range-slider"
|
||
min="{{18}}"
|
||
max="{{60}}"
|
||
value="{{tempAgeMax}}"
|
||
activeColor="{{'#E96B6B'}}"
|
||
backgroundColor="{{'#F0F0F0'}}"
|
||
block-size="{{20}}"
|
||
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>
|
||
|
||
<!-- 区块标题 -->
|
||
<ui-section-header
|
||
wx:if="{{users.length > 0 || loading}}"
|
||
title="找对象"
|
||
subtitle="{{hasActiveFilter ? '已应用筛选' : '共 ' + users.length + ' 位'}}"
|
||
/>
|
||
|
||
<!-- 首次加载（骨架屏） -->
|
||
<ui-loading
|
||
wx:if="{{loading && users.length === 0}}"
|
||
mode="skeleton"
|
||
rows="5"
|
||
/>
|
||
|
||
<!-- 用户列表 -->
|
||
<block wx:elif="{{users.length > 0}}">
|
||
<view class="user-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}}"
|
||
>
|
||
<ui-button
|
||
variant="primary"
|
||
size="sm"
|
||
loading="{{actionLoadingUserId === item.userId}}"
|
||
>喜欢</ui-button>
|
||
</view>
|
||
</ui-user-card>
|
||
|
||
<!-- 加载更多 -->
|
||
<ui-loading
|
||
wx:if="{{loadingMore}}"
|
||
mode="spinner"
|
||
inline
|
||
text="加载更多…"
|
||
/>
|
||
<view wx:if="{{!hasMore && users.length > 0}}" class="list-end-hint">
|
||
<text>没有更多了</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 空状态 -->
|
||
<ui-empty
|
||
wx:elif="{{!loading}}"
|
||
illustration="search"
|
||
title="暂无符合条件的人选"
|
||
description="尝试调整筛选条件，或看看今天为你推荐的人。"
|
||
actions="{{emptyActions}}"
|
||
bind:action="onEmptyAction"
|
||
/>
|
||
</view>
|