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.
|
|
<view class="xqbox">
<!-- 页面内容 --><scroll-view class="page-content" scroll-y refresher-enabled refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh" scroll-with-animation="{{true}}"> <!-- 用户问诊卡片 --> <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="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="bottom-placeholder" wx:if="{{showReplyInput}}"></view></scroll-view>
<!-- 回复输入区域 - 固定在底部 --><view class="reply-input-section {{showReplyInput ? 'show' : ''}}" wx:if="{{showReplyInput}}"> <view class="reply-input-container"> <!-- 图片预览区 - 添加删除全部图标 --> <view class="reply-image-preview" wx:if="{{replyImagesTemp.length > 0}}"> <view class="preview-header"> <text class="preview-title">已选图片 ({{replyImagesTemp.length}}/9)</text> <view class="clear-all-btn" bindtap="clearAllImages" wx:if="{{replyImagesTemp.length > 0}}"> <text class="clear-icon">🗑️</text> <text class="clear-text">清空全部</text> </view> </view> <scroll-view class="preview-scroll" scroll-x> <view class="preview-list"> <block wx:for="{{replyImagesTemp}}" wx:key="index" wx:for-index="imgIndex"> <view class="preview-item"> <image class="preview-img" src="{{item}}" mode="aspectFill"></image> <view class="preview-remove" bindtap="removeReplyImage" data-index="{{imgIndex}}"> <text class="remove-icon">×</text> </view> </view> </block> </view> </scroll-view> </view> <!-- 输入工具栏 --> <view class="input-toolbar"> <textarea class="reply-textarea" placeholder="请输入回复内容..." placeholder-class="textarea-placeholder" value="{{replyContent}}" bindinput="onReplyContentInput" auto-height maxlength="{{500}}" show-confirm-bar="{{false}}" ></textarea> <view class="toolbar-actions"> <view class="action-left"> <view class="action-item" bindtap="chooseReplyImage"> <text class="action-icon">📷</text> <text class="action-text">图片</text> </view> <view class="image-count-badge" wx:if="{{replyImagesTemp.length > 0}}"> <text class="count-text">{{replyImagesTemp.length}}</text> </view> </view> <view class="action-right"> <button class="submit-reply-btn {{replyContent || replyImages.length > 0 ? 'active' : ''}}" bindtap="submitReply" disabled="{{!replyContent && replyImages.length === 0}}"> 发送回复 </button> </view> </view> </view> </view></view>
<!-- 未登录或非兽医时显示的提示 --><view class="no-reply-permission" wx:elif="{{!isVet}}"> <text class="no-permission-text">仅兽医可回复</text></view>
</view>
|
