256 lines
13 KiB
Text
256 lines
13 KiB
Text
|
<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>
|
|||
|
|
|