upload project

pages/social/friends/friends.wxml

@@ -0,0 +1,131 @@
+<!-- 好友页面 - 简洁现代设计 -->
+<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>