123 lines
4.0 KiB
Plaintext
123 lines
4.0 KiB
Plaintext
<view class="chat-container">
|
||
<!-- 消息列表区域 -->
|
||
<scroll-view
|
||
class="message-list {{messages.length > 0 ? 'has-messages' : ''}}"
|
||
scroll-y
|
||
scroll-into-view="{{scrollToMessage}}"
|
||
enhanced
|
||
show-scrollbar
|
||
>
|
||
<!-- 欢迎消息 -->
|
||
<view class="welcome-area" wx:if="{{messages.length === 0}}">
|
||
<view class="welcome-icon">
|
||
<t-icon name="chat" size="80rpx" color="#FF9B33" />
|
||
</view>
|
||
<text class="welcome-title">AI陪诊助手</text>
|
||
<text class="welcome-desc">我是您的智能陪诊助手，可以为您解答陪诊相关问题</text>
|
||
<view class="quick-questions">
|
||
<view
|
||
class="quick-item"
|
||
wx:for="{{quickQuestions}}"
|
||
wx:key="index"
|
||
bindtap="onQuickQuestionTap"
|
||
data-question="{{item}}"
|
||
>
|
||
<text>{{item}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 消息气泡 -->
|
||
<view
|
||
class="message-item {{item.type}}"
|
||
wx:for="{{messages}}"
|
||
wx:key="id"
|
||
id="msg-{{item.id}}"
|
||
>
|
||
<!-- AI消息：头像在左，内容在右 -->
|
||
<block wx:if="{{item.type === 'ai'}}">
|
||
<image class="avatar ai-avatar" src="/images/home-w.png" mode="aspectFill" />
|
||
<view class="message-content">
|
||
<view class="message-bubble">
|
||
<text class="message-text" wx:if="{{item.contentType === 'text'}}">{{item.content}}</text>
|
||
<image
|
||
wx:if="{{item.contentType === 'image'}}"
|
||
class="message-image"
|
||
src="{{item.content}}"
|
||
mode="widthFix"
|
||
bindtap="previewImage"
|
||
data-src="{{item.content}}"
|
||
/>
|
||
</view>
|
||
<text class="message-time">{{item.time}}</text>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 用户消息：内容在左，头像在右 -->
|
||
<block wx:if="{{item.type === 'user'}}">
|
||
<view class="message-content">
|
||
<view class="message-bubble">
|
||
<text class="message-text" wx:if="{{item.contentType === 'text'}}">{{item.content}}</text>
|
||
<image
|
||
wx:if="{{item.contentType === 'image'}}"
|
||
class="message-image"
|
||
src="{{item.content}}"
|
||
mode="widthFix"
|
||
bindtap="previewImage"
|
||
data-src="{{item.content}}"
|
||
/>
|
||
</view>
|
||
<text class="message-time">{{item.time}}</text>
|
||
</view>
|
||
<view class="avatar user-avatar">
|
||
<t-icon name="user-1" size="40rpx" color="#FFFFFF" />
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- AI正在输入提示 -->
|
||
<view class="message-item ai" wx:if="{{isTyping}}">
|
||
<image class="avatar ai-avatar" src="/images/home-active2.png" mode="aspectFill" />
|
||
<view class="message-content">
|
||
<view class="message-bubble typing-bubble">
|
||
<view class="typing-indicator">
|
||
<view class="dot"></view>
|
||
<view class="dot"></view>
|
||
<view class="dot"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部留白，确保最新消息可见 -->
|
||
<view style="height: 40rpx;"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 清空按钮 -->
|
||
<view class="clear-btn" wx:if="{{messages.length > 0}}" bindtap="clearChat">
|
||
<t-icon name="delete" size="28rpx" color="#999999" />
|
||
<text class="clear-text">清空聊天</text>
|
||
</view>
|
||
|
||
<!-- 输入区域 -->
|
||
<view class="input-area">
|
||
<view class="input-wrapper">
|
||
<input
|
||
class="message-input"
|
||
type="text"
|
||
value="{{inputValue}}"
|
||
placeholder="请输入您的问题..."
|
||
placeholder-class="input-placeholder"
|
||
confirm-type="send"
|
||
bindinput="onInputChange"
|
||
bindconfirm="sendMessage"
|
||
focus="{{inputFocus}}"
|
||
/>
|
||
<view class="input-actions">
|
||
<view class="action-btn send-btn {{inputValue ? 'active' : ''}}" bindtap="sendMessage">
|
||
<t-icon name="send" size="40rpx" color="{{inputValue ? '#FFFFFF' : '#CCCCCC'}}" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> |