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

<!-- 页面结构 -->
<view class="xqbox">

<!-- 页面内容 -->
<scroll-view class="page-content" scroll-y refresher-enabled refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh" enhanced show-scrollbar="{{false}}" lower-threshold="100" bindscrolltolower="onScrollToLower">

  <!-- 用户问诊卡片 -->
  <view class="user-query-card card-enter">
    <!-- 用户信息 -->
    <view class="user-info-section">
      <view class="avatar-wrapper">
        <image class="user-avatar" src="{{diagnosisData.avatar?baseUrl+diagnosisData.avatar:'/pages/images/tx.png'}}"></image>
      </view>
      <view class="user-details">
        <view class="user-name-row">
          <text class="user-name">{{diagnosisData.farmerName || '用户'}}</text>
          <view class="status-badge {{diagnosisData.status === '已回复' ? 'status-replied' : 'status-pending'}} pulse">
            {{diagnosisData.status}}
          </view>
        </view>
        <view class="pet-info">
          <view class="pet-info-tags">
            <view class="pet-tag gradient-blue">{{diagnosisData.animalType}}</view>
            <view class="pet-tag gradient-orange">{{diagnosisData.animalAge}}</view>
            <view class="pet-tag gradient-pink">{{diagnosisData.animalGender}}</view>
          </view>
          <view class="time-info">
            <text class="time-text">{{diagnosisData.createdTime}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 症状描述 -->
    <view class="symptom-section">
      <view class="section-header">
        <text class="section-title">症状描述</text>
        <view class="title-decoration"></view>
      </view>
      <view class="symptom-content">
        <view class="quote-left">
          <text>"</text>
        </view>
        <text class="symptom-text">{{diagnosisData.description}}</text>
      </view>
    </view>

    <!-- 相关图片 -->
    <view class="image-section" wx:if="{{diagnosisData.images && diagnosisData.images.length > 0}}">
      <view class="section-header">
        <text class="section-title">相关图片</text>
        <text class="image-count gradient-blue">{{diagnosisData.images.length}}张</text>
      </view>
      <scroll-view class="images-scroll" scroll-x>
        <view class="images-container">
          <block wx:for="{{diagnosisData.images}}" wx:key="*this" wx:for-index="index">
            <view class="image-wrapper">
              <image class="symptom-image" src="{{baseUrl+item}}" mode="aspectFill" bindtap="previewImage" data-url="{{baseUrl+item}}" data-urls="{{diagnosisData.images}}" data-type="user"></image>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>

    <!-- 方案制定按钮 -->
    <view class="fazd" bindtap="showPlanModal">
      <view class="zdnr pulse">
        方案制定查看
      </view>
    </view>

    <!-- 卡片装饰 -->
    <view class="card-decoration">
      <view class="decoration-dot dot-1"></view>
      <view class="decoration-dot dot-2"></view>
      <view class="decoration-dot dot-3"></view>
    </view>
  </view>

  <!-- 兽医回复区域 -->
  <view class="replies-section">
    <view class="section-header">
      <text class="section-title">兽医回复</text>
      <view class="reply-count gradient-purple">
        <text class="count-number">{{replies.length}}</text>
        <text class="count-text">条回复</text>
      </view>
    </view>

    <!-- 回复列表 -->
    <view class="replies-list">
      <block wx:for="{{replies}}" wx:key="index" wx:for-index="index">
        <view class="vet-reply-card fade-in-up" style="animation-delay: {{index * 0.1}}s;">
          <!-- 兽医信息 -->
          <view class="vet-info">
            <view class="avatar-wrapper">
              <image class="vet-avatar" src="{{item.avatar?baseUrl+item.avatar:'/pages/images/tx.png'}}"></image>
              <view class="vet-verified"></view>
            </view>
            <view class="vet-details">
              <view class="vet-name-row">
                <text class="vet-name">{{item.replyName || '兽医'}}</text>
                <view class="vet-badge gradient-gold" wx:if="{{item.title}}">
                  <text class="vet-title">{{item.title}}</text>
                </view>
              </view>
              <view class="vet-meta">
                <view class="meta-item" wx:if="{{item.hospital}}">
                  <text class="vet-hospital">{{item.hospital}}</text>
                </view>
                <view class="meta-item" wx:if="{{item.experience}}">
                  <text class="vet-experience">{{item.experience}}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 回复内容 -->
          <view class="reply-content">
            <view class="reply-bubble">
              <text class="reply-text">{{item.content}}</text>
            </view>

            <!-- 兽医回复图片 -->
            <view wx:if="{{item.images && item.images.length > 0}}" class="reply-images-section">
              <view class="reply-images-grid grid-{{item.images.length}}">
                <block wx:for="{{item.images}}" wx:key="this" wx:for-index="imgIndex">
                  <view class="reply-image-wrapper" bindtap="previewReplyImage" data-url="{{item}}" data-fullurl="{{baseUrl + item}}" data-urls="{{item.images}}" data-current-index="{{imgIndex}}" data-reply-index="{{index}}">
                    <image class="reply-image" src="{{baseUrl + item}}" mode="aspectFill" lazy-load></image>
                    <!-- 如果图片数量大于4且当前是第4张，显示剩余数量遮罩 -->
                    <view wx:if="{{item.images.length > 4 && imgIndex === 3}}" class="image-more-mask">
                      <text class="more-count">+{{item.images.length - 4}}</text>
                    </view>
                  </view>
                </block>
              </view>
            </view>
          </view>

          <!-- 回复底部 -->
          <view class="reply-footer">
            <view class="reply-time">
              <text class="time-text">{{item.createdAt || item.createTime || ''}}</text>
            </view>
          </view>

        </view>
      </block>

      <!-- 无回复状态 -->
      <view wx:if="{{replies.length === 0}}" class="no-replies fade-in">
        <text class="no-replies-title">等待兽医回复中</text>
        <text class="no-replies-desc">专业兽医通常会在24小时内为您解答</text>
        <view class="waiting-animation">
          <view class="loading-dot dot-1"></view>
          <view class="loading-dot dot-2"></view>
          <view class="loading-dot dot-3"></view>
        </view>
      </view>
    </view>
  </view>

  <!-- 底部安全区域 -->
  <view class="page-bottom-safe">
    <view class="bottom-content">
      <text class="bottom-text">—— 已经没有更多了 ——</text>
    </view>
  </view>
</scroll-view>

<!-- 方案制定弹框-->
<view class="modal-mask" wx:if="{{showPlanModal}}" bindtap="hidePlanModal" catchtouchmove="preventTouch">
  <view class="modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <text class="modal-title">📋 治疗方案</text>
      <view class="modal-close" bindtap="hidePlanModal">
        <text class="close-icon">✕</text>
      </view>
    </view>
    
    <!-- 优化滚动区域 -->
    <scroll-view class="modal-body" scroll-y enhanced show-scrollbar="{{false}}" bindscrolltolower="onPlanScrollToLower" lower-threshold="50">
      <view class="plan-list">
        <block wx:for="{{planList}}" wx:key="index" wx:for-index="idx">
          <view class="plan-card fade-in-up" style="animation-delay: {{idx * 0.08}}s;">
            <!-- 兽医信息行 -->
            <view class="plan-vet-row">
              <image class="plan-avatar" src="{{item.vetAvatar ? baseUrl + item.vetAvatar : '/pages/images/tx.png'}}" mode="aspectFill"></image>
              <view class="plan-vet-info">
                <text class="plan-user-name">{{item.vetNickName || '兽医'}}</text>
                <text class="plan-title-tag" wx:if="{{item.title}}">{{item.title}}</text>
              </view>
            </view>
            
            <!-- 诊断结果 -->
            <view class="plan-item" wx:if="{{item.diagnosis}}">
              <view class="item-label">🔍 诊断结果</view>
              <view class="item-value diagnosis-text">{{item.diagnosis}}</view>
            </view>
            
            <!-- 治疗方式 -->
            <view class="plan-item" wx:if="{{item.treatmentMethod}}">
              <view class="item-label">💊 治疗方式</view>
              <view class="item-value">{{item.treatmentMethod}}</view>
            </view>
            
            <!-- 治疗方案描述 -->
            <view class="plan-item" wx:if="{{item.treatmentDesc}}">
              <view class="item-label">📝 方案描述</view>
              <view class="item-value">{{item.treatmentDesc}}</view>
            </view>
            
            <!-- 注意事项 -->
            <view class="plan-item" wx:if="{{item.precautions}}">
              <view class="item-label">⚠️ 注意事项</view>
              <view class="item-value precautions-text">{{item.precautions}}</view>
            </view>
            
            <!-- 如果有图片展示在底部 -->
            <view wx:if="{{item.images && item.images.length > 0}}" class="plan-images">
              <scroll-view scroll-x class="plan-images-scroll" show-scrollbar="{{false}}">
                <view class="plan-images-container">
                  <block wx:for="{{item.images}}" wx:key="this" wx:for-index="imgIdx">
                    <image class="plan-thumb" src="{{baseUrl + item.images[imgIdx]}}" mode="aspectFill" bindtap="previewPlanImage" data-url="{{baseUrl + item.images[imgIdx]}}" data-urls="{{item.images}}" data-base="{{baseUrl}}"></image>
                  </block>
                </view>
              </scroll-view>
            </view>
          </view>
        </block>
        
        <!-- 空状态 -->
        <view wx:if="{{planList.length === 0}}" class="plan-empty">
          <text class="empty-icon">📭</text>
          <text class="empty-text">暂无治疗方案</text>
        </view>
        
        <!-- 加载更多提示 -->
        <view wx:if="{{planList.length > 0 && hasMorePlan}}" class="plan-loading-more" bindtap="loadMorePlan">
          <text class="loading-more-text">加载更多...</text>
        </view>
        
        <!-- 没有更多提示 -->
        <view wx:if="{{planList.length > 0 && !hasMorePlan}}" class="plan-no-more">
          <text class="no-more-text">—— 没有更多治疗方案 ——</text>
        </view>
      </view>
      
      <!-- 底部安全填充区，确保最后一条内容能完全显示 -->
      <view class="modal-bottom-fill"></view>
    </scroll-view>

  </view>
</view>
</view>