feat(miniprogram): 实现小程序透析模块 — 患者端查看 + 医护端录入/审阅

审计后续 H1: 补齐小程序端透析功能，对接后端 12 个 API 路由。新增内容: - 患者端: 透析记录列表/详情 + 透析处方列表/详情（只读，4 页面） - 医护端: 透析记录列表/详情/创建 + 处方列表/详情/创建（6 页面） - Service 层: dialysis.ts（患者端只读）+ doctor/dialysis.ts（医护端 CRUD） - 集成入口: 医生工作台快捷操作 + 患者"我的"菜单 + 路由注册 - 基础设施: api.delete 扩展支持 data 参数（后端 delete 需要 version）
2026-04-30 16:48:39 +08:00
parent 84fafb0bc5
commit 36a55e116e
27 changed files with 3076 additions and 343 deletions
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.scss
@@ -0,0 +1,118 @@
+@import '../../../../styles/variables.scss';
+
+@mixin serif-number {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-variant-numeric: tabular-nums;
+}
+
+.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: $shadow-sm;
+}
+
+.header-card {
+  .header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+}
+
+.detail-title {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 34px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 8px;
+  font-size: 20px;
+  font-weight: 500;
+  background: $bd-l;
+  color: $tx3;
+
+  &.active {
+    background: $acc-l;
+    color: $acc;
+  }
+
+  &.expired {
+    background: $tx3;
+    color: $bg;
+  }
+}
+
+.header-sub {
+  font-size: 26px;
+  color: $tx2;
+  display: block;
+  @include serif-number;
+}
+
+.section-title {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.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;
+  @include serif-number;
+}
+
+.notes-text {
+  font-size: 26px;
+  color: $tx;
+  line-height: 1.6;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useRouter } from '@tarojs/taro';
+import { getDialysisPrescription } from '@/services/dialysis';
+import type { DialysisPrescription } from '@/services/dialysis';
+import Loading from '@/components/Loading';
+import './index.scss';
+
+const STATUS_MAP: Record<string, { label: string; cls: string }> = {
+  active: { label: '生效中', cls: 'active' },
+  inactive: { label: '已停用', cls: 'inactive' },
+  expired: { label: '已过期', cls: 'expired' },
+};
+
+export default function DialysisPrescriptionDetail() {
+  const router = useRouter();
+  const id = router.params.id || '';
+  const [rx, setRx] = useState<DialysisPrescription | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    getDialysisPrescription(id)
+      .then((data) => setRx(data))
+      .catch(() => Taro.showToast({ title: '加载失败', icon: 'none' }))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) return <View className='detail-page'><Loading /></View>;
+  if (!rx) return <View className='detail-page'><View className='empty-state'><Text className='empty-text'>处方不存在</Text></View></View>;
+
+  const si = STATUS_MAP[rx.status] || { label: rx.status, cls: '' };
+
+  const Row = ({ label, value }: { label: string; value?: string | number | null }) => {
+    if (value == null) return null;
+    return (
+      <View className='detail-row'>
+        <Text className='detail-label'>{label}</Text>
+        <Text className='detail-value'>{value}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <View className='detail-page'>
+      {/* 状态头部 */}
+      <View className='detail-card header-card'>
+        <View className='header-row'>
+          <Text className='detail-title'>{rx.dialyzer_model || '透析处方'}</Text>
+          <Text className={`status-tag ${si.cls}`}>{si.label}</Text>
+        </View>
+        {(rx.effective_from || rx.effective_to) && (
+          <Text className='header-sub'>{rx.effective_from || '...'} ~ {rx.effective_to || '...'}</Text>
+        )}
+      </View>
+
+      {/* 基本参数 */}
+      <View className='detail-card'>
+        <Text className='section-title'>基本参数</Text>
+        <Row label='透析器型号' value={rx.dialyzer_model} />
+        <Row label='膜面积' value={rx.membrane_area != null ? `${rx.membrane_area} m²` : null} />
+        <Row label='血流速' value={rx.blood_flow_rate != null ? `${rx.blood_flow_rate} ml/min` : null} />
+        <Row label='透析液流量' value={rx.dialysate_flow_rate != null ? `${rx.dialysate_flow_rate} ml/min` : null} />
+        <Row label='频率' value={rx.frequency_per_week != null ? `${rx.frequency_per_week} 次/周` : null} />
+        <Row label='每次时长' value={rx.duration_minutes != null ? `${rx.duration_minutes} 分钟` : null} />
+      </View>
+
+      {/* 透析液配比 */}
+      <View className='detail-card'>
+        <Text className='section-title'>透析液配比</Text>
+        <Row label='钾浓度' value={rx.dialysate_potassium != null ? `${rx.dialysate_potassium} mmol/L` : null} />
+        <Row label='钙浓度' value={rx.dialysate_calcium != null ? `${rx.dialysate_calcium} mmol/L` : null} />
+        <Row label='碳酸氢盐浓度' value={rx.dialysate_bicarbonate != null ? `${rx.dialysate_bicarbonate} mmol/L` : null} />
+      </View>
+
+      {/* 抗凝方案 */}
+      <View className='detail-card'>
+        <Text className='section-title'>抗凝方案</Text>
+        <Row label='抗凝类型' value={rx.anticoagulation_type} />
+        <Row label='抗凝剂量' value={rx.anticoagulation_dose} />
+      </View>
+
+      {/* 血管通路 */}
+      {(rx.vascular_access_type || rx.vascular_access_location) && (
+        <View className='detail-card'>
+          <Text className='section-title'>血管通路</Text>
+          <Row label='通路类型' value={rx.vascular_access_type} />
+          <Row label='通路位置' value={rx.vascular_access_location} />
+        </View>
+      )}
+
+      {/* 超滤与干体重 */}
+      {(rx.target_ultrafiltration_ml != null || rx.target_dry_weight != null) && (
+        <View className='detail-card'>
+          <Text className='section-title'>超滤目标</Text>
+          <Row label='目标超滤量' value={rx.target_ultrafiltration_ml != null ? `${rx.target_ultrafiltration_ml} ml` : null} />
+          <Row label='目标干体重' value={rx.target_dry_weight != null ? `${rx.target_dry_weight} kg` : null} />
+        </View>
+      )}
+
+      {/* 备注 */}
+      {rx.notes && (
+        <View className='detail-card'>
+          <Text className='section-title'>备注</Text>
+          <Text className='notes-text'>{rx.notes}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss
@@ -0,0 +1,98 @@
+@import '../../../styles/variables.scss';
+
+@mixin section-title {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+  margin-bottom: 20px;
+  display: block;
+}
+
+@mixin tag($bg, $color) {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 8px;
+  font-size: 20px;
+  font-weight: 500;
+  background: $bg;
+  color: $color;
+}
+
+@mixin serif-number {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-variant-numeric: tabular-nums;
+}
+
+.dialysis-prescriptions-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 32px 24px;
+  padding-bottom: 40px;
+}
+
+.page-title {
+  @include section-title;
+  padding-left: 4px;
+}
+
+.prescription-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.prescription-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: $shadow-sm;
+
+  &:active {
+    box-shadow: $shadow-md;
+  }
+}
+
+.prescription-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.prescription-model {
+  font-size: 28px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.status-tag {
+  @include tag($bd-l, $tx3);
+
+  &.active {
+    @include tag($acc-l, $acc);
+  }
+
+  &.expired {
+    @include tag($tx3, $bg);
+  }
+}
+
+.prescription-meta {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 8px;
+}
+
+.meta-item {
+  font-size: 24px;
+  color: $tx2;
+  @include serif-number;
+}
+
+.prescription-date {
+  font-size: 24px;
+  color: $tx3;
+  display: block;
+  @include serif-number;
+}
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.tsx
@@ -0,0 +1,98 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro';
+import { listDialysisPrescriptions } from '@/services/dialysis';
+import type { DialysisPrescription } from '@/services/dialysis';
+import EmptyState from '@/components/EmptyState';
+import Loading from '@/components/Loading';
+import './index.scss';
+
+const STATUS_MAP: Record<string, { label: string; cls: string }> = {
+  active: { label: '生效中', cls: 'active' },
+  inactive: { label: '已停用', cls: 'inactive' },
+  expired: { label: '已过期', cls: 'expired' },
+};
+
+export default function DialysisPrescriptionList() {
+  const [prescriptions, setPrescriptions] = useState<DialysisPrescription[]>([]);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = useCallback(async (p: number, append = false) => {
+    const patientId = Taro.getStorageSync('current_patient_id') || '';
+    if (!patientId) {
+      setPrescriptions([]);
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await listDialysisPrescriptions({ patient_id: patientId, page: p, page_size: 20 });
+      const list = res.data || [];
+      setPrescriptions(append ? (prev) => [...prev, ...list] : list);
+      setTotal(res.total);
+      setPage(p);
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useDidShow(() => { fetchData(1); });
+
+  usePullDownRefresh(() => {
+    fetchData(1).finally(() => Taro.stopPullDownRefresh());
+  });
+
+  useReachBottom(() => {
+    if (!loading && prescriptions.length < total) {
+      fetchData(page + 1, true);
+    }
+  });
+
+  const statusInfo = (s: string) => STATUS_MAP[s] || { label: s, cls: '' };
+
+  return (
+    <View className='dialysis-prescriptions-page'>
+      <Text className='page-title'>透析处方</Text>
+
+      <View className='prescription-list'>
+        {prescriptions.map((p) => {
+          const si = statusInfo(p.status);
+          return (
+            <View
+              className='prescription-card'
+              key={p.id}
+              onClick={() => Taro.navigateTo({ url: `/pages/pkg-profile/dialysis-prescriptions/detail/index?id=${p.id}` })}
+            >
+              <View className='prescription-card-top'>
+                <Text className='prescription-model'>{p.dialyzer_model || '未指定型号'}</Text>
+                <Text className={`status-tag ${si.cls}`}>{si.label}</Text>
+              </View>
+              <View className='prescription-meta'>
+                {p.frequency_per_week != null && (
+                  <Text className='meta-item'>{p.frequency_per_week}次/周</Text>
+                )}
+                {p.duration_minutes != null && (
+                  <Text className='meta-item'>每次{p.duration_minutes}分钟</Text>
+                )}
+              </View>
+              {(p.effective_from || p.effective_to) && (
+                <Text className='prescription-date'>
+                  {p.effective_from || '...'} ~ {p.effective_to || '...'}
+                </Text>
+              )}
+            </View>
+          );
+        })}
+      </View>
+
+      {prescriptions.length === 0 && !loading && (
+        <EmptyState text={Taro.getStorageSync('current_patient_id') ? '暂无透析处方' : '请先在就诊人管理中选择就诊人'} />
+      )}
+
+      {loading && <Loading />}
+    </View>
+  );
+}