wxamp-ymtxUser/pagesA/pages/wzai/wzai.wxml

<wxs module="tool" src="/utils/tool.wxs"></wxs>
<view class="diagnosis-container">
  <!-- 医生信息卡片 -->
  <view class="doctor-card">
    <view class="doctor-avatar">
      <image class="avatar-img" src="/pages/images/aiwz.png" mode="aspectFit"></image>
    </view>
    <view class="doctor-info">
      <text class="doctor-name">AI健康助手</text>
      <text class="doctor-title">智能诊断专家</text>
      <view class="doctor-tags">
        <view class="tag">24小时在线</view> 
        <view class="tag">专业诊断</view>
        <view class="tag">快速响应</view>
      </view>
    </view>
    <view class="online-status online">在线</view>
  </view>

  <!-- 聊天区域 -->
  <scroll-view 
    id="chatScroll"
    class="chat-container" 
    scroll-y 
    scroll-into-view="{{scrollIntoView}}"
    scroll-with-animation="{{scrollAnimation}}"
    bindscroll="onScroll"
    enhanced
    show-scrollbar="{{false}}"
    lower-threshold="100"
    bindscrolltolower="onScrollToLower"
  >
    <!-- 欢迎消息 -->
    <view class="message-wrapper assistant" id="welcome-message">
      <view class="message-avatar">
        <image class="avatar" src="/pages/images/aiwz.png" mode="aspectFit"></image>
      </view>
      <view class="message-content">
        <view class="message-bubble assistant-bubble">
          <text class="message-text">您好！我是AI健康助手，有什么可以帮您？\n\n请描述你的牲畜的健康状况，我会为你提供专业的分析和建议。</text>
        </view>
        <view class="message-time">{{currentTime}}</view>
      </view>
    </view>

    <!-- 消息列表 -->
    <view wx:for="{{messages}}" wx:key="id" id="msg-{{index}}" class="message-item">
      <!-- 用户消息 -->
      <view wx:if="{{item.type === 'user'}}" class="message-wrapper user">
        <view class="message-content">
          <view class="message-bubble user-bubble">
            <text class="message-text">{{item.content}}</text>
          </view>
          <view class="message-time">{{item.time}}</view>
        </view>
        <view class="message-avatar">
          <image class="avatar" src="/pages/images/tx.png" mode="aspectFit"></image>
        </view>
      </view>

      <!-- AI助手消息 -->
      <view wx:if="{{item.type === 'assistant'}}" class="message-wrapper assistant">
        <view class="message-avatar">
          <image class="avatar" src="/pages/images/aiwz.png" mode="aspectFit"></image>
        </view>
        <view class="message-content">
          <view class="message-bubble assistant-bubble">
            <text class="message-text">{{item.content}}</text>
            <!-- 诊断结果卡片 -->
            <view wx:if="{{item.diagnosis}}" class="diagnosis-card">
              <view class="diagnosis-header">
                <text class="diagnosis-title">🤖 智能诊断结果</text>
              </view>
              <view class="diagnosis-item">
                <text class="diagnosis-label">可能病症：</text>
                <text class="diagnosis-value">{{item.diagnosis.possibleDiseases || item.diagnosis.title}}</text>
              </view>
              <view class="diagnosis-item">
                <text class="diagnosis-label">严重程度：</text>
                <view class="severity-level {{tool.ztLevel(item.diagnosis.severityLevel)}}">
                  {{item.diagnosis.severityLevel || '中等'}}
                </view>
              </view>
              <view class="diagnosis-item">
                <text class="diagnosis-label">建议措施：</text>
                <text class="diagnosis-value">{{item.diagnosis.suggestions || '请咨询专业兽医'}}</text>
              </view>
              <view class="diagnosis-footer">
                <text class="disclaimer">* 本结果仅供参考，请及时咨询专业兽医</text>
              </view>
            </view>
          </view>
          <view class="message-time">{{item.time}}</view>
        </view>
      </view>
    </view>

    <!-- AI正在输入 -->
    <view wx:if="{{isAIThinking}}" class="message-wrapper assistant" id="ai-thinking">
      <view class="message-avatar">
        <image class="avatar" src="/pages/images/aiwz.png" mode="aspectFit"></image>
      </view>
      <view class="message-content">
        <view class="message-bubble assistant-bubble typing">
          <view class="typing-indicator">
            <view class="typing-dot"></view>
            <view class="typing-dot"></view>
            <view class="typing-dot"></view>
            <text class="typing-text">AI正在思考中...</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部占位，确保滚动到底部 -->
    <view class="scroll-bottom-placeholder" id="scrollBottom"></view>
  </scroll-view>

  <!-- 快捷症状选择 -->
  <view class="symptom-quick-select">
    <text class="section-title">快速选择症状</text>
    <scroll-view class="symptom-tags" scroll-x>
      <view class="symptom-tag" wx:for="{{quickSymptoms}}" wx:key="id" bindtap="selectQuickSymptom" data-symptom="{{item}}">
        <text class="tag-text">{{item.keywords}}</text>
      </view>
    </scroll-view>
  </view>

  <!-- 输入区域 -->
  <view class="input-area" id="inputArea">
    <view class="input-wrapper" style="min-height: {{inputHeight}}rpx; height: auto;">
      <textarea
        class="message-input"
        value="{{inputValue}}"
        placeholder="描述您或牲畜的症状..."
        placeholder-class="placeholder"
        bindinput="onInput"
        bindlinechange="onInputLineChange"
        bindconfirm="sendMessage"
        confirm-type="send"
        focus="{{autoFocus}}"
        auto-height
        maxlength="-1"
        show-confirm-bar="{{false}}"
        cursor-spacing="30"
        adjust-position="false"
        bindfocus="onInputFocus"
        bindblur="onInputBlur"
      />
    </view>
    <button class="send-btn" bindtap="sendMessage" hover-class="send-btn-hover">
      <text class="send-icon">↑</text>
    </button>
  </view>

  <!-- 症状选择器组件 -->
  <symptom-selector 
    id="symptomSelector"
    show="{{showSymptomSelector}}" 
    selectedSymptoms="{{selectedSymptoms}}"
    bind:select="onSymptomSelect"
    bind:confirm="confirmSymptoms"
    bind:close="closeSymptomSelector"
  />


  <!-- 加载动画 -->
  <view class="loading-overlay" wx:if="{{isLoading}}">
    <view class="loading-content">
      <view class="pulse-animation">
        <view class="pulse-circle"></view>
        <view class="pulse-circle"></view>
        <view class="pulse-circle"></view>
      </view>
      <text class="loading-text">{{loadingText}}</text>
    </view>
  </view>
</view>