miniprogramme/pages/group/create-group/create-group.wxml

<!-- 👥 创建群聊页面 -->
<view class="create-group-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="createGroup">
        <text class="create-text {{canCreate ? 'active' : ''}}">创建</text>
      </view>
    </view>
  </view>

  <!-- 页面内容 -->
  <scroll-view class="page-content" scroll-y="true">
    <!-- 群信息设置 -->
    <view class="group-info-section">
      <!-- 群头像 -->
      <view class="group-avatar-setting">
        <view class="avatar-container" bindtap="selectGroupAvatar">
          <image wx:if="{{groupAvatar}}" 
                 class="group-avatar" 
                 src="{{groupAvatar}}" 
                 mode="aspectFill" />
          <view wx:else class="avatar-placeholder">
            <text class="avatar-icon">📷</text>
            <text class="avatar-text">设置群头像</text>
          </view>
        </view>
      </view>
      
      <!-- 群名称 -->
      <view class="group-name-setting">
        <view class="setting-label">
          <text class="label-text">群名称</text>
          <text class="label-required">*</text>
        </view>
        <input class="group-name-input"
               placeholder="请输入群名称"
               value="{{groupName}}"
               bindinput="onGroupNameInput"
               maxlength="{{maxGroupNameLength}}" />
        <view class="input-counter">
          <text class="counter-text">{{groupName.length}}/{{maxGroupNameLength}}</text>
        </view>
      </view>
      
      <!-- 群描述 -->
      <view class="group-desc-setting">
        <view class="setting-label">
          <text class="label-text">群描述</text>
        </view>
        <textarea class="group-desc-input"
                  placeholder="请输入群描述（可选）"
                  value="{{groupDescription}}"
                  bindinput="onGroupDescInput"
                  maxlength="{{maxDescriptionLength}}"
                  auto-height />
        <view class="input-counter">
          <text class="counter-text">{{groupDescription.length}}/{{maxDescriptionLength}}</text>
        </view>
      </view>
    </view>

    <!-- 选择成员 -->
    <view class="member-selection-section">
      <view class="section-header">
        <text class="section-title">选择成员</text>
        <text class="member-count">已选择 {{selectedMembers.length}} 人</text>
      </view>
      
      <!-- 搜索框 -->
      <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="selected-members" wx:if="{{selectedMembers.length > 0}}">
        <view class="selected-member-item"
              wx:for="{{selectedMembers}}"
              wx:key="userId"
              bindtap="removeMember"
              data-user-id="{{item.userId}}">
          <image class="selected-avatar" 
                 src="{{item.avatar || '/images/default-avatar.png'}}" 
                 mode="aspectFill" />
          <text class="selected-name">{{item.nickname || item.username}}</text>
          <view class="remove-btn">
            <text class="remove-icon">✕</text>
          </view>
        </view>
      </view>
      
      <!-- 好友列表 -->
      <view class="friends-list">
        <view class="friend-item {{item.selected ? 'selected' : ''}}"
              wx:for="{{filteredFriends}}"
              wx:key="userId"
              bindtap="toggleMember"
              data-user-id="{{item.userId}}">
          <view class="friend-avatar-container">
            <image class="friend-avatar" 
                   src="{{item.avatar || '/images/default-avatar.png'}}" 
                   mode="aspectFill" />
            <view class="selection-indicator {{item.selected ? 'selected' : ''}}">
              <text class="indicator-icon">{{item.selected ? '✓' : ''}}</text>
            </view>
          </view>
          
          <view class="friend-info">
            <text class="friend-name">{{item.nickname || item.username}}</text>
            <text class="friend-status">{{item.status || ''}}</text>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" wx:if="{{filteredFriends.length === 0}}">
          <text class="empty-icon">👥</text>
          <text class="empty-text">{{searchKeyword ? '没有找到相关好友' : '暂无好友'}}</text>
        </view>
      </view>
    </view>

    <!-- 群设置 -->
    <view class="group-settings-section">
      <view class="section-title">
        <text class="title-text">群设置</text>
      </view>
      
      <view class="setting-items">
        <!-- 允许成员邀请 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">允许成员邀请好友</text>
            <text class="item-desc">群成员可以邀请其他人加入群聊</text>
          </view>
          <switch class="setting-switch"
                  checked="{{allowMemberInvite}}"
                  bindchange="onAllowInviteChange" />
        </view>
        
        <!-- 保存到通讯录 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">保存到通讯录</text>
            <text class="item-desc">将群聊保存到通讯录中</text>
          </view>
          <switch class="setting-switch"
                  checked="{{saveToContacts}}"
                  bindchange="onSaveContactsChange" />
        </view>
        
        <!-- 显示群二维码 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">显示群二维码</text>
            <text class="item-desc">允许通过二维码加入群聊</text>
          </view>
          <switch class="setting-switch"
                  checked="{{showQRCode}}"
                  bindchange="onShowQRCodeChange" />
        </view>
      </view>
    </view>
  </scroll-view>
</view>

<!-- 加载提示 -->
<view class="loading-overlay" wx:if="{{isCreating}}">
  <view class="loading-content">
    <view class="loading-spinner"></view>
    <text class="loading-text">正在创建群聊...</text>
  </view>
</view>