192 lines
8.1 KiB
Plaintext
192 lines
8.1 KiB
Plaintext
<!-- 广场页面 - 微信朋友圈样式 -->
|
||
<view class="page-container">
|
||
<!-- 自定义导航栏 -->
|
||
<view class="custom-nav">
|
||
<view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
|
||
<view class="nav-bar">
|
||
<view class="nav-left"></view>
|
||
<view class="nav-title">广场</view>
|
||
<view class="nav-right">
|
||
<view class="create-btn" bindtap="onCreatePost">
|
||
<image src="/images/icon-camera.png" class="create-icon" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;">
|
||
<!-- 动态列表 -->
|
||
<view class="post-list">
|
||
<view class="post-item" wx:for="{{posts}}" wx:key="id">
|
||
<!-- 头像 -->
|
||
<image class="post-avatar" src="{{item.userAvatar}}" mode="aspectFill"></image>
|
||
|
||
<!-- 右侧内容区 -->
|
||
<view class="post-main">
|
||
<!-- 用户名 -->
|
||
<text class="post-username">{{item.userName}}</text>
|
||
|
||
<!-- 内容文字 -->
|
||
<view class="post-content" wx:if="{{item.content}}">
|
||
<text class="post-text">{{item.content}}</text>
|
||
</view>
|
||
|
||
<!-- 图片区域 -->
|
||
<view class="post-images images-{{item.images.length}}" wx:if="{{item.images.length > 0}}">
|
||
<image
|
||
wx:for="{{item.images}}"
|
||
wx:for-item="img"
|
||
wx:key="*this"
|
||
class="post-image"
|
||
src="{{img}}"
|
||
mode="aspectFill"
|
||
bindtap="onPreviewImage"
|
||
data-urls="{{item.images}}"
|
||
data-current="{{img}}"
|
||
></image>
|
||
</view>
|
||
|
||
<!-- 底部信息栏 -->
|
||
<view class="post-footer">
|
||
<text class="post-time">{{item.time}}</text>
|
||
<view class="post-actions-btn" bindtap="onShowActions" data-id="{{item.id}}">
|
||
<view class="action-dots">
|
||
<view class="dot"></view>
|
||
<view class="dot"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作面板 -->
|
||
<view class="action-panel {{item.showActions ? 'show' : ''}}" wx:if="{{item.showActions}}">
|
||
<view class="action-btn" bindtap="onLikePost" data-id="{{item.id}}">
|
||
<image src="/images/icon-heart{{item.isLiked ? '-filled' : ''}}.png" class="action-btn-icon" mode="aspectFit"></image>
|
||
<text class="action-btn-text">{{item.isLiked ? '取消' : '赞'}}</text>
|
||
</view>
|
||
<view class="action-divider"></view>
|
||
<view class="action-btn" bindtap="onCommentPost" data-id="{{item.id}}">
|
||
<image src="/images/icon-comment.png" class="action-btn-icon" mode="aspectFit"></image>
|
||
<text class="action-btn-text">评论</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 点赞和评论区域 -->
|
||
<view class="post-interact" wx:if="{{item.likes.length > 0 || item.comments.length > 0}}">
|
||
<!-- 点赞列表 -->
|
||
<view class="likes-section" wx:if="{{item.likes.length > 0}}">
|
||
<image src="/images/icon-heart-filled.png" class="likes-icon" mode="aspectFit"></image>
|
||
<text class="likes-text">{{item.likesText}}</text>
|
||
</view>
|
||
|
||
<!-- 评论列表 -->
|
||
<view class="comments-section" wx:if="{{item.comments.length > 0}}">
|
||
<view class="comment-item" wx:for="{{item.comments}}" wx:for-item="comment" wx:key="id">
|
||
<text class="comment-user">{{comment.user}}</text>
|
||
<block wx:if="{{comment.replyTo}}">
|
||
<text class="comment-reply">回复</text>
|
||
<text class="comment-user">{{comment.replyTo}}</text>
|
||
</block>
|
||
<text class="comment-colon">：</text>
|
||
<text class="comment-text">{{comment.text}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部占位 -->
|
||
<view class="bottom-placeholder"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 评论弹窗 -->
|
||
<view class="comment-modal" wx:if="{{showCommentInput}}">
|
||
<view class="comment-modal-mask" bindtap="hideCommentInput"></view>
|
||
<view class="comment-modal-content">
|
||
<view class="comment-modal-header">
|
||
<text class="comment-modal-cancel" bindtap="hideCommentInput">取消</text>
|
||
<text class="comment-modal-title">写评论</text>
|
||
<text class="comment-modal-send {{commentText ? 'active' : ''}}" bindtap="onSendComment">发送</text>
|
||
</view>
|
||
<view class="comment-modal-body">
|
||
<textarea
|
||
class="comment-textarea"
|
||
placeholder="写下你的评论..."
|
||
value="{{commentText}}"
|
||
bindinput="onCommentInput"
|
||
focus="{{showCommentInput}}"
|
||
maxlength="500"
|
||
auto-height
|
||
></textarea>
|
||
</view>
|
||
<view class="comment-modal-footer">
|
||
<view class="comment-toolbar">
|
||
<view class="toolbar-btn">
|
||
<image src="/images/icon-emoji.png" class="toolbar-icon" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<text class="comment-count">{{commentText.length || 0}}/500</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 发布动态弹窗 -->
|
||
<view class="create-modal" wx:if="{{showCreateModal}}">
|
||
<view class="create-modal-mask" bindtap="hideCreateModal"></view>
|
||
<view class="create-modal-content">
|
||
<view class="create-header">
|
||
<text class="create-cancel" bindtap="hideCreateModal">取消</text>
|
||
<text class="create-title">发表动态</text>
|
||
<text class="create-submit {{newPostText || newPostImages.length ? 'active' : ''}}" bindtap="onSubmitPost">发表</text>
|
||
</view>
|
||
<textarea
|
||
class="create-textarea"
|
||
placeholder="这一刻的想法..."
|
||
value="{{newPostText}}"
|
||
bindinput="onNewPostInput"
|
||
maxlength="500"
|
||
></textarea>
|
||
<view class="create-images" wx:if="{{newPostImages.length > 0}}">
|
||
<view class="create-image-item" wx:for="{{newPostImages}}" wx:key="*this">
|
||
<image class="create-image" src="{{item}}" mode="aspectFill"></image>
|
||
<view class="create-image-delete" bindtap="onDeleteImage" data-index="{{index}}">×</view>
|
||
</view>
|
||
<view class="create-image-add" bindtap="onAddImage" wx:if="{{newPostImages.length < 9}}">
|
||
<image src="/images/icon-plus.png" class="add-icon" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<view class="create-image-add-empty" bindtap="onAddImage" wx:if="{{newPostImages.length === 0}}">
|
||
<image src="/images/icon-plus.png" class="add-icon" mode="aspectFit"></image>
|
||
<text class="add-text">添加图片</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 自定义底部导航栏 -->
|
||
<view class="custom-tabbar">
|
||
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/index/index" wx:if="{{auditStatus === 0}}">
|
||
<image src="/images/tab-heart.png" class="tabbar-icon" mode="aspectFit"></image>
|
||
<text class="tabbar-text">文娱</text>
|
||
</view>
|
||
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/companion-chat/companion-chat">
|
||
<image src="/images/tab-chat.png" class="tabbar-icon" mode="aspectFit"></image>
|
||
<text class="tabbar-text">陪聊</text>
|
||
</view>
|
||
<view class="tabbar-center" bindtap="switchTab" data-path="/pages/chat/chat">
|
||
<view class="center-btn">
|
||
<image src="/images/tab-message.png" class="center-icon" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="tabbar-text">聊天</text>
|
||
</view>
|
||
<view class="tabbar-item active">
|
||
<image src="/images/tab-compass-active.png" class="tabbar-icon" mode="aspectFit"></image>
|
||
<text class="tabbar-text active">广场</text>
|
||
</view>
|
||
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/profile/profile">
|
||
<image src="/images/tab-user.png" class="tabbar-icon" mode="aspectFit"></image>
|
||
<text class="tabbar-text">我的</text>
|
||
</view>
|
||
</view>
|
||
</view>
|