feat(health+miniprogram): 预约/报告/随访/资讯/家庭管理 — Chunk 4-6
后端: - 添加 articles 表迁移 + Entity + Service + Handler - 健康数据趋势 API (get_mini_trend) 注册路由 - article CRUD (list/get) + DTO 前端 (11个新页面 + 5个服务): - 预约挂号: 列表/创建向导/详情页 - 报告管理: 列表/详情页 - 随访管理: 任务列表/记录详情页 - 资讯文章: 文章详情页 - 个人中心: 就诊人管理/新增/我的报告/我的随访/用药提醒/设置 - 更新 app.config.ts 注册全部路由 - 更新 profile/article 页面为真实功能
This commit is contained in:
iven
142
apps/miniprogram/src/pages/report/detail/index.scss
Normal file
142
apps/miniprogram/src/pages/report/detail/index.scss
Normal file
@@ -0,0 +1,142 @@
|
||||
@import '../../../styles/variables.scss';
|
||||
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding: 24px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 28px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid $bd-l;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 26px;
|
||||
color: $tx2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 26px;
|
||||
color: $tx;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.indicators-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 28px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.indicator-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid $bd-l;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.indicator-name {
|
||||
font-size: 26px;
|
||||
color: $tx2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.indicator-value {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
}
|
||||
|
||||
.indicator-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.indicator-ref {
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.indicator-status {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding: 4px 12px;
|
||||
border-radius: 16px;
|
||||
|
||||
&.normal {
|
||||
color: $tx3;
|
||||
background: $bd-l;
|
||||
}
|
||||
|
||||
&.high {
|
||||
color: $dan;
|
||||
background: $dan-l;
|
||||
}
|
||||
|
||||
&.low {
|
||||
color: $dan;
|
||||
background: $dan-l;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.empty-text {
|
||||
font-size: 28px;
|
||||
color: $tx3;
|
||||
}
|
||||
118
apps/miniprogram/src/pages/report/detail/index.tsx
Normal file
118
apps/miniprogram/src/pages/report/detail/index.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro, { useRouter } from '@tarojs/taro';
|
||||
import { getReportDetail, LabReport } from '../../../services/report';
|
||||
import './index.scss';
|
||||
|
||||
interface IndicatorItem {
|
||||
name: string;
|
||||
value: number;
|
||||
unit?: string;
|
||||
reference_min?: number;
|
||||
reference_max?: number;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export default function ReportDetail() {
|
||||
const router = useRouter();
|
||||
const id = router.params.id || '';
|
||||
const patientId = Taro.getStorageSync('current_patient_id') || '';
|
||||
|
||||
const [report, setReport] = useState<LabReport | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id || !patientId) return;
|
||||
setLoading(true);
|
||||
getReportDetail(patientId, id)
|
||||
.then((data) => setReport(data))
|
||||
.catch(() => Taro.showToast({ title: '加载失败', icon: 'none' }))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id, patientId]);
|
||||
|
||||
const indicators: IndicatorItem[] = React.useMemo(() => {
|
||||
if (!report?.indicators || typeof report.indicators !== 'object') return [];
|
||||
return Object.entries(report.indicators).map(([name, val]: [string, any]) => ({
|
||||
name,
|
||||
value: val.value,
|
||||
unit: val.unit,
|
||||
reference_min: val.reference_min,
|
||||
reference_max: val.reference_max,
|
||||
status: val.status,
|
||||
}));
|
||||
}, [report]);
|
||||
|
||||
const getStatusInfo = (status?: string) => {
|
||||
if (status === 'high') return { text: '偏高', icon: '', className: 'high' };
|
||||
if (status === 'low') return { text: '偏低', icon: '', className: 'low' };
|
||||
return { text: '正常', icon: '', className: 'normal' };
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className='detail-page'>
|
||||
<View className='loading-state'>
|
||||
<Text className='loading-text'>加载中...</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!report) {
|
||||
return (
|
||||
<View className='detail-page'>
|
||||
<View className='empty-state'>
|
||||
<Text className='empty-text'>报告不存在</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='detail-page'>
|
||||
{/* 基本信息 */}
|
||||
<View className='detail-card'>
|
||||
<Text className='detail-title'>{report.report_type}</Text>
|
||||
<View className='detail-row'>
|
||||
<Text className='detail-label'>报告日期</Text>
|
||||
<Text className='detail-value'>{report.report_date}</Text>
|
||||
</View>
|
||||
{report.doctor_interpretation && (
|
||||
<View className='detail-row'>
|
||||
<Text className='detail-label'>医生解读</Text>
|
||||
<Text className='detail-value'>{report.doctor_interpretation}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 指标列表 */}
|
||||
<View className='indicators-card'>
|
||||
<Text className='section-title'>检查指标</Text>
|
||||
{indicators.map((item) => {
|
||||
const statusInfo = getStatusInfo(item.status);
|
||||
return (
|
||||
<View className='indicator-item' key={item.name}>
|
||||
<View className='indicator-left'>
|
||||
<Text className='indicator-name'>{item.name}</Text>
|
||||
<Text className='indicator-value'>
|
||||
{item.value}
|
||||
{item.unit ? ` ${item.unit}` : ''}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='indicator-right'>
|
||||
{item.reference_min != null && item.reference_max != null && (
|
||||
<Text className='indicator-ref'>
|
||||
{item.reference_min}~{item.reference_max}
|
||||
</Text>
|
||||
)}
|
||||
<Text className={`indicator-status ${statusInfo.className}`}>
|
||||
{statusInfo.icon} {statusInfo.text}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user