feat(fe): 评论改成小红书那套交互——点评论直接唤起输入
上一版做成了居中弹窗，参考图给的是另一种范式：输入栏常驻底部，点任意 一条评论就把它激活并填上「回复 @xxx」。按参考图重做，居中那套一并删掉， 不留死代码。 结构从「一个滚动容器装所有东西」改成三段式： 固定头（共 N 条评论）+ 滚动列表 + 常驻输入栏 输入栏必须在滚动区外——放进去的话列表一滚它就跟着走，点完评论还得再 把输入框找回来，正是这次要解决的问题。 交互： - 点评论或回复的任意位置 → 输入框获得焦点，placeholder 变「回复 @xxx」， 上方出现可取消的橙色提示条。不用再单独点一个「回复」按钮 - 删除从长按改成显式的「删除」文字，只在自己的评论上出现——长按是 隐藏交互，没人会发现 - 回复带首字头像并缩进一层，「甲 回复 乙」的指向关系显示在昵称行 键盘处理用 adjust-position=false + bindfocus 拿键盘高度自己顶：弹层是 fixed 定位，交给系统调整会把整块推出屏幕。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
@@ -7,10 +7,91 @@ module.exports.sel = function (map, key, index, def) {
|
||||
</wxs>
|
||||
|
||||
<view class="overlay {{show ? 'show' : ''}}" bindtap="onMaskTap">
|
||||
<view class="sheet {{centered ? 'sheet-center' : ''}}" catchtap="noop">
|
||||
<view class="sheet {{innerType === 'comments' ? 'sheet-cmp' : ''}}" catchtap="noop">
|
||||
<view class="sheetbar"></view>
|
||||
|
||||
<scroll-view class="sheet-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
||||
<!-- 评论：头 + 滚动列表 + 常驻输入栏。输入栏不能放进滚动区，
|
||||
否则列表一滚它就跟着走，点评论回复时还得再找回来 -->
|
||||
<block wx:if="{{innerType === 'comments'}}">
|
||||
<view class="cmp-head">共 {{total}} 条评论</view>
|
||||
|
||||
<scroll-view class="cmp-list" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
||||
<view wx:for="{{comments}}" wx:key="id" class="cm"
|
||||
bindtap="onReplyTo" data-id="{{item.id}}" data-name="{{item.author_name}}">
|
||||
<view class="cm-av">{{item.initial}}</view>
|
||||
<view class="cm-body">
|
||||
<view class="cm-name">{{item.author_name}}<text wx:if="{{item.is_self}}" class="mine-tag">我</text></view>
|
||||
<view class="cm-text">{{item.content}}</view>
|
||||
<view wx:if="{{item.imgs.length}}" class="cm-imgs">
|
||||
<image wx:for="{{item.imgs}}" wx:for-item="u" wx:key="*this" class="cm-img"
|
||||
src="{{u}}" mode="aspectFill" catchtap="onPreviewCommentImage"
|
||||
data-urls="{{item.imgs}}" data-cur="{{u}}"></image>
|
||||
</view>
|
||||
<view class="cm-meta">
|
||||
<text>{{item.timeText}}</text>
|
||||
<text class="cm-reply-btn">回复</text>
|
||||
<text wx:if="{{item.is_self}}" class="cm-del" catchtap="onDeleteComment"
|
||||
data-id="{{item.id}}" data-self="{{true}}">删除</text>
|
||||
</view>
|
||||
|
||||
<!-- 回复只缩进一层，再深手机上没法读 -->
|
||||
<view wx:if="{{item.replies.length}}" class="cm-replies">
|
||||
<view wx:for="{{item.replies}}" wx:for-item="r" wx:key="id" class="cm-reply"
|
||||
catchtap="onReplyTo" data-id="{{r.id}}" data-name="{{r.author_name}}">
|
||||
<view class="cm-av cm-av-sm">{{r.initial}}</view>
|
||||
<view class="cm-body">
|
||||
<view class="cm-name">
|
||||
{{r.author_name}}<text wx:if="{{r.is_self}}" class="mine-tag">我</text>
|
||||
<text wx:if="{{r.reply_to_name}}" class="cm-at"> 回复 {{r.reply_to_name}}</text>
|
||||
</view>
|
||||
<view class="cm-text">{{r.content}}</view>
|
||||
<view class="cm-meta">
|
||||
<text>{{r.timeText}}</text>
|
||||
<text class="cm-reply-btn">回复</text>
|
||||
<text wx:if="{{r.is_self}}" class="cm-del" catchtap="onDeleteComment"
|
||||
data-id="{{r.id}}" data-self="{{true}}">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{item.reply_n > item.replies.length}}" class="cm-more"
|
||||
catchtap="onExpandReplies" data-id="{{item.id}}" data-index="{{index}}">
|
||||
— 展开全部 {{item.reply_n}} 条回复
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{!comments.length}}" class="empty lg">还没有评论，来抢个沙发</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="cmp-dock" style="padding-bottom:{{kbHeight ? kbHeight + 'px' : 'calc(20rpx + env(safe-area-inset-bottom))'}}">
|
||||
<view wx:if="{{replyTo.name}}" class="cm-replying">
|
||||
<text>回复 {{replyTo.name}}</text>
|
||||
<view class="cm-cancel" catchtap="onCancelReply"><pt-icon name="close" size="{{24}}"></pt-icon></view>
|
||||
</view>
|
||||
<view wx:if="{{commentImages.length}}" class="img-picker" style="margin-bottom:12rpx">
|
||||
<view wx:for="{{commentImages}}" wx:key="id" class="img-thumb">
|
||||
<image src="{{item.url}}" mode="aspectFill"></image>
|
||||
<view class="img-del" catchtap="onRemoveCommentImage" data-index="{{index}}"><pt-icon name="close" size="{{24}}"></pt-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
<textarea class="textarea cm-ta" placeholder="{{replyTo.name ? '回复 @' + replyTo.name : '有话要说，快来评论'}}"
|
||||
placeholder-class="placeholder" value="{{commentText}}" bindinput="onCommentInput"
|
||||
focus="{{cmFocus}}" bindfocus="onCommentFocus" bindblur="onCommentBlur"
|
||||
maxlength="500" auto-height="{{true}}" show-confirm-bar="{{false}}"
|
||||
adjust-position="{{false}}" cursor-spacing="12"></textarea>
|
||||
<view class="cm-bar">
|
||||
<view class="cm-pic" catchtap="onPickCommentImages">
|
||||
<pt-icon name="photo" size="{{36}}"></pt-icon>
|
||||
</view>
|
||||
<text class="cm-count">{{commentText.length}}/500</text>
|
||||
<view class="cm-send {{commentText ? 'on' : ''}}" catchtap="onSendComment">发送</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
|
||||
<scroll-view wx:if="{{innerType !== 'comments'}}" class="sheet-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
||||
<!-- 记录体重 -->
|
||||
<block wx:if="{{innerType === 'weight'}}">
|
||||
<view class="sheet-h3">记录体重</view>
|
||||
@@ -318,69 +399,6 @@ module.exports.sel = function (map, key, index, def) {
|
||||
</block>
|
||||
|
||||
<!-- 评论 -->
|
||||
<block wx:elif="{{innerType === 'comments'}}">
|
||||
<view class="sheet-h3">评论 {{comments.length ? comments.length : ''}}</view>
|
||||
|
||||
<view wx:for="{{comments}}" wx:key="id" class="cm">
|
||||
<view class="cm-av">{{item.initial}}</view>
|
||||
<view class="cm-body">
|
||||
<view class="cm-head">
|
||||
<text class="cm-name">{{item.author_name}}</text>
|
||||
<text wx:if="{{item.is_self}}" class="mine-tag">我</text>
|
||||
<text class="cm-time">{{item.timeText}}</text>
|
||||
</view>
|
||||
<view class="cm-text" bindlongpress="onDeleteComment" data-id="{{item.id}}" data-self="{{item.is_self}}">{{item.content}}</view>
|
||||
<view wx:if="{{item.imgs.length}}" class="cm-imgs">
|
||||
<image wx:for="{{item.imgs}}" wx:for-item="u" wx:key="*this" class="cm-img"
|
||||
src="{{u}}" mode="aspectFill" catchtap="onPreviewCommentImage"
|
||||
data-urls="{{item.imgs}}" data-cur="{{u}}"></image>
|
||||
</view>
|
||||
|
||||
<!-- 回复：只缩进一层。再深就没法在手机上读了 -->
|
||||
<view wx:if="{{item.replies.length}}" class="cm-replies">
|
||||
<view wx:for="{{item.replies}}" wx:for-item="r" wx:key="id" class="cm-reply"
|
||||
bindlongpress="onDeleteComment" data-id="{{r.id}}" data-self="{{r.is_self}}">
|
||||
<text class="cm-name">{{r.author_name}}</text>
|
||||
<text wx:if="{{r.reply_to_name}}" class="cm-at"> 回复 {{r.reply_to_name}}</text>
|
||||
<text class="cm-name">：</text>{{r.content}}
|
||||
</view>
|
||||
<view wx:if="{{item.reply_n > item.replies.length}}" class="cm-more"
|
||||
bindtap="onExpandReplies" data-id="{{item.id}}" data-index="{{index}}">
|
||||
展开全部 {{item.reply_n}} 条回复
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cm-act" bindtap="onReplyTo" data-id="{{item.id}}" data-name="{{item.author_name}}">回复</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{!comments.length}}" class="empty">还没有评论，来抢个沙发</view>
|
||||
<view wx:if="{{comments.length}}" class="cm-tip">长按自己的评论可删除</view>
|
||||
|
||||
<view class="cm-editor">
|
||||
<view wx:if="{{replyTo.name}}" class="cm-replying">
|
||||
<text>回复 {{replyTo.name}}</text>
|
||||
<view class="cm-cancel" bindtap="onCancelReply"><pt-icon name="close" size="{{24}}"></pt-icon></view>
|
||||
</view>
|
||||
<textarea class="textarea cm-ta" placeholder="{{replyTo.name ? '回复 ' + replyTo.name : '友善交流，分享你的经验…'}}" placeholder-class="placeholder"
|
||||
value="{{commentText}}" bindinput="onCommentInput" maxlength="500"
|
||||
auto-height="{{true}}" show-confirm-bar="{{false}}" cursor-spacing="24"></textarea>
|
||||
<view wx:if="{{commentImages.length}}" class="img-picker" style="margin-top:16rpx">
|
||||
<view wx:for="{{commentImages}}" wx:key="id" class="img-thumb">
|
||||
<image src="{{item.url}}" mode="aspectFill"></image>
|
||||
<view class="img-del" catchtap="onRemoveCommentImage" data-index="{{index}}"><pt-icon name="close" size="{{24}}"></pt-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cm-bar">
|
||||
<view class="cm-pic" bindtap="onPickCommentImages">
|
||||
<pt-icon name="photo" size="{{34}}"></pt-icon>
|
||||
<text>配图 {{commentImages.length}}/3</text>
|
||||
</view>
|
||||
<text class="cm-count">{{commentText.length}}/500</text>
|
||||
<view class="cm-send {{commentText ? 'on' : ''}}" bindtap="onSendComment">发送</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 多宠物管理 -->
|
||||
<block wx:elif="{{innerType === 'managePets'}}">
|
||||
|
||||
Reference in New Issue
Block a user