125 lines
No EOL
4.4 KiB
Text
125 lines
No EOL
4.4 KiB
Text
<!-- 好友页面 - 简洁现代设计 -->
|
||
<view class="friends-container">
|
||
|
||
<!-- 导航栏 -->
|
||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||
<view class="nav-content">
|
||
<view class="nav-left">
|
||
<text class="nav-title">好友</text>
|
||
<text class="nav-subtitle">{{totalFriendsCount}} 位联系人</text>
|
||
</view>
|
||
<view class="nav-actions">
|
||
|
||
<view class="nav-btn" bindtap="addFriend">
|
||
<text class="nav-icon">➕</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view class="content-area" scroll-y="true" style="top: {{navBarHeight}}px;">
|
||
|
||
<!-- 搜索栏 -->
|
||
<view class="search-section" wx:if="{{searchKeyword}}">
|
||
<view class="search-bar">
|
||
<input class="search-input"
|
||
placeholder="搜索好友"
|
||
value="{{searchKeyword}}"
|
||
bindinput="onSearchInput"
|
||
bindconfirm="clearSearch" />
|
||
<view class="search-clear" bindtap="clearSearch">
|
||
<text class="clear-icon">✕</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能入口 -->
|
||
<view class="function-section">
|
||
<view class="function-item" bindtap="openNewFriends">
|
||
<view class="function-icon new-friends">
|
||
<text class="icon-text">👥</text>
|
||
<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>
|
||
<text class="function-arrow">›</text>
|
||
</view>
|
||
|
||
<view class="function-item" bindtap="openGroupChats">
|
||
<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" 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' : ''}}"></view>
|
||
</view>
|
||
|
||
<!-- 信息 -->
|
||
<view class="friend-info">
|
||
<text class="friend-name">{{item.remark || item.nickname}}</text>
|
||
<text class="friend-status">{{item.personalSignature || (item.isOnline ? '在线' : '离线')}}</text>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="friend-actions">
|
||
<view class="action-btn" bindtap="sendMessage" data-friend="{{item}}">
|
||
<text class="action-icon">💬</text>
|
||
</view>
|
||
<view class="action-btn" bindtap="videoCall" data-friend="{{item}}">
|
||
<text class="action-icon">📹</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" wx:if="{{!loading && filteredFriends.length === 0}}">
|
||
<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> |