63ed820e93
- 为所有健康数据卡片添加对应功能图标，提升视觉一致性 - 将“小鱼干”文案统一为“能量值”，并更新获取说明 - 语音录音页面增加组件卸载保护、错误提示与资源清理逻辑 - 个人页支持毛玻璃按钮样式，默认用户名置空 - 新增血氧、饮食、心情、压力、睡眠、步数、体重等图标资源 - 升级 react-native-purchases 至 9.4.3 - 移除 useAuthGuard 调试日志
118 lines
2.7 KiB
TypeScript
118 lines
2.7 KiB
TypeScript
import { MoodCheckin, getMoodConfig } from '@/services/moodCheckins';
|
|
import dayjs from 'dayjs';
|
|
import LottieView from 'lottie-react-native';
|
|
import React, { useEffect, useRef } from 'react';
|
|
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface MoodCardProps {
|
|
moodCheckin: MoodCheckin | null;
|
|
onPress: () => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function MoodCard({ moodCheckin, onPress }: MoodCardProps) {
|
|
const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;
|
|
const animationRef = useRef<LottieView>(null);
|
|
|
|
useEffect(() => {
|
|
if (animationRef.current) {
|
|
animationRef.current.play();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<TouchableOpacity onPress={onPress} style={styles.moodCardContent} >
|
|
<View style={styles.moodCardHeader}>
|
|
<View style={styles.titleContainer}>
|
|
<Image
|
|
source={require('@/assets/images/icons/icon-mood.png')}
|
|
style={styles.titleIcon}
|
|
/>
|
|
<Text style={styles.cardTitle}>心情</Text>
|
|
</View>
|
|
<LottieView
|
|
ref={animationRef}
|
|
source={require('@/assets/lottie/mood/mood_demo.json')}
|
|
autoPlay
|
|
loop
|
|
style={styles.lottieAnimation}
|
|
/>
|
|
</View>
|
|
{moodCheckin ? (
|
|
<View style={styles.moodPreview}>
|
|
<Text style={styles.moodPreviewText}>
|
|
{moodConfig?.label || moodCheckin.moodType}
|
|
</Text>
|
|
<Text style={styles.moodPreviewTime}>
|
|
{dayjs(moodCheckin.createdAt).format('HH:mm')}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<Text style={styles.moodEmptyText}>点击记录心情</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
moodCardContent: {
|
|
width: '100%',
|
|
},
|
|
|
|
moodCardHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
|
|
titleIcon: {
|
|
width: 16,
|
|
height: 16,
|
|
marginRight: 6,
|
|
resizeMode: 'contain',
|
|
},
|
|
|
|
cardTitle: {
|
|
fontSize: 14,
|
|
color: '#192126',
|
|
fontWeight: '600'
|
|
},
|
|
|
|
lottieAnimation: {
|
|
width: 30,
|
|
height: 30,
|
|
},
|
|
|
|
moodPreview: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginTop: 12,
|
|
},
|
|
moodPreviewText: {
|
|
fontSize: 14,
|
|
color: '#059669',
|
|
fontWeight: '600',
|
|
},
|
|
moodPreviewTime: {
|
|
fontSize: 12,
|
|
color: '#6B7280',
|
|
},
|
|
moodEmptyText: {
|
|
fontSize: 12,
|
|
color: '#9CA3AF',
|
|
fontStyle: 'italic',
|
|
marginTop: 22,
|
|
},
|
|
moodLoadingText: {
|
|
fontSize: 12,
|
|
color: '#9CA3AF',
|
|
fontStyle: 'italic',
|
|
marginTop: 22,
|
|
},
|
|
}); |