149 lines
6.1 KiB
Text
149 lines
6.1 KiB
Text
<!-- 搜索用户页面 -->
|
||
<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>
|