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 页面为真实功能
2026-04-24 00:58:40 +08:00
parent ee9a5c4da1
commit 9ef65b9a9f
53 changed files with 6044 additions and 32 deletions
--- a/apps/miniprogram/src/pages/report/detail/index.scss
+++ b/apps/miniprogram/src/pages/report/detail/index.scss
@@ -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;
+}
--- a/apps/miniprogram/src/pages/report/detail/index.tsx
+++ b/apps/miniprogram/src/pages/report/detail/index.tsx
@@ -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>
+  );
+}
--- a/apps/miniprogram/src/pages/report/index.scss
+++ b/apps/miniprogram/src/pages/report/index.scss
@@ -0,0 +1,88 @@
+@import '../../styles/variables.scss';
+
+.report-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+  padding-bottom: 40px;
+}
+
+.report-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.report-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.report-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.report-type {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.report-status {
+  font-size: 24px;
+  padding: 4px 16px;
+  border-radius: 20px;
+
+  &.normal {
+    color: $acc;
+    background: $acc-l;
+  }
+
+  &.abnormal {
+    color: $dan;
+    background: $dan-l;
+  }
+}
+
+.report-date {
+  font-size: 26px;
+  color: $tx2;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.report-note {
+  font-size: 24px;
+  color: $tx3;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
+
+.loading-hint {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.loading-text {
+  font-size: 24px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/report/index.tsx
+++ b/apps/miniprogram/src/pages/report/index.tsx
@@ -0,0 +1,97 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro';
+import { listReports, LabReport } from '../../services/report';
+import './index.scss';
+
+const PAGE_SIZE = 20;
+
+export default function ReportList() {
+  const [reports, setReports] = useState<LabReport[]>([]);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const patientId = Taro.getStorageSync('current_patient_id') || '';
+
+  const fetchData = useCallback(async (p: number, append = false) => {
+    if (!patientId) return;
+    setLoading(true);
+    try {
+      const res = await listReports(patientId, p);
+      const list = res.data || [];
+      setReports(append ? (prev) => [...prev, ...list] : list);
+      setTotal(res.total);
+      setPage(p);
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }, [patientId]);
+
+  useDidShow(() => {
+    fetchData(1);
+  });
+
+  usePullDownRefresh(() => {
+    fetchData(1).finally(() => {
+      Taro.stopPullDownRefresh();
+    });
+  });
+
+  useReachBottom(() => {
+    if (!loading && reports.length < total) {
+      fetchData(page + 1, true);
+    }
+  });
+
+  const goToDetail = (id: string) => {
+    Taro.navigateTo({ url: `/pages/report/detail/index?id=${id}` });
+  };
+
+  const formatStatus = (report: LabReport) => {
+    const indicators = report.indicators;
+    if (!indicators || typeof indicators !== 'object') return '未知';
+    const vals = Object.values(indicators) as Array<{ status?: string }>;
+    const hasAbnormal = vals.some((v) => v.status === 'high' || v.status === 'low');
+    return hasAbnormal ? '异常' : '正常';
+  };
+
+  return (
+    <View className='report-page'>
+      <View className='report-list'>
+        {reports.map((r) => (
+          <View
+            className='report-card'
+            key={r.id}
+            onClick={() => goToDetail(r.id)}
+          >
+            <View className='report-card-top'>
+              <Text className='report-type'>{r.report_type}</Text>
+              <Text className={`report-status ${formatStatus(r) === '正常' ? 'normal' : 'abnormal'}`}>
+                {formatStatus(r)}
+              </Text>
+            </View>
+            <Text className='report-date'>{r.report_date}</Text>
+            {r.doctor_interpretation && (
+              <Text className='report-note'>{r.doctor_interpretation}</Text>
+            )}
+          </View>
+        ))}
+      </View>
+
+      {reports.length === 0 && !loading && (
+        <View className='empty-state'>
+          <Text className='empty-text'>暂无报告记录</Text>
+        </View>
+      )}
+
+      {loading && (
+        <View className='loading-hint'>
+          <Text className='loading-text'>加载中...</Text>
+        </View>
+      )}
+    </View>
+  );
+}