63 lines
1.9 KiB
Plaintext
63 lines
1.9 KiB
Plaintext
|
<!-- 聊天页面 -->
|
||
|
|
<view class="chat-container">
|
||
|
|
<!-- 消息列表 -->
|
||
|
|
<scroll-view
|
||
|
|
class="message-list"
|
||
|
|
scroll-y="{{true}}"
|
||
|
|
scroll-into-view="{{lastMessageId}}"
|
||
|
|
enable-back-to-top="{{true}}"
|
||
|
|
>
|
||
|
|
<view
|
||
|
|
wx:for="{{messages}}"
|
||
|
|
wx:key="id"
|
||
|
|
id="{{item.id}}"
|
||
|
|
class="message-item {{item.isMe ? 'message-right' : 'message-left'}}"
|
||
|
|
>
|
||
|
|
<view class="message-avatar">
|
||
|
|
<image src="{{item.avatar}}" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="message-content">
|
||
|
|
<view class="message-header">
|
||
|
|
<text class="message-nickname">{{item.nickname}}</text>
|
||
|
|
<text class="message-time">{{item.time}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="message-body">
|
||
|
|
<text class="message-text" wx:if="{{item.type === 'text'}}">{{item.content}}</text>
|
||
|
|
<image class="message-image" wx:if="{{item.type === 'image'}}" src="{{item.content}}" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
|
||
|
|
<!-- 输入区域 -->
|
||
|
|
<view class="input-container">
|
||
|
|
<view class="input-wrapper">
|
||
|
|
<input
|
||
|
|
class="message-input"
|
||
|
|
placeholder="请输入消息..."
|
||
|
|
value="{{inputValue}}"
|
||
|
|
bindinput="onInputChange"
|
||
|
|
bindconfirm="sendMessage"
|
||
|
|
confirm-type="send"
|
||
|
|
adjust-position="{{true}}"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
class="send-btn"
|
||
|
|
bindtap="sendMessage"
|
||
|
|
disabled="{{!inputValue.trim()}}"
|
||
|
|
loading="{{sending}}"
|
||
|
|
>
|
||
|
|
发送
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="action-buttons">
|
||
|
|
<button class="action-btn" bindtap="chooseImage">
|
||
|
|
<image src="/assets/icons/image.png" mode="aspectFit"></image>
|
||
|
|
</button>
|
||
|
|
<button class="action-btn" bindtap="showMoreActions">
|
||
|
|
<image src="/assets/icons/more.png" mode="aspectFit"></image>
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|