feat: redesign discovery and messages tabs
This commit is contained in:
Codex
@@ -1,131 +1,24 @@
|
||||
<!-- 找对象页 U19-U20（重构：ui-user-card + matchStore + recommendationService.discover） -->
|
||||
<view class="page app-page reference-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 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>
|
||||
<scroll-view scroll-x class="filter-scroll discover-filter-chips"><view class="filter-chips"><view class="filter-chip active" bindtap="onResetFilter">推荐</view><view class="filter-chip {{tempRegion === '丹阳' ? 'active' : ''}}" bindtap="onRegionTap" data-val="丹阳">丹阳本地</view><view class="filter-chip" bindtap="toggleFilter">附近</view><view class="filter-chip {{hasActiveFilter ? 'active' : ''}}" bindtap="toggleFilter">年龄</view><view class="filter-chip" bindtap="toggleFilter">学历</view><view class="filter-chip" bindtap="toggleFilter">更多筛选</view></view></scroll-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 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>
|
||||
|
||||
<!-- 区块标题 -->
|
||||
<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 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-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>
|
||||
|
||||
Reference in New Issue
Block a user