131 lines
No EOL
5 KiB
Text
131 lines
No EOL
5 KiB
Text
<!-- 好友页面 - 简洁现代设计 -->
|
||
<view class="friends-container">
|
||
|
||
<!-- 导航栏 -->
|
||
<view class="nav-bar" style="padding-top: {{statusBarHeight -statusBarHeight}}px;">
|
||
<view class="nav-content">
|
||
<view class="nav-left">
|
||
<view class="search-container">
|
||
<input class="search-input"
|
||
type="text"
|
||
placeholder="搜索好友"
|
||
value="{{searchKeyword}}"
|
||
bindinput="onSearchInput"
|
||
bindconfirm="filterFriends"
|
||
placeholder-class="search-placeholder"/>
|
||
<!-- 搜索图标：空白时显示 -->
|
||
<image class="search-icon" wx:if="{{!searchKeyword}}" src="../../../images/group/Search.svg" mode=""/>
|
||
<!-- 清除按钮：输入内容时显示 -->
|
||
<view class="search-clear" wx:if="{{searchKeyword}}" bindtap="clearSearch">
|
||
<text class="clear-text">✕</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="nav-actions">
|
||
<view class="nav-btn" bindtap="addFriend">
|
||
<image src="../../../images/AddFriend.svg" class="nav-icon" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索结果提示 -->
|
||
<view class="search-hint" wx:if="{{searchKeyword}}">
|
||
<text class="hint-text">
|
||
{{searching ? '搜索中...' : '找到 ' + searchResultCount + ' 位好友'}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view class="content-area" scroll-y="true" style="top: {{navBarHeight-navBarHeight+40}}px;">
|
||
|
||
<!-- 功能入口 -->
|
||
<view class="function-section">
|
||
<view class="function-item" bindtap="openNewFriends">
|
||
<!-- class="function-icon new-friends" -->
|
||
<view class="function-icon" >
|
||
<image src="../../../images/AddFriend.svg" class="nav-icon" />
|
||
<view class="badge" wx:if="{{newFriendRequests > 0}}">{{newFriendRequests}}</view>
|
||
</view>
|
||
<view class="function-info">
|
||
<text class="function-title">好友申请</text>
|
||
<text class="function-desc" wx:if="{{newFriendRequests > 0}}">{{newFriendRequests}} 个新请求</text>
|
||
<text class="function-desc" wx:else>查看所有好友申请</text>
|
||
</view>
|
||
<view class="function-arrow">
|
||
<image src="../../../images/emoji/r-Return.svg" class="nav-icon" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="function-item" bindtap="openGroupChats" wx:if="{{false}}">
|
||
<view class="function-icon groups">
|
||
<text class="icon-text">👨👩👧👦</text>
|
||
</view>
|
||
<view class="function-info">
|
||
<text class="function-title">群聊</text>
|
||
<text class="function-desc">查看群聊列表</text>
|
||
</view>
|
||
<text class="function-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 好友列表 -->
|
||
<view class="friends-section-list" wx:if="{{filteredFriends.length > 0}}">
|
||
<!-- <view class="section-header">
|
||
<text class="section-title">联系人</text>
|
||
</view> -->
|
||
|
||
<view class="friends-list">
|
||
<view class="friend-item"
|
||
wx:for="{{filteredFriends}}"
|
||
wx:key="customId"
|
||
bindtap="openFriendProfile"
|
||
data-friend="{{item}}">
|
||
|
||
<!-- 头像 -->
|
||
<view class="friend-avatar">
|
||
<image wx:if="{{item.avatar}}"
|
||
src="{{item.avatar}}"
|
||
class="avatar-img"
|
||
mode="aspectFill" />
|
||
<view wx:else class="avatar-placeholder">
|
||
<text class="avatar-text">{{item.nickname.charAt(0)}}</text>
|
||
</view>
|
||
<view class="online-dot {{item.isOnline ? 'online' : 'offline'}}"></view>
|
||
</view>
|
||
|
||
<!-- 信息 -->
|
||
<view class="friend-info">
|
||
<text class="friend-name">{{item.remark || item.nickname}}</text>
|
||
<!-- 显示个性签名或ID -->
|
||
<text class="friend-desc" wx:if="{{!searchKeyword && item.personalSignature}}">
|
||
{{item.personalSignature}}
|
||
</text>
|
||
<!-- 搜索时显示customId -->
|
||
<text class="friend-desc" wx:if="{{searchKeyword && item.customId}}">
|
||
ID: {{item.customId}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" wx:if="{{!loading && filteredFriends.length === 0}}">
|
||
<image class="action-icon empty-icon " src="../../../images/index/friend.svg" mode=""/>
|
||
<!-- <view class="empty-icon">👥</view> -->
|
||
<text class="empty-title">还没有好友</text>
|
||
<text class="empty-desc">点击右上角 ➕ 添加好友</text>
|
||
<view class="empty-btn" bindtap="addFriend">
|
||
<text class="btn-text">添加好友</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view class="loading-state" wx:if="{{loading}}">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view> |