Raju/miniprogramme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial Commit

Browse source
This commit is contained in:
Rajuahamedkst 2025-09-12 16:08:17 +08:00
commit 1d71a02738
237 changed files with 64293 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

253
pages/social/friend-detail/friend-detail.js Normal file
View 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
View file

@ -0,0 +1,4 @@
{
"navigationStyle": "custom",
"backgroundColor": "#f5f5f5"
}

178
pages/social/friend-detail/friend-detail.wxml Normal file
View 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
View 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;
}