107 lines
2.8 KiB
Plaintext
107 lines
2.8 KiB
Plaintext
|
<!-- 聊天详情页 U24（重构：ui-nav-bar + ui-message-bubble + MessageStore） -->
|
|||
|
|
<view class="page">
|
|||
|
|
<!-- 顶部导航 -->
|
|||
|
|
<ui-nav-bar
|
|||
|
|
title="{{otherDisplayName || '聊天'}}"
|
|||
|
|
status-bar-height="{{statusBarHeight}}"
|
|||
|
|
nav-bar-height="{{navBarHeight}}"
|
|||
|
|
bind:back="onBack"
|
|||
|
|
>
|
|||
|
|
<view slot="right" class="more-btn" bindtap="onMore">⋯</view>
|
|||
|
|
</ui-nav-bar>
|
|||
|
|
|
|||
|
|
<!-- 安全提示 -->
|
|||
|
|
<view class="safety-tip">
|
|||
|
|
<text>请注意保护个人隐私，谨慎涉及转账、借款、投资等资金往来。</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 消息列表 -->
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y
|
|||
|
|
class="msg-list"
|
|||
|
|
scroll-into-view="{{scrollIntoView}}"
|
|||
|
|
scroll-with-animation
|
|||
|
|
bindscrolltoupper="onScrollToUpper"
|
|||
|
|
upper-threshold="80"
|
|||
|
|
>
|
|||
|
|
<!-- 加载更早消息 -->
|
|||
|
|
<ui-loading
|
|||
|
|
wx:if="{{loadingMore}}"
|
|||
|
|
mode="spinner"
|
|||
|
|
inline
|
|||
|
|
text="加载更多消息…"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- 消息气泡 -->
|
|||
|
|
<view
|
|||
|
|
wx:for="{{messages}}"
|
|||
|
|
wx:key="messageId"
|
|||
|
|
id="msg-{{index}}"
|
|||
|
|
>
|
|||
|
|
<ui-message-bubble
|
|||
|
|
bubble-type="{{item.bubbleType}}"
|
|||
|
|
content="{{item.content}}"
|
|||
|
|
sent-at="{{item.sentAt}}"
|
|||
|
|
sent-at-text="{{item.sentAtText}}"
|
|||
|
|
show-time="{{item.showTime}}"
|
|||
|
|
show-avatar="{{item.showAvatar}}"
|
|||
|
|
avatar-url="{{item.avatarUrl}}"
|
|||
|
|
send-status="{{item.sendStatus || 'sent'}}"
|
|||
|
|
data-msg-id="{{item.messageId}}"
|
|||
|
|
bind:retry="onRetrySend"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 首次加载 -->
|
|||
|
|
<ui-loading
|
|||
|
|
wx:if="{{loading && messages.length === 0}}"
|
|||
|
|
mode="spinner"
|
|||
|
|
text="加载中…"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- 没有更多 -->
|
|||
|
|
<view wx:if="{{!hasMore && messages.length > 0}}" class="load-more-hint">
|
|||
|
|
<text>没有更多消息了</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 输入栏 -->
|
|||
|
|
<view wx:if="{{canSend}}" class="input-bar">
|
|||
|
|
<view class="input-wrapper">
|
|||
|
|
<input
|
|||
|
|
class="input"
|
|||
|
|
placeholder="输入消息..."
|
|||
|
|
value="{{inputText}}"
|
|||
|
|
bindinput="onInput"
|
|||
|
|
confirm-type="send"
|
|||
|
|
bindconfirm="onSend"
|
|||
|
|
disabled="{{sending}}"
|
|||
|
|
maxlength="500"
|
|||
|
|
adjust-position="{{true}}"
|
|||
|
|
hold-keyboard="{{true}}"
|
|||
|
|
/>
|
|||
|
|
<ui-button
|
|||
|
|
variant="primary"
|
|||
|
|
size="sm"
|
|||
|
|
disabled="{{sending || !inputText.trim()}}"
|
|||
|
|
loading="{{sending}}"
|
|||
|
|
bind:tap="onSend"
|
|||
|
|
>发送</ui-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 会话已停用 -->
|
|||
|
|
<view wx:elif="{{!canSend}}" class="blocked-tip">
|
|||
|
|
<text>该对话已停用，无法继续发送消息</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 危险动作确认（拉黑） -->
|
|||
|
|
<ui-danger-action-dialog
|
|||
|
|
visible="{{showDangerDialog}}"
|
|||
|
|
action="{{dangerAction}}"
|
|||
|
|
target-name="{{otherDisplayName}}"
|
|||
|
|
bind:confirm="onConfirmDanger"
|
|||
|
|
bind:cancel="onCancelDanger"
|
|||
|
|
/>
|
|||
|
|
</view>
|