feat(miniprogram): 小程序设备数据集成打通 — Phase 3
- 首页设备入口简化为直接跳转按钮（去除硬编码 never 状态） - 体征录入页增加「从设备同步」入口，设备数据自动回填表单 - 设备同步页支持 returnTo 参数，完成后返回录入页 - 医护工作台增加告警中心固定导航入口（带数字角标）
This commit is contained in:
iven
242
apps/miniprogram/src/pages/pkg-health/input/index.tsx
Normal file
242
apps/miniprogram/src/pages/pkg-health/input/index.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, Input, Picker } from '@tarojs/components';
|
||||
import Taro, { useDidShow } from '@tarojs/taro';
|
||||
import { z } from 'zod';
|
||||
import { inputVitalSign } from '../../../services/health';
|
||||
import { useAuthStore } from '../../../stores/auth';
|
||||
import { useHealthStore } from '@/stores/health';
|
||||
import { usePointsStore } from '@/stores/points';
|
||||
import { clearRequestCache } from '@/services/request';
|
||||
import { trackEvent } from '@/services/analytics';
|
||||
import './index.scss';
|
||||
|
||||
const INDICATORS = [
|
||||
{ value: 'blood_pressure', label: '血压 (mmHg)' },
|
||||
{ value: 'heart_rate', label: '心率 (bpm)' },
|
||||
{ value: 'blood_sugar_fasting', label: '空腹血糖 (mmol/L)' },
|
||||
{ value: 'blood_sugar_postprandial', label: '餐后血糖 (mmol/L)' },
|
||||
{ value: 'weight', label: '体重 (kg)' },
|
||||
{ value: 'temperature', label: '体温 (℃)' },
|
||||
];
|
||||
|
||||
const vitalSignSchema = z.object({
|
||||
indicator_type: z.enum(['blood_pressure', 'heart_rate', 'blood_sugar_fasting', 'blood_sugar_postprandial', 'weight', 'temperature']),
|
||||
value: z.number().positive({ message: '请输入有效数值' }),
|
||||
extra: z.object({
|
||||
systolic: z.number().min(60, '收缩压过低').max(250, '收缩压过高，请及时就医').optional(),
|
||||
diastolic: z.number().min(40, '舒张压过低').max(150, '舒张压过高，请及时就医').optional(),
|
||||
}).optional(),
|
||||
note: z.string().max(200, '备注不能超过200字').optional(),
|
||||
});
|
||||
|
||||
const WARN_THRESHOLDS: Record<string, { max?: number; min?: number; warning: string }> = {
|
||||
blood_pressure: { max: 180, warning: '收缩压偏高，建议及时就医' },
|
||||
heart_rate: { max: 120, min: 50, warning: '心率异常，请注意休息' },
|
||||
blood_sugar_fasting: { max: 11.0, warning: '血糖偏高，建议就医检查' },
|
||||
};
|
||||
|
||||
export default function HealthInput() {
|
||||
const [indicatorIdx, setIndicatorIdx] = useState(0);
|
||||
const [value, setValue] = useState('');
|
||||
const [systolic, setSystolic] = useState('');
|
||||
const [diastolic, setDiastolic] = useState('');
|
||||
const [note, setNote] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const { currentPatient } = useAuthStore();
|
||||
const { clearCache } = useHealthStore();
|
||||
|
||||
/** 从 storage 中读取设备同步回传的数据并自动填充表单 */
|
||||
useDidShow(() => {
|
||||
try {
|
||||
const raw = Taro.getStorageSync('device_sync_result');
|
||||
if (!raw) return;
|
||||
Taro.removeStorageSync('device_sync_result');
|
||||
|
||||
const syncData: Record<string, number> = typeof raw === 'string' ? JSON.parse(raw) : raw;
|
||||
|
||||
// 字段映射：设备同步数据 → 表单字段
|
||||
if (syncData.systolic != null && syncData.diastolic != null) {
|
||||
// 有血压数据 → 切换到血压指标并填充
|
||||
setIndicatorIdx(0);
|
||||
setSystolic(String(syncData.systolic));
|
||||
setDiastolic(String(syncData.diastolic));
|
||||
} else if (syncData.blood_sugar != null) {
|
||||
setIndicatorIdx(2); // 空腹血糖
|
||||
setValue(String(syncData.blood_sugar));
|
||||
} else if (syncData.heart_rate != null) {
|
||||
setIndicatorIdx(1); // 心率
|
||||
setValue(String(syncData.heart_rate));
|
||||
}
|
||||
} catch {
|
||||
// 解析失败则忽略，不影响正常使用
|
||||
}
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!currentPatient) {
|
||||
Taro.showToast({ title: '请先选择就诊人', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
const currentIndicator = INDICATORS[indicatorIdx].value;
|
||||
|
||||
if (currentIndicator === 'blood_pressure') {
|
||||
if (!systolic || !diastolic) {
|
||||
Taro.showToast({ title: '请填写收缩压和舒张压', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!value) {
|
||||
Taro.showToast({ title: '请输入数值', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const input = currentIndicator === 'blood_pressure'
|
||||
? { indicator_type: 'blood_pressure' as const, value: parseFloat(systolic), extra: { systolic: parseFloat(systolic), diastolic: parseFloat(diastolic) } }
|
||||
: { indicator_type: currentIndicator as any, value: parseFloat(value) };
|
||||
|
||||
const result = vitalSignSchema.safeParse(input);
|
||||
if (!result.success) {
|
||||
Taro.showToast({ title: result.error.issues[0].message, icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
const threshold = WARN_THRESHOLDS[currentIndicator];
|
||||
if (threshold) {
|
||||
const val = input.value;
|
||||
if ((threshold.max && val > threshold.max) || (threshold.min && val < threshold.min)) {
|
||||
await Taro.showModal({ title: '健康提示', content: threshold.warning, showCancel: false });
|
||||
}
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await inputVitalSign(currentPatient.id, {
|
||||
...input,
|
||||
note: note || undefined,
|
||||
});
|
||||
clearCache();
|
||||
clearRequestCache('/health/');
|
||||
usePointsStore.getState().invalidate();
|
||||
Taro.showToast({ title: '录入成功', icon: 'success' });
|
||||
trackEvent('health_data_input', { type: currentIndicator });
|
||||
setTimeout(() => Taro.navigateBack(), 1000);
|
||||
} catch (e: unknown) {
|
||||
const msg = e instanceof Error ? e.message : '录入失败';
|
||||
Taro.showToast({ title: msg, icon: 'none' });
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const indicatorInitial = INDICATORS[indicatorIdx].label.charAt(0);
|
||||
|
||||
return (
|
||||
<View className='input-page'>
|
||||
{/* 页面标题 */}
|
||||
<View className='input-hero'>
|
||||
<View className='input-hero-icon'>
|
||||
<Text className='input-hero-icon-text'>录</Text>
|
||||
</View>
|
||||
<Text className='input-hero-title'>体征录入</Text>
|
||||
<Text className='input-hero-sub'>记录今日健康数据</Text>
|
||||
</View>
|
||||
|
||||
{/* 从设备同步入口 */}
|
||||
<View className='input-sync-entry' onClick={() => Taro.navigateTo({ url: '/pages/device-sync/index?returnTo=input' })}>
|
||||
<Text className='input-sync-entry-text'>从设备同步</Text>
|
||||
<Text className='input-sync-entry-hint'>蓝牙连接设备自动获取数据</Text>
|
||||
</View>
|
||||
|
||||
{/* 指标类型选择 */}
|
||||
<View className='input-card'>
|
||||
<View className='input-card-header'>
|
||||
<View className='input-card-indicator'>
|
||||
<Text className='input-card-indicator-char'>{indicatorInitial}</Text>
|
||||
</View>
|
||||
<Text className='input-card-label'>指标类型</Text>
|
||||
</View>
|
||||
<Picker
|
||||
mode='selector'
|
||||
range={INDICATORS.map((i) => i.label)}
|
||||
value={indicatorIdx}
|
||||
onChange={(e) => setIndicatorIdx(Number(e.detail.value))}
|
||||
>
|
||||
<View className='input-picker-row'>
|
||||
<Text className='input-picker-value'>{INDICATORS[indicatorIdx].label}</Text>
|
||||
<Text className='input-picker-arrow'>V</Text>
|
||||
</View>
|
||||
</Picker>
|
||||
</View>
|
||||
|
||||
{/* 数值输入 */}
|
||||
{INDICATORS[indicatorIdx].value === 'blood_pressure' ? (
|
||||
<View className='input-card'>
|
||||
<Text className='input-section-title'>血压数值</Text>
|
||||
<View className='input-bp-group'>
|
||||
<View className='input-bp-field'>
|
||||
<Text className='input-field-label'>收缩压</Text>
|
||||
<Input
|
||||
type='digit'
|
||||
className='input-field-box'
|
||||
placeholder='如 120'
|
||||
value={systolic}
|
||||
onInput={(e) => setSystolic(e.detail.value)}
|
||||
/>
|
||||
</View>
|
||||
<View className='input-bp-divider'>
|
||||
<View className='input-bp-line' />
|
||||
<Text className='input-bp-slash'>/</Text>
|
||||
<View className='input-bp-line' />
|
||||
</View>
|
||||
<View className='input-bp-field'>
|
||||
<Text className='input-field-label'>舒张压</Text>
|
||||
<Input
|
||||
type='digit'
|
||||
className='input-field-box'
|
||||
placeholder='如 80'
|
||||
value={diastolic}
|
||||
onInput={(e) => setDiastolic(e.detail.value)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<Text className='input-field-unit'>mmHg</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className='input-card'>
|
||||
<Text className='input-section-title'>检测数值</Text>
|
||||
<Input
|
||||
type='digit'
|
||||
className='input-field-box input-field-full'
|
||||
placeholder='请输入数值'
|
||||
value={value}
|
||||
onInput={(e) => setValue(e.detail.value)}
|
||||
/>
|
||||
<Text className='input-field-unit'>
|
||||
{INDICATORS[indicatorIdx].label.match(/\((.+)\)/)?.[1] || ''}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 备注 */}
|
||||
<View className='input-card'>
|
||||
<Text className='input-section-title'>备注</Text>
|
||||
<Input
|
||||
className='input-field-box input-field-full'
|
||||
placeholder='如：饭后2小时（可选）'
|
||||
value={note}
|
||||
onInput={(e) => setNote(e.detail.value)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 提交 */}
|
||||
<View
|
||||
className={`input-submit ${submitting ? 'input-submit-disabled' : ''}`}
|
||||
onClick={submitting ? undefined : handleSubmit}
|
||||
>
|
||||
<Text className='input-submit-text'>{submitting ? '提交中...' : '提交录入'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user