184bd0ea03
- 首页/健康/我的/商城/消息 TabBar 页面使用 PageShell 替代手写容器 - 登录/法律条款/关怀模式设置页使用 PageShell 替代手写容器 - 各页面卡片统一使用 ContentCard 组件 - 清理页面 SCSS 中的 min-height/background/padding 样板代码 - 66 个小程序页面全部完成统一组件迁移
336 lines
14 KiB
TypeScript
336 lines
14 KiB
TypeScript
import { useState } from 'react';
|
||
import { View, Text, Input } from '@tarojs/components';
|
||
import Taro from '@tarojs/taro';
|
||
import { useAuthStore } from '../../stores/auth';
|
||
import { useElderClass } from '../../hooks/useElderClass';
|
||
import { findThreshold, inputVitalSign, type HealthThreshold } from '../../services/health';
|
||
import Loading from '../../components/Loading';
|
||
import ErrorState from '../../components/ErrorState';
|
||
import GuestGuard from '../../components/GuestGuard';
|
||
import SegmentTabs from '../../components/SegmentTabs';
|
||
import PageShell from '@/components/ui/PageShell';
|
||
import ContentCard from '@/components/ui/ContentCard';
|
||
import { useHealthData, VITAL_TABS, type VitalType } from './useHealthData';
|
||
import './index.scss';
|
||
|
||
function buildRefRange(t: HealthThreshold[]): Record<VitalType, string> {
|
||
const bpSys = findThreshold(t, 'systolic_bp', 'high')?.threshold_value ?? 140;
|
||
const bpDia = findThreshold(t, 'diastolic_bp', 'high')?.threshold_value ?? 90;
|
||
const hrHigh = findThreshold(t, 'heart_rate', 'high')?.threshold_value ?? 100;
|
||
const hrLow = findThreshold(t, 'heart_rate', 'low')?.threshold_value ?? 60;
|
||
const bsFasting = findThreshold(t, 'blood_sugar_fasting', 'high')?.threshold_value ?? 6.1;
|
||
const bsPp = findThreshold(t, 'blood_sugar_postprandial', 'high')?.threshold_value ?? 7.8;
|
||
return {
|
||
blood_pressure: `收缩压 90-${bpSys} / 舒张压 60-${bpDia} mmHg`,
|
||
heart_rate: `${hrLow}-${hrHigh} bpm`,
|
||
blood_sugar: `空腹 3.9-${bsFasting} / 餐后 <${bsPp} mmol/L`,
|
||
weight: '根据 BMI 18.5-24 计算',
|
||
};
|
||
}
|
||
|
||
export default function Health() {
|
||
const currentPatient = useAuthStore((s) => s.currentPatient);
|
||
const modeClass = useElderClass();
|
||
const {
|
||
user, todaySummary, loading, error, activeTab, trendData, trendLoading,
|
||
aiSuggestions, thresholds, handleTabChange, loadTrend, refreshToday, fetchData,
|
||
} = useHealthData();
|
||
|
||
const [systolic, setSystolic] = useState('');
|
||
const [diastolic, setDiastolic] = useState('');
|
||
const [heartRateVal, setHeartRateVal] = useState('');
|
||
const [sugarVal, setSugarVal] = useState('');
|
||
const [sugarPeriod, setSugarPeriod] = useState<'fasting' | 'postprandial'>('fasting');
|
||
const [weightVal, setWeightVal] = useState('');
|
||
const [saving, setSaving] = useState(false);
|
||
|
||
if (!user) {
|
||
return <GuestGuard title='请先登录' desc='登录后即可记录和查看健康数据' />;
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<PageShell padding="md" safeBottom={false} scroll={false} className={`health-page ${modeClass}`}>
|
||
<View className='health-header'>
|
||
<Text className='health-title'>健康数据</Text>
|
||
</View>
|
||
<ErrorState onRetry={fetchData} />
|
||
</PageShell>
|
||
);
|
||
}
|
||
|
||
const getWarnStatus = (type: VitalType): string | null => {
|
||
if (type === 'blood_pressure') {
|
||
const sys = parseFloat(systolic);
|
||
const dia = parseFloat(diastolic);
|
||
const sysMax = findThreshold(thresholds, 'systolic_bp', 'high')?.threshold_value ?? 140;
|
||
const diaMax = findThreshold(thresholds, 'diastolic_bp', 'high')?.threshold_value ?? 90;
|
||
if (sys > sysMax || dia > diaMax) return '血压偏高，确认提交？';
|
||
} else if (type === 'heart_rate') {
|
||
const val = parseFloat(heartRateVal);
|
||
const hrHigh = findThreshold(thresholds, 'heart_rate', 'high')?.threshold_value ?? 100;
|
||
const hrLow = findThreshold(thresholds, 'heart_rate', 'low')?.threshold_value ?? 60;
|
||
if (val > hrHigh || val < hrLow) return '心率异常，确认提交？';
|
||
} else if (type === 'blood_sugar') {
|
||
const val = parseFloat(sugarVal);
|
||
if (sugarPeriod === 'fasting') {
|
||
const bsMax = findThreshold(thresholds, 'blood_sugar_fasting', 'high')?.threshold_value ?? 6.1;
|
||
if (val > bsMax) return '血糖偏高，确认提交？';
|
||
} else {
|
||
const bsMax = findThreshold(thresholds, 'blood_sugar_postprandial', 'high')?.threshold_value ?? 7.8;
|
||
if (val > bsMax) return '血糖偏高，确认提交？';
|
||
}
|
||
}
|
||
return null;
|
||
};
|
||
|
||
const refRanges = buildRefRange(thresholds);
|
||
|
||
const handleSave = async () => {
|
||
const patientId = currentPatient?.id;
|
||
if (!patientId) {
|
||
Taro.showToast({ title: '请先登录', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
const warnMsg = getWarnStatus(activeTab);
|
||
if (warnMsg) {
|
||
const { confirm } = await Taro.showModal({
|
||
title: '异常提示',
|
||
content: warnMsg,
|
||
confirmText: '确认提交',
|
||
cancelText: '再看看',
|
||
});
|
||
if (!confirm) return;
|
||
}
|
||
|
||
setSaving(true);
|
||
try {
|
||
switch (activeTab) {
|
||
case 'blood_pressure': {
|
||
const sys = parseFloat(systolic);
|
||
const dia = parseFloat(diastolic);
|
||
if (!sys || !dia) { Taro.showToast({ title: '请填写完整', icon: 'none' }); return; }
|
||
await inputVitalSign(patientId, {
|
||
indicator_type: 'blood_pressure',
|
||
value: sys,
|
||
extra: { systolic: sys, diastolic: dia },
|
||
});
|
||
setSystolic('');
|
||
setDiastolic('');
|
||
break;
|
||
}
|
||
case 'heart_rate': {
|
||
const val = parseFloat(heartRateVal);
|
||
if (!val) { Taro.showToast({ title: '请填写心率', icon: 'none' }); return; }
|
||
await inputVitalSign(patientId, { indicator_type: 'heart_rate', value: val });
|
||
setHeartRateVal('');
|
||
break;
|
||
}
|
||
case 'blood_sugar': {
|
||
const val = parseFloat(sugarVal);
|
||
if (!val) { Taro.showToast({ title: '请填写血糖值', icon: 'none' }); return; }
|
||
const bsType = sugarPeriod === 'fasting' ? 'blood_sugar_fasting' : 'blood_sugar_postprandial';
|
||
await inputVitalSign(patientId, { indicator_type: bsType, value: val });
|
||
setSugarVal('');
|
||
break;
|
||
}
|
||
case 'weight': {
|
||
const val = parseFloat(weightVal);
|
||
if (!val) { Taro.showToast({ title: '请填写体重', icon: 'none' }); return; }
|
||
await inputVitalSign(patientId, { indicator_type: 'weight', value: val });
|
||
setWeightVal('');
|
||
break;
|
||
}
|
||
}
|
||
Taro.showToast({ title: '保存成功', icon: 'success' });
|
||
refreshToday(true);
|
||
loadTrend(activeTab);
|
||
} catch {
|
||
Taro.showToast({ title: '保存失败', icon: 'none' });
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const maxTrendValue = trendData.reduce((max, d) => Math.max(max, d.value), 1);
|
||
|
||
const getThresholdValue = (type: VitalType, th: HealthThreshold[]): number | null => {
|
||
if (type === 'blood_pressure') return findThreshold(th, 'systolic_bp', 'high')?.threshold_value ?? 140;
|
||
if (type === 'heart_rate') return findThreshold(th, 'heart_rate', 'high')?.threshold_value ?? 100;
|
||
if (type === 'blood_sugar') return findThreshold(th, 'blood_sugar_fasting', 'high')?.threshold_value ?? 6.1;
|
||
return null;
|
||
};
|
||
const dayLabels = ['日', '一', '二', '三', '四', '五', '六'];
|
||
|
||
return (
|
||
<PageShell padding="md" safeBottom={false} scroll={false} className={`health-page ${modeClass}`}>
|
||
<View className='health-header'>
|
||
<Text className='health-title'>健康数据</Text>
|
||
</View>
|
||
|
||
{aiSuggestions.length > 0 && (
|
||
<View className='ai-suggestion-card' onClick={() => {
|
||
const first = aiSuggestions[0];
|
||
if (first?.suggestion_type === 'appointment') {
|
||
Taro.navigateTo({ url: `/pages/appointment/create/index` });
|
||
} else if (first?.suggestion_type === 'followup') {
|
||
Taro.navigateTo({ url: '/pages/pkg-profile/followups/index' });
|
||
} else {
|
||
Taro.switchTab({ url: '/pages/health/index' });
|
||
}
|
||
}}>
|
||
<View className='ai-card-header'>
|
||
<Text className='ai-card-title'>AI 健康建议</Text>
|
||
<Text className='ai-card-count'>{aiSuggestions.length} 条待查看</Text>
|
||
</View>
|
||
{aiSuggestions.map((s) => {
|
||
const riskCls = s.risk_level === 'high' ? 'ai-risk-high' : s.risk_level === 'medium' ? 'ai-risk-medium' : 'ai-risk-low';
|
||
const typeLabel = s.suggestion_type === 'followup' ? '随访' : s.suggestion_type === 'appointment' ? '预约' : '预警';
|
||
const params = s.params as Record<string, unknown> | null;
|
||
const reason = (params?.reason as string) || (params?.message as string) || typeLabel;
|
||
return (
|
||
<View key={s.id} className='ai-suggestion-item'>
|
||
<View className={`ai-risk-dot ${riskCls}`} />
|
||
<Text className='ai-suggestion-text'>{reason.slice(0, 40)}</Text>
|
||
</View>
|
||
);
|
||
})}
|
||
</View>
|
||
)}
|
||
|
||
<SegmentTabs tabs={VITAL_TABS} activeKey={activeTab} onChange={handleTabChange} variant="pill" />
|
||
|
||
<ContentCard variant="elevated">
|
||
{activeTab === 'blood_pressure' && (
|
||
<View className='input-group'>
|
||
<Text className='input-label'>收缩压（高压）</Text>
|
||
<Input
|
||
className='input-field'
|
||
type='number'
|
||
placeholder='如 130'
|
||
value={systolic}
|
||
onInput={(e) => setSystolic(e.detail.value)}
|
||
/>
|
||
<Text className='input-label input-label--secondary'>舒张压（低压）</Text>
|
||
<Input
|
||
className='input-field'
|
||
type='number'
|
||
placeholder='如 85'
|
||
value={diastolic}
|
||
onInput={(e) => setDiastolic(e.detail.value)}
|
||
/>
|
||
<Text className='input-ref'>{refRanges.blood_pressure}</Text>
|
||
</View>
|
||
)}
|
||
|
||
{activeTab === 'heart_rate' && (
|
||
<View className='input-group'>
|
||
<Text className='input-label'>心率</Text>
|
||
<Input
|
||
className='input-field'
|
||
type='digit'
|
||
placeholder='如 72'
|
||
value={heartRateVal}
|
||
onInput={(e) => setHeartRateVal(e.detail.value)}
|
||
/>
|
||
<Text className='input-ref'>{refRanges.heart_rate}</Text>
|
||
</View>
|
||
)}
|
||
|
||
{activeTab === 'blood_sugar' && (
|
||
<View className='input-group'>
|
||
<Text className='input-label'>血糖值</Text>
|
||
<Input
|
||
className='input-field'
|
||
type='digit'
|
||
placeholder='如 5.6'
|
||
value={sugarVal}
|
||
onInput={(e) => setSugarVal(e.detail.value)}
|
||
/>
|
||
<View className='period-group'>
|
||
<View
|
||
className={`period-btn ${sugarPeriod === 'fasting' ? 'period-active' : ''}`}
|
||
onClick={() => setSugarPeriod('fasting')}
|
||
>
|
||
<Text className='period-btn-text'>空腹</Text>
|
||
</View>
|
||
<View
|
||
className={`period-btn ${sugarPeriod === 'postprandial' ? 'period-active' : ''}`}
|
||
onClick={() => setSugarPeriod('postprandial')}
|
||
>
|
||
<Text className='period-btn-text'>餐后 2h</Text>
|
||
</View>
|
||
</View>
|
||
<Text className='input-ref'>{refRanges.blood_sugar}</Text>
|
||
</View>
|
||
)}
|
||
|
||
{activeTab === 'weight' && (
|
||
<View className='input-group'>
|
||
<Text className='input-label'>体重 (kg)</Text>
|
||
<Input
|
||
className='input-field'
|
||
type='digit'
|
||
placeholder='如 65.5'
|
||
value={weightVal}
|
||
onInput={(e) => setWeightVal(e.detail.value)}
|
||
/>
|
||
<Text className='input-ref'>{refRanges.weight}</Text>
|
||
</View>
|
||
)}
|
||
|
||
<View className='save-btn' onClick={handleSave}>
|
||
<Text className='save-btn-text'>{saving ? '保存中...' : '保存'}</Text>
|
||
</View>
|
||
</ContentCard>
|
||
|
||
<View className='trend-section'>
|
||
<Text className='section-title'>近 7 天趋势</Text>
|
||
{trendLoading ? (
|
||
<Loading />
|
||
) : trendData.length === 0 ? (
|
||
<ContentCard padding="md">
|
||
<Text className='trend-empty-text'>暂无趋势数据</Text>
|
||
</ContentCard>
|
||
) : (
|
||
<ContentCard padding="md">
|
||
<View className='trend-bars'>
|
||
{getThresholdValue(activeTab, thresholds) && (() => {
|
||
const tv = getThresholdValue(activeTab, thresholds)!;
|
||
const pct = Math.min(95, (tv / maxTrendValue) * 100);
|
||
return (
|
||
<View className='trend-threshold-line' style={`bottom:${((12 + pct * 1.08) / 120 * 100).toFixed(1)}%;`}>
|
||
<Text className='trend-threshold-label'>{tv}</Text>
|
||
</View>
|
||
);
|
||
})()}
|
||
{trendData.map((point, i) => {
|
||
const heightPct = Math.max(8, (point.value / maxTrendValue) * 100);
|
||
const tv = getThresholdValue(activeTab, thresholds);
|
||
const isAbnormal = tv ? point.value >= tv : false;
|
||
const dayOfWeek = new Date(point.date).getDay();
|
||
return (
|
||
<View className='trend-bar-col' key={i}>
|
||
<View
|
||
className={`trend-bar ${isAbnormal ? 'trend-bar-warn' : 'trend-bar-normal'}`}
|
||
style={`height:${heightPct}%;`}
|
||
/>
|
||
<Text className='trend-bar-label'>{dayLabels[dayOfWeek]}</Text>
|
||
</View>
|
||
);
|
||
})}
|
||
</View>
|
||
</ContentCard>
|
||
)}
|
||
</View>
|
||
|
||
<ContentCard
|
||
onPress={() => Taro.navigateTo({ url: '/pages/article/index' })}
|
||
>
|
||
<Text className='article-entry-text'>最新健康资讯 ›</Text>
|
||
</ContentCard>
|
||
</PageShell>
|
||
);
|
||
}
|