danyang-match/miniapp/pages/discover/discover.wxml

<view class="page app-page reference-page" style="{{navVars}}">
  <view class="discover-hero">
    <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>
    <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 discover-filter-chips">
      <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" data-target="age">年龄</view>
        <view class="filter-chip {{!!applied.educationCode ? 'active' : ''}}" bindtap="openFilterPanel" data-target="education">学历</view>
        <view class="filter-chip {{!!applied.maritalStatus ? 'active' : ''}}" bindtap="openFilterPanel" data-target="marital">婚姻</view>
      </view>
    </scroll-view>
  </view>

  <!-- 遮罩 + 底部抽屉筛选面板 -->
  <block wx:if="{{showFilter}}">
    <view class="filter-mask" bindtap="closeFilterPanel"></view>
    <view class="filter-panel-wrap">
      <scroll-view scroll-y class="filter-scroll-wrap" scroll-into-view="{{panelScrollTo}}" scroll-with-animation>
        <!-- 年龄范围 -->
        <view id="sec-age" class="filter-section {{panelHighlight === 'age' ? 'hl' : ''}}">
          <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 id="sec-region" class="filter-section {{panelHighlight === 'region' ? 'hl' : ''}}">
          <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 id="sec-education" class="filter-section {{panelHighlight === 'education' ? 'hl' : ''}}">
          <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 id="sec-marital" class="filter-section {{panelHighlight === 'marital' ? 'hl' : ''}}">
          <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>
      </scroll-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>
  </block>

  <!-- 结果区 -->
  <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">必须符合的条件不会自动放宽，可以调整筛选后再看看</text>
    <view class="empty-action" bindtap="onResetFilter">清空筛选</view>
  </view>
</view>