ZhaoYang
1 month ago
18 changed files with 2295 additions and 4 deletions
-
5app.json
-
8pages/home/home.js
-
2pages/home/home.wxml
-
4pages/login/login.js
-
BINpagesA/images/ch.png
-
BINpagesA/images/jh.png
-
104pagesA/pages/askingSy/askingSy.js
-
4pagesA/pages/askingSy/askingSy.json
-
87pagesA/pages/askingSy/askingSy.wxml
-
415pagesA/pages/askingSy/askingSy.wxss
-
148pagesA/pages/askingSyAdd/askingSyAdd.js
-
4pagesA/pages/askingSyAdd/askingSyAdd.json
-
163pagesA/pages/askingSyAdd/askingSyAdd.wxml
-
350pagesA/pages/askingSyAdd/askingSyAdd.wxss
-
198pagesA/pages/askingSyDetails/askingSyDetails.js
-
4pagesA/pages/askingSyDetails/askingSyDetails.json
-
160pagesA/pages/askingSyDetails/askingSyDetails.wxml
-
643pagesA/pages/askingSyDetails/askingSyDetails.wxss
|
After Width: 200 | Height: 200 | Size: 2.4 KiB |
|
After Width: 200 | Height: 200 | Size: 1.7 KiB |
@ -0,0 +1,104 @@ |
|||||
|
Page({ |
||||
|
data: { |
||||
|
diagnosisList: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
status: 'replied', |
||||
|
createdAt:'2025-02-12', |
||||
|
userInfo: { |
||||
|
avatar: '/pages/images/tx.png', |
||||
|
nickName: '张小明' |
||||
|
}, |
||||
|
petInfo: { |
||||
|
type: '狗', |
||||
|
age: 3, |
||||
|
gender: '公' |
||||
|
}, |
||||
|
description: '最近三天食欲不振，精神萎靡，偶尔呕吐黄色泡沫，大便偏软带血丝，体温正常但鼻头干燥。', |
||||
|
images: ['/images/pet1.jpg', '/images/pet2.jpg'], |
||||
|
replies: [{}, {}, {}] |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
status: 'pending', |
||||
|
createdAt: '2025-02-12', |
||||
|
userInfo: { |
||||
|
avatar: '/pages/images/tx.png', |
||||
|
nickName: '李小花' |
||||
|
}, |
||||
|
petInfo: { |
||||
|
type: '猫', |
||||
|
age: 2, |
||||
|
gender: '母' |
||||
|
}, |
||||
|
description: '今天发现眼睛有黄色分泌物，频繁抓挠眼睛周围，食欲正常但饮水量减少。', |
||||
|
images: ['/images/cat1.jpg'], |
||||
|
replies: [] |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
status: 'replied', |
||||
|
createdAt: '2025-02-12', |
||||
|
userInfo: { |
||||
|
avatar: '/pages/images/tx.png', |
||||
|
nickName: '王先生' |
||||
|
}, |
||||
|
petInfo: { |
||||
|
type: '狗', |
||||
|
age: 5, |
||||
|
gender: '公' |
||||
|
}, |
||||
|
description: '狗狗最近走路跛脚，右前腿不敢着地，触摸时会叫。之前从沙发上跳下来可能受伤了。', |
||||
|
images: [], |
||||
|
replies: [{}, {}] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
onLoad: function() { |
||||
|
// 页面加载
|
||||
|
}, |
||||
|
|
||||
|
// 格式化日期显示
|
||||
|
formatDate: function(dateString) { |
||||
|
const date = new Date(dateString); |
||||
|
const now = new Date(); |
||||
|
const diff = now - date; |
||||
|
const diffDays = Math.floor(diff / (1000 * 60 * 60 * 24)); |
||||
|
const diffHours = Math.floor(diff / (1000 * 60 * 60)); |
||||
|
const diffMinutes = Math.floor(diff / (1000 * 60)); |
||||
|
|
||||
|
if (diffMinutes < 60) { |
||||
|
return `${diffMinutes}分钟前`; |
||||
|
} else if (diffHours < 24) { |
||||
|
return `${diffHours}小时前`; |
||||
|
} else if (diffDays === 1) { |
||||
|
return '昨天'; |
||||
|
} else if (diffDays === 2) { |
||||
|
return '前天'; |
||||
|
} else if (diffDays < 7) { |
||||
|
return `${diffDays}天前`; |
||||
|
} else { |
||||
|
const month = date.getMonth() + 1; |
||||
|
const day = date.getDate(); |
||||
|
return `${month}月${day}日`; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 显示创建问诊单
|
||||
|
showCreateModal: function() { |
||||
|
wx.navigateTo({ |
||||
|
url: '/pagesA/pages/askingSyAdd/askingSyAdd', |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 查看详情
|
||||
|
viewDetail: function(e) { |
||||
|
const index = e.currentTarget.dataset.index; |
||||
|
const item = this.data.diagnosisList[index]; |
||||
|
wx.navigateTo({ |
||||
|
url: `/pagesA/pages/askingSyDetails/askingSyDetails`, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText":"问兽医", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,87 @@ |
|||||
|
<view class="wzbox"> |
||||
|
<!-- 顶部标题栏 --> |
||||
|
<view class="header"> |
||||
|
<view class="header-content"> |
||||
|
<view class="title-section"> |
||||
|
<text class="title">问诊</text> |
||||
|
<text class="subtitle">专业兽医在线解答</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="header-decoration"> |
||||
|
<view class="decoration-circle circle-1"></view> |
||||
|
<view class="decoration-circle circle-2"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 问诊记录列表 --> |
||||
|
<scroll-view class="record-list" scroll-y enable-back-to-top> |
||||
|
<!-- 空状态 --> |
||||
|
<view wx:if="{{diagnosisList.length === 0}}" class="empty-state"> |
||||
|
<image class="empty-icon" src="/images/empty-icon.png"></image> |
||||
|
<text class="empty-text">暂无问诊记录</text> |
||||
|
<text class="empty-tip">开始您的第一次问诊吧</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 问诊记录卡片 --> |
||||
|
<view wx:else class="records-container"> |
||||
|
<view class="section-header"> |
||||
|
<text class="section-title">问诊记录</text> |
||||
|
<text class="section-count">{{diagnosisList.length}}条</text> |
||||
|
</view> |
||||
|
|
||||
|
<view wx:for="{{diagnosisList}}" wx:key="id" class="record-card" bindtap="viewDetail" data-index="{{index}}"> |
||||
|
<!-- 卡片头部：用户信息 + 状态 --> |
||||
|
<view class="card-header"> |
||||
|
<view class="user-info"> |
||||
|
<image class="user-avatar" src="{{item.userInfo.avatar || '/icons/default-avatar.svg'}}"></image> |
||||
|
<view class="user-details"> |
||||
|
<text class="user-name">{{item.userInfo.nickName || '用户'}}</text> |
||||
|
<text class="pet-info">{{item.petInfo.type}}，{{item.petInfo.age}}岁，{{item.petInfo.gender}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="status-tag {{item.status === 'replied' ? 'status-replied' : 'status-pending'}}"> |
||||
|
{{item.status === 'replied' ? '已回复' : '待回复'}} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 症状描述 --> |
||||
|
<view class="symptom-section"> |
||||
|
<view class="section-title-row"> |
||||
|
<text class="section-title-text">症状描述</text> |
||||
|
</view> |
||||
|
<view class="symptom-content"> |
||||
|
<text class="symptom-text">{{item.description}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 卡片底部 --> |
||||
|
<view class="card-footer"> |
||||
|
<view class="footer-left"> |
||||
|
<view class="time-info"> |
||||
|
<text class="time-text">{{item.createdAt}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="footer-right"> |
||||
|
<view class="reply-info"> |
||||
|
<text class="reply-count">{{item.replies.length}}条回复</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 列表底部提示 --> |
||||
|
<view wx:if="{{diagnosisList.length > 0}}" class="list-footer"> |
||||
|
<text class="footer-text">已显示全部记录</text> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<!-- 新增问诊按钮 --> |
||||
|
<view class="create-btn-container"> |
||||
|
<view class="create-btn" bindtap="showCreateModal"> |
||||
|
<image class="btn-icon" src="/pagesA/images/jh.png"></image> |
||||
|
<text class="btn-text">问诊单</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,415 @@ |
|||||
|
/* 全局样式 */ |
||||
|
.wzbox{ |
||||
|
min-height: 100vh; |
||||
|
position: relative; |
||||
|
background: linear-gradient(180deg, #F8FBFF 0%, #F0F7FF 100%); |
||||
|
} |
||||
|
|
||||
|
/* 头部样式优化 */ |
||||
|
.header { |
||||
|
padding: 20rpx 40rpx 20rpx; |
||||
|
background: linear-gradient(135deg, #6D9EFF 0%, #4A7CFF 100%); |
||||
|
border-radius: 0 0 36rpx 36rpx; |
||||
|
box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.15); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.header-content { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.title-section { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 44rpx; |
||||
|
font-weight: 700; |
||||
|
color: #FFFFFF; |
||||
|
letter-spacing: 0.5rpx; |
||||
|
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-size: 28rpx; |
||||
|
color: rgba(255, 255, 255, 0.9); |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
/* 头部装饰元素 */ |
||||
|
.header-decoration { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
overflow: hidden; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.decoration-circle { |
||||
|
position: absolute; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(255, 255, 255, 0.08); |
||||
|
} |
||||
|
|
||||
|
.circle-1 { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
top: -80rpx; |
||||
|
right: -40rpx; |
||||
|
} |
||||
|
|
||||
|
.circle-2 { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
bottom: -40rpx; |
||||
|
left: -20rpx; |
||||
|
} |
||||
|
|
||||
|
/* 问诊记录列表 */ |
||||
|
.record-list { |
||||
|
height: calc(100vh - 200rpx); |
||||
|
padding: 0 32rpx 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.records-container { |
||||
|
padding-top: 24rpx; |
||||
|
} |
||||
|
|
||||
|
/* 列表头部 */ |
||||
|
.section-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 24rpx; |
||||
|
padding: 0 4rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 700; |
||||
|
color: #1A1A1A; |
||||
|
position: relative; |
||||
|
padding-left: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
width: 3rpx; |
||||
|
height: 20rpx; |
||||
|
background: linear-gradient(180deg, #6D9EFF 0%, #4A7CFF 100%); |
||||
|
border-radius: 2rpx; |
||||
|
} |
||||
|
|
||||
|
.section-count { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
background: #F0F7FF; |
||||
|
padding: 6rpx 16rpx; |
||||
|
border-radius: 16rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 问诊记录卡片 */ |
||||
|
.record-card { |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 24rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
box-shadow: 0 6rpx 24rpx rgba(74, 144, 226, 0.08); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1); |
||||
|
border: 1rpx solid #F0F7FF; |
||||
|
} |
||||
|
|
||||
|
.record-card:active { |
||||
|
transform: translateY(-2rpx); |
||||
|
box-shadow: 0 10rpx 30rpx rgba(74, 144, 226, 0.15); |
||||
|
} |
||||
|
|
||||
|
/* 卡片头部 */ |
||||
|
.card-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
padding: 28rpx 28rpx 24rpx; |
||||
|
border-bottom: 1rpx solid #F5F9FF; |
||||
|
} |
||||
|
|
||||
|
.user-info { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
gap: 16rpx; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.user-avatar { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
border-radius: 50%; |
||||
|
border: 2rpx solid rgba(255, 255, 255, 0.8); |
||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
.user-details { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 6rpx; |
||||
|
} |
||||
|
|
||||
|
.user-name { |
||||
|
font-size: 28rpx; |
||||
|
color: #1A1A1A; |
||||
|
font-weight: 600; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
.pet-info { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
font-weight: 400; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
/* 状态标签 - 移至右上角 */ |
||||
|
.status-tag { |
||||
|
padding: 8rpx 20rpx; |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 600; |
||||
|
min-width: 80rpx; |
||||
|
text-align: center; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.status-replied { |
||||
|
background: linear-gradient(135deg, rgba(76, 217, 100, 0.12) 0%, rgba(46, 204, 113, 0.12) 100%); |
||||
|
color: #2ECC71; |
||||
|
border: 1rpx solid rgba(46, 204, 113, 0.2); |
||||
|
} |
||||
|
|
||||
|
.status-pending { |
||||
|
background: linear-gradient(135deg, rgba(255, 149, 0, 0.12) 0%, rgba(255, 127, 0, 0.12) 100%); |
||||
|
color: #FF9500; |
||||
|
border: 1rpx solid rgba(255, 149, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
/* 症状描述 */ |
||||
|
.symptom-section { |
||||
|
padding: 24rpx 28rpx; |
||||
|
border-bottom: 1rpx solid #F5F9FF; |
||||
|
} |
||||
|
|
||||
|
.section-title-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12rpx; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.section-title-text { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
color: #1A1A1A; |
||||
|
} |
||||
|
|
||||
|
.symptom-content { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.symptom-text { |
||||
|
flex: 1; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
line-height: 1.6; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
/* 卡片底部 */ |
||||
|
.card-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20rpx 28rpx; |
||||
|
} |
||||
|
|
||||
|
.time-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.time-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
.reply-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
padding: 8rpx 16rpx; |
||||
|
background: #F0F7FF; |
||||
|
border-radius: 16rpx; |
||||
|
border: 1rpx solid #E5EFFF; |
||||
|
} |
||||
|
|
||||
|
.reply-count { |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 500; |
||||
|
color: #4A7CFF; |
||||
|
} |
||||
|
|
||||
|
/* 空状态优化 */ |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
padding-top: 120rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.empty-icon { |
||||
|
width: 240rpx; |
||||
|
height: 180rpx; |
||||
|
margin-bottom: 32rpx; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 32rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 12rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.empty-tip { |
||||
|
font-size: 26rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 40rpx; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* 列表底部 */ |
||||
|
.list-footer { |
||||
|
text-align: center; |
||||
|
padding: 40rpx 0; |
||||
|
color: #999; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.footer-text { |
||||
|
opacity: 0.6; |
||||
|
letter-spacing: 1rpx; |
||||
|
} |
||||
|
|
||||
|
/* 新建问诊按钮优化 */ |
||||
|
.create-btn-container { |
||||
|
position: fixed; |
||||
|
bottom: 40rpx; |
||||
|
right: 32rpx; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
|
||||
|
.create-btn { |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
background: linear-gradient(135deg, #6D9EFF 0%, #4A7CFF 100%); |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-shadow: 0 8rpx 32rpx rgba(74, 144, 226, 0.3); |
||||
|
transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.create-btn::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.create-btn:active { |
||||
|
transform: scale(0.95); |
||||
|
box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.4); |
||||
|
} |
||||
|
|
||||
|
.create-btn:active::after { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.btn-icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-text { |
||||
|
font-size: 26rpx; |
||||
|
color: white; |
||||
|
font-weight: 600; |
||||
|
letter-spacing: 0.5rpx; |
||||
|
} |
||||
|
|
||||
|
/* 卡片入场动画 */ |
||||
|
@keyframes cardSlideIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(30rpx); |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.record-card { |
||||
|
animation: cardSlideIn 0.4s ease-out forwards; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.record-card:nth-child(1) { animation-delay: 0.1s; } |
||||
|
.record-card:nth-child(2) { animation-delay: 0.15s; } |
||||
|
.record-card:nth-child(3) { animation-delay: 0.2s; } |
||||
|
.record-card:nth-child(4) { animation-delay: 0.25s; } |
||||
|
.record-card:nth-child(5) { animation-delay: 0.3s; } |
||||
|
|
||||
|
/* 响应式适配 */ |
||||
|
@media screen and (min-width: 768px) { |
||||
|
.record-card { |
||||
|
max-width: 600rpx; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,148 @@ |
|||||
|
Page({ |
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
formData: { |
||||
|
petType: '', |
||||
|
petAge: '', |
||||
|
petGender: '', |
||||
|
symptoms: '', |
||||
|
images: [] |
||||
|
}, |
||||
|
symptomsLength: 0, |
||||
|
isSubmitting: false, |
||||
|
isFormValid: false |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad(options) { |
||||
|
// 初始化表单验证
|
||||
|
this.checkFormValidity(); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 宠物类型输入
|
||||
|
onPetTypeInput(e) { |
||||
|
const value = e.detail.value; |
||||
|
this.setData({ |
||||
|
'formData.petType': value |
||||
|
}, () => { |
||||
|
this.checkFormValidity(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 宠物年龄输入
|
||||
|
onPetAgeInput(e) { |
||||
|
const value = e.detail.value; |
||||
|
this.setData({ |
||||
|
'formData.petAge': value |
||||
|
}, () => { |
||||
|
this.checkFormValidity(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 选择性别
|
||||
|
selectGender(e) { |
||||
|
const value = e.currentTarget.dataset.value; |
||||
|
this.setData({ |
||||
|
'formData.petGender': value |
||||
|
}, () => { |
||||
|
this.checkFormValidity(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 症状描述输入
|
||||
|
onSymptomsInput(e) { |
||||
|
const value = e.detail.value; |
||||
|
this.setData({ |
||||
|
'formData.symptoms': value, |
||||
|
symptomsLength: value.length |
||||
|
}, () => { |
||||
|
this.checkFormValidity(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 选择图片
|
||||
|
chooseImage() { |
||||
|
if (this.data.formData.images.length >= 3) { |
||||
|
wx.showToast({ |
||||
|
title: '最多上传3张图片', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
wx.chooseImage({ |
||||
|
count: 3 - this.data.formData.images.length, |
||||
|
sizeType: ['compressed'], |
||||
|
sourceType: ['album', 'camera'], |
||||
|
success: (res) => { |
||||
|
const tempFilePaths = res.tempFilePaths; |
||||
|
const images = [...this.data.formData.images, ...tempFilePaths]; |
||||
|
this.setData({ |
||||
|
'formData.images': images |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 移除图片
|
||||
|
removeImage(e) { |
||||
|
const index = e.currentTarget.dataset.index; |
||||
|
const images = [...this.data.formData.images]; |
||||
|
images.splice(index, 1); |
||||
|
this.setData({ |
||||
|
'formData.images': images |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 预览图片
|
||||
|
previewImage(e) { |
||||
|
const current = e.currentTarget.dataset.url; |
||||
|
const urls = e.currentTarget.dataset.urls; |
||||
|
|
||||
|
wx.previewImage({ |
||||
|
current, |
||||
|
urls |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 检查表单有效性
|
||||
|
checkFormValidity() { |
||||
|
const { petType, petAge, petGender, symptoms } = this.data.formData; |
||||
|
const isValid = petType.trim() && petAge && petGender && symptoms.trim(); |
||||
|
this.setData({ |
||||
|
isFormValid: !!isValid |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 表单提交
|
||||
|
submitForm(e) { |
||||
|
if (this.data.isSubmitting || !this.data.isFormValid) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
isSubmitting: true |
||||
|
}); |
||||
|
|
||||
|
// 模拟提交
|
||||
|
setTimeout(() => { |
||||
|
wx.showToast({ |
||||
|
title: '提交成功', |
||||
|
icon: 'success', |
||||
|
duration: 1500, |
||||
|
success: () => { |
||||
|
setTimeout(() => { |
||||
|
wx.navigateTo({ |
||||
|
url: '/pagesA/pages/askingSy/askingSy', |
||||
|
}) |
||||
|
}, 1500); |
||||
|
} |
||||
|
}); |
||||
|
}, 1500); |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText":"问诊单", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,163 @@ |
|||||
|
<view class="xqbox"> |
||||
|
|
||||
|
<!-- 表单内容 --> |
||||
|
<scroll-view class="page-content" scroll-y> |
||||
|
<form bindsubmit="submitForm"> |
||||
|
|
||||
|
<!-- 宠物类型 --> |
||||
|
<view class="form-section"> |
||||
|
<view class="section-header"> |
||||
|
<view class="section-title"> |
||||
|
<text>牲畜类型</text> |
||||
|
</view> |
||||
|
<text class="section-required">必填</text> |
||||
|
</view> |
||||
|
<input |
||||
|
class="form-input" |
||||
|
name="petType" |
||||
|
placeholder="请输入牲畜品种（如：山羊、奶牛）" |
||||
|
value="{{formData.petType}}" |
||||
|
bindinput="onPetTypeInput" |
||||
|
maxlength="20" |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 宠物信息 --> |
||||
|
<view class="form-section"> |
||||
|
<view class="section-header"> |
||||
|
<view class="section-title"> |
||||
|
<text>宠物信息</text> |
||||
|
</view> |
||||
|
<text class="section-required">必填</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="info-grid"> |
||||
|
<!-- 年龄 --> |
||||
|
<view class="info-item"> |
||||
|
<view class="item-label"> |
||||
|
<text>年龄</text> |
||||
|
</view> |
||||
|
<view class="item-input-wrapper"> |
||||
|
<input |
||||
|
class="item-input" |
||||
|
name="petAge" |
||||
|
type="digit" |
||||
|
placeholder="0" |
||||
|
value="{{formData.petAge}}" |
||||
|
bindinput="onPetAgeInput" |
||||
|
/> |
||||
|
<text class="input-unit">岁</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 性别 --> |
||||
|
<view class="info-item"> |
||||
|
<view class="item-label"> |
||||
|
<text>性别</text> |
||||
|
</view> |
||||
|
<view class="gender-buttons"> |
||||
|
<view |
||||
|
class="gender-btn {{formData.petGender === '公' ? 'active' : ''}}" |
||||
|
data-value="公" |
||||
|
bindtap="selectGender" |
||||
|
> |
||||
|
<text>公</text> |
||||
|
</view> |
||||
|
<view |
||||
|
class="gender-btn {{formData.petGender === '母' ? 'active' : ''}}" |
||||
|
data-value="母" |
||||
|
bindtap="selectGender" |
||||
|
> |
||||
|
<text>母</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 症状描述 --> |
||||
|
<view class="form-section"> |
||||
|
<view class="section-header"> |
||||
|
<view class="section-title"> |
||||
|
<text>症状描述</text> |
||||
|
</view> |
||||
|
<text class="section-required">必填</text> |
||||
|
</view> |
||||
|
<view class="symptom-box"> |
||||
|
<textarea |
||||
|
class="symptom-textarea" |
||||
|
name="symptoms" |
||||
|
placeholder="请详细描述宠物的症状，包括持续时间、频率、具体表现等..." |
||||
|
value="{{formData.symptoms}}" |
||||
|
bindinput="onSymptomsInput" |
||||
|
maxlength="500" |
||||
|
auto-height |
||||
|
/> |
||||
|
<view class="textarea-counter"> |
||||
|
<text>{{symptomsLength}}/500</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 图片上传 --> |
||||
|
<view class="form-section"> |
||||
|
<view class="section-header"> |
||||
|
<view class="section-title"> |
||||
|
|
||||
|
<text>上传图片</text> |
||||
|
</view> |
||||
|
<text class="section-optional">可选</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="upload-tips"> |
||||
|
<text>最多可上传3张图片，用于帮助医生更直观了解病情</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="image-upload-grid"> |
||||
|
<!-- 已上传图片 --> |
||||
|
<block wx:for="{{formData.images}}" wx:key="*this"> |
||||
|
<view class="image-preview"> |
||||
|
<image |
||||
|
class="preview-image" |
||||
|
src="{{item}}" |
||||
|
mode="aspectFill" |
||||
|
bindtap="previewImage" |
||||
|
data-url="{{item}}" |
||||
|
data-urls="{{formData.images}}" |
||||
|
></image> |
||||
|
<view class="remove-overlay" data-index="{{index}}" bindtap="removeImage"> |
||||
|
<image class="remove-icon" src="/pagesA/images/ch.png"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
|
||||
|
<!-- 上传按钮 --> |
||||
|
<view |
||||
|
class="upload-btn" |
||||
|
wx:if="{{formData.images.length < 3}}" |
||||
|
bindtap="chooseImage" |
||||
|
> |
||||
|
<view class="upload-icon-wrapper"> |
||||
|
<image class="upload-icon" src="/pagesA/images/jh.png"></image> |
||||
|
</view> |
||||
|
<text class="upload-text">上传图片</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 提交按钮 --> |
||||
|
<view class="submit-section"> |
||||
|
<button |
||||
|
class="submit-btn" |
||||
|
type="primary" |
||||
|
formType="submit" |
||||
|
loading="{{isSubmitting}}" |
||||
|
disabled="{{isSubmitting || !isFormValid}}" |
||||
|
> |
||||
|
{{isSubmitting ? '提交中...' : '提交问诊单'}} |
||||
|
</button> |
||||
|
</view> |
||||
|
|
||||
|
</form> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
@ -0,0 +1,350 @@ |
|||||
|
.xqbox{ |
||||
|
min-height: 100vh; |
||||
|
background: #F8FBFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* 页面内容 */ |
||||
|
.page-content { |
||||
|
height: calc(100vh - 120rpx); |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* 表单区域 */ |
||||
|
.form-section { |
||||
|
background: #FFFFFF; |
||||
|
margin-bottom: 24rpx; |
||||
|
padding: 32rpx; |
||||
|
border-radius: 0; |
||||
|
border-bottom: 1rpx solid #F0F7FF; |
||||
|
} |
||||
|
|
||||
|
.section-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.section-title text { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 700; |
||||
|
color: #1A1A1A; |
||||
|
} |
||||
|
|
||||
|
.section-required { |
||||
|
font-size: 24rpx; |
||||
|
color: #FF6B6B; |
||||
|
font-weight: 500; |
||||
|
background: rgba(255, 107, 107, 0.1); |
||||
|
padding: 4rpx 12rpx; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.section-optional { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
/* 表单输入 */ |
||||
|
.form-input { |
||||
|
height: 96rpx; |
||||
|
background: #F8FBFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 0 32rpx; |
||||
|
font-size: 30rpx; |
||||
|
color: #333; |
||||
|
border: 1rpx solid #E5F0FF; |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.form-input::placeholder { |
||||
|
color: #BBB; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.form-input:focus { |
||||
|
border-color: #4A90E2; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0 0 0 3rpx rgba(74, 144, 226, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* 宠物信息网格 */ |
||||
|
.info-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
gap: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.item-label { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.item-label text { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.item-input-wrapper { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.item-input { |
||||
|
height: 80rpx; |
||||
|
background: #F8FBFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 0 32rpx 0 24rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
border: 1rpx solid #E5F0FF; |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.input-unit { |
||||
|
position: absolute; |
||||
|
right: 24rpx; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
font-size: 26rpx; |
||||
|
color: #999; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
/* 性别选择 */ |
||||
|
.gender-buttons { |
||||
|
display: flex; |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.gender-btn { |
||||
|
flex: 1; |
||||
|
height: 80rpx; |
||||
|
background: #F8FBFF; |
||||
|
border-radius: 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
border: 1rpx solid #E5F0FF; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.gender-btn.active { |
||||
|
background: linear-gradient(135deg, #4A90E2 0%, #357AE8 100%); |
||||
|
color: #FFFFFF; |
||||
|
border-color: #4A90E2; |
||||
|
font-weight: 600; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.2); |
||||
|
} |
||||
|
|
||||
|
/* 症状描述 */ |
||||
|
.symptom-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.symptom-textarea { |
||||
|
width: 100%; |
||||
|
min-height: 240rpx; |
||||
|
background: #F8FBFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 32rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
border: 1rpx solid #E5F0FF; |
||||
|
box-sizing: border-box; |
||||
|
line-height: 1.6; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.symptom-textarea::placeholder { |
||||
|
color: #BBB; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.symptom-textarea:focus { |
||||
|
border-color: #4A90E2; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0 0 0 3rpx rgba(74, 144, 226, 0.1); |
||||
|
} |
||||
|
|
||||
|
.textarea-counter { |
||||
|
position: absolute; |
||||
|
right: 20rpx; |
||||
|
bottom: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
background: rgba(255, 255, 255, 0.9); |
||||
|
padding: 4rpx 12rpx; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
/* 图片上传 */ |
||||
|
.upload-tips { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 24rpx; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.image-upload-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
gap: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.image-preview { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
.preview-image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.remove-overlay { |
||||
|
position: absolute; |
||||
|
top: 8rpx; |
||||
|
right: 8rpx; |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(0, 0, 0, 0.6); |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
backdrop-filter: blur(4rpx); |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.remove-overlay:active { |
||||
|
background: rgba(0, 0, 0, 0.8); |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
|
.remove-icon { |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
} |
||||
|
|
||||
|
/* 上传按钮 */ |
||||
|
.upload-btn { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
border: 2rpx dashed #D9E7FF; |
||||
|
border-radius: 20rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background: #F8FBFF; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.upload-btn:active { |
||||
|
border-color: #4A90E2; |
||||
|
background: #F0F7FF; |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
.upload-icon-wrapper { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
background: linear-gradient(135deg, #4A90E2 0%, #357AE8 100%); |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.upload-icon { |
||||
|
width: 28rpx; |
||||
|
height: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.upload-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #4A90E2; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 提交按钮 */ |
||||
|
.submit-section { |
||||
|
padding: 40rpx 32rpx 80rpx; |
||||
|
background: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.submit-btn { |
||||
|
height: 96rpx; |
||||
|
background: linear-gradient(135deg, #4A90E2 0%, #357AE8 100%); |
||||
|
border-radius: 24rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 700; |
||||
|
color: #FFFFFF; |
||||
|
border: none; |
||||
|
transition: all 0.3s ease; |
||||
|
box-shadow: 0 8rpx 32rpx rgba(74, 144, 226, 0.25); |
||||
|
} |
||||
|
|
||||
|
.submit-btn:active { |
||||
|
transform: translateY(2rpx); |
||||
|
box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.3); |
||||
|
} |
||||
|
|
||||
|
.submit-btn[disabled] { |
||||
|
opacity: 0.6; |
||||
|
transform: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
/* 动画效果 */ |
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(20rpx); |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form-section { |
||||
|
animation: fadeIn 0.4s ease-out forwards; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.form-section:nth-child(1) { animation-delay: 0.1s; } |
||||
|
.form-section:nth-child(2) { animation-delay: 0.15s; } |
||||
|
.form-section:nth-child(3) { animation-delay: 0.2s; } |
||||
|
.form-section:nth-child(4) { animation-delay: 0.25s; } |
||||
@ -0,0 +1,198 @@ |
|||||
|
Page({ |
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
diagnosisData: { |
||||
|
id: 1, |
||||
|
status: 'replied', |
||||
|
createdAt: '2025-02-21', |
||||
|
userInfo: { |
||||
|
avatar: '/images/avatars/user1.jpg', |
||||
|
nickName: '张小明' |
||||
|
}, |
||||
|
petInfo: { |
||||
|
type: '狗', |
||||
|
age: 3, |
||||
|
gender: '公' |
||||
|
}, |
||||
|
description: '最近三天食欲不振，精神萎靡，偶尔呕吐黄色泡沫，大便偏软带血丝，体温正常但鼻头干燥。已经尝试喂食清淡食物但无改善。昨晚开始呼吸似乎有些急促。', |
||||
|
images: [ |
||||
|
'/images/pet1.jpg', |
||||
|
'/images/pet2.jpg', |
||||
|
'/images/pet3.jpg' |
||||
|
], |
||||
|
replies: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
vet: { |
||||
|
avatar: '/images/vets/vet1.jpg', |
||||
|
name: '李医生', |
||||
|
title: '主治兽医', |
||||
|
hospital: '爱宠动物医院', |
||||
|
years: 8 |
||||
|
}, |
||||
|
content: '根据您的描述，狗狗可能出现了消化系统问题。呕吐黄色泡沫通常是胃液，结合大便带血丝的情况，建议立即禁食12小时观察。可以少量喂水，但不要喂食。如果症状持续或加重，建议立即带往医院进行血常规和粪便检查。', |
||||
|
createdAt: '2025-02-21', |
||||
|
likes: 12, |
||||
|
liked: false |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
vet: { |
||||
|
avatar: '/images/vets/vet2.jpg', |
||||
|
name: '王医生', |
||||
|
title: '资深兽医', |
||||
|
hospital: '萌宠医疗中心', |
||||
|
years: 12 |
||||
|
}, |
||||
|
content: '同意李医生的建议。此外，呼吸急促需要特别关注，可能是疼痛或炎症反应。建议测量肛温，正常范围是38-39℃。如果超过39.5℃需要紧急处理。可以检查牙龈颜色，正常应为粉色，发白或发紫需要立即就医。', |
||||
|
createdAt: '2025-02-21', |
||||
|
likes: 8, |
||||
|
liked: true |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
refreshing: false |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad(options) { |
||||
|
if (options.id) { |
||||
|
// 根据id加载问诊数据
|
||||
|
this.loadDiagnosisData(options.id); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载问诊数据
|
||||
|
loadDiagnosisData(id) { |
||||
|
// 这里应该是API请求，暂时使用模拟数据
|
||||
|
// TODO: 替换为实际API调用
|
||||
|
console.log('加载问诊数据:', id); |
||||
|
|
||||
|
// 确保时间数据正确显示
|
||||
|
this.setData({ |
||||
|
'diagnosisData.createdAt': new Date().toISOString(), |
||||
|
'diagnosisData.replies[0].createdAt': new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), |
||||
|
'diagnosisData.replies[1].createdAt': new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString() |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 格式化时间 - 确保正确显示
|
||||
|
formatTime(dateString) { |
||||
|
if (!dateString) return '刚刚'; |
||||
|
|
||||
|
try { |
||||
|
const date = new Date(dateString); |
||||
|
const now = new Date(); |
||||
|
const diff = now - date; |
||||
|
const diffSeconds = Math.floor(diff / 1000); |
||||
|
const diffMinutes = Math.floor(diff / (1000 * 60)); |
||||
|
const diffHours = Math.floor(diff / (1000 * 60 * 60)); |
||||
|
const diffDays = Math.floor(diff / (1000 * 60 * 60 * 24)); |
||||
|
|
||||
|
if (diffSeconds < 60) { |
||||
|
return '刚刚'; |
||||
|
} else if (diffMinutes < 60) { |
||||
|
return `${diffMinutes}分钟前`; |
||||
|
} else if (diffHours < 24) { |
||||
|
return `${diffHours}小时前`; |
||||
|
} else if (diffDays === 1) { |
||||
|
return '昨天'; |
||||
|
} else if (diffDays < 7) { |
||||
|
return `${diffDays}天前`; |
||||
|
} else { |
||||
|
const month = date.getMonth() + 1; |
||||
|
const day = date.getDate(); |
||||
|
const hours = date.getHours().toString().padStart(2, '0'); |
||||
|
const minutes = date.getMinutes().toString().padStart(2, '0'); |
||||
|
return `${month}月${day}日 ${hours}:${minutes}`; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('时间格式化错误:', error); |
||||
|
return '刚刚'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 返回上一页
|
||||
|
goBack() { |
||||
|
wx.navigateBack(); |
||||
|
}, |
||||
|
|
||||
|
// 分享
|
||||
|
onShare() { |
||||
|
wx.showActionSheet({ |
||||
|
itemList: ['分享给好友', '保存到相册'], |
||||
|
success: (res) => { |
||||
|
if (res.tapIndex === 0) { |
||||
|
wx.showToast({ |
||||
|
title: '已分享', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 下拉刷新
|
||||
|
onRefresh() { |
||||
|
this.setData({ |
||||
|
refreshing: true |
||||
|
}); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
this.setData({ |
||||
|
refreshing: false |
||||
|
}); |
||||
|
wx.showToast({ |
||||
|
title: '刷新成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 预览图片
|
||||
|
previewImage(e) { |
||||
|
const current = e.currentTarget.dataset.url; |
||||
|
const urls = e.currentTarget.dataset.urls; |
||||
|
|
||||
|
wx.previewImage({ |
||||
|
current, |
||||
|
urls |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 点赞/取消点赞
|
||||
|
toggleLike(e) { |
||||
|
const index = e.currentTarget.dataset.index; |
||||
|
const replies = [...this.data.diagnosisData.replies]; |
||||
|
const reply = replies[index]; |
||||
|
|
||||
|
if (reply.liked) { |
||||
|
// 取消点赞
|
||||
|
reply.liked = false; |
||||
|
reply.likes = Math.max(0, (reply.likes || 1) - 1); |
||||
|
wx.showToast({ |
||||
|
title: '已取消', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} else { |
||||
|
// 点赞
|
||||
|
reply.liked = true; |
||||
|
reply.likes = (reply.likes || 0) + 1; |
||||
|
wx.showToast({ |
||||
|
title: '已点赞', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
'diagnosisData.replies': replies |
||||
|
}); |
||||
|
|
||||
|
// 震动反馈
|
||||
|
wx.vibrateShort(); |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText":"问诊详情", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,160 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,643 @@ |
|||||
|
.xqbox { |
||||
|
background: linear-gradient(180deg, #F8FBFF 0%, #F0F7FF 100%); |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
/* 页面内容 */ |
||||
|
.page-content { |
||||
|
height: calc(100vh - 120rpx); |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* 动画效果 */ |
||||
|
@keyframes cardEnter { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
transform: translateY(40rpx) scale(0.95); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0) scale(1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes fadeInUp { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
transform: translateY(30rpx); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes fadeIn { |
||||
|
from { opacity: 0; } |
||||
|
to { opacity: 1; } |
||||
|
} |
||||
|
|
||||
|
@keyframes pulse { |
||||
|
0% { transform: scale(1); } |
||||
|
50% { transform: scale(1.05); } |
||||
|
100% { transform: scale(1); } |
||||
|
} |
||||
|
|
||||
|
@keyframes float { |
||||
|
0%, 100% { transform: translateY(0); } |
||||
|
50% { transform: translateY(-10rpx); } |
||||
|
} |
||||
|
|
||||
|
.card-enter { |
||||
|
animation: cardEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; |
||||
|
} |
||||
|
|
||||
|
.fade-in-up { |
||||
|
animation: fadeInUp 0.5s ease-out forwards; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.fade-in { |
||||
|
animation: fadeIn 0.8s ease-out forwards; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.pulse { |
||||
|
animation: pulse 2s infinite; |
||||
|
} |
||||
|
|
||||
|
.hover-effect { |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.hover-effect:active { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
|
/* 渐变背景 */ |
||||
|
.gradient-blue { |
||||
|
background: linear-gradient(135deg, #6D9EFF 0%, #4A7CFF 100%); |
||||
|
color: white !important; |
||||
|
} |
||||
|
|
||||
|
.gradient-orange { |
||||
|
background: linear-gradient(135deg, #FF9500 0%, #FF7F00 100%); |
||||
|
color: white !important; |
||||
|
} |
||||
|
|
||||
|
.gradient-pink { |
||||
|
background: linear-gradient(135deg, #FF6B9D 0%, #FF4081 100%); |
||||
|
color: white !important; |
||||
|
} |
||||
|
|
||||
|
.gradient-purple { |
||||
|
background: linear-gradient(135deg, #9D4BFF 0%, #7C3AED 100%); |
||||
|
color: white !important; |
||||
|
} |
||||
|
|
||||
|
.gradient-gold { |
||||
|
background: linear-gradient(135deg, #FFD700 0%, #FFB300 100%); |
||||
|
color: white !important; |
||||
|
} |
||||
|
|
||||
|
/* 用户问诊卡片 */ |
||||
|
.user-query-card { |
||||
|
background: #FFFFFF; |
||||
|
margin: 24rpx; |
||||
|
border-radius: 28rpx; |
||||
|
box-shadow: 0 12rpx 48rpx rgba(74, 144, 226, 0.15); |
||||
|
border: 2rpx solid #FFFFFF; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
backdrop-filter: blur(20rpx); |
||||
|
} |
||||
|
|
||||
|
/* 卡片装饰 */ |
||||
|
.card-decoration { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
pointer-events: none; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.decoration-dot { |
||||
|
position: absolute; |
||||
|
border-radius: 50%; |
||||
|
background: linear-gradient(135deg, rgba(109, 158, 255, 0.1) 0%, rgba(74, 124, 255, 0.1) 100%); |
||||
|
} |
||||
|
|
||||
|
.dot-1 { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
top: -40rpx; |
||||
|
right: -40rpx; |
||||
|
} |
||||
|
|
||||
|
.dot-2 { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
bottom: 60rpx; |
||||
|
left: -20rpx; |
||||
|
} |
||||
|
|
||||
|
.dot-3 { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
bottom: -20rpx; |
||||
|
right: 80rpx; |
||||
|
} |
||||
|
|
||||
|
/* 用户信息区域 */ |
||||
|
.user-info-section { |
||||
|
padding: 40rpx 32rpx 32rpx; |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.avatar-wrapper { |
||||
|
position: relative; |
||||
|
margin-right: 24rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.user-avatar { |
||||
|
width: 88rpx; |
||||
|
height: 88rpx; |
||||
|
border-radius: 50%; |
||||
|
border: 3rpx solid #FFFFFF; |
||||
|
box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.3); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.user-details { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.user-name-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.user-name { |
||||
|
font-size: 34rpx; |
||||
|
font-weight: 700; |
||||
|
color: #1A1A1A; |
||||
|
line-height: 1.2; |
||||
|
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.status-badge { |
||||
|
padding: 10rpx 24rpx; |
||||
|
border-radius: 24rpx; |
||||
|
font-size: 26rpx; |
||||
|
font-weight: 700; |
||||
|
min-width: 88rpx; |
||||
|
text-align: center; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.status-replied { |
||||
|
background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%); |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.status-pending { |
||||
|
background: linear-gradient(135deg, #FF9500 0%, #F39C12 100%); |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.pet-info { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.pet-info-tags { |
||||
|
display: flex; |
||||
|
gap: 12rpx; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.pet-tag { |
||||
|
padding: 6rpx 20rpx; |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 600; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.time-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
background: rgba(109, 158, 255, 0.08); |
||||
|
padding: 8rpx 16rpx; |
||||
|
border-radius: 20rpx; |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.time-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #6D9EFF; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 症状描述区域 - 调整到最左边 */ |
||||
|
.symptom-section { |
||||
|
padding: 32rpx; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.section-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 28rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 700; |
||||
|
color: #1A1A1A; |
||||
|
position: relative; |
||||
|
padding-right: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.title-decoration { |
||||
|
flex: 1; |
||||
|
height: 2rpx; |
||||
|
background: linear-gradient(90deg, #E5F0FF 0%, #6D9EFF 50%, #E5F0FF 100%); |
||||
|
margin-left: 16rpx; |
||||
|
border-radius: 1rpx; |
||||
|
} |
||||
|
|
||||
|
.symptom-content { |
||||
|
background: #F8FBFF; |
||||
|
border-radius: 24rpx; |
||||
|
padding: 36rpx 32rpx; |
||||
|
border: 2rpx solid #E5F0FF; |
||||
|
position: relative; |
||||
|
box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.1); |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.symptom-content:active { |
||||
|
transform: translateY(-2rpx); |
||||
|
box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.15); |
||||
|
} |
||||
|
|
||||
|
.quote-left { |
||||
|
position: absolute; |
||||
|
top: 20rpx; |
||||
|
left: 20rpx; |
||||
|
font-size: 48rpx; |
||||
|
color: #6D9EFF; |
||||
|
font-weight: 700; |
||||
|
opacity: 0.3; |
||||
|
} |
||||
|
|
||||
|
.symptom-text { |
||||
|
font-size: 30rpx; |
||||
|
color: #333; |
||||
|
line-height: 1.8; |
||||
|
font-weight: 400; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
/* 图片展示区域 */ |
||||
|
.image-section { |
||||
|
padding: 32rpx; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.image-count { |
||||
|
margin-left: auto; |
||||
|
padding: 6rpx 16rpx; |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.images-scroll { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.images-container { |
||||
|
display: flex; |
||||
|
padding: 8rpx 0; |
||||
|
} |
||||
|
|
||||
|
.image-wrapper { |
||||
|
margin-right: 20rpx; |
||||
|
position: relative; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15); |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.image-wrapper:last-child { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.image-wrapper:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
.symptom-image { |
||||
|
width: 220rpx; |
||||
|
height: 220rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.image-overlay { |
||||
|
position: absolute; |
||||
|
top: 12rpx; |
||||
|
left: 12rpx; |
||||
|
background: rgba(0, 0, 0, 0.6); |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
backdrop-filter: blur(4rpx); |
||||
|
} |
||||
|
|
||||
|
.image-index { |
||||
|
color: white; |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
/* 兽医回复区域 */ |
||||
|
.replies-section { |
||||
|
margin: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.reply-count { |
||||
|
margin-left: auto; |
||||
|
padding: 8rpx 20rpx; |
||||
|
border-radius: 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 4rpx; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(157, 75, 255, 0.3); |
||||
|
} |
||||
|
|
||||
|
.count-number { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.count-text { |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 500; |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
|
||||
|
/* 回复列表 */ |
||||
|
.replies-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.vet-reply-card { |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 28rpx; |
||||
|
padding: 36rpx; |
||||
|
box-shadow: 0 12rpx 48rpx rgba(74, 144, 226, 0.15); |
||||
|
border: 2rpx solid #FFFFFF; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
backdrop-filter: blur(20rpx); |
||||
|
} |
||||
|
|
||||
|
/* 回复装饰 */ |
||||
|
.reply-decoration { |
||||
|
position: absolute; |
||||
|
top: 20rpx; |
||||
|
right: 20rpx; |
||||
|
opacity: 0.1; |
||||
|
} |
||||
|
|
||||
|
.decoration-icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
animation: float 3s ease-in-out infinite; |
||||
|
} |
||||
|
|
||||
|
/* 兽医信息 */ |
||||
|
.vet-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.vet-avatar { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 50%; |
||||
|
border: 3rpx solid #FFFFFF; |
||||
|
box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.3); |
||||
|
margin-right: 20rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.vet-verified { |
||||
|
position: absolute; |
||||
|
bottom: 2rpx; |
||||
|
right: 2rpx; |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
background: #2ECC71; |
||||
|
border: 2rpx solid white; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.vet-details { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.vet-name-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.vet-name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 700; |
||||
|
color: #1A1A1A; |
||||
|
margin-right: 16rpx; |
||||
|
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.vet-badge { |
||||
|
padding: 6rpx 20rpx; |
||||
|
border-radius: 20rpx; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3); |
||||
|
} |
||||
|
|
||||
|
.vet-title { |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 700; |
||||
|
letter-spacing: 0.5rpx; |
||||
|
} |
||||
|
|
||||
|
.vet-meta { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.meta-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6rpx; |
||||
|
background: rgba(109, 158, 255, 0.08); |
||||
|
padding: 6rpx 12rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.meta-icon { |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
|
||||
|
.vet-hospital, |
||||
|
.vet-experience { |
||||
|
font-size: 24rpx; |
||||
|
color: #6D9EFF; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 回复内容 */ |
||||
|
.reply-content { |
||||
|
margin-bottom: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.reply-bubble { |
||||
|
background: #F8FBFF; |
||||
|
border-radius: 24rpx; |
||||
|
padding: 32rpx; |
||||
|
border: 2rpx solid #E5F0FF; |
||||
|
position: relative; |
||||
|
box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.1); |
||||
|
} |
||||
|
|
||||
|
.reply-bubble::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: -12rpx; |
||||
|
left: 40rpx; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-left: 12rpx solid transparent; |
||||
|
border-right: 12rpx solid transparent; |
||||
|
border-bottom: 12rpx solid #F8FBFF; |
||||
|
} |
||||
|
|
||||
|
.reply-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
line-height: 1.8; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
/* 回复底部 */ |
||||
|
.reply-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding-top: 24rpx; |
||||
|
border-top: 2rpx dashed #E5F0FF; |
||||
|
} |
||||
|
|
||||
|
.reply-time { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10rpx; |
||||
|
background: rgba(109, 158, 255, 0.1); |
||||
|
padding: 8rpx 20rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* 无回复状态 */ |
||||
|
.no-replies { |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 28rpx; |
||||
|
padding: 80rpx 40rpx; |
||||
|
text-align: center; |
||||
|
box-shadow: 0 12rpx 48rpx rgba(74, 144, 226, 0.15); |
||||
|
border: 2rpx solid #FFFFFF; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.no-replies-icon { |
||||
|
width: 200rpx; |
||||
|
height: 150rpx; |
||||
|
margin-bottom: 32rpx; |
||||
|
opacity: 0.6; |
||||
|
filter: hue-rotate(200deg); |
||||
|
} |
||||
|
|
||||
|
.no-replies-title { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
font-weight: 700; |
||||
|
margin-bottom: 16rpx; |
||||
|
display: block; |
||||
|
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.no-replies-desc { |
||||
|
font-size: 26rpx; |
||||
|
color: #999; |
||||
|
line-height: 1.4; |
||||
|
max-width: 400rpx; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.waiting-animation { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
gap: 12rpx; |
||||
|
margin-top: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.loading-dot { |
||||
|
width: 16rpx; |
||||
|
height: 16rpx; |
||||
|
border-radius: 50%; |
||||
|
background: #6D9EFF; |
||||
|
animation: pulse 1.5s infinite ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.loading-dot.dot-1 { animation-delay: 0s; } |
||||
|
.loading-dot.dot-2 { animation-delay: 0.2s; } |
||||
|
.loading-dot.dot-3 { animation-delay: 0.4s; } |
||||
|
|
||||
|
/* 页面底部安全区域 */ |
||||
|
.page-bottom { |
||||
|
height: 60rpx; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue