findme-miniprogram-frontend/subpackages/social/search/search.wxml

<!-- 搜索用户页面 -->
<view class="search-container">
  
  <!-- 搜索区域 -->
  <view class="search-section">
    <!-- 搜索框 -->
    <view class="search-box {{searchResults && searchResults.length > 0 ? '' :'search-box-top'}}">
      <view class="search-input-wrapper" >
        <input class="search-input" 
               placeholder-class="placeholder-style"
               placeholder="请输入ID/手机号搜索" 
               value="{{searchKeyword}}" 
               bindinput="onSearchInput"
               bindconfirm="onSearchConfirm"
               confirm-type="search"
               focus="true" />
        <view class="search-btn" bindtap="onSearchConfirm">
          <image class="search-btn-text" src="../../../images/map/Search.svg" mode=""/>
        </view>
      </view>
    </view>
  </view>

  <!-- 搜索结果 -->
  <scroll-view class="results-container" 
               scroll-y="true"
               bindscrolltolower="loadMore">
    
    <!-- 加载中 -->
    <view class="loading-container" wx:if="{{loading && !hasSearched}}">
      <view class="loading-spinner"></view>
      <text class="loading-text">搜索中...</text>
    </view>

    <!-- 无结果 -->
    <view class="no-results" wx:if="{{hasSearched && searchResults.length === 0 && !loading}}">
      <view class="no-results-icon">😔</view>
      <text class="no-results-title">未找到相关用户</text>
      <text class="no-results-desc">试试其他关键词或搜索方式</text>
    </view>

    <!-- 搜索结果列表 -->
    <view class="results-list" wx:if="{{searchResults.length > 0}}">
      <view class="result-item" 
            wx:for="{{searchResults}}" 
            wx:key="customId">
        
        <!-- 用户信息 -->
        <view class="user-info" bindtap="viewUserDetail" data-custom-id="{{item.customId}}">
          <!-- 头像 -->
          <view class="user-avatar">
            <image wx:if="{{item.avatar}}" 
                   src="{{item.avatar}}" 
                   class="avatar-image" 
                   mode="aspectFill" />
            <view wx:else class="avatar-placeholder">
              <text class="avatar-text">{{item.nickname ? item.nickname.charAt(0) : '?'}}</text>
            </view>
            
            <!-- 会员标识 -->
            <view class="member-badge" wx:if="{{item.isMember}}">
              <text class="member-text">VIP</text>
            </view>
          </view>

          <!-- 用户详情 -->
          <view class="user-details">
            <view class="user-name-row">
              <text class="user-nickname">{{item.nickname}}</text>
              <view class="gender-icon" wx:if="{{item.gender !== null && item.gender !== undefined && item.gender !== ''}}">
                <image wx:if="{{item.gender === 1 || item.gender === '1' || item.gender === 2 || item.gender === '2'}}" class="gender-icon-img" src="{{item.gender === 1 || item.gender === '1' ? '/images/self/male.svg' : '/images/self/fmale.svg'}}" mode="aspectFit" />
                <text wx:else>？</text>
              </view>
            </view>
            
            <view class="user-meta">
              <text class="user-id">ID: {{item.customId}}</text>
              <text class="match-type" wx:if="{{item.matchType}}">{{item.matchType === 'nickname' ? '昵称匹配' : item.matchType === 'custom_id' ? 'ID匹配' : '手机号匹配'}}</text>
            </view>
            
            <text class="user-bio" wx:if="{{item.bio}}">{{item.bio}}</text>
            <text class="status-message" wx:if="{{item.statusMessage}}">{{item.statusMessage}}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <!-- 添加好友按钮 -->
          <view class="action-btn add-btn {{item.canAddFriend ? 'enabled' : 'disabled'}}"
                wx:if="{{item.relationStatus === 'can_add'}}"
                bindtap="addFriend"
                data-custom-id="{{item.customId}}"
                data-nickname="{{item.nickname}}">
            <text class="btn-text">{{item.actionText}}</text>
            
          </view>

          <!-- 等待验证 -->
          <view class="action-btn pending-btn" wx:if="{{item.relationStatus === 'pending'}}">
            <text class="btn-text">等待验证</text>
          </view>

          <!-- 已是好友 -->
          <view class="action-btn friend-btn" wx:if="{{item.relationStatus === 'friend'}}">
            <text class="btn-text">已是好友</text>
          </view>

          <!-- 发送消息按钮 -->
      <view class="action-btn message-btn"
        wx:if="{{item.relationStatus === 'friend'}}"
                bindtap="sendMessage"
                data-custom-id="{{item.customId}}"
                data-nickname="{{item.nickname}}">
            <text class="btn-text">发消息</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" wx:if="{{hasMore && searchResults.length > 0}}">
      <view class="loading-spinner" wx:if="{{loading}}"></view>
      <text class="load-more-text">{{loading ? '加载中...' : '上拉加载更多'}}</text>
    </view>

    <!-- 没有更多 -->
    <view class="no-more" wx:if="{{!hasMore && searchResults.length > 0}}">
      <text class="no-more-text">没有更多用户了</text>
    </view>
  </scroll-view>
</view>

<!-- 添加好友验证消息对话框 -->
<view wx:if="{{addDialogVisible}}" class="add-dialog-mask" catchtouchmove="true">
  <view class="add-dialog">
    <view class="add-dialog-title">添加 {{addDialogNickname}} 为好友</view>
    <textarea class="add-dialog-input"
              value="{{addDialogMessage}}"
              placeholder="请输入验证消息（最多50字）"
              maxlength="50"
              auto-height="true"
              bindinput="onAddDialogInput"/>
    <view class="add-dialog-actions">
      <button class="add-dialog-btn cancel" bindtap="onAddDialogCancel">取消</button>
      <button class="add-dialog-btn confirm" bindtap="onAddDialogConfirm">发送</button>
    </view>
  </view>
  <view class="add-dialog-safe" style="height: env(safe-area-inset-bottom);"></view>
</view>