2c567bd772
Phase 0 基础设施:
- statusTag.ts: getStatusInlineStyle() 移除内联 borderRadius/padding/fontSize，仅返回 {background, color}
- 新增 SEVERITY_COLORS + getSeverityStyle() + getSeverityLabel() 统一告警严重程度样式
- variables.scss: 新增 9 个语义颜色别名 ($success/$danger/$warning/$info 等)
- mixins.scss: 新增 status-inline mixin 统一状态标签样式
- 7 个消费者页面添加 @include status-inline CSS 补偿
Phase 1 HIGH 修复 (4 页面):
- P46 随访管理: 移除 getTypeStyle() 硬编码 fontSize，替换文字 Loading 为组件
- P45 咨询详情医护: 添加 Loading/ErrorState 三态模板 + error ref
- P02 健康数据: 添加 loading ref + Loading 组件 + 错误 toast 提示
- P48 告警中心: 替换本地 SEVERITY_COLORS/SEVERITY_LABELS 为 statusTag.ts 导出
Phase 2 全局一致性:
- 2.1 触控补全: 17 页面为可点击元素添加 min-height: $touch-min
- 2.2 字号替换: 19 文件 31 处硬编码 px → Design Token CSS 变量
- 2.3 颜色替换: 18 文件 ~50 处硬编码十六进制 → SCSS 语义变量
- 2.4 elder-mode.scss: 新增 9 个选择器到触控放大清单
Phase 3 LOW 修复:
- 3.1 统一 Loading: 21 页面旧式文字加载 → <Loading> 组件
- 3.2 useElderClass: 8 页面补全长者模式 class 绑定
- 3.3 零散修复: 按钮 44px→48px，诊断记录添加 scroll-view 无限加载
同时新增 UniApp (Vue 3 + Vite) 小程序完整代码库 (146 文件)
109 lines
6.4 KiB
Vue
109 lines
6.4 KiB
Vue
<template>
|
|
<view :class="['detail-page', elderClass]">
|
|
<Loading v-if="loading" text="加载中..." />
|
|
<EmptyState v-else-if="!rx" icon="📋" title="处方不存在" />
|
|
<template v-else>
|
|
<view class="detail-card header-card">
|
|
<view class="header-row">
|
|
<text class="detail-title">{{ rx.dialyzer_model || '透析处方' }}</text>
|
|
<text :class="['status-tag', statusInfo(rx.status).cls]">{{ statusInfo(rx.status).label }}</text>
|
|
</view>
|
|
<text v-if="rx.effective_from || rx.effective_to" class="header-sub">
|
|
{{ rx.effective_from || '...' }} ~ {{ rx.effective_to || '...' }}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="detail-card">
|
|
<text class="section-title">基本参数</text>
|
|
<view v-if="rx.dialyzer_model" class="detail-row"><text class="detail-label">透析器型号</text><text class="detail-value">{{ rx.dialyzer_model }}</text></view>
|
|
<view v-if="rx.membrane_area != null" class="detail-row"><text class="detail-label">膜面积</text><text class="detail-value">{{ rx.membrane_area }} m²</text></view>
|
|
<view v-if="rx.blood_flow_rate != null" class="detail-row"><text class="detail-label">血流速</text><text class="detail-value">{{ rx.blood_flow_rate }} ml/min</text></view>
|
|
<view v-if="rx.dialysate_flow_rate != null" class="detail-row"><text class="detail-label">透析液流量</text><text class="detail-value">{{ rx.dialysate_flow_rate }} ml/min</text></view>
|
|
<view v-if="rx.frequency_per_week != null" class="detail-row"><text class="detail-label">频率</text><text class="detail-value">{{ rx.frequency_per_week }} 次/周</text></view>
|
|
<view v-if="rx.duration_minutes != null" class="detail-row"><text class="detail-label">每次时长</text><text class="detail-value">{{ rx.duration_minutes }} 分钟</text></view>
|
|
</view>
|
|
|
|
<view class="detail-card">
|
|
<text class="section-title">透析液配比</text>
|
|
<view v-if="rx.dialysate_potassium != null" class="detail-row"><text class="detail-label">钾浓度</text><text class="detail-value">{{ rx.dialysate_potassium }} mmol/L</text></view>
|
|
<view v-if="rx.dialysate_calcium != null" class="detail-row"><text class="detail-label">钙浓度</text><text class="detail-value">{{ rx.dialysate_calcium }} mmol/L</text></view>
|
|
<view v-if="rx.dialysate_bicarbonate != null" class="detail-row"><text class="detail-label">碳酸氢盐浓度</text><text class="detail-value">{{ rx.dialysate_bicarbonate }} mmol/L</text></view>
|
|
</view>
|
|
|
|
<view class="detail-card">
|
|
<text class="section-title">抗凝方案</text>
|
|
<view v-if="rx.anticoagulation_type" class="detail-row"><text class="detail-label">抗凝类型</text><text class="detail-value">{{ rx.anticoagulation_type }}</text></view>
|
|
<view v-if="rx.anticoagulation_dose" class="detail-row"><text class="detail-label">抗凝剂量</text><text class="detail-value">{{ rx.anticoagulation_dose }}</text></view>
|
|
</view>
|
|
|
|
<view v-if="rx.vascular_access_type || rx.vascular_access_location" class="detail-card">
|
|
<text class="section-title">血管通路</text>
|
|
<view v-if="rx.vascular_access_type" class="detail-row"><text class="detail-label">通路类型</text><text class="detail-value">{{ rx.vascular_access_type }}</text></view>
|
|
<view v-if="rx.vascular_access_location" class="detail-row"><text class="detail-label">通路位置</text><text class="detail-value">{{ rx.vascular_access_location }}</text></view>
|
|
</view>
|
|
|
|
<view v-if="rx.target_ultrafiltration_ml != null || rx.target_dry_weight != null" class="detail-card">
|
|
<text class="section-title">超滤目标</text>
|
|
<view v-if="rx.target_ultrafiltration_ml != null" class="detail-row"><text class="detail-label">目标超滤量</text><text class="detail-value">{{ rx.target_ultrafiltration_ml }} ml</text></view>
|
|
<view v-if="rx.target_dry_weight != null" class="detail-row"><text class="detail-label">目标干体重</text><text class="detail-value">{{ rx.target_dry_weight }} kg</text></view>
|
|
</view>
|
|
|
|
<view v-if="rx.notes" class="detail-card">
|
|
<text class="section-title">备注</text>
|
|
<text class="notes-text">{{ rx.notes }}</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { getDialysisPrescription, type DialysisPrescription } from '@/services/dialysis'
|
|
import Loading from '@/components/Loading.vue'
|
|
import EmptyState from '@/components/EmptyState.vue'
|
|
import { useElderClass } from '@/composables/useElderClass'
|
|
|
|
const STATUS_MAP: Record<string, { label: string; cls: string }> = {
|
|
active: { label: '生效中', cls: 'active' },
|
|
inactive: { label: '已停用', cls: 'inactive' },
|
|
expired: { label: '已过期', cls: 'expired' },
|
|
}
|
|
|
|
const { elderClass } = useElderClass()
|
|
const rx = ref<DialysisPrescription | null>(null)
|
|
const loading = ref(true)
|
|
let id = ''
|
|
|
|
const statusInfo = (s: string) => STATUS_MAP[s] || { label: s, cls: '' }
|
|
|
|
onLoad((query) => {
|
|
id = query?.id || ''
|
|
if (!id) { loading.value = false; return }
|
|
loading.value = true
|
|
getDialysisPrescription(id)
|
|
.then(data => { rx.value = data })
|
|
.catch(() => uni.showToast({ title: '加载失败', icon: 'none' }))
|
|
.finally(() => { loading.value = false })
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail-page { min-height: 100vh; background: $bg; padding: 24px; }
|
|
.detail-card { @include card; margin-bottom: 16px; }
|
|
.header-card { border-left: 4px solid $pri; }
|
|
.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
|
|
.detail-title { font-size: var(--tk-font-title); font-weight: 600; color: $tx; }
|
|
.status-tag { padding: 2px 10px; border-radius: 4px; font-size: var(--tk-font-cap);
|
|
&.active { background: rgba(82,196,26,0.1); color: $acc; }
|
|
&.inactive { background: rgba(0,0,0,0.04); color: $tx3; }
|
|
&.expired { background: rgba(255,77,79,0.1); color: $dan; }
|
|
}
|
|
.header-sub { font-size: var(--tk-font-cap); color: $tx3; display: block; margin-top: 4px; }
|
|
.section-title { font-size: var(--tk-font-body); font-weight: 500; color: $tx; margin-bottom: 12px; display: block; }
|
|
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; }
|
|
.detail-label { font-size: var(--tk-font-cap); color: $tx3; }
|
|
.detail-value { font-size: var(--tk-font-body); color: $tx; }
|
|
.notes-text { font-size: var(--tk-font-cap); color: $tx2; line-height: 1.6; }
|
|
</style>
|