105 lines
3.3 KiB
Plaintext
105 lines
3.3 KiB
Plaintext
<view class="page">
|
||
<view class="safe-top" style="height: {{statusBarHeight}}px"></view>
|
||
|
||
<view class="nav">
|
||
<view class="nav-back" bindtap="onBack">‹</view>
|
||
<view class="nav-title">动态详情</view>
|
||
<view class="nav-more" bindtap="onMore">⋯</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y="true" class="scroll" enhanced="true" show-scrollbar="false">
|
||
<!-- 帖子主体 -->
|
||
<view wx:if="{{post}}" class="post-wrap">
|
||
<!-- 作者 -->
|
||
<view class="post-header" bindtap="onAuthorTap">
|
||
<view class="avatar" style="background: {{avatarGradient}}">
|
||
<text>{{post.author.nickName[0]}}</text>
|
||
</view>
|
||
<view class="meta">
|
||
<text class="uname">{{post.author.nickName}}</text>
|
||
<text class="utime">{{timeText}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 文字 -->
|
||
<text class="content">{{post.content}}</text>
|
||
|
||
<!-- 图片 -->
|
||
<view wx:if="{{post.images.length > 0}}" class="images">
|
||
<image
|
||
wx:for="{{post.images}}"
|
||
wx:key="index"
|
||
class="img {{post.images.length === 1 ? 'img-full' : 'img-grid'}}"
|
||
src="{{item}}"
|
||
mode="aspectFill"
|
||
lazy-load="true"
|
||
bindtap="onImgTap"
|
||
data-idx="{{index}}"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 标签行 -->
|
||
<view class="tags-row">
|
||
<text wx:for="{{post.hashtags}}" wx:key="index" class="hashtag">{{item}}</text>
|
||
<view wx:if="{{post.location}}" class="loc-tag">📍{{post.location.name}}</view>
|
||
<view wx:if="{{post.mood}}" class="mood-tag">{{post.mood}}</view>
|
||
</view>
|
||
|
||
<!-- 操作 -->
|
||
<view class="actions">
|
||
<view class="action-btn {{post.isLiked ? 'liked' : ''}}" bindtap="onLike">
|
||
<text>{{post.isLiked ? '❤️' : '🤍'}}</text>
|
||
<text class="act-count">{{likeCount}}</text>
|
||
</view>
|
||
<view class="action-btn" bindtap="focusComment">
|
||
<text>💬</text>
|
||
<text class="act-count">{{comments.length}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 评论区 -->
|
||
<view class="divider"></view>
|
||
<view class="comments-section">
|
||
<text class="comments-title">评论 {{comments.length}}</text>
|
||
|
||
<view wx:if="{{comments.length === 0}}" class="no-comment">
|
||
<text>还没有评论，来说第一句话吧 🐾</text>
|
||
</view>
|
||
|
||
<view
|
||
wx:for="{{comments}}"
|
||
wx:key="_id"
|
||
class="comment-item"
|
||
>
|
||
<view class="c-avatar" style="background: {{item.gradient}}">
|
||
<text>{{item.author.nickName[0]}}</text>
|
||
</view>
|
||
<view class="c-body">
|
||
<text class="c-name">{{item.author.nickName}}</text>
|
||
<text class="c-text">{{item.content}}</text>
|
||
<text class="c-time">{{item.timeText}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 160rpx;"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 评论输入框 -->
|
||
<view class="input-bar">
|
||
<input
|
||
class="comment-input"
|
||
id="commentInput"
|
||
value="{{commentText}}"
|
||
bindinput="onCommentInput"
|
||
placeholder="写下你的想法..."
|
||
confirm-type="send"
|
||
bindconfirm="onSend"
|
||
adjust-position="true"
|
||
cursor-spacing="20"
|
||
/>
|
||
<view class="send-btn {{commentText ? '' : 'send-off'}}" bindtap="onSend">发送</view>
|
||
</view>
|
||
</view>
|