miniprogramme/pages/social/search/search.wxml

<!-- 搜索用户页面 -->
<view class="search-container">
  
  <!-- 自定义导航栏 -->
  <view class="custom-nav-bar" style="padding-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;">
    <view class="nav-content">
      <view class="nav-left" bindtap="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">添加好友</text>
      </view>
      <view class="nav-right"></view>
    </view>
  </view>

  <!-- 搜索区域 -->
  <view class="search-section">
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-input-wrapper">
        <text class="search-icon">🔍</text>
        <input class="search-input" 
               placeholder="输入昵称、ID或手机号" 
               value="{{searchKeyword}}" 
               bindinput="onSearchInput"
               bindconfirm="onSearchConfirm"
               confirm-type="search"
               focus="true" />
        <view class="clear-btn {{searchKeyword ? 'show' : ''}}" bindtap="clearSearch">
          <text class="clear-icon">✕</text>
        </view>
      </view>
      <view class="search-btn" bindtap="onSearchConfirm">
        <text class="search-btn-text">搜索</text>
      </view>
    </view>

    <!-- 搜索类型选择 -->
    <view class="search-types">
      <view class="type-item {{searchType === item.value ? 'active' : ''}}"
            wx:for="{{searchTypes}}" 
            wx:key="value"
            bindtap="onSearchTypeChange"
            data-type="{{item.value}}">
        <text class="type-text">{{item.label}}</text>
      </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="search-tips" wx:if="{{!hasSearched && !loading}}">
      <view class="tips-icon">🔍</view>
      <text class="tips-title">搜索用户</text>
      <text class="tips-desc">输入昵称、ID或手机号查找用户</text>
      <view class="tips-list">
        <text class="tip-item">• 支持模糊搜索昵称</text>
        <text class="tip-item">• 支持精确搜索用户ID</text>
        <text class="tip-item">• 支持手机号搜索</text>
      </view>
    </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}}">
                <text class="gender-text">{{item.gender === 1 ? '♂' : '♀'}}</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.canSendMessage}}"
                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>