diff --git a/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.scss b/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.scss index 7f214fd..8ccb9cc 100644 --- a/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.scss +++ b/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.scss @@ -1,45 +1,24 @@ @import '../../../styles/variables.scss'; -@import '../../../styles/mixins.scss'; -.prescription-page { - min-height: 100vh; - background: $bg; - padding-bottom: 120px; -} - -.search-bar { - padding: 16px 24px; - background: $card; -} - -.search-input { - background: $bg; - border-radius: $r-sm; - padding: 16px 20px; - font-size: var(--tk-font-body-lg); - color: $tx; -} - -.prescription-list { - padding: 16px 24px; -} +// PageShell 已接管:min-height, background, padding +// SearchSection 已接管:search-bar +// ContentCard 已接管:prescription-card 背景/圆角/阴影/触摸反馈 +// StatusTag 已接管:status-tag 标签样式 +// PaginationBar 已接管:pagination 分页样式 .prescription-count { - font-size: var(--tk-font-h2); - color: $tx3; - padding: 8px 0 16px; + margin-bottom: 16px; + + text { + font-size: var(--tk-font-h2); + color: $tx3; + } } -.prescription-card { - background: $card; - border-radius: $r; - padding: 24px; - margin-bottom: 16px; - box-shadow: $shadow-sm; - - &:active { - box-shadow: $shadow-md; - } +.prescription-cards { + display: flex; + flex-direction: column; + gap: var(--tk-gap-md); } .prescription-card__header { @@ -55,20 +34,6 @@ color: $tx; } -.status-tag { - display: inline-block; - padding: 4px 12px; - border-radius: $r-xs; - font-size: var(--tk-font-body); - background: $bd-l; - color: $tx3; - - &--active { - background: $acc-l; - color: $acc; - } -} - .prescription-card__body { display: flex; gap: 16px; @@ -88,31 +53,6 @@ font-variant-numeric: tabular-nums; } -.pagination { - display: flex; - justify-content: center; - align-items: center; - padding: 16px 0; - gap: 24px; -} - -.page-btn { - padding: 12px 24px; - background: $card; - border-radius: $r-sm; - font-size: var(--tk-font-h1); - color: $pri; - - &--disabled { - opacity: 0.4; - } -} - -.page-info { - font-size: var(--tk-font-h2); - color: $tx2; -} - .fab { position: fixed; right: 32px; diff --git a/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.tsx b/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.tsx index dc5cb31..3a7a883 100644 --- a/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.tsx +++ b/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.tsx @@ -1,15 +1,20 @@ import { useState, useEffect, useCallback, useRef } from 'react'; -import { View, Text, Input, ScrollView } from '@tarojs/components'; +import { View, Text } from '@tarojs/components'; import Taro, { useRouter } from '@tarojs/taro'; import { usePageData } from '@/hooks/usePageData'; import { listDialysisPrescriptions, type DialysisPrescription } from '@/services/doctor/dialysis'; import { listPatients } from '@/services/doctor/patient'; -import Loading from '@/components/Loading'; +import PageShell from '@/components/ui/PageShell'; +import ContentCard from '@/components/ui/ContentCard'; +import StatusTag from '@/components/ui/StatusTag'; +import LoadingCard from '@/components/ui/LoadingCard'; +import SearchSection from '@/components/patterns/SearchSection'; +import PaginationBar from '@/components/patterns/PaginationBar'; +import SegmentTabs from '@/components/SegmentTabs'; import ErrorState from '@/components/ErrorState'; import EmptyState from '@/components/EmptyState'; import { useElderClass } from '../../../hooks/useElderClass'; import { safeNavigateTo } from '@/utils/navigate'; -import SegmentTabs from '@/components/SegmentTabs'; import './index.scss'; const TABS = [ @@ -18,6 +23,11 @@ const TABS = [ { key: 'inactive', label: '已停用' }, ]; +const STATUS_LABEL: Record = { + active: '生效中', + inactive: '已停用', +}; + export default function PrescriptionList() { const router = useRouter(); const patientId = router.params.patientId || ''; @@ -82,80 +92,74 @@ export default function PrescriptionList() { } }; - if (loading && prescriptions.length === 0) return ; + const handleTab = (key: string) => { + setActiveTab(key); + setPage(1); + }; + + if (loading && prescriptions.length === 0) return ; if (error) return loadData(1)} />; return ( - - {!patientId && ( - - setSearchPatient(e.detail.value)} - confirmType='search' - onConfirm={handleSearch} - /> - + + {!patientId ? ( + + ) : ( + )} - { setActiveTab(key); setPage(1); }} variant="underline" /> - {prescriptions.length === 0 ? ( - + ) : ( - - 共 {total} 条处方 - {prescriptions.map((p) => ( - safeNavigateTo(`/pages/pkg-doctor-clinical/prescription/detail/index?id=${p.id}`)} - > - - {p.dialyzer_model || '透析处方'} - - {p.status === 'active' ? '生效中' : p.status === 'inactive' ? '已停用' : p.status} - - - - {p.frequency_per_week != null && ( - {p.frequency_per_week}次/周 - )} - {p.duration_minutes != null && ( - 每次{p.duration_minutes}分钟 - )} - - {(p.effective_from || p.effective_to) && ( - - {p.effective_from || '...'} ~ {p.effective_to || '...'} - - )} - - ))} - {total > 20 && ( - - page > 1 && loadData(page - 1)} + <> + + 共 {total} 条处方 + + + {prescriptions.map((p) => ( + safeNavigateTo(`/pages/pkg-doctor-clinical/prescription/detail/index?id=${p.id}`)} > - 上一页 - - {page} / {Math.ceil(total / 20)} - = total ? 'page-btn--disabled' : ''}`} - onClick={() => page * 20 < total && loadData(page + 1)} - > - 下一页 - - - )} - + + {p.dialyzer_model || '透析处方'} + {STATUS_LABEL[p.status] || p.status} + + + {p.frequency_per_week != null && ( + {p.frequency_per_week}次/周 + )} + {p.duration_minutes != null && ( + 每次{p.duration_minutes}分钟 + )} + + {(p.effective_from || p.effective_to) && ( + + {p.effective_from || '...'} ~ {p.effective_to || '...'} + + )} + + ))} + + loadData(p)} + /> + )} { if (!currentPatientId) { Taro.showToast({ title: '请先选择患者', icon: 'none' }); @@ -164,8 +168,8 @@ export default function PrescriptionList() { safeNavigateTo(`/pages/pkg-doctor-clinical/prescription/create/index?patientId=${currentPatientId}`); }} > - + + + - + ); }