Initial Commit

pages/social/search/search.js

@@ -0,0 +1,291 @@
+// 搜索用户页面
+const app = getApp();
+const friendAPI = require('../../../utils/friend-api.js');
+
+Page({
+  data: {
+    // 搜索相关
+    searchKeyword: '',
+    searchResults: [],
+    loading: false,
+    hasSearched: false,
+    
+    // 搜索类型
+    searchType: 'all', // all, nickname, custom_id, phone
+    searchTypes: [
+      { value: 'all', label: '全部' },
+      { value: 'nickname', label: '昵称' },
+      { value: 'custom_id', label: 'ID' },
+      { value: 'phone', label: '手机号' }
+    ],
+    
+    // 分页
+    currentPage: 1,
+    pageSize: 20,
+    hasMore: true,
+    
+    // 系统信息
+    statusBarHeight: 0,
+    navBarHeight: 0
+  },
+
+  onLoad(options) {
+    console.log('搜索用户页面加载');
+    this.initSystemInfo();
+    
+    // 如果有传入的搜索关键词，直接搜索
+    if (options.keyword) {
+      this.setData({
+        searchKeyword: decodeURIComponent(options.keyword)
+      });
+      this.performSearch();
+    }
+  },
+
+  // 初始化系统信息
+  initSystemInfo() {
+    try {
+      // 使用新的API替代已弃用的wx.getSystemInfoSync
+      const windowInfo = wx.getWindowInfo();
+      const menuButton = wx.getMenuButtonBoundingClientRect();
+      
+      this.setData({
+        statusBarHeight: windowInfo.statusBarHeight,
+        navBarHeight: menuButton.bottom + 10
+      });
+    } catch (error) {
+      console.error('获取系统信息失败，使用兜底方案:', error);
+      // 兜底方案
+      try {
+        const systemInfo = wx.getSystemInfoSync();
+        const menuButton = wx.getMenuButtonBoundingClientRect();
+        
+        this.setData({
+          statusBarHeight: systemInfo.statusBarHeight,
+          navBarHeight: menuButton.bottom + 10
+        });
+      } catch (fallbackError) {
+        console.error('兜底方案也失败了:', fallbackError);
+        // 设置默认值
+        this.setData({
+          statusBarHeight: 44,
+          navBarHeight: 88
+        });
+      }
+    }
+  },
+
+  // 返回上一页
+  goBack() {
+    wx.navigateBack();
+  },
+
+  // 搜索输入
+  onSearchInput(e) {
+    this.setData({
+      searchKeyword: e.detail.value
+    });
+  },
+
+  // 搜索确认
+  onSearchConfirm() {
+    this.performSearch();
+  },
+
+  // 清空搜索
+  clearSearch() {
+    this.setData({
+      searchKeyword: '',
+      searchResults: [],
+      hasSearched: false,
+      currentPage: 1,
+      hasMore: true
+    });
+  },
+
+  // 切换搜索类型
+  onSearchTypeChange(e) {
+    const searchType = e.currentTarget.dataset.type;
+    this.setData({
+      searchType
+    });
+    
+    if (this.data.searchKeyword) {
+      this.performSearch();
+    }
+  },
+
+  // 执行搜索
+  async performSearch() {
+    const keyword = this.data.searchKeyword.trim();
+    if (!keyword) {
+      wx.showToast({
+        title: '请输入搜索关键词',
+        icon: 'none'
+      });
+      return;
+    }
+
+    this.setData({
+      loading: true,
+      currentPage: 1,
+      searchResults: [],
+      hasMore: true
+    });
+
+    try {
+      const response = await friendAPI.searchUsers(
+        keyword,
+        this.data.searchType,
+        1,
+        this.data.pageSize
+      );
+
+      // 根据正确的接口文档处理API响应结构
+      const searchData = response.data || {};
+      const users = searchData.users || [];
+      const total = searchData.total || 0;
+      
+      this.setData({
+        searchResults: users,
+        hasSearched: true,
+        hasMore: users.length >= this.data.pageSize && this.data.currentPage * this.data.pageSize < total,
+        loading: false
+      });
+
+      if (users.length === 0) {
+        wx.showToast({
+          title: '未找到相关用户',
+          icon: 'none'
+        });
+      }
+
+    } catch (error) {
+      console.error('搜索失败:', error);
+      this.setData({
+        loading: false,
+        hasSearched: true
+      });
+      
+      wx.showToast({
+        title: error.message || '搜索失败',
+        icon: 'none'
+      });
+    }
+  },
+
+  // 加载更多
+  async loadMore() {
+    if (!this.data.hasMore || this.data.loading) return;
+
+    this.setData({ loading: true });
+
+    try {
+      const response = await friendAPI.searchUsers(
+        this.data.searchKeyword,
+        this.data.searchType,
+        this.data.currentPage + 1,
+        this.data.pageSize
+      );
+
+      const searchData = response.data || {};
+      const newUsers = searchData.users || [];
+      const total = searchData.total || 0;
+      const newResults = [...this.data.searchResults, ...newUsers];
+      
+      this.setData({
+        searchResults: newResults,
+        currentPage: this.data.currentPage + 1,
+        hasMore: newResults.length < total,
+        loading: false
+      });
+
+    } catch (error) {
+      console.error('加载更多失败:', error);
+      this.setData({ loading: false });
+    }
+  },
+
+  // 添加好友
+  async addFriend(e) {
+    const { customId, nickname } = e.currentTarget.dataset;
+    
+    try {
+      // 显示输入框让用户输入验证消息
+      const result = await this.showAddFriendDialog(nickname);
+      if (!result.confirm) return;
+
+      wx.showLoading({ title: '发送中...' });
+
+      await friendAPI.addFriend(customId, result.message);
+
+      wx.hideLoading();
+      wx.showToast({
+        title: '好友请求已发送',
+        icon: 'success'
+      });
+
+      // 更新按钮状态
+      const updatedResults = this.data.searchResults.map(user => {
+        if (user.customId === customId) {
+          return {
+            ...user,
+            relationStatus: 'pending',
+            actionText: '等待验证',
+            canAddFriend: false
+          };
+        }
+        return user;
+      });
+
+      this.setData({
+        searchResults: updatedResults
+      });
+
+    } catch (error) {
+      wx.hideLoading();
+      console.error('添加好友失败:', error);
+      wx.showToast({
+        title: error.message || '添加好友失败',
+        icon: 'none'
+      });
+    }
+  },
+
+  // 显示添加好友对话框
+  showAddFriendDialog(nickname) {
+    return new Promise((resolve) => {
+      wx.showModal({
+        title: `添加 ${nickname} 为好友`,
+        editable: true,
+        placeholderText: '请输入验证消息',
+        content: `我是 ${app.globalData.userInfo?.user?.nickname || ''}`,
+        success: (res) => {
+          resolve({
+            confirm: res.confirm,
+            message: res.content || `我是 ${app.globalData.userInfo?.user?.nickname || ''}`
+          });
+        },
+        fail: () => {
+          resolve({ confirm: false });
+        }
+      });
+    });
+  },
+
+  // 查看用户详情
+  viewUserDetail(e) {
+    const { customId } = e.currentTarget.dataset;
+    wx.navigateTo({
+      url: `/pages/social/user-detail/user-detail?customId=${customId}`
+    });
+  },
+
+  // 发送消息
+  sendMessage(e) {
+    const { customId, nickname } = e.currentTarget.dataset;
+    wx.navigateTo({
+      url: `/pages/message/chat/chat?targetId=${customId}&name=${encodeURIComponent(nickname)}&chatType=0`
+    });
+  }
+});

