|
|
|
|
<view class="chat-page-container">
|
|
|
|
|
<view class="chat-header">
|
|
|
|
|
<view class="header-info">
|
|
|
|
|
<text class="header-name">{{chatTitle}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<scroll-view
|
|
|
|
|
id="chatScrollView"
|
|
|
|
|
scroll-y
|
|
|
|
|
scroll-top="{{scrollTop}}"
|
|
|
|
|
scroll-with-animation="{{scrollWithAnimation}}"
|
|
|
|
|
class="chat-content"
|
|
|
|
|
bindscroll="onScroll"
|
|
|
|
|
>
|
|
|
|
|
<view class="chat-messages">
|
|
|
|
|
<block wx:if="{{loading && messages.length === 0}}">
|
|
|
|
|
<view class="loading">加载中...</view>
|
|
|
|
|
</block>
|
|
|
|
|
<block wx:elif="{{messages.length === 0}}">
|
|
|
|
|
<view class="empty-messages">暂无聊天记录</view>
|
|
|
|
|
</block>
|
|
|
|
|
<block wx:else>
|
|
|
|
|
<!-- 动态渲染聊天消息 -->
|
|
|
|
|
<view wx:for="{{messages}}" wx:key="id" class="message-item {{item.sender}} {{item.isNew ? 'new' : ''}}">
|
|
|
|
|
<!-- 对方消息 -->
|
|
|
|
|
<view wx:if="{{item.sender === 'other'}}" class="avatar">
|
|
|
|
|
<image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="message-bubble">
|
|
|
|
|
<text class="message-content">{{item.content}}</text>
|
|
|
|
|
<text class="message-time">{{item.time}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 自己的消息 -->
|
|
|
|
|
<view wx:if="{{item.sender === 'me'}}" class="avatar">
|
|
|
|
|
<image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</block>
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
|
|
|
|
<!-- 新消息提示按钮 -->
|
|
|
|
|
<view wx:if="{{hasNewMessages}}" class="new-message-tip" bindtap="scrollToBottom">
|
|
|
|
|
<text>有{{newMessageCount}}条新消息,点击查看</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="chat-input-area">
|
|
|
|
|
<input class="message-input" placeholder="请输入消息" bindinput="onInputChange" value="{{inputValue}}"></input>
|
|
|
|
|
<button class="send-button" bindtap="sendMessage">发送</button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|