Browse Source

问兽医详情页增加诊疗方案信息列表

master
ZhaoYang 1 month ago
parent
commit
77f43a685a
  1. 8
      pagesA/pages/askingSy/askingSy.js
  2. 4
      pagesA/pages/askingSy/askingSy.wxml
  3. 214
      pagesA/pages/askingSyDetails/askingSyDetails.js
  4. 130
      pagesA/pages/askingSyDetails/askingSyDetails.wxml
  5. 452
      pagesA/pages/askingSyDetails/askingSyDetails.wxss
  6. 17
      utils/api.js

8
pagesA/pages/askingSy/askingSy.js

@ -1,7 +1,9 @@
import http from '../../../utils/api' import http from '../../../utils/api'
const baseUrl = require('../../../utils/baseUrl')
Page({ Page({
data: { data: {
diagnosisList: []
diagnosisList: [],
baseUrl:baseUrl
}, },
onLoad: function () { onLoad: function () {
@ -63,9 +65,9 @@ Page({
// 查看详情 // 查看详情
viewDetail: function (e) { viewDetail: function (e) {
const data = e.currentTarget.dataset.value
const id = e.currentTarget.dataset.id
wx.navigateTo({ wx.navigateTo({
url: `/pagesA/pages/askingSyDetails/askingSyDetails?data=${encodeURIComponent(JSON.stringify(data))}`,
url: `/pagesA/pages/askingSyDetails/askingSyDetails?id=${id}`,
}); });
}, },

4
pagesA/pages/askingSy/askingSy.wxml

@ -29,11 +29,11 @@
<text class="section-count">{{diagnosisList.length}}条</text> <text class="section-count">{{diagnosisList.length}}条</text>
</view> </view>
<view wx:for="{{diagnosisList}}" wx:key="id" class="record-card" bindtap="viewDetail" data-value="{{item}}">
<view wx:for="{{diagnosisList}}" wx:key="id" class="record-card" bindtap="viewDetail" data-id="{{item.formId}}">
<!-- 卡片头部:用户信息 + 状态 --> <!-- 卡片头部:用户信息 + 状态 -->
<view class="card-header"> <view class="card-header">
<view class="user-section"> <view class="user-section">
<image class="user-avatar" src="{{item.userInfo.avatar || '/pages/images/tx.png'}}"></image>
<image class="user-avatar" src="{{baseUrl+item.avatar || '/pages/images/tx.png'}}"></image>
<text class="user-name">{{item.farmerName || '用户'}}</text> <text class="user-name">{{item.farmerName || '用户'}}</text>
</view> </view>
<view class="status-tag {{item.status === '已回复' ? 'status-replied' : 'status-pending'}}"> <view class="status-tag {{item.status === '已回复' ? 'status-replied' : 'status-pending'}}">

214
pagesA/pages/askingSyDetails/askingSyDetails.js

@ -9,67 +9,65 @@ Page({
diagnosisData: {}, diagnosisData: {},
replies: [], replies: [],
baseUrl: baseUrl, baseUrl: baseUrl,
refreshing: false
refreshing: false,
showPlanModal: false, // 控制弹框显示
planList: [] // 方案列表数据
}, },
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(options) { onLoad(options) {
if (options.data) {
// 根据id加载兽医回复数据
const data = JSON.parse(decodeURIComponent(options.data));
if (options.id) {
this.getwzdetails(options.id)
}
},
// 处理用户图片 - 确保是数组格式
if (data.images) {
if (typeof data.images === 'string') {
data.images = data.images.split(',')
// 问诊单详情
getwzdetails(id) {
http.wzdDetails({
data: {
id: id
},
success: res => {
console.log(1111, res);
if (res.data.images) {
if (typeof res.data.images === 'string') {
res.data.images = res.data.images.split(',')
} }
console.log('用户图片:', data.images);
} else { } else {
data.images = [];
res.data.images = [];
} }
this.loadDiagnosisData(res.data.formId);
this.setData({ this.setData({
diagnosisData: data,
diagnosisData: res.data,
}) })
this.loadDiagnosisData(data.formId);
} }
})
}, },
/**
* 加载问诊数据兽医回复
* @param {string} id - 问诊ID
*/
// 加载问诊数据(兽医回复)
loadDiagnosisData(id) { loadDiagnosisData(id) {
console.log('加载问诊数据:', id);
http.wzdxq({ http.wzdxq({
data: { data: {
consultationId: id consultationId: id
}, },
success: res => { success: res => {
// 处理兽医回复的图片
let replies = []; let replies = [];
if (res && res.rows) { if (res && res.rows) {
replies = res.rows || []; replies = res.rows || [];
// 遍历每个回复,处理图片字段
for (let i = 0; i < replies.length; i++) { for (let i = 0; i < replies.length; i++) {
const item = replies[i]; const item = replies[i];
// 处理图片 - 确保是数组格式
if (item.images) { if (item.images) {
if (typeof item.images === 'string') { if (typeof item.images === 'string') {
// 如果是空字符串,设为空数组
if (item.images.trim() === '') { if (item.images.trim() === '') {
item.images = []; item.images = [];
} else { } else {
// 按逗号分割字符串
item.images = item.images.split(','); item.images = item.images.split(',');
} }
} else if (Array.isArray(item.images)) { } else if (Array.isArray(item.images)) {
// 已经是数组,但需要过滤空值
item.images = item.images.filter(img => img && img.trim() !== ''); item.images = item.images.filter(img => img && img.trim() !== '');
} else { } else {
item.images = []; item.images = [];
@ -77,66 +75,123 @@ Page({
} else { } else {
item.images = []; item.images = [];
} }
console.log(`兽医回复[${i}]图片:`, item.images);
} }
} }
console.log('兽医回复数据:', replies);
this.setData({ this.setData({
replies: replies replies: replies
}) })
}, },
fail: err => { fail: err => {
console.error('加载回复失败:', err);
wx.showToast({ wx.showToast({
title: '加载失败', title: '加载失败',
icon: 'none' icon: 'none'
}); });
} }
})
});
}, },
/**
* 返回上一页
*/
goBack() {
wx.navigateBack();
// 获取方案列表
getplanDetails(id) {
http.planDetails({
data: {
consultationId: id
}, },
success: res => {
console.log('方案列表:', res);
let list = [];
if (res.rows) {
list = res.rows
/**
* 分享
*/
onShare() {
wx.showActionSheet({
itemList: ['分享给好友', '保存到相册'],
success: (res) => {
if (res.tapIndex === 0) {
// 处理图片字段
list.forEach(item => {
if (item.images) {
if (typeof item.images === 'string') {
item.images = item.images ? item.images.split(',') : [];
}
} else {
item.images = [];
}
});
}
this.setData({ planList: list });
},
fail: err => {
console.error('获取方案列表失败', err);
wx.showToast({ wx.showToast({
title: '已分享',
icon: 'success'
title: '获取方案失败',
icon: 'none'
}); });
} }
});
},
// 显示方案弹框
showPlanModal() {
const consultationId = this.data.diagnosisData.id || this.data.diagnosisData.formId;
if (!consultationId) {
wx.showToast({ title: '问诊单ID不存在', icon: 'none' });
return;
} }
wx.showLoading({ title: '加载中...', mask: true });
this.getplanDetails(consultationId);
setTimeout(() => {
wx.hideLoading();
this.setData({ showPlanModal: true });
}, 500);
},
// 隐藏方案弹框
hidePlanModal() {
this.setData({ showPlanModal: false });
},
// 阻止事件冒泡
stopPropagation() {
return;
},
// 阻止触摸滚动
preventTouch() {
return;
},
// 预览方案图片
previewPlanImage(e) {
const dataset = e.currentTarget.dataset;
const currentUrl = dataset.url;
const urls = dataset.urls || [];
const base = dataset.base || baseUrl;
const fullUrls = urls.map(item => {
if (typeof item === 'string' && (item.startsWith('http://') || item.startsWith('https://'))) {
return item;
}
return base + item;
});
wx.previewImage({
current: currentUrl,
urls: fullUrls
}); });
}, },
/**
* 返回上一页
*/
goBack() {
wx.navigateBack();
},
/** /**
* 下拉刷新 * 下拉刷新
*/ */
onRefresh() { onRefresh() {
this.setData({
refreshing: true
});
this.setData({ refreshing: true });
if (this.data.diagnosisData && this.data.diagnosisData.formId) { if (this.data.diagnosisData && this.data.diagnosisData.formId) {
this.loadDiagnosisData(this.data.diagnosisData.formId)
this.loadDiagnosisData(this.data.diagnosisData.formId);
} }
setTimeout(() => { setTimeout(() => {
this.setData({
refreshing: false
});
this.setData({ refreshing: false });
wx.showToast({ wx.showToast({
title: '刷新成功', title: '刷新成功',
icon: 'success' icon: 'success'
@ -151,18 +206,12 @@ Page({
const dataset = e.currentTarget.dataset; const dataset = e.currentTarget.dataset;
const current = dataset.url; const current = dataset.url;
const urls = dataset.urls || []; const urls = dataset.urls || [];
// 构建完整URL数组
const urlsArray = urls.map(item => { const urlsArray = urls.map(item => {
// 如果已经是完整URL,直接返回
if (typeof item === 'string' && (item.startsWith('http://') || item.startsWith('https://'))) { if (typeof item === 'string' && (item.startsWith('http://') || item.startsWith('https://'))) {
return item; return item;
} }
// 否则拼接baseUrl
return baseUrl + item; return baseUrl + item;
}); });
console.log('预览用户图片:', urlsArray);
wx.previewImage({ wx.previewImage({
current: current, current: current,
urls: urlsArray urls: urlsArray
@ -170,39 +219,27 @@ Page({
}, },
/** /**
* 预览兽医回复图片 - 修复版
* 预览兽医回复图片
*/ */
previewReplyImage(e) { previewReplyImage(e) {
const dataset = e.currentTarget.dataset; const dataset = e.currentTarget.dataset;
// 获取数据 - 使用三种可能的来源
const currentFileName = dataset.url; // 当前点击的图片文件名
const currentFullUrl = dataset.fullurl; // 当前点击的图片完整URL
const urlsArray = dataset.urls || []; // 该回复的所有图片文件名数组
const currentIndex = dataset.currentIndex || 0; // 当前点击图片的索引
const replyIndex = dataset.replyIndex; // 回复在列表中的索引
console.log('预览兽医图片 - 数据集:', dataset);
// 方法1: 从replies数据中获取当前回复的图片列表
let targetUrls = [];
let targetCurrentUrl = '';
const currentFileName = dataset.url;
const currentFullUrl = dataset.fullurl;
const urlsArray = dataset.urls || [];
const currentIndex = dataset.currentIndex || 0;
const replyIndex = dataset.replyIndex;
if (replyIndex !== undefined && this.data.replies[replyIndex]) { if (replyIndex !== undefined && this.data.replies[replyIndex]) {
// 从replies数据中获取完整的图片列表
const reply = this.data.replies[replyIndex]; const reply = this.data.replies[replyIndex];
if (reply.images && reply.images.length > 0) { if (reply.images && reply.images.length > 0) {
targetUrls = reply.images;
// 构建完整URL数组
const targetUrls = reply.images;
const fullUrls = targetUrls.map(img => { const fullUrls = targetUrls.map(img => {
if (typeof img === 'string' && (img.startsWith('http://') || img.startsWith('https://'))) { if (typeof img === 'string' && (img.startsWith('http://') || img.startsWith('https://'))) {
return img; return img;
} }
return baseUrl + img; return baseUrl + img;
}); });
// 确定当前图片的完整URL
let targetCurrentUrl = '';
if (currentIndex < fullUrls.length) { if (currentIndex < fullUrls.length) {
targetCurrentUrl = fullUrls[currentIndex]; targetCurrentUrl = fullUrls[currentIndex];
} else if (currentFullUrl) { } else if (currentFullUrl) {
@ -210,9 +247,6 @@ Page({
} else if (currentFileName) { } else if (currentFileName) {
targetCurrentUrl = baseUrl + currentFileName; targetCurrentUrl = baseUrl + currentFileName;
} }
console.log('预览兽医回复图片(从replies数据):', fullUrls, '当前:', targetCurrentUrl);
wx.previewImage({ wx.previewImage({
current: targetCurrentUrl, current: targetCurrentUrl,
urls: fullUrls urls: fullUrls
@ -221,17 +255,13 @@ Page({
} }
} }
// 方法2: 使用dataset中的数据
if (urlsArray && urlsArray.length > 0) { if (urlsArray && urlsArray.length > 0) {
// 构建完整URL数组
const fullUrls = urlsArray.map(item => { const fullUrls = urlsArray.map(item => {
if (typeof item === 'string' && (item.startsWith('http://') || item.startsWith('https://'))) { if (typeof item === 'string' && (item.startsWith('http://') || item.startsWith('https://'))) {
return item; return item;
} }
return baseUrl + item; return baseUrl + item;
}); });
// 确定当前图片的完整URL
let currentUrl = ''; let currentUrl = '';
if (currentFullUrl) { if (currentFullUrl) {
currentUrl = currentFullUrl; currentUrl = currentFullUrl;
@ -240,9 +270,6 @@ Page({
} else if (currentFileName) { } else if (currentFileName) {
currentUrl = baseUrl + currentFileName; currentUrl = baseUrl + currentFileName;
} }
console.log('预览兽医回复图片(从dataset):', fullUrls, '当前:', currentUrl);
wx.previewImage({ wx.previewImage({
current: currentUrl, current: currentUrl,
urls: fullUrls urls: fullUrls
@ -250,16 +277,13 @@ Page({
return; return;
} }
// 方法3: 只预览单张图片
if (currentFullUrl) { if (currentFullUrl) {
console.log('预览单张兽医图片:', [currentFullUrl]);
wx.previewImage({ wx.previewImage({
current: currentFullUrl, current: currentFullUrl,
urls: [currentFullUrl] urls: [currentFullUrl]
}); });
} else if (currentFileName) { } else if (currentFileName) {
const fullUrl = baseUrl + currentFileName; const fullUrl = baseUrl + currentFileName;
console.log('预览单张兽医图片(拼接后):', [fullUrl]);
wx.previewImage({ wx.previewImage({
current: fullUrl, current: fullUrl,
urls: [fullUrl] urls: [fullUrl]

130
pagesA/pages/askingSyDetails/askingSyDetails.wxml

@ -1,7 +1,8 @@
<!-- 页面结构 -->
<view class="xqbox"> <view class="xqbox">
<!-- 页面内容 --> <!-- 页面内容 -->
<scroll-view class="page-content" scroll-y refresher-enabled refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh">
<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-query-card card-enter">
@ -54,21 +55,20 @@
<view class="images-container"> <view class="images-container">
<block wx:for="{{diagnosisData.images}}" wx:key="*this" wx:for-index="index"> <block wx:for="{{diagnosisData.images}}" wx:key="*this" wx:for-index="index">
<view class="image-wrapper"> <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>
<image class="symptom-image" src="{{baseUrl+item}}" mode="aspectFill" bindtap="previewImage" data-url="{{baseUrl+item}}" data-urls="{{diagnosisData.images}}" data-type="user"></image>
</view> </view>
</block> </block>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<!-- 方案制定按钮 -->
<view class="fazd" bindtap="showPlanModal">
<view class="zdnr pulse">
方案制定查看
</view>
</view>
<!-- 卡片装饰 --> <!-- 卡片装饰 -->
<view class="card-decoration"> <view class="card-decoration">
<view class="decoration-dot dot-1"></view> <view class="decoration-dot dot-1"></view>
@ -121,24 +121,13 @@
<text class="reply-text">{{item.content}}</text> <text class="reply-text">{{item.content}}</text>
</view> </view>
<!-- 兽医回复图片 - 优化后的图片网格布局,支持预览 -->
<!-- 兽医回复图片 -->
<view wx:if="{{item.images && item.images.length > 0}}" class="reply-images-section"> <view wx:if="{{item.images && item.images.length > 0}}" class="reply-images-section">
<view class="reply-images-grid grid-{{item.images.length}}"> <view class="reply-images-grid grid-{{item.images.length}}">
<block wx:for="{{item.images}}" wx:key="this" wx:for-index="imgIndex"> <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 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"> <view wx:if="{{item.images.length > 4 && imgIndex === 3}}" class="image-more-mask">
<text class="more-count">+{{item.images.length - 4}}</text> <text class="more-count">+{{item.images.length - 4}}</text>
</view> </view>
@ -172,6 +161,95 @@
</view> </view>
<!-- 底部安全区域 --> <!-- 底部安全区域 -->
<view class="page-bottom"></view>
<view class="page-bottom-safe">
<view class="bottom-content">
<text class="bottom-text">—— 已经没有更多了 ——</text>
</view>
</view>
</scroll-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> </view>

452
pagesA/pages/askingSyDetails/askingSyDetails.wxss

@ -1,14 +1,27 @@
.xqbox { .xqbox {
background: linear-gradient(180deg, #F8FBFF 0%, #F0F7FF 100%); background: linear-gradient(180deg, #F8FBFF 0%, #F0F7FF 100%);
min-height: 100vh; min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
} }
/* 页面内容 */ /* 页面内容 */
.page-content { .page-content {
height: calc(100vh - 120rpx);
height: 100vh;
padding-bottom: 40rpx;
box-sizing: border-box; box-sizing: border-box;
} }
/* iOS 底部安全区域适配 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.page-content {
padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}
}
/* 动画效果 */ /* 动画效果 */
@keyframes cardEnter { @keyframes cardEnter {
0% { 0% {
@ -43,9 +56,15 @@
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10rpx); }
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(100rpx) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
} }
.card-enter { .card-enter {
@ -66,14 +85,6 @@
animation: pulse 2s infinite; animation: pulse 2s infinite;
} }
.hover-effect {
transition: all 0.3s ease;
}
.hover-effect:active {
transform: scale(0.95);
}
/* 渐变背景 */ /* 渐变背景 */
.gradient-blue { .gradient-blue {
background: linear-gradient(135deg, #6D9EFF 0%, #4A7CFF 100%); background: linear-gradient(135deg, #6D9EFF 0%, #4A7CFF 100%);
@ -173,8 +184,6 @@
box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.3); box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.3);
} }
.user-details { .user-details {
flex: 1; flex: 1;
} }
@ -244,8 +253,6 @@
align-self: flex-start; align-self: flex-start;
} }
.time-text { .time-text {
font-size: 24rpx; font-size: 24rpx;
color: #6D9EFF; color: #6D9EFF;
@ -265,9 +272,6 @@
margin-bottom: 28rpx; margin-bottom: 28rpx;
} }
.section-title { .section-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 700; font-weight: 700;
@ -364,7 +368,6 @@
border-radius: 20rpx; border-radius: 20rpx;
} }
/* 兽医回复区域 */ /* 兽医回复区域 */
.replies-section { .replies-section {
margin: 24rpx; margin: 24rpx;
@ -409,7 +412,6 @@
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
} }
/* 兽医信息 */ /* 兽医信息 */
.vet-info { .vet-info {
display: flex; display: flex;
@ -483,8 +485,6 @@
border-radius: 16rpx; border-radius: 16rpx;
} }
.vet-hospital, .vet-hospital,
.vet-experience { .vet-experience {
font-size: 24rpx; font-size: 24rpx;
@ -543,7 +543,6 @@
border-radius: 20rpx; border-radius: 20rpx;
} }
/* 无回复状态 */ /* 无回复状态 */
.no-replies { .no-replies {
background: #FFFFFF; background: #FFFFFF;
@ -556,7 +555,6 @@
overflow: hidden; overflow: hidden;
} }
.no-replies-title { .no-replies-title {
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
@ -589,16 +587,48 @@
animation: pulse 1.5s infinite ease-in-out; animation: pulse 1.5s infinite ease-in-out;
} }
.fazd {
width: 100%;
display: flex;
justify-content: flex-end;
}
.zdnr {
display: inline-block;
background-color: #5587FF;
color: #fff;
margin: 20rpx;
padding: 10rpx 20rpx;
border-radius: 10rpx;
font-size: 28rpx;
}
.loading-dot.dot-1 { animation-delay: 0s; } .loading-dot.dot-1 { animation-delay: 0s; }
.loading-dot.dot-2 { animation-delay: 0.2s; } .loading-dot.dot-2 { animation-delay: 0.2s; }
.loading-dot.dot-3 { animation-delay: 0.4s; } .loading-dot.dot-3 { animation-delay: 0.4s; }
/* 页面底部安全区域 */
.page-bottom {
height: 60rpx;
/* 底部安全区域 */
.page-bottom-safe {
padding: 30rpx 0 40rpx;
margin-top: 20rpx;
text-align: center;
}
.bottom-content {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 0;
} }
/* 新增兽医回复图片预览 */
.bottom-text {
font-size: 24rpx;
color: #999;
opacity: 0.8;
letter-spacing: 2rpx;
}
/* 兽医回复图片预览 */
.reply-images-section { .reply-images-section {
margin-top: 24rpx; margin-top: 24rpx;
padding: 0 8rpx; padding: 0 8rpx;
@ -610,7 +640,6 @@
width: 100%; width: 100%;
} }
/* 根据图片数量自适应网格 */
.reply-images-grid.grid-1 { .reply-images-grid.grid-1 {
grid-template-columns: repeat(1, minmax(200rpx, 320rpx)); grid-template-columns: repeat(1, minmax(200rpx, 320rpx));
justify-content: start; justify-content: start;
@ -623,7 +652,6 @@
.reply-images-grid.grid-3, .reply-images-grid.grid-3,
.reply-images-grid.grid-4, .reply-images-grid.grid-4,
.reply-images-grid:not(.grid-1):not(.grid-2) { .reply-images-grid:not(.grid-1):not(.grid-2) {
/* 超过2张时显示为2列网格*/
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@ -632,7 +660,7 @@
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
background-color: #f5f5f5; background-color: #f5f5f5;
aspect-ratio: 1 / 1; /* 保持正方形 */
aspect-ratio: 1 / 1;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
@ -648,7 +676,7 @@
object-fit: cover; object-fit: cover;
} }
/* 图片数量遮罩(超过4张时显示) */
/* 图片数量遮罩 */
.image-more-mask { .image-more-mask {
position: absolute; position: absolute;
top: 0; top: 0;
@ -668,3 +696,361 @@
font-weight: 700; font-weight: 700;
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3); text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
} }
.modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
animation: fadeIn 0.3s ease;
backdrop-filter: blur(8rpx);
/* 确保在 iOS 上正确显示 */
-webkit-backdrop-filter: blur(8rpx);
}
/* 弹框内容 - 优化高度计算 */
.modal-content {
width: 700rpx;
max-height: 80vh;
background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%);
border-radius: 40rpx;
overflow: hidden;
box-shadow: 0 40rpx 80rpx rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
/* 优化显示 */
display: flex;
flex-direction: column;
}
/* 弹框头部 - 固定在顶部 */
.modal-header {
padding: 30rpx 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #E5F0FF;
background: linear-gradient(90deg, #6D9EFF 0%, #4A7CFF 100%);
flex-shrink: 0;
}
.modal-title {
font-size: 36rpx;
font-weight: 700;
color: #FFFFFF;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
letter-spacing: 1rpx;
}
.modal-close {
width: 48rpx;
height: 48rpx;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
.modal-close:active {
background: rgba(255, 255, 255, 0.5);
transform: scale(0.9);
}
.close-icon {
color: #FFFFFF;
font-size: 36rpx;
font-weight: 500;
line-height: 1;
}
/* 弹框主体*/
.modal-body {
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 0;
box-sizing: border-box;
/* 优化滚动条 */
scrollbar-width: thin;
scrollbar-color: #6D9EFF #E5F0FF;
}
/* 自定义滚动条样式 */
.modal-body::-webkit-scrollbar {
width: 6rpx;
}
.modal-body::-webkit-scrollbar-track {
background: #E5F0FF;
border-radius: 3rpx;
}
.modal-body::-webkit-scrollbar-thumb {
background: #6D9EFF;
border-radius: 3rpx;
}
.modal-body::-webkit-scrollbar-thumb:hover {
background: #4A7CFF;
}
/* 方案列表容器 */
.plan-list {
display: flex;
flex-direction: column;
gap: 24rpx;
padding: 30rpx;
}
/* 方案卡片 */
.plan-card {
background: #FFFFFF;
border-radius: 28rpx;
padding: 30rpx;
box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.15);
border: 2rpx solid #E5F0FF;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.plan-card:last-child {
margin-bottom: 0;
}
.plan-card:active {
transform: translateY(-4rpx);
box-shadow: 0 16rpx 40rpx rgba(74, 144, 226, 0.25);
}
/* 兽医信息行 */
.plan-vet-row {
display: flex;
align-items: center;
margin-bottom: 24rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx dashed #E5F0FF;
}
.plan-avatar {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
margin-right: 20rpx;
border: 3rpx solid #FFFFFF;
box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
flex-shrink: 0;
}
.plan-vet-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.plan-user-name {
font-size: 32rpx;
font-weight: 700;
color: #1A1A1A;
line-height: 1.2;
}
.plan-title-tag {
font-size: 22rpx;
background: linear-gradient(135deg, #FFD700 0%, #FFB300 100%);
color: #FFFFFF;
padding: 4rpx 16rpx;
border-radius: 20rpx;
display: inline-block;
align-self: flex-start;
font-weight: 600;
box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
}
/* 方案条目 */
.plan-item {
margin-bottom: 24rpx;
background: #F8FBFF;
border-radius: 20rpx;
padding: 20rpx;
border: 2rpx solid #E5F0FF;
}
.plan-item:last-child {
margin-bottom: 0;
}
.item-label {
font-size: 26rpx;
font-weight: 600;
color: #4A7CFF;
margin-bottom: 12rpx;
display: flex;
align-items: center;
gap: 8rpx;
}
.item-value {
font-size: 28rpx;
color: #333;
line-height: 1.6;
word-break: break-word;
}
.diagnosis-text {
font-weight: 500;
color: #1A1A1A;
background: rgba(109, 158, 255, 0.1);
padding: 16rpx;
border-radius: 16rpx;
}
.precautions-text {
color: #FF6B6B;
background: rgba(255, 107, 107, 0.05);
padding: 16rpx;
border-radius: 16rpx;
}
/* 方案图片 */
.plan-images {
margin-top: 24rpx;
padding-top: 20rpx;
border-top: 2rpx solid #E5F0FF;
}
.plan-images-scroll {
width: 100%;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4rpx;
}
.plan-images-scroll::-webkit-scrollbar {
height: 4rpx;
}
.plan-images-scroll::-webkit-scrollbar-track {
background: #E5F0FF;
border-radius: 2rpx;
}
.plan-images-scroll::-webkit-scrollbar-thumb {
background: #6D9EFF;
border-radius: 2rpx;
}
.plan-images-container {
display: flex;
gap: 16rpx;
padding: 8rpx 0;
}
.plan-thumb {
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
flex-shrink: 0;
}
.plan-thumb:active {
transform: scale(0.95);
}
/* 加载更多提示 */
.plan-loading-more,
.plan-no-more {
padding: 30rpx 0 20rpx;
text-align: center;
}
.loading-more-text {
font-size: 26rpx;
color: #6D9EFF;
font-weight: 500;
padding: 10rpx 30rpx;
background: rgba(109, 158, 255, 0.1);
border-radius: 40rpx;
display: inline-block;
}
.no-more-text {
font-size: 24rpx;
color: #999;
opacity: 0.6;
}
/* 底部填充区域 */
.modal-bottom-fill {
height: 20rpx;
width: 100%;
}
/* 空状态 */
.plan-empty {
padding: 80rpx 0;
text-align: center;
background: #F8FBFF;
border-radius: 28rpx;
}
.empty-icon {
font-size: 80rpx;
display: block;
margin-bottom: 20rpx;
opacity: 0.5;
}
.empty-text {
font-size: 28rpx;
color: #999;
font-weight: 500;
}
/* iOS 底部安全区域适配 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.modal-footer {
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
}
.fazd {
width: 100%;
display: flex;
justify-content: flex-end;
cursor: pointer;
}
.zdnr {
display: inline-block;
background: linear-gradient(135deg, #5587FF 0%, #3A6AFF 100%);
color: #fff;
margin: 20rpx;
padding: 16rpx 32rpx;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 600;
box-shadow: 0 8rpx 24rpx rgba(85, 135, 255, 0.4);
transition: all 0.3s ease;
}
.zdnr:active {
transform: scale(0.95);
box-shadow: 0 4rpx 12rpx rgba(85, 135, 255, 0.3);
}

17
utils/api.js

@ -71,6 +71,18 @@ function wzd(params) {
http('/muhu/consultation/list', 'get', params) http('/muhu/consultation/list', 'get', params)
} }
//问诊单详情
function wzdDetails(params) {
http('/muhu/consultation/' + params.data.id, 'get', params)
}
// 问兽医-问诊单制定方案详情
function planDetails(params) {
http('/vet/plan/list', 'get', params)
}
// 问兽医-问诊单新增 // 问兽医-问诊单新增
function wzdAdd(params) { function wzdAdd(params) {
http('/muhu/consultation', 'post', params) http('/muhu/consultation', 'post', params)
@ -81,6 +93,7 @@ function wzdxq(params) {
http('/vet/comments/list', 'get', params) http('/vet/comments/list', 'get', params)
} }
// 专家列表 // 专家列表
function expertsList(params) { function expertsList(params) {
http('/vet/experts/list', 'get', params) http('/vet/experts/list', 'get', params)
@ -212,8 +225,6 @@ function shareAdd(params) {
} }
// 实名认证 // 实名认证
function realName(params) { function realName(params) {
http('/muhu/user/auth/submit', 'post', params) http('/muhu/user/auth/submit', 'post', params)
@ -246,5 +257,5 @@ export default { // 暴露接口
recommendationXq,queryList,tipList,article,articleDetails,articleZd,policyelucidation, recommendationXq,queryList,tipList,article,articleDetails,articleZd,policyelucidation,
areaChildren,userCode,UserInfo,videoList,videoZd,videoDetails,forumList,forumAdd,forumDetails, areaChildren,userCode,UserInfo,videoList,videoZd,videoDetails,forumList,forumAdd,forumDetails,
forumReply,commentReply,experience,experiencezd,experienceDetails,realName,revise,feedback, forumReply,commentReply,experience,experiencezd,experienceDetails,realName,revise,feedback,
warningType,disasterDetail,today,carouselDetail
warningType,disasterDetail,today,carouselDetail,planDetails,wzdDetails
} }
Loading…
Cancel
Save