findme-miniprogram-frontend/pages/circle/circle.wxml

<wxs module="utils" src="./circle.wxs"></wxs>
<view class="circle-container">
  <!-- 返回按钮
  <view class="back-button-container">
    <button class="back-button" bindtap="navigateBackHome">
      <text class="back-icon">←</text>
    </button>
  </view> -->
  <!-- 滚动列表容器 -->
  <scroll-view 
    class="scroll-view" 
    scroll-y="{{true}}"  
    enable-back-to-top="{{true}}"  
    bindscrolltolower="onReachBottom" 
    scroll-into-view="{{scrollIntoFeedId}}"
    style="height: 100vh;" 
  >
 
    <!-- 标题容器 -->
    <view class="circle-title-container">
      <view class="title-row">
        <text class="circle-title-text">社交圈子</text>
      </view>
      <!-- 头像模块 -->
      <!-- <scroll-view class="avatar-scroll" scroll-x="{{true}}" enable-flex="{{true}}">
        <view class="avatar-list">
          <block wx:for="{{userList}}" wx:key="customId" wx:for-item="user">
            <view class="avatar-item">
              <view class="avatar-border">
                <image class="avatar-image" src="{{user.avatar || '/images/default-avatar.png'}}" mode="aspectFill"></image>
              </view>
              <text class="avatar-name">{{user.nickname || '用户'}}</text>
            </view>
          </block>
        </view>
      </scroll-view> -->
    </view>
    
    <!-- 主内容区-->
    <view class="main-content">
      <!-- 发动态按钮 -->
      <view class="post-button" bindtap="handlePost">
        <text class="post-button-text">发动态</text>
        <image class="post-camera-icon" src="/images/cam.svg" mode="aspectFit" />
      </view>
      <!-- 动态列表 -->
      <view class="feed-list">
        <block wx:for="{{feedList}}" wx:key="uuid" wx:for-item="feed" wx:for-index="feedIndex">
        <view id="feed-item-{{feed.uuid || feed.id || feed.dynamicId || ('idx-' + feedIndex)}}"
              class="feed-item feed-item-box {{highlightFeedUuid === (feed.uuid || feed.id || feed.dynamicId) ? 'feed-highlight' : ''}}">
          <!-- 用户信息-->
          <view class="user-info">
            <image 
              class="avatar" 
              src="{{feed.user ? feed.user.avatar : '../../images/findme-logo.png'}}"
              mode="aspectFill"
              bindtap="navigateToUserProfile"
              data-custom-id="{{feed.user ? feed.user.customId : ''}}"
           ></image>
            <view class="user-detail">
              <!-- 用户名-->
              <text class="username">{{feed.user ? feed.user.nickname : '未知用户'}}</text>
              <!-- 发布时间-->
              <text class="post-time">{{feed.formattedTime}}</text>
            </view>
          </view>
          
          <!-- 动态文字内容 -->
          <view class="feed-content">
            <text>{{feed.content || '无内容'}}</text>
          </view>
          
          <!-- 点赞和评论功能 -->
          <view class="feed-actions">
            <view class="action-item" bindtap="handleLike" data-isLiked="{{feed.isLiked}}" data-feed-uuid="{{feed.uuid || feed.id || feed.dynamicId}}" data-feed-index="{{feedIndex}}">
              <image class="like-icon" src="{{feed.isLiked ? '/images/like-active.svg' : '/images/like.svg'}}" mode="aspectFit"></image>
              <text class="action-count">{{feed.interactions.likeCount || 0}}</text>
            </view>
            <view class="action-item" bindtap="handleComment" data-feed-uuid="{{feed.uuid || feed.id || feed.dynamicId}}" data-feed-index="{{feedIndex}}">
              <text class="action-button-text">添加评论</text>
              <text class="action-count">{{feed.interactions.commentCount || 0}}</text>
            </view>
            <!-- <view class="action-item" bindtap="deleteComment" data-feed-comment-id="{{feed.comments[0].id}}" data-feed-uuid="{{feed.uuid || feed.id || feed.dynamicId}}" data-feed-index="{{feedIndex}}">
              <text class="action-button-text">删除评论(临时测试用)</text>
            </view> -->
          </view>

          <!-- 动态图片 -->
          <view 
            wx:if="{{feed.media && feed.media.length > 0}}" 
            class="feed-images {{feed.media.length > 1 ? 'multi-img' : ''}}"
          >
            <block wx:for="{{feed.media}}" wx:key="index">
              <view class="feed-img-wrapper">
                <!-- Loading 背景 -->
                <view class="image-loading" wx:if="{{item.loading !== false}}">
                  <view class="loading-spinner"></view>
                </view>
                <image 
                  class="feed-img {{item.loading === false ? 'loaded' : ''}}" 
                  src="{{item.url}}" 
                  mode="aspectFill"
                  lazy-load="{{true}}"
                  bindload="onImageLoad"
                  binderror="onImageError"
                  bindtap="previewImage"
                  data-index="{{index}}"
                  data-feed-index="{{feedIndex}}"
                ></image>
              </view>
            </block>
          </view>

          <!-- 评论显示区域 -->
          <scroll-view 
            class="feed-comments-container" 
            wx:if="{{feed.comments && feed.comments.length > 0}}" 
            scroll-y="{{true}}"
            bindscrolltolower="onCommentScrollToLower" 
            data-feed-index="{{feedIndex}}"
            lower-threshold="100"
          >
            <!-- 一级评论 -->
            <view class="feed-comment-item" wx:for="{{utils.slice(feed.comments, feed.visibleCommentCount)}}" wx:key="id" wx:for-index="commentIndex" wx:for-item="comment">
              <view class="feed-comment-content">
                <text class="feed-comment-name">{{comment.user ? comment.user.nickname : '未知用户'}}</text>
                <text class="feed-comment-separator"> - </text>
                <text class="feed-comment-text">{{comment.content}}</text>
              </view>
              <view class="feed-comment-footer">
                <text class="feed-comment-time" wx:if="{{comment.formattedTime}}">{{comment.formattedTime}}</text>
                <text class="feed-comment-reply" wx:if="{{!comment.isOwn}}" bindtap="handleReplyClick" data-feed-index="{{feedIndex}}" data-comment-id="{{comment.id}}" data-comment-index="{{commentIndex}}">回复</text>
                <text class="feed-comment-delete" wx:if="{{comment.isOwn}}" bindtap="deleteComment" data-feed-index="{{feedIndex}}" data-comment-id="{{comment.id}}" data-comment-index="{{commentIndex}}">删除</text>
              </view>
              
              <!-- 二级回复列表 -->
              <view class="feed-replies-container" wx:if="{{comment.replies && comment.replies.length > 0}}">
                <view class="feed-reply-item" wx:for="{{utils.slice(comment.replies, comment.visibleReplyCount || 5)}}" wx:key="id" wx:for-index="replyIndex" wx:for-item="reply">
                  <view class="feed-reply-content">
                    <!-- 用户名 回复 被回复用户名 -->
                    <view class="feed-reply-header">
                      <text class="feed-reply-name">{{reply.user ? reply.user.nickname : '未知用户'}}</text>
                      <text wx:if="{{reply.replyToUser}}" class="feed-reply-to"> 回复 </text>
                      <text wx:if="{{reply.replyToUser}}" class="feed-reply-to-name">{{reply.replyToUser.nickname || '未知用户'}}</text>
                    </view>
                    <!-- 回复内容（可换行） -->
                    <view class="feed-reply-body">
                      <text class="feed-comment-text">{{reply.content}}</text>
                    </view>
                    <!-- 时间和回复按钮（换行显示） -->
                    <view class="feed-reply-footer">
                      <text class="feed-comment-time" wx:if="{{reply.formattedTime}}">{{reply.formattedTime}}</text>
                      <text class="feed-comment-reply" wx:if="{{!reply.isOwn}}" bindtap="handleReplyClick" data-feed-index="{{feedIndex}}" data-comment-id="{{comment.id}}" data-comment-index="{{commentIndex}}" data-reply-id="{{reply.id}}" data-reply-to-user="{{reply.user ? reply.user.nickname : ''}}">回复</text>
                      <text class="feed-comment-delete" wx:if="{{reply.isOwn}}" bindtap="deleteReply" data-feed-index="{{feedIndex}}" data-comment-id="{{comment.id}}" data-comment-index="{{commentIndex}}" data-reply-id="{{reply.id}}" data-reply-index="{{replyIndex}}">删除</text>
                    </view>
                  </view>
                  
                  <!-- 二级回复的回复输入框（显示在当前回复下边） -->
                  <view class="reply-input-container" wx:if="{{showReplyInput['feed_' + feedIndex + '_comment_' + comment.id + '_reply_' + reply.id]}}">
                    <input 
                      class="reply-input" 
                      placeholder="说点什么..." 
                      value="{{replyInputValue}}"
                      bindinput="onReplyInput"
                      confirm-type="send"
                      bindconfirm="submitReply"
                      data-feed-index="{{feedIndex}}"
                      data-comment-id="{{comment.id}}"
                      data-comment-index="{{commentIndex}}"
                      data-reply-id="{{reply.id}}"
                      disabled="{{submittingReply}}"
                    />
                    <view class="reply-send-btn {{submittingReply ? 'reply-send-btn-disabled' : ''}}" bindtap="submitReply" data-feed-index="{{feedIndex}}" data-comment-id="{{comment.id}}" data-comment-index="{{commentIndex}}" data-reply-id="{{reply.id}}">
                      <text class="reply-send-text">{{submittingReply ? '发送中...' : '发送'}}</text>
                    </view>
                  </view>
                </view>
                <!-- 上划查看更多回复提示 -->
                <view class="scroll-more-hint" wx:if="{{comment.replies.length > (comment.visibleReplyCount || 5)}}">
                  <text class="scroll-more-text">上划查看更多回复</text>
                </view>
                <!-- 展开更多回复按钮 -->
                <view class="expand-replies-btn" wx:if="{{comment.replies.length > (comment.visibleReplyCount || 5)}}" bindtap="expandReplies" data-feed-index="{{feedIndex}}" data-comment-index="{{commentIndex}}">
                  <text class="expand-replies-text">——展开更多回复</text>
                </view>
              </view>
              
              <!-- 回复输入框 -->
              <view class="reply-input-container" wx:if="{{showReplyInput['feed_' + feedIndex + '_comment_' + comment.id]}}">
                <input 
                  class="reply-input" 
                  placeholder="说点什么..." 
                  value="{{replyInputValue}}"
                  bindinput="onReplyInput"
                  confirm-type="send"
                  bindconfirm="submitReply"
                  data-feed-index="{{feedIndex}}"
                  data-comment-id="{{comment.id}}"
                  data-comment-index="{{commentIndex}}"
                  disabled="{{submittingReply}}"
                />
                <view class="reply-send-btn {{submittingReply ? 'reply-send-btn-disabled' : ''}}" bindtap="submitReply" data-feed-index="{{feedIndex}}" data-comment-id="{{comment.id}}" data-comment-index="{{commentIndex}}">
                  <text class="reply-send-text">{{submittingReply ? '发送中...' : '发送'}}</text>
                </view>
              </view>
            </view>
            <view class="expand-comments-btn" wx:if="{{feed.comments.length > (feed.visibleCommentCount || 20)}}" bindtap="expandComments" data-feed-index="{{feedIndex}}">
              <text class="expand-comments-text">——展开更多回复</text>
            </view>
          </scroll-view>
          
        </view>
      </block>

        <!-- 加载提示 -->
        <view class="loading" wx:if="{{loading}}">加载中...</view>
        <view class="no-more" wx:if="{{!loading && noMore && feedList.length > 0}}">没有更多内容了</view>
      </view>
    </view>
  </scroll-view>

  <!-- 暂无动态 -->
  <view class="empty-tip" wx:if="{{!loading && feedList.length === 0}}">
    暂无动态
  </view>

  <!-- 评论弹窗 -->
  <view class="comment-modal" wx:if="{{showCommentModal}}" bindtap="closeCommentModal">
    <view class="comment-modal-content" catchtap="preventClose">
      <!-- 弹窗头部 -->
      <view class="comment-modal-header">
        <text class="comment-modal-title">评论</text>
        <view class="comment-modal-close" bindtap="closeCommentModal">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <!-- 输入区域（留言） -->
      <view class="comment-input-area">
        <input 
          class="comment-input" 
          placeholder="说点什么..." 
          value="{{commentInputValue}}"
          bindinput="onCommentInput"
          confirm-type="send"
          bindconfirm="submitComment"
        />
        <view class="comment-send-btn" bindtap="submitComment">
          <text class="send-btn-text">发送</text>
        </view>
      </view>
    </view>
  </view>
</view>