<template>
|
<view class="detail-container">
|
<!-- 状态卡片 -->
|
<view class="status-card" :class="record.status">
|
<view class="status-info">
|
<text class="status-text">{{ record.statusText }}</text>
|
<text class="desc">{{ getStatusDesc(record.status) }}</text>
|
</view>
|
<image :src="getStatusImage(record.status)" mode="aspectFit" class="status-image" />
|
</view>
|
|
<!-- 医院信息 -->
|
<view class="info-card">
|
<view class="hospital-info" @tap="navigateToHospital">
|
<image :src="record.hospitalLogo" mode="aspectFit" class="logo" />
|
<view class="info">
|
<text class="name">{{ record.hospitalName }}</text>
|
<text class="address">{{ record.hospitalAddress }}</text>
|
</view>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="department-info">
|
<image :src="record.departmentIcon" mode="aspectFit" class="icon" />
|
<view class="info">
|
<text class="name">{{ record.departmentName }}</text>
|
<text class="doctor">{{ record.doctorName }} {{ record.doctorTitle }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 就诊信息 -->
|
<view class="detail-card">
|
<view class="section-title">就诊信息</view>
|
<view class="info-list">
|
<view class="info-item">
|
<text class="label">就诊时间</text>
|
<text class="value">{{ record.date }} {{ record.time }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">就诊人</text>
|
<text class="value">{{ record.patientName }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">就诊卡号</text>
|
<text class="value">{{ record.cardNo }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">挂号费用</text>
|
<text class="value price">¥{{ record.fee }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 诊断信息 -->
|
<view class="detail-card" v-if="record.diagnosis">
|
<view class="section-title">诊断信息</view>
|
<view class="diagnosis-info">
|
<view class="diagnosis-item">
|
<text class="label">主诉</text>
|
<text class="value">{{ record.diagnosis.complaint }}</text>
|
</view>
|
<view class="diagnosis-item">
|
<text class="label">诊断结果</text>
|
<text class="value">{{ record.diagnosis.result }}</text>
|
</view>
|
<view class="diagnosis-item">
|
<text class="label">医嘱</text>
|
<text class="value">{{ record.diagnosis.advice }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 检查项目 -->
|
<view class="detail-card" v-if="record.examinations?.length">
|
<view class="section-title">检查项目</view>
|
<view class="examination-list">
|
<view
|
class="examination-item"
|
v-for="(exam, index) in record.examinations"
|
:key="index"
|
@tap="viewReport(exam)"
|
>
|
<view class="exam-info">
|
<text class="name">{{ exam.name }}</text>
|
<text class="time">{{ exam.time }}</text>
|
</view>
|
<text class="status" :class="exam.status">{{ exam.statusText }}</text>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 处方药品 -->
|
<view class="detail-card" v-if="record.prescriptions?.length">
|
<view class="section-title">处方药品</view>
|
<view class="prescription-list">
|
<view
|
class="prescription-item"
|
v-for="(medicine, index) in record.prescriptions"
|
:key="index"
|
>
|
<view class="medicine-info">
|
<text class="name">{{ medicine.name }}</text>
|
<text class="spec">{{ medicine.specification }}</text>
|
</view>
|
<view class="usage">
|
<text class="dosage">{{ medicine.dosage }}</text>
|
<text class="frequency">{{ medicine.frequency }}</text>
|
</view>
|
<text class="quantity">x{{ medicine.quantity }}</text>
|
</view>
|
</view>
|
<view class="total-amount">
|
<text>处方总额</text>
|
<text class="amount">¥{{ record.prescriptionAmount }}</text>
|
</view>
|
</view>
|
|
<!-- 底部按钮 -->
|
<view class="bottom-bar">
|
<block v-if="record.status === 'upcoming'">
|
<button class="action-btn" @tap="reschedule">改约</button>
|
<button class="action-btn primary" @tap="cancelAppointment">取消预约</button>
|
</block>
|
<block v-if="record.status === 'completed'">
|
<button class="action-btn" @tap="viewAllReports">查看全部报告</button>
|
<button class="action-btn primary" @tap="bookAgain">再次预约</button>
|
</block>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
|
// 就诊记录详情
|
const record = ref({
|
id: 1,
|
hospitalName: '青岛镜湖医院',
|
hospitalLogo: '/static/hospital/kiang-wu.jpg',
|
hospitalAddress: '青岛连胜马路33号',
|
departmentName: '心内科',
|
departmentIcon: '/static/department/cardiology.png',
|
doctorName: '张医生',
|
doctorTitle: '主任医师',
|
date: '2024-03-25',
|
time: '09:30',
|
fee: 60,
|
status: 'completed',
|
statusText: '已完成',
|
patientName: '张三',
|
cardNo: '1234567890',
|
diagnosis: {
|
complaint: '胸闷、气短2天',
|
result: '冠心病、高血压2级',
|
advice: '建议定期复查，控制饮食，规律服药'
|
},
|
examinations: [
|
{
|
id: 1,
|
name: '心电图检查',
|
time: '2024-03-25 10:00',
|
status: 'completed',
|
statusText: '已完成',
|
hasReport: true
|
},
|
{
|
id: 2,
|
name: '血常规检查',
|
time: '2024-03-25 10:30',
|
status: 'processing',
|
statusText: '检验中'
|
}
|
],
|
prescriptions: [
|
{
|
name: '硝酸甘油片',
|
specification: '0.5mg*50片/盒',
|
dosage: '遵医嘱',
|
frequency: '需要时含服',
|
quantity: 1
|
},
|
{
|
name: '阿司匹林肠溶片',
|
specification: '100mg*30片/盒',
|
dosage: '1片',
|
frequency: '每日1次',
|
quantity: 2
|
}
|
],
|
prescriptionAmount: 156.5
|
})
|
|
// 获取状态描述
|
const getStatusDesc = (status) => {
|
const desc = {
|
upcoming: '请按时就诊，提前半小时到医院',
|
completed: '就诊已完成，请遵医嘱用药',
|
cancelled: '预约已取消，如需就诊请重新预约'
|
}
|
return desc[status]
|
}
|
|
// 获取状态图片
|
const getStatusImage = (status) => {
|
const images = {
|
upcoming: '/static/status/upcoming.png',
|
completed: '/static/status/completed.png',
|
cancelled: '/static/status/cancelled.png'
|
}
|
return images[status]
|
}
|
|
// 查看报告
|
const viewReport = (exam) => {
|
if (exam.hasReport) {
|
uni.navigateTo({
|
url: `/pages/records/report?id=${exam.id}`
|
})
|
}
|
}
|
|
// 改约
|
const reschedule = () => {
|
uni.navigateTo({
|
url: `/pages/appointment/schedule?recordId=${record.value.id}`
|
})
|
}
|
|
// 取消预约
|
const cancelAppointment = () => {
|
uni.showModal({
|
title: '取消预约',
|
content: '确定要取消该预约吗？',
|
success: (res) => {
|
if (res.confirm) {
|
// 调用取消预约接口
|
console.log('取消预约:', record.value.id)
|
}
|
}
|
})
|
}
|
|
// 查看全部报告
|
const viewAllReports = () => {
|
uni.navigateTo({
|
url: `/pages/records/reports?recordId=${record.value.id}`
|
})
|
}
|
|
// 再次预约
|
const bookAgain = () => {
|
uni.navigateTo({
|
url: `/pages/appointment/doctor?departmentId=${record.value.departmentId}&hospitalId=${record.value.hospitalId}`
|
})
|
}
|
|
onMounted(() => {
|
const pages = getCurrentPages()
|
const page = pages[pages.length - 1]
|
const recordId = page.$page?.options?.id
|
|
// 加载就诊记录详情
|
loadRecordDetail(recordId)
|
})
|
|
const loadRecordDetail = (id) => {
|
// 加载就诊记录详情的逻辑
|
}
|
</script>
|
|
<style lang="scss">
|
.detail-container {
|
min-height: 100vh;
|
background: $bg-color;
|
padding-bottom: 120rpx;
|
|
.status-card {
|
background: $primary-gradient;
|
padding: 40rpx 30rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
&.upcoming {
|
background: linear-gradient(135deg, #0f95b0, #89C4C1);
|
}
|
|
&.completed {
|
background: linear-gradient(135deg, #4DCEA5, #2FB4AE);
|
}
|
|
&.cancelled {
|
background: linear-gradient(135deg, #909399, #C0C4CC);
|
}
|
|
.status-info {
|
.status-text {
|
font-size: 40rpx;
|
color: #fff;
|
font-weight: bold;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 26rpx;
|
color: rgba(255,255,255,0.9);
|
}
|
}
|
|
.status-image {
|
width: 120rpx;
|
height: 120rpx;
|
}
|
}
|
|
.info-card {
|
margin: 20rpx;
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
box-shadow: $shadow-sm;
|
|
.hospital-info {
|
display: flex;
|
align-items: center;
|
position: relative;
|
padding-bottom: 20rpx;
|
|
.logo {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: $radius-md;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
flex: 1;
|
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.address {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
|
.icon-arrow-right {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.divider {
|
height: 1rpx;
|
background: #eee;
|
margin: 20rpx 0;
|
}
|
|
.department-info {
|
display: flex;
|
align-items: center;
|
|
.icon {
|
width: 60rpx;
|
height: 60rpx;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
.name {
|
font-size: 30rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.doctor {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
}
|
}
|
|
.detail-card {
|
margin: 20rpx;
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
box-shadow: $shadow-sm;
|
|
.section-title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
display: flex;
|
align-items: center;
|
|
&::before {
|
content: '';
|
width: 6rpx;
|
height: 30rpx;
|
background: $primary-color;
|
border-radius: 3rpx;
|
margin-right: 16rpx;
|
}
|
}
|
|
.info-list {
|
.info-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16rpx 0;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
|
.value {
|
font-size: 26rpx;
|
color: $text-primary;
|
|
&.price {
|
color: $danger;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
|
.diagnosis-info {
|
.diagnosis-item {
|
margin-bottom: 20rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.value {
|
font-size: 28rpx;
|
color: $text-primary;
|
line-height: 1.6;
|
}
|
}
|
}
|
|
.examination-list {
|
.examination-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.exam-info {
|
flex: 1;
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.time {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.status {
|
font-size: 24rpx;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
margin-right: 16rpx;
|
|
&.completed {
|
color: $success;
|
background: rgba($success, 0.1);
|
}
|
|
&.processing {
|
color: $primary-color;
|
background: $primary-light;
|
}
|
}
|
|
.icon-arrow-right {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.prescription-list {
|
.prescription-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.medicine-info {
|
flex: 1;
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.spec {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.usage {
|
margin-right: 30rpx;
|
text-align: right;
|
|
.dosage {
|
font-size: 26rpx;
|
color: $text-primary;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.frequency {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.quantity {
|
font-size: 28rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.total-amount {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
margin-top: 20rpx;
|
padding-top: 20rpx;
|
border-top: 1rpx solid #eee;
|
|
text {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-right: 16rpx;
|
|
&.amount {
|
font-size: 32rpx;
|
color: $danger;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
|
.bottom-bar {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20rpx 30rpx;
|
background: #fff;
|
box-shadow: $shadow-lg;
|
display: flex;
|
gap: 20rpx;
|
|
.action-btn {
|
flex: 1;
|
height: 80rpx;
|
line-height: 80rpx;
|
font-size: 28rpx;
|
color: $text-regular;
|
background: $bg-color;
|
border-radius: $radius-xl;
|
|
&.primary {
|
color: #fff;
|
background: $primary-gradient;
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
</style>
|