pages/social/search/search.wxml

@@ -0,0 +1,168 @@
+<!-- 搜索用户页面 -->
+<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>

pages/social/search/search.wxss

@@ -0,0 +1,470 @@
+/* 搜索用户页面样式 */
+
+.search-container {
+  height: 100vh;
+  background-color: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 自定义导航栏 */
+.custom-nav-bar {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.nav-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32rpx;
+  height: 88rpx;
+}
+
+.nav-left {
+  width: 80rpx;
+  display: flex;
+  align-items: center;
+}
+
+.back-icon {
+  font-size: 40rpx;
+  color: white;
+  font-weight: bold;
+}
+
+.nav-center {
+  flex: 1;
+  text-align: center;
+}
+
+.nav-title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: white;
+}
+
+.nav-right {
+  width: 80rpx;
+}
+
+/* 搜索区域 */
+.search-section {
+  margin-top: 176rpx;
+  padding: 32rpx;
+  background: white;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  margin-bottom: 32rpx;
+}
+
+.search-input-wrapper {
+  flex: 1;
+  position: relative;
+  background: #f8f9fa;
+  border-radius: 50rpx;
+  padding: 0 32rpx;
+  display: flex;
+  align-items: center;
+  height: 88rpx;
+}
+
+.search-icon {
+  font-size: 32rpx;
+  color: #999;
+  margin-right: 16rpx;
+}
+
+.search-input {
+  flex: 1;
+  font-size: 32rpx;
+  color: #333;
+}
+
+.clear-btn {
+  opacity: 0;
+  transition: opacity 0.3s;
+  padding: 8rpx;
+}
+
+.clear-btn.show {
+  opacity: 1;
+}
+
+.clear-icon {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.search-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50rpx;
+  padding: 0 32rpx;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-btn-text {
+  color: white;
+  font-size: 32rpx;
+  font-weight: 600;
+}
+
+/* 搜索类型 */
+.search-types {
+  display: flex;
+  gap: 16rpx;
+}
+
+.type-item {
+  padding: 16rpx 32rpx;
+  border-radius: 50rpx;
+  background: #f8f9fa;
+  border: 2rpx solid transparent;
+  transition: all 0.3s;
+}
+
+.type-item.active {
+  background: #e3f2fd;
+  border-color: #2196f3;
+}
+
+.type-text {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.type-item.active .type-text {
+  color: #2196f3;
+  font-weight: 600;
+}
+
+/* 结果容器 */
+.results-container {
+  flex: 1;
+  padding: 0 32rpx;
+}
+
+/* 加载中 */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+}
+
+.loading-spinner {
+  width: 60rpx;
+  height: 60rpx;
+  border: 4rpx solid #f3f3f3;
+  border-top: 4rpx solid #667eea;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 24rpx;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 搜索提示 */
+.search-tips {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120rpx 0;
+  text-align: center;
+}
+
+.tips-icon {
+  font-size: 120rpx;
+  margin-bottom: 32rpx;
+  opacity: 0.6;
+}
+
+.tips-title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.tips-desc {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 48rpx;
+}
+
+.tips-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.tip-item {
+  font-size: 26rpx;
+  color: #999;
+  text-align: left;
+}
+
+/* 无结果 */
+.no-results {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120rpx 0;
+  text-align: center;
+}
+
+.no-results-icon {
+  font-size: 120rpx;
+  margin-bottom: 32rpx;
+  opacity: 0.6;
+}
+
+.no-results-title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.no-results-desc {
+  font-size: 28rpx;
+  color: #666;
+}
+
+/* 结果列表 */
+.results-list {
+  padding: 32rpx 0;
+}
+
+.result-item {
+  background: white;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 用户信息 */
+.user-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  margin-right: 24rpx;
+}
+
+.user-avatar {
+  position: relative;
+  margin-right: 24rpx;
+}
+
+.avatar-image {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 48rpx;
+}
+
+.avatar-placeholder {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 48rpx;
+  background: #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-text {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #666;
+}
+
+.member-badge {
+  position: absolute;
+  bottom: -4rpx;
+  right: -4rpx;
+  background: linear-gradient(135deg, #ffd700, #ffb300);
+  border-radius: 20rpx;
+  padding: 4rpx 8rpx;
+}
+
+.member-text {
+  font-size: 20rpx;
+  color: white;
+  font-weight: 600;
+}
+
+.user-details {
+  flex: 1;
+}
+
+.user-name-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+
+.user-nickname {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+  margin-right: 16rpx;
+}
+
+.gender-icon {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #2196f3;
+}
+
+.gender-text {
+  font-size: 20rpx;
+  color: white;
+  font-weight: 600;
+}
+
+.user-meta {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  margin-bottom: 8rpx;
+}
+
+.user-id {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.match-type {
+  font-size: 24rpx;
+  color: #2196f3;
+  background: #e3f2fd;
+  padding: 4rpx 12rpx;
+  border-radius: 12rpx;
+}
+
+.user-bio {
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 8rpx;
+}
+
+.status-message {
+  font-size: 24rpx;
+  color: #999;
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.action-btn {
+  padding: 16rpx 32rpx;
+  border-radius: 50rpx;
+  text-align: center;
+  min-width: 120rpx;
+}
+
+.add-btn.enabled {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.add-btn.disabled {
+  background: #f0f0f0;
+}
+
+.pending-btn {
+  background: #fff3e0;
+  border: 2rpx solid #ff9800;
+}
+
+.friend-btn {
+  background: #e8f5e8;
+  border: 2rpx solid #4caf50;
+}
+
+.message-btn {
+  background: #e3f2fd;
+  border: 2rpx solid #2196f3;
+}
+
+.btn-text {
+  font-size: 26rpx;
+  font-weight: 600;
+}
+
+.add-btn.enabled .btn-text {
+  color: white;
+}
+
+.add-btn.disabled .btn-text {
+  color: #999;
+}
+
+.pending-btn .btn-text {
+  color: #ff9800;
+}
+
+.friend-btn .btn-text {
+  color: #4caf50;
+}
+
+.message-btn .btn-text {
+  color: #2196f3;
+}
+
+/* 加载更多 */
+.load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32rpx 0;
+  gap: 16rpx;
+}
+
+.load-more-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.no-more {
+  display: flex;
+  justify-content: center;
+  padding: 32rpx 0;
+}
+
+.no-more-text {
+  font-size: 28rpx;
+  color: #ccc;
+}