Files
hms/apps/miniprogram/src/pages/profile/family/index.tsx
iven 50eae8b809 feat(miniprogram): 温润东方风全面 UI 重设计
73 文件变更,覆盖全部 40 个页面 SCSS + TabBar 图标 + 组件样式。
统一赤陶主色 #C4623A + 暖米背景 + 衬线标题字体 + 12px 圆角体系。
2026-04-28 00:19:52 +08:00

107 lines
3.4 KiB
TypeScript

import React, { useState, useCallback } from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import { listPatients, Patient } from '../../../services/patient';
import { useAuthStore } from '../../../stores/auth';
import EmptyState from '../../../components/EmptyState';
import './index.scss';
export default function FamilyList() {
const [patients, setPatients] = useState<Patient[]>([]);
const [loading, setLoading] = useState(false);
const { currentPatient, setCurrentPatient } = useAuthStore();
const fetchPatients = useCallback(async () => {
setLoading(true);
try {
const res = await listPatients();
setPatients(res.data || []);
} catch {
Taro.showToast({ title: '加载失败', icon: 'none' });
} finally {
setLoading(false);
}
}, []);
useDidShow(() => {
fetchPatients();
});
const handleSelect = (patient: Patient) => {
setCurrentPatient({
id: patient.id,
name: patient.name,
gender: patient.gender,
birth_date: patient.birth_date,
relation: patient.relation || '本人',
});
Taro.showToast({ title: `已切换为 ${patient.name}`, icon: 'success' });
};
const goToAdd = () => {
Taro.navigateTo({ url: '/pages/profile/family-add/index' });
};
const goToEdit = (patient: Patient) => {
Taro.setStorageSync('edit_patient', patient);
Taro.navigateTo({ url: `/pages/profile/family-add/index?id=${patient.id}` });
};
const genderText = (g?: string) => {
if (g === 'male') return '男';
if (g === 'female') return '女';
return '未知';
};
const relationInitial = (relation: string) => {
return relation ? relation.charAt(0) : '本';
};
return (
<View className='family-page'>
<Text className='family-page-title'></Text>
<View className='family-list'>
{patients.map((p) => {
const isActive = currentPatient?.id === p.id;
return (
<View
className={`family-item ${isActive ? 'active' : ''}`}
key={p.id}
onClick={() => handleSelect(p)}
>
<View className='family-avatar'>
<Text className='family-avatar-text'>{relationInitial(p.relation || '本人')}</Text>
</View>
<View className='family-info'>
<View className='family-name-row'>
<Text className='family-name'>{p.name}</Text>
{isActive && <Text className='family-current-tag'></Text>}
</View>
<View className='family-meta'>
<Text className='family-relation-tag'>{p.relation || '本人'}</Text>
<Text className='family-gender'>{genderText(p.gender)}</Text>
</View>
</View>
<View
className='family-edit'
onClick={(e) => { e.stopPropagation(); goToEdit(p); }}
>
<Text className='family-edit-text'></Text>
</View>
</View>
);
})}
</View>
{patients.length === 0 && !loading && (
<EmptyState text='暂无就诊人' />
)}
<View className='family-add-btn' onClick={goToAdd}>
<Text className='family-add-text'></Text>
</View>
</View>
);
}