102 lines
4.9 KiB
Plaintext
102 lines
4.9 KiB
Plaintext
<view class="app-shell app-shell--secondary" style="{{layoutStyle}}">
|
||
<launch-transition />
|
||
<app-nav title="日记详情" back="{{true}}" /><view class="page-bg">
|
||
|
||
<view class="read-state" wx:if="{{loading || loadError}}"><page-state wx:if="{{loading}}" kind="loading" title="正在加载日记" /><page-state wx:else kind="error" title="日记加载失败" action="重试" bind:action="loadDiary" /></view>
|
||
<scroll-view scroll-y class="read-scroll" wx:if="{{!loading && !loadError && diary}}" show-scrollbar="{{false}}" enhanced>
|
||
<view class="read-page">
|
||
<view class="read-author"><image class="read-avatar" src="{{diary.creator_avatar || '/images/default-avatar.svg'}}" mode="aspectFill" /><view class="read-author-info"><text class="read-name">{{diary.creator_name || 'TA'}}</text><text class="read-date">{{diary.created_time}}</text><text class="read-location" wx:if="{{diary.location_text}}">{{diary.location_text}}</text></view><view class="read-menu" catchtap="onMoreTap" aria-label="日记操作"><image src="/images/more.svg" mode="aspectFit" /></view></view>
|
||
<view class="read-paper">
|
||
<!-- ===== 图片区：有图轮播，无图用背景替代 ===== -->
|
||
<view wx:if="{{diary.imageUrls && diary.imageUrls.length > 0}}">
|
||
<view class="img-box">
|
||
<swiper class="img-swiper" circular="{{false}}" indicator-dots="{{false}}" bindchange="onCoverSwiperChange" current="{{coverSwiperIndex}}">
|
||
<swiper-item wx:for="{{diary.imageUrls}}" wx:key="*this" class="img-slide">
|
||
<image src="{{item}}" mode="aspectFill" class="img-item" catchtap="onImageTap" />
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="img-count" wx:if="{{diary.imageUrls.length > 1}}">
|
||
<text>{{coverSwiperIndex + 1}}/{{diary.imageUrls.length}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- ===== 内容区：白色卡片 ===== -->
|
||
<view class="content-card">
|
||
|
||
<!-- 标题 -->
|
||
<text class="title-text" wx:if="{{diary.title}}">{{diary.title}}</text>
|
||
|
||
<!-- 正文 -->
|
||
<text class="content-text" wx:if="{{diary.content}}">{{diary.content}}</text>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<!-- ===== 评论区 ===== -->
|
||
<view class="comment-box">
|
||
<view class="comment-head">
|
||
<text class="comment-head-text">留言 {{diary.comment_count || 0}}</text>
|
||
</view>
|
||
|
||
<view class="comment-empty" wx:if="{{comments.length === 0}}">
|
||
<text>还没有留言，写下你读到这里的心情吧</text>
|
||
</view>
|
||
|
||
<view class="comment-item" wx:for="{{comments}}" wx:key="id" wx:for-item="c"
|
||
data-item="{{c}}" catchlongpress="onCommentLongPress" catchtap="onReplyTap">
|
||
<image class="comment-avatar" src="{{c.avatar_url || '/images/default-avatar.svg'}}" mode="aspectFill" />
|
||
<view class="comment-body">
|
||
<view class="comment-top">
|
||
<text class="comment-name">{{c.nickname || '匿名'}}</text>
|
||
<text class="comment-date">{{c._time || ''}}</text>
|
||
</view>
|
||
<text class="comment-content" wx:if="{{!c.reply_to_username}}">{{c.content}}</text>
|
||
<text class="comment-content" wx:else>
|
||
<text>回复 </text>
|
||
<text class="comment-at">@{{c.reply_to_username}}</text>
|
||
<text>：{{c.content}}</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部输入栏 -->
|
||
<view class="bottom-bar" wx:if="{{!loading && !loadError && diary}}">
|
||
<view class="bottom-input" catchtap="onCommentTap">
|
||
<image class="bottom-input-icon" src="/images/comment.svg" mode="aspectFit" />
|
||
<text class="bottom-input-text">说点什么...</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 评论输入弹窗 -->
|
||
<view class="modal-mask" wx:if="{{showCommentInput}}" catchtap="cancelComment">
|
||
<view class="modal-box" catchtap="noop">
|
||
<view class="modal-top">
|
||
<text class="modal-cancel" catchtap="cancelComment">取消</text>
|
||
<text class="modal-title">{{replyTo ? '回复 @' + replyTo.nickname : '发表评论'}}</text>
|
||
<text class="modal-send" catchtap="submitComment">发送</text>
|
||
</view>
|
||
<textarea class="modal-input" placeholder="说点什么..." value="{{commentText}}" bindinput="onCommentInput" auto-focus maxlength="500" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 图片预览 -->
|
||
<view class="preview-mask" wx:if="{{showPreview}}" catchtap="closePreview">
|
||
<swiper class="preview-swiper" current="{{previewIndex}}" bindchange="onPreviewSwiperChange" circular>
|
||
<swiper-item wx:for="{{previewImages}}" wx:key="*this" class="preview-slide">
|
||
<image src="{{item}}" mode="widthFix" class="preview-img" />
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="preview-num">{{previewIndex + 1}} / {{previewImages.length}}</view>
|
||
<view class="preview-close" catchtap="closePreview">
|
||
<image class="preview-close-icon" src="/images/close.svg" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|