410 lines
10 KiB
TypeScript
410 lines
10 KiB
TypeScript
import { Image } from '@/components/ui/Image';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import { LinearGradient } from 'expo-linear-gradient';
|
||
import React, { useEffect, useRef, useState } from 'react';
|
||
import { Animated, Modal, Pressable, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||
|
||
type Props = {
|
||
visible: boolean;
|
||
onClose: () => void;
|
||
onManualAdd: () => void;
|
||
onAiRecognize: () => void;
|
||
};
|
||
|
||
export function MedicationAddOptionsSheet({ visible, onClose, onManualAdd, onAiRecognize }: Props) {
|
||
const translateY = useRef(new Animated.Value(300)).current;
|
||
const opacity = useRef(new Animated.Value(0)).current;
|
||
const [modalVisible, setModalVisible] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (visible) {
|
||
// 打开时：先显示 Modal，然后执行动画
|
||
setModalVisible(true);
|
||
Animated.parallel([
|
||
Animated.spring(translateY, {
|
||
toValue: 0,
|
||
tension: 65,
|
||
friction: 11,
|
||
useNativeDriver: true,
|
||
}),
|
||
Animated.timing(opacity, {
|
||
toValue: 1,
|
||
duration: 200,
|
||
useNativeDriver: true,
|
||
}),
|
||
]).start();
|
||
} else if (modalVisible) {
|
||
// 关闭时：先执行动画，动画完成后隐藏 Modal
|
||
Animated.parallel([
|
||
Animated.timing(translateY, {
|
||
toValue: 300,
|
||
duration: 200,
|
||
useNativeDriver: true,
|
||
}),
|
||
Animated.timing(opacity, {
|
||
toValue: 0,
|
||
duration: 150,
|
||
useNativeDriver: true,
|
||
}),
|
||
]).start(({ finished }) => {
|
||
if (finished) {
|
||
setModalVisible(false);
|
||
}
|
||
});
|
||
}
|
||
}, [visible, modalVisible, opacity, translateY]);
|
||
|
||
const handleClose = () => {
|
||
// 触发关闭动画
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<Modal visible={modalVisible} transparent animationType="none" onRequestClose={handleClose}>
|
||
<Pressable style={styles.overlay} onPress={onClose}>
|
||
<Animated.View style={[styles.backdrop, { opacity }]} />
|
||
</Pressable>
|
||
<Animated.View
|
||
style={[
|
||
styles.sheet,
|
||
{
|
||
transform: [{ translateY }],
|
||
},
|
||
]}
|
||
>
|
||
{/* Header */}
|
||
<View style={styles.header}>
|
||
<View style={styles.headerLeft}>
|
||
<Text style={styles.title}>添加药物</Text>
|
||
<Text style={styles.subtitle}>选择录入方式</Text>
|
||
</View>
|
||
<TouchableOpacity onPress={handleClose} style={styles.closeButton} activeOpacity={0.7}>
|
||
<Ionicons name="close" size={24} color="#64748b" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
{/* AI 智能识别 - 主推荐 */}
|
||
<TouchableOpacity activeOpacity={0.95} onPress={onAiRecognize}>
|
||
<LinearGradient
|
||
colors={['#0ea5e9', '#0284c7']}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 1, y: 1 }}
|
||
style={styles.aiCard}
|
||
>
|
||
{/* 推荐标签 */}
|
||
<View style={styles.recommendBadge}>
|
||
<Ionicons name="sparkles" size={14} color="#fbbf24" />
|
||
<Text style={styles.recommendText}>推荐使用</Text>
|
||
</View>
|
||
|
||
<View style={styles.aiContent}>
|
||
<View style={styles.aiLeft}>
|
||
<View style={styles.aiIconWrapper}>
|
||
<Ionicons name="camera" size={32} color="#fff" />
|
||
</View>
|
||
<View style={styles.aiTexts}>
|
||
<Text style={styles.aiTitle}>AI 智能识别</Text>
|
||
<Text style={styles.aiDescription}>
|
||
拍照识别药品信息{'\n'}自动生成提醒计划
|
||
</Text>
|
||
<View style={styles.aiFeatures}>
|
||
<View style={styles.featureItem}>
|
||
<Ionicons name="flash" size={14} color="#fff" />
|
||
<Text style={styles.featureText}>快速识别</Text>
|
||
</View>
|
||
<View style={styles.featureItem}>
|
||
<Ionicons name="checkmark-circle" size={14} color="#fff" />
|
||
<Text style={styles.featureText}>智能填充</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<Image
|
||
source={require('@/assets/images/medicine/image-medicine.png')}
|
||
style={styles.aiImage}
|
||
contentFit="contain"
|
||
/>
|
||
</View>
|
||
|
||
{/* AI 说明 */}
|
||
<View style={styles.aiFooter}>
|
||
<Ionicons name="information-circle-outline" size={14} color="rgba(255,255,255,0.8)" />
|
||
<Text style={styles.aiFooterText}>需会员或 AI 次数 · 拍摄时确保光线充足</Text>
|
||
</View>
|
||
</LinearGradient>
|
||
</TouchableOpacity>
|
||
|
||
{/* 分隔线 */}
|
||
<View style={styles.divider}>
|
||
<View style={styles.dividerLine} />
|
||
<Text style={styles.dividerText}>或</Text>
|
||
<View style={styles.dividerLine} />
|
||
</View>
|
||
|
||
{/* 手动录入 - 次要选项 */}
|
||
<TouchableOpacity activeOpacity={0.9} onPress={onManualAdd}>
|
||
<View style={styles.manualCard}>
|
||
<View style={styles.manualLeft}>
|
||
<View style={styles.manualIconWrapper}>
|
||
<Ionicons name="create-outline" size={24} color="#6366f1" />
|
||
</View>
|
||
<View style={styles.manualTexts}>
|
||
<Text style={styles.manualTitle}>手动录入</Text>
|
||
<Text style={styles.manualDescription}>
|
||
逐项填写药品信息和服用计划
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.manualRight}>
|
||
<View style={styles.manualBadge}>
|
||
<Text style={styles.manualBadgeText}>免费</Text>
|
||
</View>
|
||
<Ionicons name="chevron-forward" size={20} color="#94a3b8" />
|
||
</View>
|
||
</View>
|
||
</TouchableOpacity>
|
||
|
||
{/* 底部安全距离 */}
|
||
<View style={styles.safeArea} />
|
||
</Animated.View>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
overlay: {
|
||
flex: 1,
|
||
backgroundColor: 'transparent',
|
||
},
|
||
backdrop: {
|
||
...StyleSheet.absoluteFillObject,
|
||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||
},
|
||
sheet: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
backgroundColor: '#fff',
|
||
borderTopLeftRadius: 32,
|
||
borderTopRightRadius: 32,
|
||
paddingTop: 24,
|
||
paddingHorizontal: 20,
|
||
shadowColor: '#000',
|
||
shadowOpacity: 0.15,
|
||
shadowRadius: 20,
|
||
shadowOffset: { width: 0, height: -8 },
|
||
elevation: 12,
|
||
},
|
||
|
||
// Header
|
||
header: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-start',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 24,
|
||
},
|
||
headerLeft: {
|
||
flex: 1,
|
||
},
|
||
title: {
|
||
fontSize: 24,
|
||
fontWeight: '700',
|
||
color: '#0f172a',
|
||
marginBottom: 4,
|
||
},
|
||
subtitle: {
|
||
fontSize: 14,
|
||
color: '#64748b',
|
||
fontWeight: '500',
|
||
},
|
||
closeButton: {
|
||
width: 36,
|
||
height: 36,
|
||
borderRadius: 18,
|
||
backgroundColor: '#f1f5f9',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginLeft: 12,
|
||
},
|
||
|
||
// AI 卡片 - 主推荐
|
||
aiCard: {
|
||
borderRadius: 24,
|
||
padding: 20,
|
||
marginBottom: 20,
|
||
overflow: 'hidden',
|
||
shadowColor: '#0ea5e9',
|
||
shadowOpacity: 0.3,
|
||
shadowRadius: 16,
|
||
shadowOffset: { width: 0, height: 8 },
|
||
elevation: 8,
|
||
},
|
||
recommendBadge: {
|
||
position: 'absolute',
|
||
top: 16,
|
||
right: 16,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 4,
|
||
backgroundColor: 'rgba(255,255,255,0.25)',
|
||
paddingHorizontal: 10,
|
||
paddingVertical: 6,
|
||
borderRadius: 16,
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(255,255,255,0.3)',
|
||
},
|
||
recommendText: {
|
||
fontSize: 12,
|
||
fontWeight: '700',
|
||
color: '#fff',
|
||
},
|
||
aiContent: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 16,
|
||
},
|
||
aiLeft: {
|
||
flex: 1,
|
||
flexDirection: 'row',
|
||
gap: 16,
|
||
},
|
||
aiIconWrapper: {
|
||
width: 56,
|
||
height: 56,
|
||
borderRadius: 16,
|
||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderWidth: 2,
|
||
borderColor: 'rgba(255,255,255,0.3)',
|
||
},
|
||
aiTexts: {
|
||
flex: 1,
|
||
gap: 8,
|
||
},
|
||
aiTitle: {
|
||
fontSize: 20,
|
||
fontWeight: '700',
|
||
color: '#fff',
|
||
},
|
||
aiDescription: {
|
||
fontSize: 14,
|
||
color: 'rgba(255,255,255,0.9)',
|
||
lineHeight: 20,
|
||
},
|
||
aiFeatures: {
|
||
flexDirection: 'row',
|
||
gap: 12,
|
||
marginTop: 4,
|
||
},
|
||
featureItem: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 4,
|
||
},
|
||
featureText: {
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
color: '#fff',
|
||
},
|
||
aiImage: {
|
||
width: 80,
|
||
height: 80,
|
||
marginLeft: 12,
|
||
},
|
||
aiFooter: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 6,
|
||
paddingTop: 12,
|
||
borderTopWidth: 1,
|
||
borderTopColor: 'rgba(255,255,255,0.2)',
|
||
},
|
||
aiFooterText: {
|
||
fontSize: 12,
|
||
color: 'rgba(255,255,255,0.8)',
|
||
fontWeight: '500',
|
||
},
|
||
|
||
// 分隔线
|
||
divider: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 20,
|
||
},
|
||
dividerLine: {
|
||
flex: 1,
|
||
height: 1,
|
||
backgroundColor: '#e2e8f0',
|
||
},
|
||
dividerText: {
|
||
fontSize: 13,
|
||
color: '#94a3b8',
|
||
fontWeight: '600',
|
||
marginHorizontal: 16,
|
||
},
|
||
|
||
// 手动录入卡片 - 次要选项
|
||
manualCard: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
backgroundColor: '#f8fafc',
|
||
borderRadius: 20,
|
||
padding: 16,
|
||
borderWidth: 1.5,
|
||
borderColor: '#e2e8f0',
|
||
},
|
||
manualLeft: {
|
||
flex: 1,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
},
|
||
manualIconWrapper: {
|
||
width: 48,
|
||
height: 48,
|
||
borderRadius: 14,
|
||
backgroundColor: '#eef2ff',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
manualTexts: {
|
||
flex: 1,
|
||
gap: 4,
|
||
},
|
||
manualTitle: {
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
color: '#0f172a',
|
||
},
|
||
manualDescription: {
|
||
fontSize: 13,
|
||
color: '#64748b',
|
||
lineHeight: 18,
|
||
},
|
||
manualRight: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
marginLeft: 12,
|
||
},
|
||
manualBadge: {
|
||
backgroundColor: '#dcfce7',
|
||
paddingHorizontal: 8,
|
||
paddingVertical: 4,
|
||
borderRadius: 8,
|
||
},
|
||
manualBadgeText: {
|
||
fontSize: 11,
|
||
fontWeight: '700',
|
||
color: '#16a34a',
|
||
},
|
||
|
||
// 底部安全距离
|
||
safeArea: {
|
||
height: 32,
|
||
},
|
||
});
|