与牧同行-小程序用户端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

160 lines
6.2 KiB

<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>