admin/danyang-match
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: redesign discovery and messages tabs

Browse Source
This commit is contained in:
Codex
2026-09-14 06:49:49 +08:00
parent 36b15d9ca8
commit b7dc52b517
12 changed files with 214 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniapp/pages/discover/discover.json
+2 -1
View File
@@ -1,7 +1,8 @@
{
"navigationBarTitleText": "找对象",
"navigationStyle": "custom",
"enablePullDownRefresh": true,
"backgroundColor": "#F7F8FA",
"backgroundColor": "#1D205F",
"backgroundTextStyle": "dark",
"usingComponents": {
"ui-user-card": "/components/user-card/index",
miniapp/pages/discover/discover.wxml
+16 -123
View File
@@ -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>
miniapp/pages/discover/discover.wxss
+4 -157
View File
@@ -1,157 +1,4 @@
/**
* 找对象页样式（重构后大幅简化，用户卡片主体样式封装在 ui-user-card 内）
*/
.page {
min-height: 100vh;
background: var(--color-bg-page);
}
/* ============ 搜索栏 ============ */
.search-bar {
display: flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-page-x);
background: var(--color-bg-card);
gap: var(--spacing-2);
border-bottom: var(--border-width) solid var(--color-divider);
}
.search-input {
flex: 1;
height: 72rpx;
background: var(--color-bg-page);
border-radius: var(--radius-full);
display: flex;
align-items: center;
padding: 0 var(--spacing-3);
gap: var(--spacing-2);
}
.search-icon {
font-size: var(--font-size-md);
color: var(--color-text-placeholder);
}
.search-field {
flex: 1;
font-size: var(--font-size-md);
color: var(--color-text-primary);
}
.search-placeholder {
color: var(--color-text-placeholder);
font-size: var(--font-size-md);
}
.filter-btn {
min-width: 120rpx;
height: 72rpx;
background: var(--color-primary-light);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
color: var(--color-primary);
position: relative;
padding: 0 var(--spacing-3);
}
.filter-btn.active {
background: var(--color-primary);
color: #FFFFFF;
}
.filter-dot {
width: 12rpx;
height: 12rpx;
background: var(--color-primary);
border-radius: 50%;
position: absolute;
top: 12rpx;
right: 12rpx;
}
.filter-btn.active .filter-dot {
background: #FFFFFF;
}
/* ============ 筛选面板 ============ */
.filter-panel {
background: var(--color-bg-card);
padding: var(--spacing-4) var(--spacing-page-x);
border-bottom: var(--border-width) solid var(--color-divider);
}
.filter-section {
margin-bottom: var(--spacing-4);
}
.filter-label {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
display: block;
margin-bottom: var(--spacing-2);
}
.range-row {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.range-value {
min-width: 96rpx;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-align: center;
}
.range-slider {
flex: 1;
}
.tag-group {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.tag {
padding: var(--spacing-1) var(--spacing-3);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
background: var(--color-bg-page);
color: var(--color-text-secondary);
border: 2rpx solid transparent;
}
.tag.selected {
background: var(--color-primary);
color: #FFFFFF;
}
.filter-actions {
display: flex;
gap: var(--spacing-3);
margin-top: var(--spacing-2);
}
/* ============ 用户列表 ============ */
.user-list {
background: var(--color-bg-card);
margin-top: var(--spacing-2);
}
.card-action {
display: flex;
align-items: center;
}
.list-end-hint {
text-align: center;
padding: var(--spacing-3);
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
}
.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}