101 lines
5.7 KiB
Plaintext
101 lines
5.7 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="comment-compose-mask" wx:if="{{showCommentInput}}" catchtap="cancelComment" catchtouchmove="noop">
|
||
<view class="comment-compose {{commentKeyboardHeight > 0 ? 'comment-compose--keyboard' : ''}}" style="bottom:{{commentKeyboardHeight}}px;" catchtap="noop">
|
||
<view class="comment-compose-heading"><text>{{replyTo ? '回复 @' + replyTo.nickname : '写下你的留言'}}</text><text class="comment-compose-close" catchtap="cancelComment">收起</text></view>
|
||
<view class="comment-compose-field">
|
||
<textarea placeholder-class="handwritten-placeholder" class="comment-compose-input" style="height:{{commentEditorHeight}}px;" placeholder="说点什么，让 TA 知道你的心情…" value="{{commentInitialText}}" bindinput="onCommentInput" bindlinechange="onCommentLineChange" bindkeyboardheightchange="onCommentKeyboardHeight" bindblur="onCommentBlur" focus="{{commentFocus}}" fixed="{{true}}" adjust-position="{{false}}" hold-keyboard="{{true}}" show-confirm-bar="{{false}}" cursor-spacing="0" maxlength="500" disabled="{{commentSending}}" />
|
||
</view>
|
||
<view class="comment-compose-toolbar"><text class="comment-compose-count">{{commentLength}}/500</text><button class="comment-compose-send" catchtap="submitComment" disabled="{{commentLength === 0 || commentSending}}" loading="{{commentSending}}" hover-class="none">发送</button></view>
|
||
</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>
|