feat(medications): 添加药品结束日期选择功能

- 新增药品结束日期选择器,支持设置服药周期
- 优化日期显示格式,从"开始日期"改为"服药周期"
- 添加日期验证逻辑,确保开始日期不早于今天且结束日期不早于开始日期
- 改进添加药品页面的日期选择UI,采用并排布局
- 调整InfoCard组件样式,移除图标背景色并减小字体大小
This commit is contained in:
richarjiang
2025-11-12 10:27:20 +08:00
parent e412f80295
commit 35f06951a0
3 changed files with 206 additions and 40 deletions

View File

@@ -378,6 +378,23 @@ export default function MedicationDetailScreen() {
const startDateLabel = medication
? dayjs(medication.startDate).format('YYYY年M月D日')
: '--';
// 计算服药周期显示
const medicationPeriodLabel = useMemo(() => {
if (!medication) return '--';
const startDate = dayjs(medication.startDate).format('YYYY年M月D日');
if (medication.endDate) {
// 有结束日期,显示开始日期到结束日期
const endDate = dayjs(medication.endDate).format('YYYY年M月D日');
return `${startDate} - ${endDate}`;
} else {
// 没有结束日期,显示长期
return `${startDate} - 长期`;
}
}, [medication]);
const reminderTimes = medication?.medicationTimes?.length
? medication.medicationTimes.join('、')
: '尚未设置';
@@ -467,8 +484,20 @@ export default function MedicationDetailScreen() {
}, [medication?.photoUrl]);
const handleStartDatePress = useCallback(() => {
Alert.alert('开始日期', `开始服药日期:${startDateLabel}`);
}, [startDateLabel]);
if (!medication) return;
const startDate = dayjs(medication.startDate).format('YYYY年M月D日');
let message = `开始服药日期:${startDate}`;
if (medication.endDate) {
const endDate = dayjs(medication.endDate).format('YYYY年M月D日');
message += `\n结束服药日期${endDate}`;
} else {
message += `\n服药计划长期服药`;
}
Alert.alert('服药周期', message);
}, [medication]);
const handleTimePress = useCallback(() => {
Alert.alert('服药时间', `设置的时间:${reminderTimes}`);
@@ -676,15 +705,15 @@ export default function MedicationDetailScreen() {
<Section title="服药计划" color={colors.text}>
<View style={styles.row}>
<InfoCard
label="开始日期"
value={startDateLabel}
label="服药周期"
value={medicationPeriodLabel}
icon="calendar-outline"
colors={colors}
clickable={false}
onPress={handleStartDatePress}
/>
<InfoCard
label="时间"
label="用药时间"
value={reminderTimes}
icon="time-outline"
colors={colors}