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

<view class="xqbox">

  <!-- 页面内容 -->
  <scroll-view class="page-content" scroll-y refresher-enabled refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh">
    
    <!-- 用户问诊卡片 -->
    <view class="user-query-card card-enter">
      <!-- 用户信息 -->
      <view class="user-info-section">
        <view class="avatar-wrapper">
          <image class="user-avatar" src="/pages/images/tx.png"></image>
        </view>
        <view class="user-details">
          <view class="user-name-row">
            <text class="user-name">{{diagnosisData.userInfo.nickName || '用户'}}</text>
            <view class="status-badge {{diagnosisData.status === 'replied' ? 'status-replied' : 'status-pending'}} pulse">
              {{diagnosisData.status === 'replied' ? '已回复' : '待回复'}}
            </view>
          </view>
          <view class="pet-info">
            <view class="pet-info-tags">
              <view class="pet-tag gradient-blue">{{diagnosisData.petInfo.type}}</view>
              <view class="pet-tag gradient-orange">{{diagnosisData.petInfo.age}}岁</view>
              <view class="pet-tag gradient-pink">{{diagnosisData.petInfo.gender}}</view>
            </view>
            <view class="time-info">
              <text class="time-text">{{diagnosisData.createdAt}}</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="{{item}}" 
                  mode="aspectFill"
                  bindtap="previewImage"
                  data-url="{{item}}"
                  data-urls="{{diagnosisData.images}}"
                ></image>
                <view class="image-overlay">
                  <text class="image-index">{{index + 1}}</text>
                </view>
              </view>
            </block>
          </view>
        </scroll-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">{{diagnosisData.replies.length}}</text>
          <text class="count-text">条回复</text>
        </view>
      </view>

      <!-- 回复列表 -->
      <view class="replies-list">
        <block wx:for="{{diagnosisData.replies}}" wx:key="id" 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="/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.vet.name}}</text>
                  <view class="vet-badge gradient-gold">
                    <text class="vet-title">{{item.vet.title}}</text>
                  </view>
                </view>
                <view class="vet-meta">
                  <view class="meta-item">
                    <image class="meta-icon" src="/icons/hospital.svg"></image>
                    <text class="vet-hospital">{{item.vet.hospital}}</text>
                  </view>
                  <view class="meta-item">
                    <image class="meta-icon" src="/icons/experience.svg"></image>
                    <text class="vet-experience">{{item.vet.years}}年经验</text>
                  </view>
                </view>
              </view>
            </view>

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

            <!-- 回复底部 -->
            <view class="reply-footer">
              <view class="reply-time">
                <text class="time-text">{{item.createdAt}}</text>
              </view>
            </view>
            
            <!-- 回复装饰 -->
            <view class="reply-decoration">
              <image class="decoration-icon" src="/icons/star.svg"></image>
            </view>
          </view>
        </block>

        <!-- 无回复状态 -->
        <view wx:if="{{diagnosisData.replies.length === 0}}" class="no-replies fade-in">
          <image class="no-replies-icon" src="/images/waiting.png"></image>
          <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"></view>
  </scroll-view>
</view>