76 lines
2.6 KiB
Text
76 lines
2.6 KiB
Text
|
<view class="friend-selector-container">
|
||
|
|
<!-- 搜索框 -->
|
||
|
|
<view class="search-container">
|
||
|
|
<view class="search-box">
|
||
|
|
<input
|
||
|
|
class="search-input"
|
||
|
|
type="text"
|
||
|
|
placeholder="search"
|
||
|
|
value="{{searchKeyword}}"
|
||
|
|
bindinput="onSearchInput"
|
||
|
|
/>
|
||
|
|
<image class="search-icon" src="/images/Search.png" mode="aspectFit"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 已选择好友显示容器 -->
|
||
|
|
<view wx:if="{{selectedFriends.length > 0}}" class="selected-friends-container">
|
||
|
|
|
||
|
|
<scroll-view
|
||
|
|
class="selected-avatars-scroll"
|
||
|
|
scroll-x="{{true}}"
|
||
|
|
enable-flex="{{true}}"
|
||
|
|
show-scrollbar="{{false}}"
|
||
|
|
>
|
||
|
|
<view class="selected-content-row">
|
||
|
|
<view class="selected-friends-info">
|
||
|
|
<text class="selected-friends-text">已选择好友</text>
|
||
|
|
<text class="selected-friends-count">{{selectedFriends.length}}</text>
|
||
|
|
<text class="selected-friends-text">个好友</text>
|
||
|
|
</view>
|
||
|
|
<view class="selected-avatars-list">
|
||
|
|
<block wx:for="{{selectedFriends}}" wx:key="id" wx:for-item="selectedFriend">
|
||
|
|
<image
|
||
|
|
class="selected-avatar"
|
||
|
|
src="{{selectedFriend.avatar || '/images/default-avatar.png'}}"
|
||
|
|
mode="aspectFill"
|
||
|
|
></image>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 好友列表 -->
|
||
|
|
<scroll-view class="content-scroll" scroll-y>
|
||
|
|
<view class="friends-list">
|
||
|
|
<block wx:for="{{friends}}" wx:key="id" wx:for-item="friend">
|
||
|
|
<view
|
||
|
|
class="friend-item {{friend.isSelected ? 'selected' : ''}}"
|
||
|
|
bindtap="selectFriend"
|
||
|
|
data-friend-id="{{friend.id}}"
|
||
|
|
>
|
||
|
|
<view class="friend-row">
|
||
|
|
<view class="friend-checkbox">
|
||
|
|
<view class="checkbox {{friend.isSelected ? 'checked' : ''}}">
|
||
|
|
<image wx:if="{{friend.isSelected}}" src="/images/Selected.svg" mode="aspectFit" class="check-image"></image>
|
||
|
|
<image wx:else src="/images/fram.svg" mode="aspectFit" class="uncheck-image"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="friend-main">
|
||
|
|
<image class="friend-avatar" src="{{friend.avatar || '/images/default-avatar.png'}}" mode="aspectFill"></image>
|
||
|
|
<text class="friend-name">{{friend.nickname}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
|
||
|
|
<!-- 底部完成按钮 -->
|
||
|
|
<view class="bottom-action">
|
||
|
|
<button class="confirm-btn" bindtap="confirmSelection">完成</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|