317 lines
11 KiB
Text
317 lines
11 KiB
Text
<!-- 👥 群聊信息页面 -->
|
||
<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.svg'}}"
|
||
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>
|