Claw 项目完整结构提交
This commit is contained in:
63
Claw/client/wechat_app/pages/chat/chat.wxml
Normal file
63
Claw/client/wechat_app/pages/chat/chat.wxml
Normal file
@@ -0,0 +1,63 @@
|
||||
<!-- 聊天页面 -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user