Initial Commit
This commit is contained in:
commit
1d71a02738
237 changed files with 64293 additions and 0 deletions
966
pages/group/group-info/group-info.js
Normal file
966
pages/group/group-info/group-info.js
Normal file
|
|
@ -0,0 +1,966 @@
|
|||
// 👥 群聊信息页面逻辑
|
||||
const app = getApp();
|
||||
const groupChatManager = require('../../../utils/group-chat-manager.js');
|
||||
const apiClient = require('../../../utils/api-client.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 系统信息
|
||||
statusBarHeight: 44,
|
||||
navBarHeight: 88,
|
||||
|
||||
// 群信息
|
||||
groupId: '',
|
||||
groupInfo: {},
|
||||
memberCount: 0,
|
||||
displayMembers: [],
|
||||
|
||||
// 用户权限
|
||||
currentUserId: '',
|
||||
userRole: 'member',
|
||||
isOwner: false,
|
||||
isOwnerOrAdmin: false,
|
||||
canInviteMembers: false,
|
||||
|
||||
// 群设置
|
||||
groupSettings: {
|
||||
muteNotifications: false,
|
||||
pinned: false,
|
||||
saveToContacts: true
|
||||
},
|
||||
|
||||
// 弹窗状态
|
||||
showQRCodeModal: false,
|
||||
showEditNameModal: false,
|
||||
showEditDescModal: false,
|
||||
|
||||
// 编辑状态
|
||||
editGroupName: '',
|
||||
editGroupDescription: '',
|
||||
|
||||
// 二维码
|
||||
qrCodeSize: 400,
|
||||
|
||||
// 加载状态
|
||||
loading: false,
|
||||
loadingText: '加载中...'
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
console.log('👥 群聊信息页面加载:', options);
|
||||
|
||||
// 获取系统信息
|
||||
this.getSystemInfo();
|
||||
|
||||
// 获取群ID
|
||||
if (options.groupId) {
|
||||
this.setData({
|
||||
groupId: options.groupId
|
||||
});
|
||||
|
||||
// 加载群信息
|
||||
this.loadGroupInfo();
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '群聊ID不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
console.log('👥 群聊信息页面显示');
|
||||
|
||||
// 刷新群信息
|
||||
if (this.data.groupId) {
|
||||
this.loadGroupInfo();
|
||||
}
|
||||
},
|
||||
|
||||
// 获取系统信息
|
||||
getSystemInfo() {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
this.setData({
|
||||
statusBarHeight: systemInfo.statusBarHeight || 44,
|
||||
navBarHeight: 88,
|
||||
currentUserId: wx.getStorageSync('userId')
|
||||
});
|
||||
},
|
||||
|
||||
// 加载群信息
|
||||
async loadGroupInfo() {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '加载群信息中...'
|
||||
});
|
||||
|
||||
// 获取群基本信息
|
||||
const groupResponse = await apiClient.request({
|
||||
url: `/api/v1/groups/${this.data.groupId}`,
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
if (!groupResponse.success) {
|
||||
throw new Error(groupResponse.error || '获取群信息失败');
|
||||
}
|
||||
|
||||
const groupInfo = groupResponse.data;
|
||||
|
||||
// 获取群成员列表
|
||||
const membersResult = await groupChatManager.getGroupMembers(this.data.groupId, false);
|
||||
|
||||
if (!membersResult.success) {
|
||||
throw new Error(membersResult.error || '获取群成员失败');
|
||||
}
|
||||
|
||||
const members = membersResult.data;
|
||||
|
||||
// 获取当前用户角色
|
||||
const currentUser = members.find(member => member.userId === this.data.currentUserId);
|
||||
const userRole = currentUser ? currentUser.role : 'member';
|
||||
|
||||
// 计算权限
|
||||
const isOwner = userRole === 'owner';
|
||||
const isOwnerOrAdmin = userRole === 'owner' || userRole === 'admin';
|
||||
const canInviteMembers = isOwnerOrAdmin || groupInfo.settings?.allowMemberInvite;
|
||||
|
||||
// 处理显示的成员（最多显示8个）
|
||||
const displayMembers = members.slice(0, 8);
|
||||
|
||||
// 处理公告时间
|
||||
let announcementTimeText = '';
|
||||
if (groupInfo.announcementTime) {
|
||||
const date = new Date(groupInfo.announcementTime);
|
||||
announcementTimeText = this.formatDateTime(date);
|
||||
}
|
||||
|
||||
this.setData({
|
||||
groupInfo: groupInfo,
|
||||
memberCount: members.length,
|
||||
displayMembers: displayMembers,
|
||||
userRole: userRole,
|
||||
isOwner: isOwner,
|
||||
isOwnerOrAdmin: isOwnerOrAdmin,
|
||||
canInviteMembers: canInviteMembers,
|
||||
announcementTimeText: announcementTimeText,
|
||||
loading: false
|
||||
});
|
||||
|
||||
// 加载群设置
|
||||
this.loadGroupSettings();
|
||||
|
||||
console.log('✅ 群信息加载完成');
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 加载群信息失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '加载群信息失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 加载群设置
|
||||
async loadGroupSettings() {
|
||||
try {
|
||||
// 从本地存储获取群设置
|
||||
const settings = wx.getStorageSync(`groupSettings_${this.data.groupId}`) || {};
|
||||
|
||||
this.setData({
|
||||
groupSettings: {
|
||||
muteNotifications: settings.muteNotifications || false,
|
||||
pinned: settings.pinned || false,
|
||||
saveToContacts: settings.saveToContacts !== false
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 加载群设置失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 👥 ===== 群信息编辑 =====
|
||||
|
||||
// 编辑群头像
|
||||
editGroupAvatar() {
|
||||
if (!this.data.isOwnerOrAdmin) {
|
||||
wx.showToast({
|
||||
title: '没有修改权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('👥 编辑群头像');
|
||||
|
||||
wx.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
this.updateGroupAvatar(tempFilePath);
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 选择头像失败:', error);
|
||||
wx.showToast({
|
||||
title: '选择头像失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 更新群头像
|
||||
async updateGroupAvatar(avatarPath) {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '更新头像中...'
|
||||
});
|
||||
|
||||
// 上传头像
|
||||
const uploadResult = await this.uploadImage(avatarPath);
|
||||
|
||||
if (!uploadResult.success) {
|
||||
throw new Error('头像上传失败');
|
||||
}
|
||||
|
||||
// 更新群信息
|
||||
const result = await groupChatManager.updateGroupInfo(this.data.groupId, {
|
||||
avatar: uploadResult.url
|
||||
});
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
// 更新本地数据
|
||||
this.setData({
|
||||
'groupInfo.avatar': uploadResult.url
|
||||
});
|
||||
|
||||
wx.showToast({
|
||||
title: '头像更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.error || '头像更新失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 更新群头像失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '头像更新失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑群名称
|
||||
editGroupName() {
|
||||
if (!this.data.isOwnerOrAdmin) {
|
||||
wx.showToast({
|
||||
title: '没有修改权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('👥 编辑群名称');
|
||||
|
||||
this.setData({
|
||||
editGroupName: this.data.groupInfo.name || '',
|
||||
showEditNameModal: true
|
||||
});
|
||||
},
|
||||
|
||||
// 群名称输入
|
||||
onEditGroupNameInput(e) {
|
||||
this.setData({
|
||||
editGroupName: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 确认修改群名称
|
||||
async confirmEditGroupName() {
|
||||
const newName = this.data.editGroupName.trim();
|
||||
|
||||
if (!newName) {
|
||||
wx.showToast({
|
||||
title: '群名称不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (newName === this.data.groupInfo.name) {
|
||||
this.closeEditNameModal();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '更新群名称中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.updateGroupInfo(this.data.groupId, {
|
||||
name: newName
|
||||
});
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
// 更新本地数据
|
||||
this.setData({
|
||||
'groupInfo.name': newName
|
||||
});
|
||||
|
||||
this.closeEditNameModal();
|
||||
|
||||
wx.showToast({
|
||||
title: '群名称更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.error || '群名称更新失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 更新群名称失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '群名称更新失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑群名称弹窗
|
||||
closeEditNameModal() {
|
||||
this.setData({
|
||||
showEditNameModal: false,
|
||||
editGroupName: ''
|
||||
});
|
||||
},
|
||||
|
||||
// 编辑群描述
|
||||
editGroupDescription() {
|
||||
if (!this.data.isOwnerOrAdmin) {
|
||||
wx.showToast({
|
||||
title: '没有修改权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('👥 编辑群描述');
|
||||
|
||||
this.setData({
|
||||
editGroupDescription: this.data.groupInfo.description || '',
|
||||
showEditDescModal: true
|
||||
});
|
||||
},
|
||||
|
||||
// 群描述输入
|
||||
onEditGroupDescInput(e) {
|
||||
this.setData({
|
||||
editGroupDescription: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 确认修改群描述
|
||||
async confirmEditGroupDescription() {
|
||||
const newDescription = this.data.editGroupDescription.trim();
|
||||
|
||||
if (newDescription === this.data.groupInfo.description) {
|
||||
this.closeEditDescModal();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '更新群描述中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.updateGroupInfo(this.data.groupId, {
|
||||
description: newDescription
|
||||
});
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
// 更新本地数据
|
||||
this.setData({
|
||||
'groupInfo.description': newDescription
|
||||
});
|
||||
|
||||
this.closeEditDescModal();
|
||||
|
||||
wx.showToast({
|
||||
title: '群描述更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.error || '群描述更新失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 更新群描述失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '群描述更新失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑群描述弹窗
|
||||
closeEditDescModal() {
|
||||
this.setData({
|
||||
showEditDescModal: false,
|
||||
editGroupDescription: ''
|
||||
});
|
||||
},
|
||||
|
||||
// 编辑群公告
|
||||
editGroupAnnouncement() {
|
||||
if (!this.data.isOwnerOrAdmin) {
|
||||
wx.showToast({
|
||||
title: '没有发布权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('👥 编辑群公告');
|
||||
|
||||
// 跳转到群公告编辑页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/group/group-announcement/group-announcement?groupId=${this.data.groupId}&mode=edit`
|
||||
});
|
||||
},
|
||||
|
||||
// 🔧 ===== 工具方法 =====
|
||||
|
||||
// 格式化日期时间
|
||||
formatDateTime(date) {
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 60000) { // 1分钟内
|
||||
return '刚刚';
|
||||
} else if (diff < 3600000) { // 1小时内
|
||||
return `${Math.floor(diff / 60000)}分钟前`;
|
||||
} else if (diff < 86400000) { // 1天内
|
||||
return `${Math.floor(diff / 3600000)}小时前`;
|
||||
} else if (diff < 604800000) { // 1周内
|
||||
return `${Math.floor(diff / 86400000)}天前`;
|
||||
} else {
|
||||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
||||
}
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
async uploadImage(filePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.uploadFile({
|
||||
url: `${app.globalData.apiBaseUrl}/api/v1/upload/image`,
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authorization': `Bearer ${wx.getStorageSync('token')}`
|
||||
},
|
||||
success: (res) => {
|
||||
try {
|
||||
const data = JSON.parse(res.data);
|
||||
if (data.success) {
|
||||
resolve({ success: true, url: data.data.url });
|
||||
} else {
|
||||
reject(new Error(data.error || '上传失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
reject(new Error('上传响应解析失败'));
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 👤 ===== 成员管理 =====
|
||||
|
||||
// 邀请成员
|
||||
inviteMembers() {
|
||||
if (!this.data.canInviteMembers) {
|
||||
wx.showToast({
|
||||
title: '没有邀请权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('👤 邀请成员');
|
||||
|
||||
// 跳转到邀请成员页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/group/invite-members/invite-members?groupId=${this.data.groupId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 查看所有成员
|
||||
viewAllMembers() {
|
||||
console.log('👤 查看所有成员');
|
||||
|
||||
// 跳转到群成员列表页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/group/group-members/group-members?groupId=${this.data.groupId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 查看成员资料
|
||||
viewMemberProfile(e) {
|
||||
const userId = e.currentTarget.dataset.userId;
|
||||
console.log('👤 查看成员资料:', userId);
|
||||
|
||||
if (userId === this.data.currentUserId) {
|
||||
// 查看自己的资料
|
||||
wx.navigateTo({
|
||||
url: '/pages/profile/profile'
|
||||
});
|
||||
} else {
|
||||
// 查看其他成员资料
|
||||
wx.navigateTo({
|
||||
url: `/pages/social/user-profile/user-profile?userId=${userId}`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 📋 ===== 群功能 =====
|
||||
|
||||
// 搜索聊天记录
|
||||
searchChatHistory() {
|
||||
console.log('🔍 搜索聊天记录');
|
||||
|
||||
// 跳转到搜索页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/search/global-search?conversationId=${this.data.groupId}&conversationName=${encodeURIComponent(this.data.groupInfo.name || '群聊')}`
|
||||
});
|
||||
},
|
||||
|
||||
// 查看群文件
|
||||
viewGroupFiles() {
|
||||
console.log('📁 查看群文件');
|
||||
|
||||
wx.showToast({
|
||||
title: '群文件功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 查看群相册
|
||||
viewGroupPhotos() {
|
||||
console.log('🖼️ 查看群相册');
|
||||
|
||||
wx.showToast({
|
||||
title: '群相册功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 显示群二维码
|
||||
showGroupQRCode() {
|
||||
console.log('📱 显示群二维码');
|
||||
|
||||
this.setData({
|
||||
showQRCodeModal: true
|
||||
});
|
||||
|
||||
// 生成二维码
|
||||
this.generateGroupQRCode();
|
||||
},
|
||||
|
||||
// 生成群二维码
|
||||
generateGroupQRCode() {
|
||||
try {
|
||||
// 构建二维码数据
|
||||
const qrData = JSON.stringify({
|
||||
type: 'group',
|
||||
groupId: this.data.groupId,
|
||||
groupName: this.data.groupInfo.name
|
||||
});
|
||||
|
||||
// 这里应该使用二维码生成库，暂时用canvas模拟
|
||||
const ctx = wx.createCanvasContext('groupQRCode', this);
|
||||
|
||||
// 绘制二维码背景
|
||||
ctx.setFillStyle('#FFFFFF');
|
||||
ctx.fillRect(0, 0, this.data.qrCodeSize, this.data.qrCodeSize);
|
||||
|
||||
// 绘制二维码内容（这里简化处理）
|
||||
ctx.setFillStyle('#000000');
|
||||
ctx.setTextAlign('center');
|
||||
ctx.setFontSize(16);
|
||||
ctx.fillText('群聊二维码', this.data.qrCodeSize / 2, this.data.qrCodeSize / 2);
|
||||
ctx.fillText(this.data.groupInfo.name, this.data.qrCodeSize / 2, this.data.qrCodeSize / 2 + 30);
|
||||
|
||||
ctx.draw();
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 生成二维码失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭二维码弹窗
|
||||
closeQRCodeModal() {
|
||||
this.setData({
|
||||
showQRCodeModal: false
|
||||
});
|
||||
},
|
||||
|
||||
// 保存二维码到相册
|
||||
saveQRCodeToAlbum() {
|
||||
console.log('💾 保存二维码到相册');
|
||||
|
||||
wx.canvasToTempFilePath({
|
||||
canvasId: 'groupQRCode',
|
||||
success: (res) => {
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 保存失败:', error);
|
||||
wx.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 生成图片失败:', error);
|
||||
wx.showToast({
|
||||
title: '生成图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
|
||||
// 分享二维码
|
||||
shareQRCode() {
|
||||
console.log('📤 分享二维码');
|
||||
|
||||
wx.canvasToTempFilePath({
|
||||
canvasId: 'groupQRCode',
|
||||
success: (res) => {
|
||||
wx.showShareImageMenu({
|
||||
path: res.tempFilePath,
|
||||
success: () => {
|
||||
console.log('✅ 分享成功');
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 分享失败:', error);
|
||||
wx.showToast({
|
||||
title: '分享失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 生成图片失败:', error);
|
||||
wx.showToast({
|
||||
title: '生成图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
|
||||
// ⚙️ ===== 群设置 =====
|
||||
|
||||
// 消息免打扰设置变化
|
||||
onMuteNotificationsChange(e) {
|
||||
const checked = e.detail.value;
|
||||
console.log('⚙️ 消息免打扰设置变化:', checked);
|
||||
|
||||
this.setData({
|
||||
'groupSettings.muteNotifications': checked
|
||||
});
|
||||
|
||||
this.saveGroupSettings();
|
||||
},
|
||||
|
||||
// 置顶聊天设置变化
|
||||
onPinnedChange(e) {
|
||||
const checked = e.detail.value;
|
||||
console.log('⚙️ 置顶聊天设置变化:', checked);
|
||||
|
||||
this.setData({
|
||||
'groupSettings.pinned': checked
|
||||
});
|
||||
|
||||
this.saveGroupSettings();
|
||||
},
|
||||
|
||||
// 保存到通讯录设置变化
|
||||
onSaveToContactsChange(e) {
|
||||
const checked = e.detail.value;
|
||||
console.log('⚙️ 保存到通讯录设置变化:', checked);
|
||||
|
||||
this.setData({
|
||||
'groupSettings.saveToContacts': checked
|
||||
});
|
||||
|
||||
this.saveGroupSettings();
|
||||
},
|
||||
|
||||
// 保存群设置
|
||||
saveGroupSettings() {
|
||||
try {
|
||||
wx.setStorageSync(`groupSettings_${this.data.groupId}`, this.data.groupSettings);
|
||||
console.log('✅ 群设置保存成功');
|
||||
} catch (error) {
|
||||
console.error('❌ 保存群设置失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 打开群设置
|
||||
openGroupSettings() {
|
||||
console.log('⚙️ 打开群设置');
|
||||
|
||||
// 跳转到群设置页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/group/group-settings/group-settings?groupId=${this.data.groupId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 📱 ===== 操作功能 =====
|
||||
|
||||
// 发消息
|
||||
sendMessage() {
|
||||
console.log('💬 发消息');
|
||||
|
||||
// 跳转到群聊页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/message/chat/chat?chatType=1&targetId=${this.data.groupId}&chatName=${encodeURIComponent(this.data.groupInfo.name || '群聊')}`
|
||||
});
|
||||
},
|
||||
|
||||
// 显示退出群聊选项
|
||||
showLeaveGroupOptions() {
|
||||
console.log('🚪 显示退出群聊选项');
|
||||
|
||||
if (this.data.isOwner) {
|
||||
// 群主显示解散群聊选项
|
||||
wx.showModal({
|
||||
title: '解散群聊',
|
||||
content: '解散后，所有成员将被移出群聊，且聊天记录将被清空。确定要解散群聊吗？',
|
||||
confirmText: '解散',
|
||||
confirmColor: '#FF3B30',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.dissolveGroup();
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 普通成员显示退出群聊选项
|
||||
wx.showModal({
|
||||
title: '退出群聊',
|
||||
content: '退出后，将不再接收此群聊消息。确定要退出群聊吗？',
|
||||
confirmText: '退出',
|
||||
confirmColor: '#FF3B30',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.leaveGroup();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 解散群聊
|
||||
async dissolveGroup() {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '解散群聊中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.dissolveGroup(this.data.groupId);
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({
|
||||
title: '群聊已解散',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 返回消息列表
|
||||
setTimeout(() => {
|
||||
wx.navigateBack({
|
||||
delta: 2
|
||||
});
|
||||
}, 1500);
|
||||
} else {
|
||||
throw new Error(result.error || '解散群聊失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 解散群聊失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '解散群聊失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 退出群聊
|
||||
async leaveGroup() {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '退出群聊中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.leaveGroup(this.data.groupId);
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({
|
||||
title: '已退出群聊',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 返回消息列表
|
||||
setTimeout(() => {
|
||||
wx.navigateBack({
|
||||
delta: 2
|
||||
});
|
||||
}, 1500);
|
||||
} else {
|
||||
throw new Error(result.error || '退出群聊失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 退出群聊失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '退出群聊失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 显示更多菜单
|
||||
showMoreMenu() {
|
||||
console.log('📋 显示更多菜单');
|
||||
|
||||
const itemList = [];
|
||||
|
||||
if (this.data.isOwnerOrAdmin) {
|
||||
itemList.push('群管理');
|
||||
}
|
||||
|
||||
itemList.push('举报群聊');
|
||||
|
||||
wx.showActionSheet({
|
||||
itemList: itemList,
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
if (this.data.isOwnerOrAdmin) {
|
||||
this.openGroupManagement();
|
||||
} else {
|
||||
this.reportGroup();
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
this.reportGroup();
|
||||
break;
|
||||
default:
|
||||
console.log('选择菜单项:', res.tapIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 打开群管理
|
||||
openGroupManagement() {
|
||||
console.log('👥 打开群管理');
|
||||
|
||||
// 跳转到群管理页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/group/group-management/group-management?groupId=${this.data.groupId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 举报群聊
|
||||
reportGroup() {
|
||||
console.log('⚠️ 举报群聊');
|
||||
|
||||
wx.showToast({
|
||||
title: '举报功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 阻止事件冒泡
|
||||
stopPropagation() {
|
||||
// 阻止点击事件冒泡
|
||||
},
|
||||
|
||||
// 🧭 ===== 页面导航 =====
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
wx.navigateBack();
|
||||
}
|
||||
});
|
||||
7
pages/group/group-info/group-info.json
Normal file
7
pages/group/group-info/group-info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#F2F2F7",
|
||||
"backgroundTextStyle": "dark",
|
||||
"enablePullDownRefresh": false,
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
317
pages/group/group-info/group-info.wxml
Normal file
317
pages/group/group-info/group-info.wxml
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
<!-- 👥 群聊信息页面 -->
|
||||
<view class="group-info-container">
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="navbar-content" style="height: {{navBarHeight}}px;">
|
||||
<view class="navbar-left" bindtap="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
|
||||
<view class="navbar-title">
|
||||
<text class="title-text">群聊信息</text>
|
||||
</view>
|
||||
|
||||
<view class="navbar-right" bindtap="showMoreMenu">
|
||||
<text class="more-icon">⋯</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<scroll-view class="page-content" scroll-y="true">
|
||||
<!-- 群基本信息 -->
|
||||
<view class="group-basic-info">
|
||||
<!-- 群头像和名称 -->
|
||||
<view class="group-header">
|
||||
<view class="group-avatar-container">
|
||||
<image class="group-avatar"
|
||||
src="{{groupInfo.avatar || '/images/default-group-avatar.png'}}"
|
||||
mode="aspectFill" />
|
||||
<view wx:if="{{isOwnerOrAdmin}}"
|
||||
class="edit-avatar-btn"
|
||||
bindtap="editGroupAvatar">
|
||||
<text class="edit-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="group-name-section">
|
||||
<view class="group-name-container" bindtap="editGroupName">
|
||||
<text class="group-name">{{groupInfo.name}}</text>
|
||||
<text wx:if="{{isOwnerOrAdmin}}" class="edit-name-icon">✏️</text>
|
||||
</view>
|
||||
<text class="group-id">群聊ID: {{groupInfo.groupId}}</text>
|
||||
<text class="member-count">{{memberCount}} 人</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群描述 -->
|
||||
<view class="group-description" wx:if="{{groupInfo.description || isOwnerOrAdmin}}">
|
||||
<view class="desc-header">
|
||||
<text class="desc-title">群描述</text>
|
||||
<text wx:if="{{isOwnerOrAdmin}}"
|
||||
class="edit-desc-btn"
|
||||
bindtap="editGroupDescription">编辑</text>
|
||||
</view>
|
||||
<text class="desc-content">{{groupInfo.description || '暂无群描述'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 群公告 -->
|
||||
<view class="group-announcement" wx:if="{{groupInfo.announcement || isOwnerOrAdmin}}">
|
||||
<view class="announcement-header">
|
||||
<text class="announcement-title">群公告</text>
|
||||
<text wx:if="{{isOwnerOrAdmin}}"
|
||||
class="edit-announcement-btn"
|
||||
bindtap="editGroupAnnouncement">{{groupInfo.announcement ? '编辑' : '发布'}}</text>
|
||||
</view>
|
||||
<text class="announcement-content">{{groupInfo.announcement || '暂无群公告'}}</text>
|
||||
<text wx:if="{{groupInfo.announcementTime}}"
|
||||
class="announcement-time">{{announcementTimeText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群成员 -->
|
||||
<view class="group-members-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">群成员 ({{memberCount}})</text>
|
||||
<view class="header-actions">
|
||||
<text wx:if="{{canInviteMembers}}"
|
||||
class="action-btn"
|
||||
bindtap="inviteMembers">邀请</text>
|
||||
<text class="action-btn" bindtap="viewAllMembers">查看全部</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 成员网格 -->
|
||||
<view class="members-grid">
|
||||
<!-- 邀请按钮 -->
|
||||
<view wx:if="{{canInviteMembers}}"
|
||||
class="member-item invite-item"
|
||||
bindtap="inviteMembers">
|
||||
<view class="member-avatar invite-avatar">
|
||||
<text class="invite-icon">+</text>
|
||||
</view>
|
||||
<text class="member-name">邀请</text>
|
||||
</view>
|
||||
|
||||
<!-- 成员列表 -->
|
||||
<view class="member-item"
|
||||
wx:for="{{displayMembers}}"
|
||||
wx:key="userId"
|
||||
bindtap="viewMemberProfile"
|
||||
data-user-id="{{item.userId}}">
|
||||
<view class="member-avatar-container">
|
||||
<image class="member-avatar"
|
||||
src="{{item.avatar || '/images/default-avatar.png'}}"
|
||||
mode="aspectFill" />
|
||||
<view wx:if="{{item.role === 'owner'}}" class="role-badge owner">
|
||||
<text class="role-text">群主</text>
|
||||
</view>
|
||||
<view wx:elif="{{item.role === 'admin'}}" class="role-badge admin">
|
||||
<text class="role-text">管理员</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="member-name">{{item.nickname || item.username}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群功能 -->
|
||||
<view class="group-functions-section">
|
||||
<view class="function-items">
|
||||
<!-- 查找聊天记录 -->
|
||||
<view class="function-item" bindtap="searchChatHistory">
|
||||
<view class="function-icon">🔍</view>
|
||||
<text class="function-title">查找聊天记录</text>
|
||||
<text class="function-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<!-- 群聊文件 -->
|
||||
<view class="function-item" bindtap="viewGroupFiles">
|
||||
<view class="function-icon">📁</view>
|
||||
<text class="function-title">群聊文件</text>
|
||||
<text class="function-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<!-- 群聊相册 -->
|
||||
<view class="function-item" bindtap="viewGroupPhotos">
|
||||
<view class="function-icon">🖼️</view>
|
||||
<text class="function-title">群聊相册</text>
|
||||
<text class="function-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<!-- 群二维码 -->
|
||||
<view class="function-item" bindtap="showGroupQRCode">
|
||||
<view class="function-icon">📱</view>
|
||||
<text class="function-title">群二维码</text>
|
||||
<text class="function-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群设置 -->
|
||||
<view class="group-settings-section">
|
||||
<view class="setting-items">
|
||||
<!-- 消息免打扰 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-info">
|
||||
<text class="item-title">消息免打扰</text>
|
||||
</view>
|
||||
<switch class="setting-switch"
|
||||
checked="{{groupSettings.muteNotifications}}"
|
||||
bindchange="onMuteNotificationsChange" />
|
||||
</view>
|
||||
|
||||
<!-- 置顶聊天 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-info">
|
||||
<text class="item-title">置顶聊天</text>
|
||||
</view>
|
||||
<switch class="setting-switch"
|
||||
checked="{{groupSettings.pinned}}"
|
||||
bindchange="onPinnedChange" />
|
||||
</view>
|
||||
|
||||
<!-- 保存到通讯录 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-info">
|
||||
<text class="item-title">保存到通讯录</text>
|
||||
</view>
|
||||
<switch class="setting-switch"
|
||||
checked="{{groupSettings.saveToContacts}}"
|
||||
bindchange="onSaveToContactsChange" />
|
||||
</view>
|
||||
|
||||
<!-- 群聊设置 -->
|
||||
<view wx:if="{{isOwnerOrAdmin}}"
|
||||
class="setting-item"
|
||||
bindtap="openGroupSettings">
|
||||
<view class="item-info">
|
||||
<text class="item-title">群聊设置</text>
|
||||
</view>
|
||||
<text class="item-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<!-- 发消息按钮 -->
|
||||
<view class="action-btn primary" bindtap="sendMessage">
|
||||
<text class="btn-text">发消息</text>
|
||||
</view>
|
||||
|
||||
<!-- 退出/解散群聊 -->
|
||||
<view class="action-btn danger" bindtap="showLeaveGroupOptions">
|
||||
<text class="btn-text">{{isOwner ? '解散群聊' : '退出群聊'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 群二维码弹窗 -->
|
||||
<view class="qr-code-modal" wx:if="{{showQRCodeModal}}" bindtap="closeQRCodeModal">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">群二维码</text>
|
||||
<view class="close-btn" bindtap="closeQRCodeModal">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="qr-code-container">
|
||||
<canvas class="qr-code-canvas"
|
||||
canvas-id="groupQRCode"
|
||||
style="width: {{qrCodeSize}}px; height: {{qrCodeSize}}px;"></canvas>
|
||||
</view>
|
||||
|
||||
<view class="qr-code-info">
|
||||
<text class="qr-info-text">扫描二维码，加入群聊</text>
|
||||
<text class="qr-group-name">{{groupInfo.name}}</text>
|
||||
</view>
|
||||
|
||||
<view class="qr-code-actions">
|
||||
<view class="qr-action-btn" bindtap="saveQRCodeToAlbum">
|
||||
<text class="action-text">保存到相册</text>
|
||||
</view>
|
||||
<view class="qr-action-btn" bindtap="shareQRCode">
|
||||
<text class="action-text">分享二维码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 编辑群名称弹窗 -->
|
||||
<view class="edit-modal" wx:if="{{showEditNameModal}}" bindtap="closeEditNameModal">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">修改群名称</text>
|
||||
<view class="close-btn" bindtap="closeEditNameModal">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<input class="edit-input"
|
||||
placeholder="请输入群名称"
|
||||
value="{{editGroupName}}"
|
||||
bindinput="onEditGroupNameInput"
|
||||
maxlength="20"
|
||||
focus="{{showEditNameModal}}" />
|
||||
<view class="input-counter">
|
||||
<text class="counter-text">{{editGroupName.length}}/20</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-actions">
|
||||
<view class="modal-btn cancel" bindtap="closeEditNameModal">
|
||||
<text class="btn-text">取消</text>
|
||||
</view>
|
||||
<view class="modal-btn confirm {{editGroupName.trim() ? 'active' : ''}}"
|
||||
bindtap="confirmEditGroupName">
|
||||
<text class="btn-text">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 编辑群描述弹窗 -->
|
||||
<view class="edit-modal" wx:if="{{showEditDescModal}}" bindtap="closeEditDescModal">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">修改群描述</text>
|
||||
<view class="close-btn" bindtap="closeEditDescModal">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<textarea class="edit-textarea"
|
||||
placeholder="请输入群描述"
|
||||
value="{{editGroupDescription}}"
|
||||
bindinput="onEditGroupDescInput"
|
||||
maxlength="200"
|
||||
auto-height
|
||||
focus="{{showEditDescModal}}" />
|
||||
<view class="input-counter">
|
||||
<text class="counter-text">{{editGroupDescription.length}}/200</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-actions">
|
||||
<view class="modal-btn cancel" bindtap="closeEditDescModal">
|
||||
<text class="btn-text">取消</text>
|
||||
</view>
|
||||
<view class="modal-btn confirm" bindtap="confirmEditGroupDescription">
|
||||
<text class="btn-text">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view class="loading-overlay" wx:if="{{loading}}">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">{{loadingText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
829
pages/group/group-info/group-info.wxss
Normal file
829
pages/group/group-info/group-info.wxss
Normal file
|
|
@ -0,0 +1,829 @@
|
|||
/* 👥 群聊信息页面样式 */
|
||||
|
||||
/* CSS变量定义 */
|
||||
page {
|
||||
--primary-color: #007AFF;
|
||||
--primary-light: #5AC8FA;
|
||||
--primary-dark: #0051D5;
|
||||
--success-color: #34C759;
|
||||
--danger-color: #FF3B30;
|
||||
--warning-color: #FF9500;
|
||||
--background-color: #F2F2F7;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #C7C7CC;
|
||||
--border-color: #E5E5EA;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
--radius-small: 8rpx;
|
||||
--radius-medium: 12rpx;
|
||||
--radius-large: 20rpx;
|
||||
}
|
||||
|
||||
/* 🌙 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
page {
|
||||
--primary-color: #0A84FF;
|
||||
--primary-light: #64D2FF;
|
||||
--primary-dark: #0056CC;
|
||||
--success-color: #30D158;
|
||||
--danger-color: #FF453A;
|
||||
--warning-color: #FF9F0A;
|
||||
--background-color: #000000;
|
||||
--surface-color: #1C1C1E;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #48484A;
|
||||
--border-color: #38383A;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.group-info-container {
|
||||
height: 100vh;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 🎨 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
||||
box-shadow: var(--shadow-medium);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.navbar-left, .navbar-right {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-medium);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-left:active, .navbar-right:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.back-icon, .more-icon {
|
||||
font-size: 48rpx;
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 页面内容 */
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
/* 🎨 群基本信息 */
|
||||
.group-basic-info {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.group-avatar-container {
|
||||
position: relative;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: var(--radius-large);
|
||||
border: 2rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.edit-avatar-btn {
|
||||
position: absolute;
|
||||
bottom: -8rpx;
|
||||
right: -8rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 28rpx;
|
||||
background: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid var(--surface-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.edit-avatar-btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
font-size: 28rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.group-name-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.group-name-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.group-name-container:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-right: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.edit-name-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.group-id, .member-count {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.group-description, .group-announcement {
|
||||
margin-top: 24rpx;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.desc-header, .announcement-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.desc-title, .announcement-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.edit-desc-btn, .edit-announcement-btn {
|
||||
font-size: 26rpx;
|
||||
color: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.edit-desc-btn:active, .edit-announcement-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.desc-content, .announcement-content {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.announcement-time {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 🎨 群成员 */
|
||||
.group-members-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 26rpx;
|
||||
color: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.members-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 120rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.member-item:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.invite-item {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.member-avatar-container {
|
||||
position: relative;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.member-avatar, .invite-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.invite-avatar {
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invite-icon {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
right: -6rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid var(--surface-color);
|
||||
}
|
||||
|
||||
.role-badge.owner {
|
||||
background: var(--warning-color);
|
||||
}
|
||||
|
||||
.role-badge.admin {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.role-text {
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 🎨 群功能 */
|
||||
.group-functions-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.function-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.function-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.function-item:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.function-title {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.function-arrow {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 🎨 群设置 */
|
||||
.group-settings-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-item:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.setting-switch {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 🎨 操作按钮 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 96rpx;
|
||||
border-radius: var(--radius-medium);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: var(--primary-color);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.action-btn.primary:active {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
background: var(--danger-color);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.action-btn.danger:active {
|
||||
background: #E6342A;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 二维码弹窗 */
|
||||
.qr-code-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 90%;
|
||||
max-width: 600rpx;
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-large);
|
||||
box-shadow: var(--shadow-medium);
|
||||
animation: scaleIn 0.3s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.close-btn:active {
|
||||
background: var(--border-color);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.qr-code-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.qr-code-canvas {
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-small);
|
||||
}
|
||||
|
||||
.qr-code-info {
|
||||
text-align: center;
|
||||
padding: 0 32rpx 32rpx;
|
||||
}
|
||||
|
||||
.qr-info-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.qr-group-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.qr-code-actions {
|
||||
display: flex;
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.qr-action-btn {
|
||||
flex: 1;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.qr-action-btn:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.qr-action-btn:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 30rpx;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 🎨 编辑弹窗 */
|
||||
.edit-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.edit-input, .edit-textarea {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
background: var(--background-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.edit-input:focus, .edit-textarea:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.edit-textarea {
|
||||
min-height: 120rpx;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.input-counter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.counter-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-btn:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.modal-btn:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.modal-btn.cancel .btn-text {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.modal-btn.confirm .btn-text {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.modal-btn.confirm.active .btn-text {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 🎨 加载状态 */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid var(--border-color);
|
||||
border-top: 4rpx solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 📱 响应式设计 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.page-content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.group-basic-info,
|
||||
.group-members-section,
|
||||
.group-functions-section,
|
||||
.group-settings-section {
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.member-avatar, .invite-avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
width: 96rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.page-content {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.group-basic-info,
|
||||
.group-members-section,
|
||||
.group-functions-section,
|
||||
.group-settings-section {
|
||||
padding: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.member-avatar, .invite-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
width: 140rpx;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue