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

<view class="diagnosis-container">
  <!-- 自定义导航栏 -->
  <view class="custom-navbar">
    <view class="nav-left">
      <view class="back-btn" bindtap="goBack">
        <text class="back-icon">←</text>
      </view>
    </view>
    <view class="nav-center">
      <text class="nav-title">AI智能问诊</text>
      <text class="nav-subtitle">与牧健康助手</text>
    </view>
    <view class="nav-right">
      <view class="more-btn" bindtap="showMoreMenu">···</view>
    </view>
  </view>

  <!-- 医生信息卡片 -->
  <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 
    class="chat-container" 
    scroll-y 
    scroll-into-view="{{'msg-' + (messages.length - 1)}}"
    scroll-with-animation="true"
  >
    <!-- 欢迎消息 -->
    <view 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">您好！我是AI健康助手，有什么可以帮您？\n\n请描述你的牲畜的健康状况，我会为你提供专业的分析和建议。</text>
        </view>
        <view class="message-time">{{currentTime}}</view>
      </view>
    </view>

    <!-- 消息列表 -->
    <view wx:for="{{messages}}" wx:key="id" id="msg-{{index}}">
      <!-- 用户消息 -->
      <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.disease}}</text>
              </view>
              <view class="diagnosis-item">
                <text class="diagnosis-label">严重程度：</text>
                <view class="severity-level {{item.diagnosis.severity}}">
                  {{item.diagnosis.severityText}}
                </view>
              </view>
              <view class="diagnosis-item">
                <text class="diagnosis-label">建议措施：</text>
                <text class="diagnosis-value">{{item.diagnosis.suggestion}}</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" style="justify-content: center;">
      <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>
  </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}}</text>
      </view>
    </scroll-view>
  </view>

  <!-- 输入区域 -->
  <view class="input-area">
    <view class="input-wrapper">
      <input
        class="message-input"
        value="{{inputValue}}"
        placeholder="描述您或牲畜的症状..."
        placeholder-class="placeholder"
        bindinput="onInput"
        bindconfirm="sendMessage"
        confirm-type="send"
        focus="{{autoFocus}}"
      />

    </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}}" 
    symptoms="{{symptoms}}"
    selectedSymptoms="{{selectedSymptoms}}"
    bind:select="onSymptomSelect"
    bind:confirm="confirmSymptoms"
    bind:close="closeSymptomSelector"
  />

  <!-- 更多菜单弹窗 -->
  <view class="modal-overlay" wx:if="{{showMoreMenu}}" bindtap="closeMoreMenu">
    <view class="more-menu" catchtap="stopPropagation">
      <view class="menu-item" bindtap="clearHistory">
        <text class="menu-icon">🗑️</text>
        <text class="menu-text">清空记录</text>
      </view>
      <view class="menu-item" bindtap="exportChat">
        <text class="menu-icon">📤</text>
        <text class="menu-text">导出记录</text>
      </view>
      <view class="menu-item" bindtap="contactDoctor">
        <text class="menu-icon">👨‍⚕️</text>
        <text class="menu-text">联系兽医</text>
      </view>
      <view class="menu-item" bindtap="showInstructions">
        <text class="menu-icon">❓</text>
        <text class="menu-text">使用说明</text>
      </view>
    </view>
  </view>

  <!-- 加载动画 -->
  <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>