243 lines
9 KiB
Text
243 lines
9 KiB
Text
<!-- 👥 群成员管理页面 -->
|
||
<view class="group-members-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">群成员 ({{memberCount}})</text>
|
||
</view>
|
||
|
||
<view class="navbar-right" wx:if="{{canInviteMembers}}" bindtap="inviteMembers">
|
||
<text class="invite-text">邀请</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 页面内容 -->
|
||
<view class="page-content">
|
||
<!-- 搜索栏 -->
|
||
<view class="search-container">
|
||
<view class="search-input-wrapper">
|
||
<text class="search-icon">🔍</text>
|
||
<input class="search-input"
|
||
placeholder="搜索群成员"
|
||
value="{{searchKeyword}}"
|
||
bindinput="onSearchInput" />
|
||
<view wx:if="{{searchKeyword}}"
|
||
class="clear-search"
|
||
bindtap="clearSearch">
|
||
<text class="clear-icon">✕</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 成员筛选 -->
|
||
<view class="filter-container">
|
||
<view class="filter-tabs">
|
||
<view class="filter-tab {{currentFilter === 'all' ? 'active' : ''}}"
|
||
bindtap="switchFilter"
|
||
data-filter="all">
|
||
<text class="tab-text">全部 ({{memberCount}})</text>
|
||
</view>
|
||
<view class="filter-tab {{currentFilter === 'admin' ? 'active' : ''}}"
|
||
bindtap="switchFilter"
|
||
data-filter="admin">
|
||
<text class="tab-text">管理员 ({{adminCount}})</text>
|
||
</view>
|
||
<view class="filter-tab {{currentFilter === 'member' ? 'active' : ''}}"
|
||
bindtap="switchFilter"
|
||
data-filter="member">
|
||
<text class="tab-text">成员 ({{normalMemberCount}})</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 成员列表 -->
|
||
<scroll-view class="members-list" scroll-y="true">
|
||
<!-- 群主 -->
|
||
<view wx:if="{{groupOwner && (currentFilter === 'all' || currentFilter === 'admin')}}"
|
||
class="member-section">
|
||
<view class="section-title">
|
||
<text class="title-text">群主</text>
|
||
</view>
|
||
|
||
<view class="member-item owner"
|
||
bindtap="viewMemberProfile"
|
||
data-user-id="{{groupOwner.userId}}">
|
||
<view class="member-avatar-container">
|
||
<image class="member-avatar"
|
||
src="{{groupOwner.avatar || '/images/default-avatar.png'}}"
|
||
mode="aspectFill" />
|
||
<view class="role-badge owner">
|
||
<text class="role-text">群主</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="member-info">
|
||
<text class="member-name">{{groupOwner.nickname || groupOwner.username}}</text>
|
||
<text class="member-status">{{groupOwner.status || ''}}</text>
|
||
</view>
|
||
|
||
<view class="member-actions">
|
||
<text class="action-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 管理员 -->
|
||
<view wx:if="{{filteredAdmins.length > 0 && (currentFilter === 'all' || currentFilter === 'admin')}}"
|
||
class="member-section">
|
||
<view class="section-title">
|
||
<text class="title-text">管理员</text>
|
||
</view>
|
||
|
||
<view class="member-item admin"
|
||
wx:for="{{filteredAdmins}}"
|
||
wx:key="userId"
|
||
bindtap="viewMemberProfile"
|
||
data-user-id="{{item.userId}}"
|
||
bindlongpress="showMemberActions"
|
||
data-member="{{item}}">
|
||
<view class="member-avatar-container">
|
||
<image class="member-avatar"
|
||
src="{{item.avatar || '/images/default-avatar.png'}}"
|
||
mode="aspectFill" />
|
||
<view class="role-badge admin">
|
||
<text class="role-text">管理员</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="member-info">
|
||
<text class="member-name">{{item.nickname || item.username}}</text>
|
||
<text class="member-status">{{item.status || ''}}</text>
|
||
</view>
|
||
|
||
<view class="member-actions">
|
||
<view wx:if="{{isOwner && item.userId !== currentUserId}}"
|
||
class="action-btn"
|
||
bindtap="showMemberActions"
|
||
data-member="{{item}}"
|
||
catchtap="stopPropagation">
|
||
<text class="action-icon">⋯</text>
|
||
</view>
|
||
<text class="action-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 普通成员 -->
|
||
<view wx:if="{{filteredMembers.length > 0 && (currentFilter === 'all' || currentFilter === 'member')}}"
|
||
class="member-section">
|
||
<view class="section-title">
|
||
<text class="title-text">成员</text>
|
||
</view>
|
||
|
||
<view class="member-item member"
|
||
wx:for="{{filteredMembers}}"
|
||
wx:key="userId"
|
||
bindtap="viewMemberProfile"
|
||
data-user-id="{{item.userId}}"
|
||
bindlongpress="showMemberActions"
|
||
data-member="{{item}}">
|
||
<view class="member-avatar-container">
|
||
<image class="member-avatar"
|
||
src="{{item.avatar || '/images/default-avatar.png'}}"
|
||
mode="aspectFill" />
|
||
</view>
|
||
|
||
<view class="member-info">
|
||
<text class="member-name">{{item.nickname || item.username}}</text>
|
||
<text class="member-status">{{item.status || ''}}</text>
|
||
</view>
|
||
|
||
<view class="member-actions">
|
||
<view wx:if="{{isOwnerOrAdmin && item.userId !== currentUserId}}"
|
||
class="action-btn"
|
||
bindtap="showMemberActions"
|
||
data-member="{{item}}"
|
||
catchtap="stopPropagation">
|
||
<text class="action-icon">⋯</text>
|
||
</view>
|
||
<text class="action-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" wx:if="{{filteredMembers.length === 0 && filteredAdmins.length === 0 && !groupOwner}}">
|
||
<text class="empty-icon">👥</text>
|
||
<text class="empty-text">{{searchKeyword ? '没有找到相关成员' : '暂无成员'}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 成员操作菜单 -->
|
||
<view class="member-action-modal" wx:if="{{showMemberActionModal}}" bindtap="closeMemberActionModal">
|
||
<view class="modal-content" catchtap="stopPropagation">
|
||
<view class="modal-header">
|
||
<view class="member-info-header">
|
||
<image class="member-avatar-large"
|
||
src="{{selectedMember.avatar || '/images/default-avatar.png'}}"
|
||
mode="aspectFill" />
|
||
<view class="member-details">
|
||
<text class="member-name-large">{{selectedMember.nickname || selectedMember.username}}</text>
|
||
<text class="member-role-text">{{selectedMember.role === 'admin' ? '管理员' : '成员'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="close-btn" bindtap="closeMemberActionModal">
|
||
<text class="close-icon">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="action-list">
|
||
<!-- 查看资料 -->
|
||
<view class="action-item" bindtap="viewMemberProfile" data-user-id="{{selectedMember.userId}}">
|
||
<view class="action-icon-wrapper">
|
||
<text class="action-icon">👤</text>
|
||
</view>
|
||
<text class="action-title">查看资料</text>
|
||
</view>
|
||
|
||
<!-- 发送消息 -->
|
||
<view class="action-item" bindtap="sendMessageToMember">
|
||
<view class="action-icon-wrapper">
|
||
<text class="action-icon">💬</text>
|
||
</view>
|
||
<text class="action-title">发送消息</text>
|
||
</view>
|
||
|
||
<!-- 设置/取消管理员 -->
|
||
<view wx:if="{{isOwner && selectedMember.role !== 'owner'}}"
|
||
class="action-item"
|
||
bindtap="toggleMemberAdmin">
|
||
<view class="action-icon-wrapper">
|
||
<text class="action-icon">{{selectedMember.role === 'admin' ? '👤' : '👑'}}</text>
|
||
</view>
|
||
<text class="action-title">{{selectedMember.role === 'admin' ? '取消管理员' : '设为管理员'}}</text>
|
||
</view>
|
||
|
||
<!-- 移出群聊 -->
|
||
<view wx:if="{{canRemoveMember}}"
|
||
class="action-item danger"
|
||
bindtap="removeMemberFromGroup">
|
||
<view class="action-icon-wrapper">
|
||
<text class="action-icon">🚫</text>
|
||
</view>
|
||
<text class="action-title">移出群聊</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>
|