feat: 新增健康档案模块，支持家庭邀请与个人健康数据管理
This commit is contained in:
richarjiang
626
app/health/family-invite.tsx
Normal file
626
app/health/family-invite.tsx
Normal file
@@ -0,0 +1,626 @@
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import {
|
||||
createFamilyGroup,
|
||||
fetchFamilyGroup,
|
||||
generateInviteCode,
|
||||
selectFamilyGroup,
|
||||
selectFamilyHealthLoading,
|
||||
selectInviteCode,
|
||||
selectInviteLoading,
|
||||
} from '@/store/familyHealthSlice';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Stack } from 'expo-router';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
Modal,
|
||||
ScrollView,
|
||||
Share,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
export default function FamilyInviteScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const [agreed, setAgreed] = useState(true);
|
||||
const [showQRModal, setShowQRModal] = useState(false);
|
||||
|
||||
// Redux state
|
||||
const familyGroup = useAppSelector(selectFamilyGroup);
|
||||
const inviteCode = useAppSelector(selectInviteCode);
|
||||
const isLoading = useAppSelector(selectFamilyHealthLoading);
|
||||
const isInviteLoading = useAppSelector(selectInviteLoading);
|
||||
|
||||
// 初始化时获取家庭组信息
|
||||
useEffect(() => {
|
||||
dispatch(fetchFamilyGroup());
|
||||
}, [dispatch]);
|
||||
|
||||
// 处理邀请按钮点击
|
||||
const handleInvite = async () => {
|
||||
try {
|
||||
// 如果没有家庭组，先创建一个
|
||||
if (!familyGroup) {
|
||||
await dispatch(createFamilyGroup('我的家庭')).unwrap();
|
||||
}
|
||||
|
||||
// 生成邀请码
|
||||
await dispatch(generateInviteCode(24)).unwrap();
|
||||
|
||||
// 显示二维码弹窗
|
||||
setShowQRModal(true);
|
||||
} catch (error: any) {
|
||||
Alert.alert('邀请失败', error?.message || '请稍后重试');
|
||||
}
|
||||
};
|
||||
|
||||
// 分享邀请码
|
||||
const handleShare = async () => {
|
||||
if (!inviteCode) return;
|
||||
|
||||
try {
|
||||
await Share.share({
|
||||
message: `邀请您加入我的家庭健康管理组！\n邀请码：${inviteCode.inviteCode}\n有效期至：${new Date(inviteCode.expiresAt).toLocaleString()}`,
|
||||
title: '家庭健康管理邀请',
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('分享失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Stack.Screen options={{ headerShown: false }} />
|
||||
<HeaderBar title="" transparent />
|
||||
|
||||
<LinearGradient
|
||||
colors={['#Eef2FF', '#F5F3FF', '#FFFFFF']}
|
||||
style={styles.background}
|
||||
/>
|
||||
|
||||
<ScrollView
|
||||
contentContainerStyle={[styles.scrollContent, { paddingTop: insets.top + 40 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header Title Area */}
|
||||
<View style={styles.headerSection}>
|
||||
<Text style={styles.mainTitle}>家庭健康管理</Text>
|
||||
<Text style={styles.mainTitle}>保障全家健康</Text>
|
||||
|
||||
<View style={styles.subtitleBadge}>
|
||||
<Ionicons name="home" size={12} color="#5B4CFF" />
|
||||
<Text style={styles.subtitleText}>全家互相督促，让关爱不遗漏</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Hero Image / House Icon Area */}
|
||||
<View style={styles.heroContainer}>
|
||||
{/* Floating Labels */}
|
||||
<View style={[styles.floatingLabel, styles.labelLeft]}>
|
||||
<Text style={styles.floatingLabelText}>实时管理</Text>
|
||||
<View style={styles.dot} />
|
||||
</View>
|
||||
<View style={[styles.floatingLabel, styles.labelRight]}>
|
||||
<View style={styles.dot} />
|
||||
<Text style={styles.floatingLabelText}>守护家庭健康</Text>
|
||||
</View>
|
||||
|
||||
{/* Main 3D House Icon Placeholder */}
|
||||
<View style={styles.houseIconPlaceholder}>
|
||||
<LinearGradient
|
||||
colors={['#A78BFA', '#5B4CFF']}
|
||||
style={styles.houseIconGradient}
|
||||
>
|
||||
<Ionicons name="heart" size={60} color="#FFFFFF" />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Features Grid */}
|
||||
<View style={styles.featuresCard}>
|
||||
<View style={styles.featureItem}>
|
||||
<View style={[styles.featureIcon, { backgroundColor: '#EEF2FF' }]}>
|
||||
<Ionicons name="share-social" size={24} color="#5B4CFF" />
|
||||
</View>
|
||||
<Text style={styles.featureTitle}>数据共享</Text>
|
||||
<Text style={styles.featureDesc}>家人档案共同维护</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.featureItem}>
|
||||
<View style={[styles.featureIcon, { backgroundColor: '#FEF2F2' }]}>
|
||||
<Ionicons name="alert-circle" size={24} color="#EF4444" />
|
||||
</View>
|
||||
<Text style={styles.featureTitle}>异常提醒</Text>
|
||||
<Text style={styles.featureDesc}>数据异常实时提醒</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.featureItem}>
|
||||
<View style={[styles.featureIcon, { backgroundColor: '#FFF7ED' }]}>
|
||||
<Ionicons name="medkit" size={24} color="#F97316" />
|
||||
</View>
|
||||
<Text style={styles.featureTitle}>用药监督</Text>
|
||||
<Text style={styles.featureDesc}>用药情况远程监督</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Steps Section */}
|
||||
<View style={styles.stepsContainer}>
|
||||
<Text style={styles.stepsTitle}>简单3步，帮家人管理档案</Text>
|
||||
<View style={styles.stepsSubtitleContainer}>
|
||||
<Text style={styles.stepsSubtitle}>最多邀请6人，分享二维码有效期24小时</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.stepsRow}>
|
||||
<View style={styles.stepItem}>
|
||||
<Text style={styles.stepNumber}>1</Text>
|
||||
<Text style={styles.stepDesc}>分享二维码邀请</Text>
|
||||
<View style={styles.stepPhoneMockup}>
|
||||
<View style={styles.mockupScreen} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Ionicons name="chevron-forward" size={20} color="#D1D5DB" style={{ marginTop: 40 }} />
|
||||
|
||||
<View style={styles.stepItem}>
|
||||
<Text style={styles.stepNumber}>2</Text>
|
||||
<Text style={styles.stepDesc}>家人下载登录App</Text>
|
||||
<View style={styles.stepPhoneMockup}>
|
||||
<View style={styles.mockupScreen} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Ionicons name="chevron-forward" size={20} color="#D1D5DB" style={{ marginTop: 40 }} />
|
||||
|
||||
<View style={styles.stepItem}>
|
||||
<Text style={styles.stepNumber}>3</Text>
|
||||
<Text style={styles.stepDesc}>扫二维码加入</Text>
|
||||
<View style={styles.stepPhoneMockup}>
|
||||
<View style={styles.mockupScreen} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Bottom Spacing */}
|
||||
<View style={{ height: 120 }} />
|
||||
</ScrollView>
|
||||
|
||||
{/* Bottom Action Area */}
|
||||
<View style={[styles.bottomArea, { paddingBottom: insets.bottom + 16 }]}>
|
||||
<TouchableOpacity
|
||||
style={styles.checkboxRow}
|
||||
onPress={() => setAgreed(!agreed)}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons
|
||||
name={agreed ? "checkmark-circle" : "ellipse-outline"}
|
||||
size={20}
|
||||
color={agreed ? "#5B4CFF" : "#9CA3AF"}
|
||||
/>
|
||||
<Text style={styles.checkboxText}>
|
||||
申请对方同意我查看并管理其健康档案，有数据异常预警我
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.inviteButton, (!agreed || isLoading) && styles.inviteButtonDisabled]}
|
||||
disabled={!agreed || isLoading}
|
||||
onPress={handleInvite}
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator size="small" color="#FFFFFF" />
|
||||
) : (
|
||||
<Text style={styles.inviteButtonText}>立即邀请</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* QR Code Modal */}
|
||||
<Modal
|
||||
visible={showQRModal}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setShowQRModal(false)}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
<View style={styles.modalHeader}>
|
||||
<Text style={styles.modalTitle}>邀请家人加入</Text>
|
||||
<TouchableOpacity onPress={() => setShowQRModal(false)}>
|
||||
<Ionicons name="close" size={24} color="#6B7280" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{isInviteLoading ? (
|
||||
<View style={styles.qrContainer}>
|
||||
<ActivityIndicator size="large" color="#5B4CFF" />
|
||||
</View>
|
||||
) : inviteCode ? (
|
||||
<>
|
||||
<View style={styles.qrContainer}>
|
||||
{/* 邀请码大字展示（替代二维码，后续可安装 react-native-qrcode-svg 实现） */}
|
||||
<View style={styles.inviteCodeDisplay}>
|
||||
<Ionicons name="qr-code-outline" size={48} color="#5B4CFF" />
|
||||
<Text style={styles.inviteCodeBig}>{inviteCode.inviteCode}</Text>
|
||||
<Text style={styles.inviteCodeHint}>请让家人在 App 中输入此邀请码</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.inviteCodeContainer}>
|
||||
<Text style={styles.inviteCodeLabel}>邀请码</Text>
|
||||
<Text style={styles.inviteCodeText}>{inviteCode.inviteCode}</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.expireText}>
|
||||
有效期至：{new Date(inviteCode.expiresAt).toLocaleString()}
|
||||
</Text>
|
||||
|
||||
<TouchableOpacity style={styles.shareButton} onPress={handleShare}>
|
||||
<Ionicons name="share-outline" size={20} color="#FFFFFF" />
|
||||
<Text style={styles.shareButtonText}>分享邀请</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
background: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
headerSection: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 30,
|
||||
},
|
||||
mainTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: '#1F2937',
|
||||
lineHeight: 36,
|
||||
textAlign: 'center',
|
||||
},
|
||||
subtitleBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(255,255,255,0.6)',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 16,
|
||||
marginTop: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
subtitleText: {
|
||||
fontSize: 12,
|
||||
color: '#5B4CFF',
|
||||
marginLeft: 6,
|
||||
fontWeight: '600',
|
||||
},
|
||||
heroContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 180,
|
||||
marginBottom: 20,
|
||||
position: 'relative',
|
||||
},
|
||||
houseIconPlaceholder: {
|
||||
width: 140,
|
||||
height: 140,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
houseIconGradient: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 30,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transform: [{ rotate: '45deg' }],
|
||||
shadowColor: '#5B4CFF',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 20,
|
||||
elevation: 10,
|
||||
},
|
||||
floatingLabel: {
|
||||
position: 'absolute',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(255,255,255,0.8)',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
labelLeft: {
|
||||
left: 0,
|
||||
top: 40,
|
||||
},
|
||||
labelRight: {
|
||||
right: 0,
|
||||
top: 20,
|
||||
},
|
||||
floatingLabelText: {
|
||||
fontSize: 12,
|
||||
color: '#6B7280',
|
||||
fontWeight: '600',
|
||||
marginHorizontal: 4,
|
||||
},
|
||||
dot: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#5B4CFF',
|
||||
},
|
||||
featuresCard: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 20,
|
||||
padding: 20,
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 24,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.03,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
featureItem: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
},
|
||||
featureIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
featureTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
color: '#1F2937',
|
||||
marginBottom: 4,
|
||||
},
|
||||
featureDesc: {
|
||||
fontSize: 10,
|
||||
color: '#9CA3AF',
|
||||
textAlign: 'center',
|
||||
},
|
||||
stepsContainer: {
|
||||
backgroundColor: 'rgba(255,255,255,0.6)',
|
||||
borderRadius: 24,
|
||||
padding: 20,
|
||||
paddingBottom: 30,
|
||||
marginBottom: 20,
|
||||
},
|
||||
stepsTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#1F2937',
|
||||
textAlign: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
stepsSubtitleContainer: {
|
||||
backgroundColor: '#F3F4F6',
|
||||
alignSelf: 'center',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 10,
|
||||
marginBottom: 24,
|
||||
},
|
||||
stepsSubtitle: {
|
||||
fontSize: 11,
|
||||
color: '#6B7280',
|
||||
},
|
||||
stepsRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
stepItem: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
},
|
||||
stepNumber: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: '#5B4CFF',
|
||||
marginBottom: 8,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
stepDesc: {
|
||||
fontSize: 12,
|
||||
color: '#4B5563',
|
||||
textAlign: 'center',
|
||||
marginBottom: 12,
|
||||
height: 32,
|
||||
},
|
||||
stepPhoneMockup: {
|
||||
width: 60,
|
||||
height: 100,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 10,
|
||||
borderWidth: 2,
|
||||
borderColor: '#E5E7EB',
|
||||
padding: 4,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
mockupScreen: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F3F4F6',
|
||||
borderRadius: 6,
|
||||
},
|
||||
bottomArea: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: '#FFFFFF',
|
||||
paddingTop: 16,
|
||||
paddingHorizontal: 20,
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: -4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
elevation: 10,
|
||||
},
|
||||
checkboxRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: 16,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
checkboxText: {
|
||||
flex: 1,
|
||||
marginLeft: 8,
|
||||
fontSize: 12,
|
||||
color: '#6B7280',
|
||||
lineHeight: 18,
|
||||
},
|
||||
inviteButton: {
|
||||
backgroundColor: '#5B4CFF',
|
||||
borderRadius: 28,
|
||||
height: 56,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#5B4CFF',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
inviteButtonDisabled: {
|
||||
backgroundColor: '#C4B5FD',
|
||||
shadowOpacity: 0,
|
||||
},
|
||||
inviteButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
// Modal styles
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
modalContent: {
|
||||
width: '100%',
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 24,
|
||||
padding: 24,
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 24,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: '#1F2937',
|
||||
},
|
||||
qrContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
backgroundColor: '#F9FAFB',
|
||||
borderRadius: 16,
|
||||
marginBottom: 20,
|
||||
minHeight: 180,
|
||||
},
|
||||
inviteCodeDisplay: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
inviteCodeBig: {
|
||||
fontSize: 36,
|
||||
fontWeight: 'bold',
|
||||
color: '#5B4CFF',
|
||||
letterSpacing: 4,
|
||||
marginTop: 16,
|
||||
marginBottom: 8,
|
||||
},
|
||||
inviteCodeHint: {
|
||||
fontSize: 12,
|
||||
color: '#9CA3AF',
|
||||
},
|
||||
inviteCodeContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#F3F4F6',
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
inviteCodeLabel: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
marginRight: 8,
|
||||
},
|
||||
inviteCodeText: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: '#5B4CFF',
|
||||
letterSpacing: 2,
|
||||
},
|
||||
expireText: {
|
||||
fontSize: 12,
|
||||
color: '#9CA3AF',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
shareButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#5B4CFF',
|
||||
borderRadius: 16,
|
||||
paddingVertical: 14,
|
||||
},
|
||||
shareButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
marginLeft: 8,
|
||||
},
|
||||
});
|
||||
343
app/health/profile.tsx
Normal file
343
app/health/profile.tsx
Normal file
@@ -0,0 +1,343 @@
|
||||
import { HealthProgressRing } from '@/components/health/HealthProgressRing';
|
||||
import { BasicInfoTab } from '@/components/health/tabs/BasicInfoTab';
|
||||
import { CheckupRecordsTab } from '@/components/health/tabs/CheckupRecordsTab';
|
||||
import { HealthHistoryTab } from '@/components/health/tabs/HealthHistoryTab';
|
||||
import { MedicalRecordsTab } from '@/components/health/tabs/MedicalRecordsTab';
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { ROUTES } from '@/constants/Routes';
|
||||
import { useAppSelector } from '@/hooks/redux';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { selectHealthHistoryProgress } from '@/store/healthSlice';
|
||||
import { DEFAULT_MEMBER_NAME } from '@/store/userSlice';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { Image } from 'expo-image';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Stack, useRouter } from 'expo-router';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
export default function HealthProfileScreen() {
|
||||
const router = useRouter();
|
||||
const insets = useSafeAreaInsets();
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
const { t } = useI18n();
|
||||
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
// Mock user data - in a real app this would come from Redux/Context
|
||||
const userProfile = useAppSelector((state) => state.user.profile);
|
||||
const displayName = userProfile.name?.trim() ? userProfile.name : DEFAULT_MEMBER_NAME;
|
||||
const avatarUrl = userProfile.avatar || 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/seal-avatar/2.jpeg';
|
||||
|
||||
// 从 Redux 获取健康史进度
|
||||
const healthHistoryProgress = useAppSelector(selectHealthHistoryProgress);
|
||||
|
||||
// Mock health data
|
||||
const healthData = {
|
||||
bmi: userProfile.weight && userProfile.height ? (parseFloat(userProfile.weight) / Math.pow(parseFloat(userProfile.height) / 100, 2)).toFixed(1) : '--',
|
||||
height: userProfile.height ? `${parseFloat(userProfile.height).toFixed(1)}` : '--',
|
||||
weight: userProfile.weight ? `${parseFloat(userProfile.weight).toFixed(1)}` : '--',
|
||||
waist: userProfile.waistCircumference ? `${parseFloat(userProfile.waistCircumference.toString()).toFixed(1)}` : '--',
|
||||
status: '健康状况良好',
|
||||
statusDesc: '请继续保持良好的生活习惯',
|
||||
statusMessage: '您的健康状况不错哦~'
|
||||
};
|
||||
|
||||
// Calculate Basic Info completion percentage
|
||||
const basicInfoProgress = useMemo(() => {
|
||||
let filledCount = 0;
|
||||
const totalFields = 3; // height, weight, waist
|
||||
|
||||
if (userProfile.height && parseFloat(userProfile.height) > 0) filledCount++;
|
||||
if (userProfile.weight && parseFloat(userProfile.weight) > 0) filledCount++;
|
||||
if (userProfile.waistCircumference && parseFloat(userProfile.waistCircumference.toString()) > 0) filledCount++;
|
||||
|
||||
return Math.round((filledCount / totalFields) * 100);
|
||||
}, [userProfile.height, userProfile.weight, userProfile.waistCircumference]);
|
||||
|
||||
const gradientColors: [string, string] =
|
||||
theme === 'dark'
|
||||
? ['#1f2230', '#10131e']
|
||||
: [colorTokens.backgroundGradientStart, colorTokens.backgroundGradientEnd];
|
||||
|
||||
const tabs = [
|
||||
t('health.tabs.healthProfile.basicInfo'),
|
||||
t('health.tabs.healthProfile.healthHistory'),
|
||||
// t('health.tabs.healthProfile.medicalRecords'),
|
||||
t('health.tabs.healthProfile.checkupRecords'),
|
||||
t('health.tabs.healthProfile.medicineBox')
|
||||
];
|
||||
const tabIcons = ["person", "time", "folder", "clipboard", "medkit"];
|
||||
|
||||
const handleTabPress = (index: number) => {
|
||||
if (index === 4) {
|
||||
// Handle Medicine Box tab specially
|
||||
router.push('/medications/manage-medications');
|
||||
return;
|
||||
}
|
||||
setActiveTab(index);
|
||||
};
|
||||
|
||||
const renderActiveTab = () => {
|
||||
switch (activeTab) {
|
||||
case 0:
|
||||
return <BasicInfoTab healthData={healthData} />;
|
||||
case 1:
|
||||
return <HealthHistoryTab />;
|
||||
case 2:
|
||||
return <MedicalRecordsTab />;
|
||||
case 3:
|
||||
return <CheckupRecordsTab />;
|
||||
default:
|
||||
return <BasicInfoTab healthData={healthData} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
|
||||
<Stack.Screen options={{ headerShown: false }} />
|
||||
<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject} />
|
||||
|
||||
<HeaderBar
|
||||
title={t('health.tabs.healthProfile.title')}
|
||||
transparent
|
||||
right={
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<TouchableOpacity style={{ marginRight: 12 }}>
|
||||
<Ionicons name="settings-outline" size={22} color="#1F2937" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
|
||||
<ScrollView
|
||||
contentContainerStyle={[styles.scrollContent, { paddingTop: insets.top + 60 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Top Section with Avatar and Status */}
|
||||
<View style={styles.topSection}>
|
||||
<View style={styles.avatarRow}>
|
||||
<View style={styles.miniAvatarContainer}>
|
||||
<Image source={{ uri: avatarUrl }} style={styles.miniAvatar} />
|
||||
<Text style={styles.miniAvatarName}>{displayName}</Text>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.addButton}>
|
||||
<Ionicons name="add" size={16} color="#6B7280" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Action Buttons - Replaced with HealthProgressRing */}
|
||||
<View style={styles.actionButtonsRow}>
|
||||
<HealthProgressRing
|
||||
title={t('health.tabs.healthProfile.basicInfo')}
|
||||
progress={basicInfoProgress}
|
||||
gradientColors={['#9B8AFB', '#5B4CFF']}
|
||||
/>
|
||||
<HealthProgressRing
|
||||
title={t('health.tabs.healthProfile.healthHistory')}
|
||||
progress={healthHistoryProgress}
|
||||
gradientColors={['#E0E7FF', '#C7D2FE']}
|
||||
label={healthHistoryProgress.toString()}
|
||||
suffix="%"
|
||||
/>
|
||||
<HealthProgressRing
|
||||
title={t('health.tabs.healthProfile.medicalRecords')}
|
||||
progress={0}
|
||||
gradientColors={['#E0E7FF', '#C7D2FE']}
|
||||
label="0"
|
||||
suffix="份"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Family Invite Banner */}
|
||||
<TouchableOpacity
|
||||
style={styles.inviteBanner}
|
||||
activeOpacity={0.9}
|
||||
onPress={() => router.push(ROUTES.HEALTH_FAMILY_INVITE)}
|
||||
>
|
||||
<View style={styles.inviteContent}>
|
||||
<View style={styles.inviteIconContainer}>
|
||||
<Ionicons name="home" size={18} color="#5B4CFF" />
|
||||
</View>
|
||||
<Text style={styles.inviteText}>{t('health.tabs.healthProfile.subtitle')}</Text>
|
||||
<Ionicons name="chevron-forward" size={18} color="#6B7280" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Tab/Segment Control */}
|
||||
<View style={styles.segmentControl}>
|
||||
{tabs.map((tab, index) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
style={styles.segmentItem}
|
||||
onPress={() => handleTabPress(index)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={[styles.segmentIconPlaceholder, index === activeTab && styles.segmentIconActive]}>
|
||||
<Ionicons
|
||||
name={tabIcons[index] as any}
|
||||
size={20}
|
||||
color={index === activeTab ? "#5B4CFF" : "#6B7280"}
|
||||
/>
|
||||
</View>
|
||||
<Text style={[styles.segmentText, index === activeTab && styles.segmentTextActive]}>{tab}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Active Tab Content */}
|
||||
{renderActiveTab()}
|
||||
|
||||
{/* Privacy Notice Footer */}
|
||||
<View style={styles.privacyNoticeContainer}>
|
||||
<View style={styles.privacyIconWrapper}>
|
||||
<Ionicons name="shield-checkmark" size={16} color="#9CA3AF" />
|
||||
</View>
|
||||
<Text style={styles.privacyNoticeText}>
|
||||
{t('health.tabs.healthProfile.privacyNotice')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
</ScrollView>
|
||||
|
||||
{/* Privacy Warning Footer - Removed as requested */}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 100,
|
||||
},
|
||||
topSection: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
avatarRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
miniAvatarContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#5B4CFF',
|
||||
paddingVertical: 4,
|
||||
paddingHorizontal: 4,
|
||||
paddingRight: 12,
|
||||
borderRadius: 20,
|
||||
},
|
||||
miniAvatar: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
marginRight: 6,
|
||||
borderWidth: 1,
|
||||
borderColor: '#FFF',
|
||||
},
|
||||
miniAvatarName: {
|
||||
color: '#FFF',
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
addButton: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#FFFFFF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: 8,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 2,
|
||||
elevation: 2,
|
||||
},
|
||||
actionButtonsRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
marginTop: 24,
|
||||
marginBottom: 12,
|
||||
},
|
||||
inviteBanner: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 20,
|
||||
padding: 16,
|
||||
marginBottom: 20,
|
||||
shadowColor: '#5B4CFF',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
inviteContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
inviteIconContainer: {
|
||||
marginRight: 8,
|
||||
},
|
||||
inviteText: {
|
||||
flex: 1,
|
||||
fontSize: 13,
|
||||
color: '#1F2138',
|
||||
fontWeight: '600',
|
||||
},
|
||||
segmentControl: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 16,
|
||||
paddingHorizontal: 18,
|
||||
},
|
||||
segmentItem: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
segmentIconPlaceholder: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#F3F4F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 4,
|
||||
},
|
||||
segmentIconActive: {
|
||||
backgroundColor: '#E0E7FF',
|
||||
},
|
||||
segmentText: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
},
|
||||
segmentTextActive: {
|
||||
color: '#5B4CFF',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
privacyNoticeContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 16,
|
||||
marginTop: 32,
|
||||
marginBottom: 16,
|
||||
},
|
||||
privacyIconWrapper: {
|
||||
marginRight: 6,
|
||||
},
|
||||
privacyNoticeText: {
|
||||
fontSize: 12,
|
||||
color: '#9CA3AF',
|
||||
textAlign: 'center',
|
||||
lineHeight: 18,
|
||||
},
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user