450 lines
8.8 KiB
Vue
450 lines
8.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 头部导航 -->
|
|
<uni-nav-bar
|
|
left-icon="left"
|
|
title="病情记录"
|
|
@clickLeft="goBack"
|
|
fixed
|
|
color="#8B2316"
|
|
height="180rpx"
|
|
:border="false"
|
|
backgroundColor="#eee"
|
|
>
|
|
<template #right>
|
|
<view class="nav-right">
|
|
<uni-icons type="plus" size="24" color="#8B2316" @click="goAddRecord" style="margin-left: 30rpx;"></uni-icons>
|
|
</view>
|
|
</template>
|
|
</uni-nav-bar>
|
|
|
|
|
|
<!-- 主要内容区域 -->
|
|
<scroll-view
|
|
class="main-content"
|
|
scroll-y
|
|
refresher-enabled
|
|
:refresher-triggered="refreshing"
|
|
@refresherrefresh="onRefresh"
|
|
@scrolltolower="onLoadMore"
|
|
:lower-threshold="100"
|
|
>
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" v-if="recordList.length === 0 && !loading">
|
|
<text class="empty-text">暂无病情记录</text>
|
|
<button class="add-first-btn" @click="addRecord">添加第一条记录</button>
|
|
</view>
|
|
|
|
<!-- 时间线容器 -->
|
|
<view class="timeline-container" v-else>
|
|
<!-- 时间线 -->
|
|
<view class="timeline-line"></view>
|
|
|
|
<!-- 记录条目 -->
|
|
<view
|
|
class="record-item"
|
|
v-for="(record, index) in recordList"
|
|
:key="record.uuid"
|
|
@click="goToDetail(record)"
|
|
>
|
|
<!-- 时间线节点 -->
|
|
<view class="timeline-node">
|
|
<view class="node-circle"></view>
|
|
</view>
|
|
|
|
<!-- 记录内容 -->
|
|
<view class="record-content">
|
|
<!-- 日期气泡 -->
|
|
<view class="date-bubble">
|
|
<text class="date-text">{{ record.create_date }}</text>
|
|
</view>
|
|
|
|
<!-- 记录描述 -->
|
|
<view class="record-description" v-if="record.des">
|
|
<text class="description-text">{{ record.des }}</text>
|
|
</view>
|
|
|
|
<!-- 记录图片 -->
|
|
<view class="record-images" v-if="record.photo && record.photo.length > 0">
|
|
<view class="image-grid">
|
|
<view
|
|
class="image-item"
|
|
v-for="(imagePath, imgIndex) in record.photo"
|
|
:key="imgIndex"
|
|
@click.stop="previewImages(record.photo, imgIndex)"
|
|
>
|
|
<image
|
|
:src="docUrl + imagePath"
|
|
class="content-image"
|
|
mode="aspectFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多状态 -->
|
|
<view class="load-more" v-if="recordList.length > 0">
|
|
<view class="loading-text" v-if="loadingMore">
|
|
<uni-load-more status="loading" content-text="{ contentText: { contentdown: '上拉显示更多', contentrefresh: '正在加载...', contentnomore: '没有更多数据了' } }"></uni-load-more>
|
|
</view>
|
|
<!-- <view class="no-more-text" v-else-if="currentPage >= totalPage">
|
|
<text>没有更多数据了</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Vue3 Composition API
|
|
import { ref, reactive, onMounted, computed } from 'vue'
|
|
import { onShow, onLoad } from '@dcloudio/uni-app'
|
|
import navBar from '@/components/navBar/navBar.vue'
|
|
import api from '@/api/api.js'
|
|
import docUrl from '@/utils/docUrl.js'
|
|
|
|
const patientUuid = ref('')
|
|
const getRecordList = (isRefresh = false) => {
|
|
let usrInfo = uni.getStorageSync('userInfo')
|
|
|
|
// 如果是刷新，重置页码
|
|
if (isRefresh) {
|
|
currentPage.value = 1
|
|
}
|
|
|
|
// 设置加载状态
|
|
if (isRefresh) {
|
|
refreshing.value = true
|
|
} else if (currentPage.value === 1) {
|
|
loading.value = true
|
|
} else {
|
|
loadingMore.value = true
|
|
}
|
|
|
|
api.conditionRecordList({
|
|
patient_uuid: patientUuid.value,
|
|
expert_uuid: usrInfo.uuid,
|
|
page: currentPage.value
|
|
}).then(res => {
|
|
console.log(res)
|
|
if(res.code == 200){
|
|
const newList = res.data.list || []
|
|
|
|
if (isRefresh || currentPage.value === 1) {
|
|
// 刷新或首次加载，替换数据
|
|
recordList.value = newList
|
|
} else {
|
|
// 加载更多，追加数据
|
|
recordList.value = [...recordList.value, ...newList]
|
|
}
|
|
|
|
totalPage.value = res.data.totalPage || 1
|
|
}
|
|
}).catch(err => {
|
|
console.error('获取病情记录失败:', err)
|
|
uni.showToast({
|
|
title: '获取数据失败',
|
|
icon: 'none'
|
|
})
|
|
}).finally(() => {
|
|
// 重置加载状态
|
|
loading.value = false
|
|
refreshing.value = false
|
|
loadingMore.value = false
|
|
})
|
|
}
|
|
const goToDetail = (record) => {
|
|
uni.setStorageSync('caseRecord', record)
|
|
uni.navigateTo({
|
|
url: '/pages_app/caseRecord/caseRecord?uuid=' + record.uuid + '&patientUuid=' + patientUuid.value
|
|
})
|
|
}
|
|
const goAddRecord = () => {
|
|
uni.navigateTo({
|
|
url: '/pages_app/caseRecord/caseRecord?patientUuid=' + patientUuid.value
|
|
})
|
|
}
|
|
onLoad((options) => {
|
|
patientUuid.value = options.uuid
|
|
})
|
|
onShow(() => {
|
|
getRecordList()
|
|
})
|
|
|
|
// 响应式数据
|
|
const recordList = ref([])
|
|
const totalPage = ref(1)
|
|
const currentPage = ref(1)
|
|
const loading = ref(false)
|
|
const refreshing = ref(false)
|
|
const loadingMore = ref(false)
|
|
|
|
// 方法
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
fail() {
|
|
uni.redirectTo({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const addRecord = () => {
|
|
// 跳转到添加记录页面
|
|
uni.navigateTo({
|
|
url: '/pages_app/addRecord/addRecord?patientUuid=' + patientUuid.value
|
|
})
|
|
}
|
|
|
|
const managePatients = () => {
|
|
// 管理患者功能
|
|
addRecord()
|
|
}
|
|
|
|
const previewImages = (imageList, currentIndex) => {
|
|
const urls = imageList.map(img => docUrl + img)
|
|
uni.previewImage({
|
|
current: currentIndex,
|
|
urls: urls
|
|
})
|
|
}
|
|
|
|
// 下拉刷新
|
|
const onRefresh = () => {
|
|
console.log('下拉刷新')
|
|
getRecordList(true)
|
|
}
|
|
|
|
// 上拉加载更多
|
|
const onLoadMore = () => {
|
|
console.log('上拉加载更多')
|
|
|
|
// 如果正在加载或没有更多数据，则不执行
|
|
if (loadingMore.value || loading.value || refreshing.value) {
|
|
return
|
|
}
|
|
|
|
// 如果已经是最后一页，不执行
|
|
if (currentPage.value >= totalPage.value) {
|
|
return
|
|
}
|
|
|
|
// 页码加1
|
|
currentPage.value++
|
|
|
|
// 加载更多数据
|
|
getRecordList(false)
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
console.log('病情记录页面已加载')
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
background-color: #ffffff;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 头部导航样式 */
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #ffffff;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.back-btn {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.back-icon {
|
|
font-size: 40rpx;
|
|
color: #8B2316;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 36rpx;
|
|
color: #8B2316;
|
|
font-weight: bold;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.add-btn {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.add-icon {
|
|
font-size: 40rpx;
|
|
color: #8B2316;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 主要内容区域 */
|
|
.main-content {
|
|
height: calc(100vh - 180rpx);
|
|
padding: 40rpx 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.timeline-container {
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-line {
|
|
position: absolute;
|
|
left: 30rpx;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4rpx;
|
|
background-color: #8B2316;
|
|
}
|
|
|
|
.record-item {
|
|
position: relative;
|
|
margin-bottom: 60rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.timeline-node {
|
|
position: relative;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.node-circle {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background-color: #8B2316;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #ffffff;
|
|
box-shadow: 0 0 0 2rpx #8B2316;
|
|
}
|
|
|
|
.record-content {
|
|
flex: 1;
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.date-bubble {
|
|
background-color: #ffffff;
|
|
border: 2rpx solid #8B2316;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx 30rpx;
|
|
margin-bottom: 20rpx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.date-text {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.record-description {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.description-text {
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.record-images {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.image-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15rpx;
|
|
}
|
|
|
|
.image-item {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.content-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 空状态样式 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 100rpx 40rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.add-first-btn {
|
|
background-color: #8B2316;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 25rpx;
|
|
padding: 20rpx 40rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* 加载更多样式 */
|
|
.load-more {
|
|
padding: 40rpx 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.loading-text {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.no-more-text {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 750rpx) {
|
|
.content-image {
|
|
width: 100%;
|
|
max-width: 400rpx;
|
|
}
|
|
}
|
|
</style> |