Initial Commit
This commit is contained in:
commit
1d71a02738
237 changed files with 64293 additions and 0 deletions
253
pages/social/friend-detail/friend-detail.js
Normal file
253
pages/social/friend-detail/friend-detail.js
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
// 好友详情页面
|
||||
const app = getApp();
|
||||
const friendAPI = require('../../../utils/friend-api.js');
|
||||
const { initPageSystemInfo } = require('../../../utils/system-info-modern.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 好友信息
|
||||
friendInfo: null,
|
||||
loading: true,
|
||||
|
||||
// 系统信息
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 0,
|
||||
|
||||
// 操作状态
|
||||
isDeleting: false
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
console.log('好友详情页面加载:', options);
|
||||
|
||||
// 初始化系统信息
|
||||
this.initSystemInfo();
|
||||
|
||||
// 获取好友ID
|
||||
const customId = options.customId;
|
||||
if (customId) {
|
||||
this.loadFriendDetail(customId);
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '参数错误',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化系统信息
|
||||
initSystemInfo() {
|
||||
const pageSystemInfo = initPageSystemInfo();
|
||||
this.setData({
|
||||
statusBarHeight: pageSystemInfo.statusBarHeight,
|
||||
navBarHeight: pageSystemInfo.navBarHeight
|
||||
});
|
||||
},
|
||||
|
||||
// 加载好友详情
|
||||
async loadFriendDetail(customId) {
|
||||
try {
|
||||
this.setData({ loading: true });
|
||||
|
||||
console.log('🔥 加载好友详情:', customId);
|
||||
const response = await friendAPI.getFriendDetail(customId);
|
||||
|
||||
if (response && response.code === 0) {
|
||||
const friendInfo = response.data;
|
||||
console.log('✅ 获取好友详情成功:', friendInfo);
|
||||
|
||||
this.setData({
|
||||
friendInfo: friendInfo,
|
||||
loading: false
|
||||
});
|
||||
} else {
|
||||
throw new Error(response?.message || '获取好友详情失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 加载好友详情失败:', error);
|
||||
this.setData({ loading: false });
|
||||
|
||||
wx.showToast({
|
||||
title: error.message || '加载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
// 延迟返回上一页
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
// 发送消息
|
||||
sendMessage() {
|
||||
const { friendInfo } = this.data;
|
||||
if (!friendInfo) return;
|
||||
|
||||
console.log('💬 发送消息给:', friendInfo.nickname);
|
||||
|
||||
// 跳转到聊天页面
|
||||
const currentUserId = app.globalData.userInfo?.user?.customId || '';
|
||||
// 🔥 修复：不传递conversationId，让聊天页面从API获取正确的会话ID
|
||||
|
||||
wx.navigateTo({
|
||||
url: `/pages/message/chat/chat?targetId=${friendInfo.customId}&name=${encodeURIComponent(friendInfo.nickname)}&chatType=0`
|
||||
});
|
||||
},
|
||||
|
||||
// 视频通话
|
||||
videoCall() {
|
||||
const { friendInfo } = this.data;
|
||||
if (!friendInfo) return;
|
||||
|
||||
console.log('📹 视频通话:', friendInfo.nickname);
|
||||
wx.showToast({
|
||||
title: '视频通话功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 设置备注
|
||||
setRemark() {
|
||||
const { friendInfo } = this.data;
|
||||
if (!friendInfo) return;
|
||||
|
||||
wx.showModal({
|
||||
title: '设置备注',
|
||||
editable: true,
|
||||
placeholderText: '请输入备注名',
|
||||
content: friendInfo.remark || '',
|
||||
success: async (res) => {
|
||||
if (res.confirm && res.content !== friendInfo.remark) {
|
||||
try {
|
||||
wx.showLoading({ title: '设置中...' });
|
||||
|
||||
// 这里需要调用更新好友备注的API
|
||||
// await friendAPI.updateFriendRemark(friendInfo.customId, res.content);
|
||||
|
||||
// 更新本地数据
|
||||
this.setData({
|
||||
'friendInfo.remark': res.content
|
||||
});
|
||||
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '设置成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '设置失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 删除好友
|
||||
deleteFriend() {
|
||||
const { friendInfo } = this.data;
|
||||
if (!friendInfo) return;
|
||||
|
||||
wx.showModal({
|
||||
title: '删除好友',
|
||||
content: `确定要删除好友"${friendInfo.nickname}"吗？删除后将无法收到对方消息。`,
|
||||
confirmText: '删除',
|
||||
confirmColor: '#ff4757',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
this.setData({ isDeleting: true });
|
||||
wx.showLoading({ title: '删除中...' });
|
||||
|
||||
console.log('🗑️ 删除好友:', friendInfo.customId);
|
||||
await friendAPI.deleteFriend(friendInfo.customId);
|
||||
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '已删除好友',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 延迟返回并刷新好友列表
|
||||
setTimeout(() => {
|
||||
// 通知好友页面刷新
|
||||
const pages = getCurrentPages();
|
||||
const friendsPage = pages.find(page => page.route === 'pages/social/friends/friends');
|
||||
if (friendsPage && friendsPage.loadFriends) {
|
||||
friendsPage.loadFriends();
|
||||
}
|
||||
|
||||
wx.navigateBack();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 删除好友失败:', error);
|
||||
wx.hideLoading();
|
||||
this.setData({ isDeleting: false });
|
||||
|
||||
wx.showToast({
|
||||
title: error.message || '删除失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 更多操作
|
||||
showMoreActions() {
|
||||
const { friendInfo } = this.data;
|
||||
if (!friendInfo) return;
|
||||
|
||||
const actions = ['设置备注', '删除好友'];
|
||||
|
||||
wx.showActionSheet({
|
||||
itemList: actions,
|
||||
success: (res) => {
|
||||
switch(res.tapIndex) {
|
||||
case 0:
|
||||
this.setRemark();
|
||||
break;
|
||||
case 1:
|
||||
this.deleteFriend();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 查看位置
|
||||
viewLocation() {
|
||||
const { friendInfo } = this.data;
|
||||
if (!friendInfo || !friendInfo.locationInfo) {
|
||||
wx.showToast({
|
||||
title: '暂无位置信息',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const { locationInfo } = friendInfo;
|
||||
wx.openLocation({
|
||||
latitude: locationInfo.latitude,
|
||||
longitude: locationInfo.longitude,
|
||||
name: friendInfo.nickname,
|
||||
address: locationInfo.address || '未知位置'
|
||||
});
|
||||
}
|
||||
});
|
||||
4
pages/social/friend-detail/friend-detail.json
Normal file
4
pages/social/friend-detail/friend-detail.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#f5f5f5"
|
||||
}
|
||||
178
pages/social/friend-detail/friend-detail.wxml
Normal file
178
pages/social/friend-detail/friend-detail.wxml
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
<!-- 好友详情页面 -->
|
||||
<view class="friend-detail-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" bindtap="showMoreActions">
|
||||
<text class="more-icon">⋯</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<view class="loading-container" wx:if="{{loading}}">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 好友详情内容 -->
|
||||
<scroll-view class="detail-content" scroll-y="true" wx:if="{{!loading && friendInfo}}">
|
||||
|
||||
<!-- 基本信息卡片 -->
|
||||
<view class="info-card">
|
||||
<!-- 头像和基本信息 -->
|
||||
<view class="basic-info">
|
||||
<view class="avatar-section">
|
||||
<view class="friend-avatar">
|
||||
<image wx:if="{{friendInfo.avatar}}"
|
||||
src="{{friendInfo.avatar}}"
|
||||
class="avatar-image"
|
||||
mode="aspectFill" />
|
||||
<view wx:else class="avatar-placeholder">
|
||||
<text class="avatar-text">{{friendInfo.nickname ? friendInfo.nickname.charAt(0) : '?'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 会员标识 -->
|
||||
<view class="member-badge" wx:if="{{friendInfo.isMember}}">
|
||||
<text class="member-text">VIP{{friendInfo.memberLevel}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-section">
|
||||
<view class="name-row">
|
||||
<text class="friend-name">{{friendInfo.remark || friendInfo.nickname}}</text>
|
||||
<view class="gender-icon" wx:if="{{friendInfo.gender}}">
|
||||
<text class="gender-text">{{friendInfo.gender === 1 ? '♂' : '♀'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="friend-id">ID: {{friendInfo.customId}}</text>
|
||||
|
||||
<text class="friend-bio" wx:if="{{friendInfo.bio}}">{{friendInfo.bio}}</text>
|
||||
|
||||
<!-- 好友关系信息 -->
|
||||
<view class="friendship-info" wx:if="{{friendInfo.friendSince}}">
|
||||
<text class="friendship-text">{{friendInfo.friendSince}}</text>
|
||||
<text class="friendship-days" wx:if="{{friendInfo.friendshipDays}}">已成为好友 {{friendInfo.friendshipDays}} 天</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="action-btn primary" bindtap="sendMessage">
|
||||
<text class="btn-icon">💬</text>
|
||||
<text class="btn-text">发消息</text>
|
||||
</view>
|
||||
|
||||
<view class="action-btn secondary" bindtap="videoCall">
|
||||
<text class="btn-icon">📹</text>
|
||||
<text class="btn-text">视频通话</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详细信息 -->
|
||||
<view class="detail-sections">
|
||||
|
||||
<!-- 好友信息 -->
|
||||
<view class="detail-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">好友信息</text>
|
||||
</view>
|
||||
|
||||
<view class="info-items">
|
||||
<view class="info-item" wx:if="{{friendInfo.remark}}">
|
||||
<text class="item-label">备注</text>
|
||||
<text class="item-value">{{friendInfo.remark}}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item" wx:if="{{friendInfo.relation}}">
|
||||
<text class="item-label">关系</text>
|
||||
<text class="item-value">{{friendInfo.relation}}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item" wx:if="{{friendInfo.group}}">
|
||||
<text class="item-label">分组</text>
|
||||
<text class="item-value">{{friendInfo.group}}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item" wx:if="{{friendInfo.phone}}">
|
||||
<text class="item-label">手机号</text>
|
||||
<text class="item-value">{{friendInfo.phone}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 位置信息 -->
|
||||
<view class="detail-section" wx:if="{{friendInfo.locationInfo}}">
|
||||
<view class="section-header">
|
||||
<text class="section-title">位置信息</text>
|
||||
</view>
|
||||
|
||||
<view class="location-item" bindtap="viewLocation">
|
||||
<view class="location-info">
|
||||
<text class="location-icon">📍</text>
|
||||
<view class="location-details">
|
||||
<text class="location-address">{{friendInfo.locationInfo.address}}</text>
|
||||
<text class="location-time" wx:if="{{friendInfo.lastLocationTime}}">更新时间: {{friendInfo.lastLocationTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="location-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 设置选项 -->
|
||||
<view class="detail-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">设置</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-items">
|
||||
<view class="setting-item" bindtap="setRemark">
|
||||
<view class="setting-info">
|
||||
<text class="setting-icon">✏️</text>
|
||||
<text class="setting-label">设置备注和标签</text>
|
||||
</view>
|
||||
<text class="setting-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-item">
|
||||
<view class="setting-info">
|
||||
<text class="setting-icon">🔕</text>
|
||||
<text class="setting-label">消息免打扰</text>
|
||||
</view>
|
||||
<switch class="setting-switch" checked="{{friendInfo.isMuted}}" />
|
||||
</view>
|
||||
|
||||
<view class="setting-item">
|
||||
<view class="setting-info">
|
||||
<text class="setting-icon">📌</text>
|
||||
<text class="setting-label">置顶聊天</text>
|
||||
</view>
|
||||
<switch class="setting-switch" checked="{{friendInfo.isTop}}" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 危险操作 -->
|
||||
<view class="detail-section danger-section">
|
||||
<view class="danger-item" bindtap="deleteFriend">
|
||||
<text class="danger-icon">🗑️</text>
|
||||
<text class="danger-text">删除好友</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部安全区域 -->
|
||||
<view class="safe-area-bottom"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
396
pages/social/friend-detail/friend-detail.wxss
Normal file
396
pages/social/friend-detail/friend-detail.wxss
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
/* 好友详情页面样式 */
|
||||
.friend-detail-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 自定义导航栏 */
|
||||
.custom-nav-bar {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.nav-left, .nav-right {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.back-icon, .more-icon {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #007aff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 详情内容 */
|
||||
.detail-content {
|
||||
height: calc(100vh - 88px);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e5e5e5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.member-badge {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
background: linear-gradient(45deg, #ff6b6b, #ffa500);
|
||||
border-radius: 8px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.member-text {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.friend-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.gender-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #007aff;
|
||||
}
|
||||
|
||||
.gender-text {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.friend-id {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.friend-bio {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.friendship-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.friendship-text {
|
||||
font-size: 13px;
|
||||
color: #007aff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.friendship-days {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background-color: #007aff;
|
||||
}
|
||||
|
||||
.action-btn.secondary {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.action-btn.primary .btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-btn.secondary .btn-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 详细信息区域 */
|
||||
.detail-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 16px 16px 8px 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 信息项 */
|
||||
.info-items {
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 位置信息 */
|
||||
.location-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
font-size: 16px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.location-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.location-address {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.location-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.location-arrow {
|
||||
font-size: 16px;
|
||||
color: #c7c7cc;
|
||||
}
|
||||
|
||||
/* 设置项 */
|
||||
.setting-items {
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.setting-icon {
|
||||
font-size: 16px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.setting-arrow {
|
||||
font-size: 16px;
|
||||
color: #c7c7cc;
|
||||
}
|
||||
|
||||
.setting-switch {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
/* 危险操作 */
|
||||
.danger-section {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.danger-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.danger-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.danger-text {
|
||||
font-size: 15px;
|
||||
color: #ff3b30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 底部安全区域 */
|
||||
.safe-area-bottom {
|
||||
height: 34px;
|
||||
}
|
||||
248
pages/social/friend-requests/friend-requests.js
Normal file
248
pages/social/friend-requests/friend-requests.js
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
// 好友请求管理页面
|
||||
const app = getApp();
|
||||
const friendAPI = require('../../../utils/friend-api.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 请求列表
|
||||
friendRequests: [],
|
||||
pendingRequests: [],
|
||||
processedRequests: [],
|
||||
loading: true,
|
||||
refreshing: false,
|
||||
|
||||
// 统计
|
||||
pendingCount: 0,
|
||||
processedCount: 0,
|
||||
|
||||
// 系统信息
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 0,
|
||||
|
||||
// 标签页
|
||||
activeTab: 'pending', // pending, processed
|
||||
tabs: [
|
||||
{ key: 'pending', label: '待处理', count: 0 },
|
||||
{ key: 'processed', label: '已处理', count: 0 }
|
||||
]
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
console.log('好友请求页面加载');
|
||||
this.initSystemInfo();
|
||||
this.loadFriendRequests();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 刷新数据
|
||||
this.loadFriendRequests();
|
||||
},
|
||||
|
||||
// 初始化系统信息
|
||||
initSystemInfo() {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const menuButton = wx.getMenuButtonBoundingClientRect();
|
||||
|
||||
this.setData({
|
||||
statusBarHeight: systemInfo.statusBarHeight,
|
||||
navBarHeight: menuButton.bottom + 10
|
||||
});
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
// 加载好友请求
|
||||
async loadFriendRequests() {
|
||||
try {
|
||||
this.setData({ loading: true });
|
||||
|
||||
const response = await friendAPI.getFriendRequests();
|
||||
|
||||
// 从API响应中提取数据数组
|
||||
const requests = response.data || [];
|
||||
|
||||
// 分类请求
|
||||
const pendingRequests = requests.filter(req => req.status === 0);
|
||||
const processedRequests = requests.filter(req => req.status !== 0);
|
||||
|
||||
// 更新标签页计数
|
||||
const updatedTabs = this.data.tabs.map(tab => ({
|
||||
...tab,
|
||||
count: tab.key === 'pending' ? pendingRequests.length : processedRequests.length
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
friendRequests: requests,
|
||||
pendingRequests: pendingRequests,
|
||||
processedRequests: processedRequests,
|
||||
pendingCount: pendingRequests.length,
|
||||
processedCount: processedRequests.length,
|
||||
tabs: updatedTabs,
|
||||
loading: false,
|
||||
refreshing: false
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载好友请求失败:', error);
|
||||
this.setData({
|
||||
loading: false,
|
||||
refreshing: false
|
||||
});
|
||||
|
||||
wx.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onRefresh() {
|
||||
this.setData({ refreshing: true });
|
||||
this.loadFriendRequests();
|
||||
// 刷新后也通知好友页面更新数量
|
||||
setTimeout(() => {
|
||||
this.notifyFriendsPageRefresh();
|
||||
}, 500); // 延迟一点确保数据加载完成
|
||||
},
|
||||
|
||||
// 切换标签页
|
||||
switchTab(e) {
|
||||
const tab = e.currentTarget.dataset.tab;
|
||||
this.setData({
|
||||
activeTab: tab
|
||||
});
|
||||
|
||||
console.log('切换到标签页:', tab);
|
||||
console.log('待处理请求数量:', this.data.pendingRequests?.length || 0);
|
||||
console.log('已处理请求数量:', this.data.processedRequests?.length || 0);
|
||||
},
|
||||
|
||||
// 获取当前标签页的请求列表
|
||||
getCurrentRequests() {
|
||||
const { friendRequests, activeTab } = this.data;
|
||||
|
||||
if (activeTab === 'pending') {
|
||||
return friendRequests.filter(req => req.status === 0);
|
||||
} else {
|
||||
return friendRequests.filter(req => req.status !== 0);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理好友请求
|
||||
async handleRequest(e) {
|
||||
const { requestId, accept } = e.currentTarget.dataset;
|
||||
const actionText = accept === 'true' ? '接受' : '拒绝';
|
||||
|
||||
try {
|
||||
wx.showLoading({ title: `${actionText}中...` });
|
||||
|
||||
await friendAPI.handleFriendRequest(requestId, accept === 'true');
|
||||
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: `已${actionText}`,
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 刷新列表
|
||||
this.loadFriendRequests();
|
||||
|
||||
// 通知好友页面刷新请求数量
|
||||
this.notifyFriendsPageRefresh();
|
||||
|
||||
} catch (error) {
|
||||
wx.hideLoading();
|
||||
console.error('处理好友请求失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || `${actionText}失败`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 查看用户详情
|
||||
viewUserDetail(e) {
|
||||
const { customId } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/social/user-detail/user-detail?customId=${customId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 通知好友页面刷新
|
||||
notifyFriendsPageRefresh() {
|
||||
try {
|
||||
// 通过全局事件通知好友页面刷新
|
||||
const app = getApp();
|
||||
if (app.globalData) {
|
||||
app.globalData.needRefreshFriendRequests = true;
|
||||
}
|
||||
|
||||
// 也可以通过页面栈找到好友页面并直接调用刷新方法
|
||||
const pages = getCurrentPages();
|
||||
const friendsPage = pages.find(page => page.route === 'pages/social/friends/friends');
|
||||
if (friendsPage && friendsPage.loadFriendRequestsCount) {
|
||||
friendsPage.loadFriendRequestsCount();
|
||||
}
|
||||
|
||||
console.log('✅ 已通知好友页面刷新请求数量');
|
||||
} catch (error) {
|
||||
console.error('❌ 通知好友页面失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 发送消息
|
||||
sendMessage(e) {
|
||||
const { customId, nickname } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/message/chat/chat?targetId=${customId}&name=${encodeURIComponent(nickname)}&chatType=0`
|
||||
});
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatTime(timeStr) {
|
||||
const time = new Date(timeStr);
|
||||
const now = new Date();
|
||||
const diff = now - time;
|
||||
|
||||
const minute = 60 * 1000;
|
||||
const hour = 60 * minute;
|
||||
const day = 24 * hour;
|
||||
const week = 7 * day;
|
||||
|
||||
if (diff < minute) {
|
||||
return '刚刚';
|
||||
} else if (diff < hour) {
|
||||
return `${Math.floor(diff / minute)}分钟前`;
|
||||
} else if (diff < day) {
|
||||
return `${Math.floor(diff / hour)}小时前`;
|
||||
} else if (diff < week) {
|
||||
return `${Math.floor(diff / day)}天前`;
|
||||
} else {
|
||||
return time.toLocaleDateString();
|
||||
}
|
||||
},
|
||||
|
||||
// 获取状态文本
|
||||
getStatusText(status) {
|
||||
switch (status) {
|
||||
case 0: return '待处理';
|
||||
case 1: return '已接受';
|
||||
case 2: return '已拒绝';
|
||||
default: return '未知';
|
||||
}
|
||||
},
|
||||
|
||||
// 获取状态样式类
|
||||
getStatusClass(status) {
|
||||
switch (status) {
|
||||
case 0: return 'pending';
|
||||
case 1: return 'accepted';
|
||||
case 2: return 'rejected';
|
||||
default: return 'unknown';
|
||||
}
|
||||
}
|
||||
});
|
||||
190
pages/social/friend-requests/friend-requests.wxml
Normal file
190
pages/social/friend-requests/friend-requests.wxml
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
<!-- 好友请求管理页面 -->
|
||||
<view class="requests-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="tabs-container">
|
||||
<view class="tab-item {{activeTab === item.key ? 'active' : ''}}"
|
||||
wx:for="{{tabs}}"
|
||||
wx:key="key"
|
||||
bindtap="switchTab"
|
||||
data-tab="{{item.key}}">
|
||||
<text class="tab-text">{{item.label}}</text>
|
||||
<view class="tab-badge" wx:if="{{item.count > 0}}">
|
||||
<text class="badge-text">{{item.count > 99 ? '99+' : item.count}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<scroll-view class="content-container"
|
||||
scroll-y="true"
|
||||
refresher-enabled="true"
|
||||
refresher-triggered="{{refreshing}}"
|
||||
bindrefresherrefresh="onRefresh">
|
||||
|
||||
<!-- 加载中 -->
|
||||
<view class="loading-container" wx:if="{{loading}}">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-container" wx:if="{{!loading && (activeTab === 'pending' ? pendingRequests.length === 0 : processedRequests.length === 0)}}">
|
||||
<view class="empty-icon">
|
||||
<text class="icon-text">{{activeTab === 'pending' ? '📭' : '📋'}}</text>
|
||||
</view>
|
||||
<text class="empty-title">{{activeTab === 'pending' ? '暂无待处理请求' : '暂无已处理记录'}}</text>
|
||||
<text class="empty-desc">{{activeTab === 'pending' ? '当有人向您发送好友请求时，会在这里显示' : '您处理过的好友请求会在这里显示'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 请求列表 -->
|
||||
<view class="requests-list" wx:if="{{!loading && (activeTab === 'pending' ? pendingRequests.length > 0 : processedRequests.length > 0)}}">
|
||||
<view class="request-item"
|
||||
wx:for="{{activeTab === 'pending' ? pendingRequests : processedRequests}}"
|
||||
wx:key="requestId">
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-section" bindtap="viewUserDetail" data-custom-id="{{item.senderCustomId}}">
|
||||
<!-- 头像 -->
|
||||
<view class="user-avatar">
|
||||
<image wx:if="{{item.senderAvatar}}"
|
||||
src="{{item.senderAvatar}}"
|
||||
class="avatar-image"
|
||||
mode="aspectFill" />
|
||||
<view wx:else class="avatar-placeholder">
|
||||
<text class="avatar-text">{{item.senderNickname ? item.senderNickname.charAt(0) : '?'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户详情 -->
|
||||
<view class="user-info">
|
||||
<view class="user-name">
|
||||
<text class="nickname">{{item.senderNickname}}</text>
|
||||
<view class="status-badge {{getStatusClass(item.status)}}" wx:if="{{activeTab === 'processed'}}">
|
||||
<text class="status-text">{{getStatusText(item.status)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="user-id">ID: {{item.senderCustomId}}</text>
|
||||
|
||||
<view class="request-message" wx:if="{{item.message}}">
|
||||
<text class="message-text">{{item.message}}</text>
|
||||
</view>
|
||||
|
||||
<view class="time-info">
|
||||
<text class="time-text">{{formatTime(item.createdAt)}}</text>
|
||||
<text class="handle-time" wx:if="{{item.handleTime}}">处理时间: {{formatTime(item.handleTime)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-section" wx:if="{{item.status === 0}}">
|
||||
<view class="action-buttons">
|
||||
<view class="action-btn reject-btn"
|
||||
bindtap="handleRequest"
|
||||
data-request-id="{{item.requestId}}"
|
||||
data-accept="false">
|
||||
<text class="btn-text">拒绝</text>
|
||||
</view>
|
||||
|
||||
<view class="action-btn accept-btn"
|
||||
bindtap="handleRequest"
|
||||
data-request-id="{{item.requestId}}"
|
||||
data-accept="true">
|
||||
<text class="btn-text">接受</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 已处理状态的操作 -->
|
||||
<view class="processed-actions" wx:if="{{item.status === 1}}">
|
||||
<view class="message-btn"
|
||||
bindtap="sendMessage"
|
||||
data-custom-id="{{item.senderCustomId}}"
|
||||
data-nickname="{{item.senderNickname}}">
|
||||
<text class="message-btn-text">发消息</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部安全区域 -->
|
||||
<view class="safe-area-bottom"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<wxs module="utils">
|
||||
var getCurrentRequests = function(friendRequests, activeTab) {
|
||||
if (!friendRequests || !friendRequests.length) return [];
|
||||
|
||||
if (activeTab === 'pending') {
|
||||
return friendRequests.filter(function(req) {
|
||||
return req.status === 0;
|
||||
});
|
||||
} else {
|
||||
return friendRequests.filter(function(req) {
|
||||
return req.status !== 0;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var formatTime = function(timeStr) {
|
||||
if (!timeStr) return '';
|
||||
|
||||
var time = getDate(timeStr);
|
||||
var now = getDate();
|
||||
var diff = now.getTime() - time.getTime();
|
||||
|
||||
var minute = 60 * 1000;
|
||||
var hour = 60 * minute;
|
||||
var day = 24 * hour;
|
||||
var week = 7 * day;
|
||||
|
||||
if (diff < minute) {
|
||||
return '刚刚';
|
||||
} else if (diff < hour) {
|
||||
return Math.floor(diff / minute) + '分钟前';
|
||||
} else if (diff < day) {
|
||||
return Math.floor(diff / hour) + '小时前';
|
||||
} else if (diff < week) {
|
||||
return Math.floor(diff / day) + '天前';
|
||||
} else {
|
||||
return time.toLocaleDateString();
|
||||
}
|
||||
};
|
||||
|
||||
var getStatusText = function(status) {
|
||||
if (status === 0) return '待处理';
|
||||
if (status === 1) return '已接受';
|
||||
if (status === 2) return '已拒绝';
|
||||
return '未知';
|
||||
};
|
||||
|
||||
var getStatusClass = function(status) {
|
||||
if (status === 0) return 'pending';
|
||||
if (status === 1) return 'accepted';
|
||||
if (status === 2) return 'rejected';
|
||||
return 'unknown';
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getCurrentRequests: getCurrentRequests,
|
||||
formatTime: formatTime,
|
||||
getStatusText: getStatusText,
|
||||
getStatusClass: getStatusClass
|
||||
};
|
||||
</wxs>
|
||||
353
pages/social/friend-requests/friend-requests.wxss
Normal file
353
pages/social/friend-requests/friend-requests.wxss
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
/* 好友请求管理页面样式 */
|
||||
|
||||
.requests-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;
|
||||
}
|
||||
|
||||
/* 标签页 */
|
||||
.tabs-container {
|
||||
margin-top: 176rpx;
|
||||
background: white;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32rpx 0;
|
||||
position: relative;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
border-bottom: 4rpx solid #667eea;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-item.active .tab-text {
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-badge {
|
||||
background: #ff4757;
|
||||
border-radius: 20rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content-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;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 请求列表 */
|
||||
.requests-list {
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.request-item {
|
||||
background: white;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 用户信息区域 */
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
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;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
background: #fff3e0;
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.status-badge.accepted {
|
||||
background: #e8f5e8;
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.status-badge.rejected {
|
||||
background: #ffebee;
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.request-message {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.time-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.handle-time {
|
||||
font-size: 22rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 操作按钮区域 */
|
||||
.action-section {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.reject-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.reject-btn .btn-text {
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.accept-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.accept-btn .btn-text {
|
||||
color: white;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 已处理状态的操作 */
|
||||
.processed-actions {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 24rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message-btn {
|
||||
background: #e3f2fd;
|
||||
border: 2rpx solid #2196f3;
|
||||
border-radius: 50rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
|
||||
.message-btn-text {
|
||||
color: #2196f3;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 底部安全区域 */
|
||||
.safe-area-bottom {
|
||||
height: 60rpx;
|
||||
}
|
||||
959
pages/social/friends/friends.js
Normal file
959
pages/social/friends/friends.js
Normal file
|
|
@ -0,0 +1,959 @@
|
|||
// 好友列表页面
|
||||
const app = getApp();
|
||||
const apiClient = require('../../../utils/api-client.js');
|
||||
const friendAPI = require('../../../utils/friend-api.js');
|
||||
const wsManager = require('../../../utils/websocket-manager-v2.js');
|
||||
const { modernSystemInfo, initPageSystemInfo } = require('../../../utils/system-info-modern.js');
|
||||
|
||||
// 事件处理工具函数
|
||||
const EventUtils = {
|
||||
// 安全地阻止事件冒泡
|
||||
safeStopPropagation(event) {
|
||||
try {
|
||||
if (event && typeof event.stopPropagation === 'function') {
|
||||
event.stopPropagation();
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('停止事件冒泡失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 安全地阻止默认行为
|
||||
safePreventDefault(event) {
|
||||
try {
|
||||
if (event && typeof event.preventDefault === 'function') {
|
||||
event.preventDefault();
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('阻止默认行为失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 安全地从事件中提取数据
|
||||
safeGetDataset(event) {
|
||||
try {
|
||||
return event?.currentTarget?.dataset || event?.target?.dataset || {};
|
||||
} catch (error) {
|
||||
console.warn('获取事件数据失败:', error);
|
||||
return {};
|
||||
}
|
||||
},
|
||||
|
||||
// 验证好友数据
|
||||
validateFriendData(friend) {
|
||||
return friend &&
|
||||
friend.customId &&
|
||||
friend.nickname &&
|
||||
typeof friend === 'object';
|
||||
}
|
||||
};
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 好友数据
|
||||
friends: [],
|
||||
filteredFriends: [],
|
||||
|
||||
// UI状态
|
||||
loading: true,
|
||||
refreshing: false,
|
||||
searchKeyword: '',
|
||||
|
||||
// 统计数据
|
||||
newFriendRequests: 0,
|
||||
totalFriendsCount: 0,
|
||||
onlineFriendsCount: 0,
|
||||
recentActiveCount: 0,
|
||||
mutualFriendsCount: 0,
|
||||
|
||||
// 系统适配信息
|
||||
systemInfo: {},
|
||||
statusBarHeight: 0,
|
||||
menuButtonHeight: 0,
|
||||
menuButtonTop: 0,
|
||||
navBarHeight: 0,
|
||||
windowHeight: 0,
|
||||
safeAreaBottom: 0,
|
||||
|
||||
// 添加好友提示
|
||||
showAddTip: false,
|
||||
userInfo: {},
|
||||
|
||||
// 事件处理状态
|
||||
eventHandlingState: {
|
||||
lastEventTime: 0,
|
||||
eventThrottleMs: 300, // 防止快速连续点击
|
||||
errorCount: 0,
|
||||
maxErrors: 5
|
||||
}
|
||||
},
|
||||
|
||||
onLoad: function (options) {
|
||||
console.log('好友列表页面加载');
|
||||
this.initSystemInfo();
|
||||
this.checkAuthAndLoad();
|
||||
},
|
||||
|
||||
onShow: function () {
|
||||
console.log('好友列表页面显示');
|
||||
|
||||
// 检查是否需要刷新好友请求数量
|
||||
const app = getApp();
|
||||
if (app.globalData && app.globalData.needRefreshFriendRequests) {
|
||||
console.log('🔄 检测到好友请求状态变化，强制刷新');
|
||||
app.globalData.needRefreshFriendRequests = false;
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
this.loadFriends();
|
||||
this.loadFriendRequestsCount();
|
||||
},
|
||||
|
||||
// 初始化系统信息
|
||||
// 初始化系统信息 - 使用现代化API
|
||||
initSystemInfo() {
|
||||
const pageSystemInfo = initPageSystemInfo();
|
||||
|
||||
console.log('系统适配信息:', {
|
||||
statusBarHeight: pageSystemInfo.statusBarHeight,
|
||||
menuButtonHeight: pageSystemInfo.menuButtonHeight,
|
||||
menuButtonTop: pageSystemInfo.menuButtonTop,
|
||||
navBarHeight: pageSystemInfo.navBarHeight,
|
||||
windowHeight: pageSystemInfo.windowHeight,
|
||||
safeAreaBottom: pageSystemInfo.safeAreaBottom,
|
||||
screenWidth: pageSystemInfo.systemInfo.screenWidth,
|
||||
screenHeight: pageSystemInfo.systemInfo.screenHeight,
|
||||
platform: pageSystemInfo.systemInfo.platform
|
||||
});
|
||||
|
||||
this.setData({
|
||||
systemInfo: pageSystemInfo.systemInfo,
|
||||
statusBarHeight: pageSystemInfo.statusBarHeight,
|
||||
menuButtonHeight: pageSystemInfo.menuButtonHeight,
|
||||
menuButtonTop: pageSystemInfo.menuButtonTop,
|
||||
navBarHeight: pageSystemInfo.navBarHeight,
|
||||
windowHeight: pageSystemInfo.windowHeight,
|
||||
safeAreaBottom: pageSystemInfo.safeAreaBottom
|
||||
});
|
||||
},
|
||||
|
||||
// 检查认证状态并加载数据
|
||||
async checkAuthAndLoad() {
|
||||
try {
|
||||
// 确保API客户端能获取到token
|
||||
const currentToken = apiClient.getToken();
|
||||
if (!currentToken) {
|
||||
console.error('用户未登录，跳转到登录页');
|
||||
wx.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('好友页面认证检查通过，开始加载数据');
|
||||
|
||||
// 获取用户信息 - 确保有完整的用户数据
|
||||
await this.loadUserInfo();
|
||||
|
||||
// 🔥 初始化WebSocket好友功能
|
||||
this.initWebSocketFriendFeatures();
|
||||
|
||||
// 开始加载数据
|
||||
this.loadFriends();
|
||||
this.loadFriendRequestsCount();
|
||||
|
||||
} catch (error) {
|
||||
console.error('认证检查失败:', error);
|
||||
wx.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 加载用户信息
|
||||
async loadUserInfo() {
|
||||
try {
|
||||
// 先从全局数据获取
|
||||
let userInfo = getApp().globalData.userInfo;
|
||||
|
||||
// 如果全局没有完整信息，从API获取
|
||||
if (!userInfo || !userInfo.user || !userInfo.user.customId) {
|
||||
console.log('从API获取用户信息...');
|
||||
const response = await apiClient.getUserInfo();
|
||||
if (response && response.code === 0) {
|
||||
userInfo = {
|
||||
...userInfo,
|
||||
user: response.data
|
||||
};
|
||||
// 更新全局数据
|
||||
getApp().globalData.userInfo = userInfo;
|
||||
}
|
||||
}
|
||||
|
||||
this.setData({
|
||||
userInfo: userInfo
|
||||
});
|
||||
|
||||
console.log('✅ 用户信息已更新:', {
|
||||
hasUser: !!userInfo?.user,
|
||||
customId: userInfo?.user?.customId || 'unknown'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 获取用户信息失败:', error);
|
||||
// 不影响主要功能，继续加载好友列表
|
||||
}
|
||||
},
|
||||
|
||||
// 加载好友列表 - 参考Flutter app的实现
|
||||
async loadFriends() {
|
||||
try {
|
||||
this.setData({ loading: true });
|
||||
|
||||
console.log('🔥 开始加载好友列表...');
|
||||
const response = await friendAPI.getFriendList();
|
||||
|
||||
if (response && response.code === 0) {
|
||||
const friends = response.data || [];
|
||||
console.log(`✅ 获取到 ${friends.length} 个好友:`, friends);
|
||||
|
||||
// 处理好友数据，参考Flutter app的数据结构
|
||||
const processedFriends = this.processFriendsData(friends);
|
||||
|
||||
this.setData({
|
||||
friends: processedFriends,
|
||||
filteredFriends: processedFriends,
|
||||
totalFriendsCount: processedFriends.length,
|
||||
loading: false
|
||||
});
|
||||
|
||||
// 计算在线好友数和其他统计
|
||||
this.calculateFriendStats(processedFriends);
|
||||
|
||||
} else {
|
||||
throw new Error(response?.message || '获取好友列表失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 加载好友列表失败:', error);
|
||||
this.setData({ loading: false });
|
||||
|
||||
// 不要频繁弹出错误提示，影响用户体验
|
||||
if (!error.message?.includes('401')) {
|
||||
wx.showToast({
|
||||
title: '加载好友失败',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 处理好友数据 - 参考Flutter app的数据结构
|
||||
processFriendsData(friends) {
|
||||
return friends.map(friend => {
|
||||
// 适配不同的字段名，参考Flutter app的FriendModel
|
||||
const nickname = friend.nickname || friend.username || friend.name || '未知用户';
|
||||
const customId = friend.customId || friend.customID || friend.id;
|
||||
|
||||
return {
|
||||
id: customId,
|
||||
customId: customId,
|
||||
name: nickname,
|
||||
nickname: nickname,
|
||||
avatar: friend.avatar || '', // 头像URL
|
||||
personalSignature: friend.signature || friend.bio || friend.personalSignature || '',
|
||||
isOnline: friend.isOnline || false,
|
||||
isVip: friend.isVip || false,
|
||||
gender: friend.gender || null, // male, female, null
|
||||
remark: friend.remark || '',
|
||||
relation: friend.relation || '好友',
|
||||
location: friend.location || '',
|
||||
distance: friend.distance || 0,
|
||||
lastActiveTime: friend.lastActiveTime || '',
|
||||
tags: friend.tags || [],
|
||||
hasMutualFriends: friend.mutualFriends > 0,
|
||||
isBirthdayToday: false, // 可以根据实际情况计算
|
||||
isNewFriend: friend.isNewFriend || false
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 计算好友统计数据
|
||||
calculateFriendStats(friends) {
|
||||
const onlineCount = friends.filter(f => f.isOnline).length;
|
||||
const recentActiveCount = friends.filter(f => {
|
||||
if (!f.lastActiveTime) return false;
|
||||
const oneHourAgo = Date.now() - (60 * 60 * 1000);
|
||||
return new Date(f.lastActiveTime).getTime() > oneHourAgo;
|
||||
}).length;
|
||||
const mutualCount = friends.filter(f => f.hasMutualFriends).length;
|
||||
|
||||
this.setData({
|
||||
onlineFriendsCount: onlineCount,
|
||||
recentActiveCount: recentActiveCount,
|
||||
mutualFriendsCount: mutualCount
|
||||
});
|
||||
},
|
||||
|
||||
// 获取好友请求数量 - 参考Flutter app的实现
|
||||
async loadFriendRequestsCount() {
|
||||
try {
|
||||
console.log('🔥 获取好友请求数量...');
|
||||
const response = await friendAPI.getFriendRequestCount();
|
||||
|
||||
if (response && response.code === 0) {
|
||||
const count = response.data?.count || 0;
|
||||
console.log(`✅ 获取到 ${count} 个好友请求`);
|
||||
this.setData({
|
||||
newFriendRequests: count
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 获取好友请求数量失败:', error);
|
||||
// 不影响主要功能，只是数量显示为0
|
||||
this.setData({
|
||||
newFriendRequests: 0
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 搜索输入
|
||||
onSearchInput(e) {
|
||||
const keyword = e.detail.value;
|
||||
this.setData({ searchKeyword: keyword });
|
||||
this.filterFriends(keyword);
|
||||
},
|
||||
|
||||
// 过滤好友
|
||||
filterFriends(keyword) {
|
||||
if (!keyword.trim()) {
|
||||
this.setData({ filteredFriends: this.data.friends });
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = this.data.friends.filter(friend => {
|
||||
const name = friend.remark || friend.nickname;
|
||||
const signature = friend.personalSignature || '';
|
||||
const searchText = keyword.toLowerCase();
|
||||
|
||||
return name.toLowerCase().includes(searchText) ||
|
||||
signature.toLowerCase().includes(searchText);
|
||||
});
|
||||
|
||||
this.setData({ filteredFriends: filtered });
|
||||
},
|
||||
|
||||
// 清除搜索
|
||||
clearSearch() {
|
||||
this.setData({ searchKeyword: '' });
|
||||
this.filterFriends('');
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
async onRefresh() {
|
||||
console.log('下拉刷新好友列表');
|
||||
this.setData({ refreshing: true });
|
||||
|
||||
try {
|
||||
await this.loadFriends();
|
||||
await this.loadFriendRequestsCount();
|
||||
|
||||
wx.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
});
|
||||
} catch (error) {
|
||||
wx.showToast({
|
||||
title: '刷新失败',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
this.setData({ refreshing: false });
|
||||
}
|
||||
},
|
||||
|
||||
// 打开聊天 - WXML中引用的方法
|
||||
// 点击好友时查看个人资料
|
||||
openChat(e) {
|
||||
try {
|
||||
// 安全地获取好友数据
|
||||
const dataset = EventUtils.safeGetDataset(e);
|
||||
const friend = dataset.friend;
|
||||
|
||||
// 验证好友数据
|
||||
if (!EventUtils.validateFriendData(friend)) {
|
||||
console.error('好友数据无效，无法查看个人资料');
|
||||
wx.showToast({
|
||||
title: '好友信息错误',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('查看好友个人资料:', friend.nickname);
|
||||
|
||||
// 跳转到好友个人资料页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/user-profile/user-profile?userId=${friend.customId}&from=friends`
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('查看好友个人资料失败:', error);
|
||||
wx.showToast({
|
||||
title: '查看资料失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 打开好友资料
|
||||
openFriendProfile(e) {
|
||||
const friend = e.currentTarget.dataset.friend;
|
||||
console.log('打开好友资料:', friend.nickname);
|
||||
|
||||
wx.navigateTo({
|
||||
url: `/pages/social/friend-detail/friend-detail?customId=${friend.customId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 发送消息 - 参考Flutter app的实现
|
||||
sendMessage(e) {
|
||||
try {
|
||||
// 安全地阻止事件冒泡
|
||||
EventUtils.safeStopPropagation(e);
|
||||
|
||||
// 安全地获取好友数据
|
||||
const dataset = EventUtils.safeGetDataset(e);
|
||||
const friend = dataset.friend;
|
||||
|
||||
// 验证好友数据
|
||||
if (!EventUtils.validateFriendData(friend)) {
|
||||
console.error('好友数据无效或缺失');
|
||||
wx.showToast({
|
||||
title: '好友信息错误',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('💬 开始与好友聊天:', friend.nickname);
|
||||
|
||||
// 🔥 修复：不传递conversationId，让聊天页面从API获取正确的会话ID
|
||||
wx.navigateTo({
|
||||
url: `/pages/message/chat/chat?targetId=${friend.customId}&name=${encodeURIComponent(friend.nickname)}&chatType=0`
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('发送消息失败:', error);
|
||||
wx.showToast({
|
||||
title: '发送消息失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 视频通话
|
||||
startVideoCall(e) {
|
||||
try {
|
||||
// 安全地阻止事件冒泡
|
||||
EventUtils.safeStopPropagation(e);
|
||||
|
||||
// 安全地获取好友数据
|
||||
const dataset = EventUtils.safeGetDataset(e);
|
||||
const friend = dataset.friend;
|
||||
|
||||
// 验证好友数据
|
||||
if (!EventUtils.validateFriendData(friend)) {
|
||||
console.error('好友数据无效，无法发起视频通话');
|
||||
wx.showToast({
|
||||
title: '好友信息错误',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('📹 发起视频通话:', friend.nickname);
|
||||
|
||||
wx.showToast({
|
||||
title: '视频通话功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('视频通话失败:', error);
|
||||
wx.showToast({
|
||||
title: '视频通话失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 视频通话（WXML中使用的方法名）
|
||||
videoCall(e) {
|
||||
this.startVideoCall(e);
|
||||
},
|
||||
|
||||
// 显示好友菜单
|
||||
showFriendMenu(e) {
|
||||
const friend = e.currentTarget.dataset.friend;
|
||||
console.log('长按好友:', friend.nickname);
|
||||
|
||||
wx.showActionSheet({
|
||||
itemList: ['发送消息', '音视频通话', '查看资料', '设置备注', '删除好友'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
this.sendMessage({ currentTarget: { dataset: { friend } } });
|
||||
break;
|
||||
case 1:
|
||||
this.startVideoCall({ currentTarget: { dataset: { friend } } });
|
||||
break;
|
||||
case 2:
|
||||
this.openFriendProfile({ currentTarget: { dataset: { friend } } });
|
||||
break;
|
||||
case 3:
|
||||
this.setFriendRemark(friend);
|
||||
break;
|
||||
case 4:
|
||||
this.deleteFriend(friend);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 设置好友备注
|
||||
setFriendRemark(friend) {
|
||||
wx.showModal({
|
||||
title: '设置备注',
|
||||
editable: true,
|
||||
placeholderText: '请输入备注名',
|
||||
content: friend.remark || '',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('设置备注:', res.content);
|
||||
// 这里调用API更新备注
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 删除好友
|
||||
deleteFriend(friend) {
|
||||
wx.showModal({
|
||||
title: '删除好友',
|
||||
content: `确定要删除好友"${friend.nickname}"吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('删除好友:', friend.nickname);
|
||||
// 这里调用API删除好友
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 好友请求 - 修改后的名称
|
||||
openNewFriends() {
|
||||
console.log('打开好友请求页面');
|
||||
wx.navigateTo({
|
||||
url: '/pages/social/friend-requests/friend-requests'
|
||||
});
|
||||
},
|
||||
|
||||
// 建群 - 修改后的功能
|
||||
openGroupChats() {
|
||||
console.log('打开建群页面');
|
||||
wx.navigateTo({
|
||||
url: '/pages/social/create-group/create-group'
|
||||
});
|
||||
},
|
||||
|
||||
// 标签管理
|
||||
openTags() {
|
||||
console.log('打开标签管理');
|
||||
wx.showToast({
|
||||
title: '标签功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 添加好友 - 跳转到搜索页面
|
||||
addFriend() {
|
||||
console.log('跳转到搜索用户页面');
|
||||
wx.navigateTo({
|
||||
url: '/pages/social/search/search'
|
||||
});
|
||||
},
|
||||
|
||||
// 显示菜单
|
||||
showMenu() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['好友设置', '隐私设置', '黑名单管理', '好友分组', '数据统计'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
this.openFriendSettings();
|
||||
break;
|
||||
case 1:
|
||||
this.openPrivacySettings();
|
||||
break;
|
||||
case 2:
|
||||
this.openBlacklist();
|
||||
break;
|
||||
case 3:
|
||||
this.openFriendGroups();
|
||||
break;
|
||||
case 4:
|
||||
this.showFriendStats();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 好友设置
|
||||
openFriendSettings() {
|
||||
wx.showToast({
|
||||
title: '好友设置功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 隐私设置
|
||||
openPrivacySettings() {
|
||||
wx.showToast({
|
||||
title: '隐私设置功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 黑名单管理
|
||||
openBlacklist() {
|
||||
wx.showToast({
|
||||
title: '黑名单管理功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 好友分组
|
||||
openFriendGroups() {
|
||||
wx.showToast({
|
||||
title: '好友分组功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 好友统计
|
||||
showFriendStats() {
|
||||
const stats = {
|
||||
total: this.data.totalFriendsCount,
|
||||
online: this.data.onlineFriendsCount,
|
||||
recent: this.data.recentActiveCount,
|
||||
mutual: this.data.mutualFriendsCount
|
||||
};
|
||||
|
||||
wx.showModal({
|
||||
title: '好友统计',
|
||||
content: `总好友数: ${stats.total}\n在线好友: ${stats.online}\n最近活跃: ${stats.recent}\n共同好友: ${stats.mutual}`,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
|
||||
// 扫码添加
|
||||
addByQR() {
|
||||
this.setData({ showAddTip: false });
|
||||
wx.scanCode({
|
||||
success: (res) => {
|
||||
console.log('扫码结果:', res.result);
|
||||
// 处理扫码结果
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 搜索添加
|
||||
addBySearch() {
|
||||
this.setData({ showAddTip: false });
|
||||
wx.navigateTo({
|
||||
url: '/pages/social/search-user/search-user'
|
||||
});
|
||||
},
|
||||
|
||||
// 手机号添加
|
||||
addByPhone() {
|
||||
this.setData({ showAddTip: false });
|
||||
wx.showToast({
|
||||
title: '手机号添加功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 附近的人
|
||||
addByNearby() {
|
||||
this.setData({ showAddTip: false });
|
||||
wx.navigateTo({
|
||||
url: '/pages/map/map'
|
||||
});
|
||||
},
|
||||
|
||||
// 搜索好友
|
||||
searchFriends() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/social/search/search'
|
||||
});
|
||||
},
|
||||
|
||||
// 扫描二维码
|
||||
scanQRCode() {
|
||||
wx.scanCode({
|
||||
success: (res) => {
|
||||
console.log('扫码结果:', res.result);
|
||||
// 处理扫码结果
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 邀请好友
|
||||
inviteFriends() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['微信邀请', '短信邀请', '复制邀请链接'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
wx.showToast({ title: '微信邀请功能开发中', icon: 'none' });
|
||||
break;
|
||||
case 1:
|
||||
wx.showToast({ title: '短信邀请功能开发中', icon: 'none' });
|
||||
break;
|
||||
case 2:
|
||||
wx.setClipboardData({
|
||||
data: 'https://findme.app/invite',
|
||||
success: () => {
|
||||
wx.showToast({ title: '邀请链接已复制', icon: 'success' });
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 🔥 ===== 新增的好友功能方法 =====
|
||||
|
||||
// 初始化WebSocket好友功能
|
||||
initWebSocketFriendFeatures() {
|
||||
try {
|
||||
// 注册消息处理器 - 使用V2版本的统一API
|
||||
wsManager.on('message', (message) => {
|
||||
console.log('🔥 好友页面收到WebSocket消息:', message);
|
||||
|
||||
// 根据消息类型分发处理
|
||||
switch (message.type) {
|
||||
case 'friend_request':
|
||||
this.handleNewFriendRequest(message.data);
|
||||
break;
|
||||
case 'friend_accepted':
|
||||
this.handleFriendAccepted(message.data);
|
||||
break;
|
||||
case 'friend_rejected':
|
||||
this.handleFriendRejected(message.data);
|
||||
break;
|
||||
case 'notification':
|
||||
this.handleFriendNotification(message.data);
|
||||
break;
|
||||
default:
|
||||
console.log('好友页面未处理的消息类型:', message.type);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('初始化WebSocket好友功能失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理新的好友请求
|
||||
handleNewFriendRequest(data) {
|
||||
try {
|
||||
// 更新好友请求数量
|
||||
const currentCount = this.data.newFriendRequests;
|
||||
this.setData({
|
||||
newFriendRequests: currentCount + 1
|
||||
});
|
||||
|
||||
// 显示通知
|
||||
wx.showToast({
|
||||
title: `${data.senderName} 请求添加您为好友`,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('处理新好友请求失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理好友请求被接受
|
||||
handleFriendAccepted(data) {
|
||||
try {
|
||||
// 刷新好友列表
|
||||
this.loadFriends();
|
||||
|
||||
// 显示通知
|
||||
wx.showToast({
|
||||
title: `${data.friendName} 接受了您的好友请求`,
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('处理好友请求被接受失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理好友请求被拒绝
|
||||
handleFriendRejected(data) {
|
||||
try {
|
||||
// 显示通知
|
||||
wx.showToast({
|
||||
title: '好友请求被拒绝',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('处理好友请求被拒绝失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理好友相关通知
|
||||
handleFriendNotification(data) {
|
||||
try {
|
||||
switch (data.type) {
|
||||
case 'new_friend_request':
|
||||
this.handleNewFriendRequest(data);
|
||||
break;
|
||||
case 'friend_accepted':
|
||||
this.handleFriendAccepted(data);
|
||||
break;
|
||||
case 'friend_rejected':
|
||||
this.handleFriendRejected(data);
|
||||
break;
|
||||
default:
|
||||
console.log('未知好友通知类型:', data.type);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('处理好友通知失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 🔥 ===== 好友操作增强 =====
|
||||
|
||||
// 删除好友
|
||||
async deleteFriend(friendId, friendName) {
|
||||
try {
|
||||
const result = await new Promise((resolve) => {
|
||||
wx.showModal({
|
||||
title: '删除好友',
|
||||
content: `确定要删除好友 ${friendName} 吗？`,
|
||||
success: resolve
|
||||
});
|
||||
});
|
||||
|
||||
if (!result.confirm) return;
|
||||
|
||||
await friendAPI.deleteFriend(friendId);
|
||||
|
||||
// 从本地数据中移除
|
||||
const friends = this.data.friends.filter(friend => friend.id !== friendId);
|
||||
this.setData({
|
||||
friends: friends,
|
||||
filteredFriends: friends,
|
||||
totalFriendsCount: friends.length
|
||||
});
|
||||
|
||||
// 重新计算统计数据
|
||||
this.calculateFriendStats(friends);
|
||||
|
||||
wx.showToast({
|
||||
title: '已删除好友',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('删除好友失败:', error);
|
||||
wx.showToast({
|
||||
title: '删除失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 更新好友备注
|
||||
async updateFriendRemark(friendId, newRemark) {
|
||||
try {
|
||||
await friendAPI.updateFriendRelation(friendId, {
|
||||
remark: newRemark
|
||||
});
|
||||
|
||||
// 更新本地数据
|
||||
const friends = this.data.friends.map(friend => {
|
||||
if (friend.id === friendId) {
|
||||
return { ...friend, remark: newRemark };
|
||||
}
|
||||
return friend;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
friends: friends,
|
||||
filteredFriends: friends
|
||||
});
|
||||
|
||||
wx.showToast({
|
||||
title: '备注已更新',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('更新好友备注失败:', error);
|
||||
wx.showToast({
|
||||
title: '更新失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 设置好友标签
|
||||
async setFriendLabel(friendId, label) {
|
||||
try {
|
||||
await friendAPI.updateFriendRelation(friendId, {
|
||||
relation: label
|
||||
});
|
||||
|
||||
// 更新本地数据
|
||||
const friends = this.data.friends.map(friend => {
|
||||
if (friend.id === friendId) {
|
||||
return { ...friend, relation: label };
|
||||
}
|
||||
return friend;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
friends: friends,
|
||||
filteredFriends: friends
|
||||
});
|
||||
|
||||
wx.showToast({
|
||||
title: '标签已设置',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('设置好友标签失败:', error);
|
||||
wx.showToast({
|
||||
title: '设置失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
7
pages/social/friends/friends.json
Normal file
7
pages/social/friends/friends.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"navigationBarTitleText": "好友",
|
||||
"navigationBarBackgroundColor": "#667eea",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#f8f9fa",
|
||||
"disableScroll": true
|
||||
}
|
||||
125
pages/social/friends/friends.wxml
Normal file
125
pages/social/friends/friends.wxml
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!-- 好友页面 - 简洁现代设计 -->
|
||||
<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>
|
||||
431
pages/social/friends/friends.wxss
Normal file
431
pages/social/friends/friends.wxss
Normal file
|
|
@ -0,0 +1,431 @@
|
|||
/* 好友页面 - 简洁现代设计 */
|
||||
|
||||
.friends-container {
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.nav-subtitle {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-btn:active {
|
||||
background-color: #e0e0e0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content-area {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-section {
|
||||
padding: 12px 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 20px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 功能入口 */
|
||||
.function-section {
|
||||
background-color: #fff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.function-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.function-item:active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.function-icon.new-friends {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
.function-icon.groups {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
background-color: #ff4444;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.function-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.function-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.function-desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.function-arrow {
|
||||
font-size: 18px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 好友列表 */
|
||||
.friends-section {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 12px 16px 8px 16px;
|
||||
background-color: #f8f8f8;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.friend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.friend-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.friend-item:active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
.friend-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
margin-right: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
background-color: #ccc;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.online-dot.online {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
/* 好友信息 */
|
||||
.friend-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.friend-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.friend-status {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.friend-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
background-color: #e0e0e0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.empty-btn {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 20px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.empty-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #f0f0f0;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 375px) {
|
||||
.nav-content {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.function-item,
|
||||
.friend-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
291
pages/social/search/search.js
Normal file
291
pages/social/search/search.js
Normal file
|
|
@ -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`
|
||||
});
|
||||
}
|
||||
});
|
||||
168
pages/social/search/search.wxml
Normal file
168
pages/social/search/search.wxml
Normal file
|
|
@ -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>
|
||||
470
pages/social/search/search.wxss
Normal file
470
pages/social/search/search.wxss
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue