191 lines
6.9 KiB
Text
191 lines
6.9 KiB
Text
<!-- 👥 创建群聊页面 -->
|
||
<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.svg'}}"
|
||
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.svg'}}"
|
||
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>
|