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.
255 lines
11 KiB
255 lines
11 KiB
<!-- 页面结构 -->
|
|
<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>
|