miniprogramme/pages/group/group-members/group-members.wxml

<!-- 👥 群成员管理页面 -->
<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>