feat：支持身体围度数据展示
This commit is contained in:
richarjiang
189
components/statistic/CircumferenceCard.tsx
Normal file
189
components/statistic/CircumferenceCard.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import { FloatingSelectionModal, SelectionItem } from '@/components/ui/FloatingSelectionModal';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { selectUserProfile, updateUserBodyMeasurements } from '@/store/userSlice';
|
||||
import React, { useState } from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
interface CircumferenceCardProps {
|
||||
style?: any;
|
||||
}
|
||||
|
||||
const CircumferenceCard: React.FC<CircumferenceCardProps> = ({ style }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const userProfile = useAppSelector(selectUserProfile);
|
||||
|
||||
|
||||
console.log('userProfile', userProfile);
|
||||
|
||||
|
||||
const { ensureLoggedIn } = useAuthGuard()
|
||||
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [selectedMeasurement, setSelectedMeasurement] = useState<{
|
||||
key: string;
|
||||
label: string;
|
||||
currentValue?: number;
|
||||
} | null>(null);
|
||||
|
||||
const measurements = [
|
||||
{
|
||||
key: 'chestCircumference',
|
||||
label: '胸围',
|
||||
value: userProfile?.chestCircumference,
|
||||
},
|
||||
{
|
||||
key: 'waistCircumference',
|
||||
label: '腰围',
|
||||
value: userProfile?.waistCircumference,
|
||||
},
|
||||
{
|
||||
key: 'upperHipCircumference',
|
||||
label: '上臀围',
|
||||
value: userProfile?.upperHipCircumference,
|
||||
},
|
||||
{
|
||||
key: 'armCircumference',
|
||||
label: '臂围',
|
||||
value: userProfile?.armCircumference,
|
||||
},
|
||||
{
|
||||
key: 'thighCircumference',
|
||||
label: '大腿围',
|
||||
value: userProfile?.thighCircumference,
|
||||
},
|
||||
{
|
||||
key: 'calfCircumference',
|
||||
label: '小腿围',
|
||||
value: userProfile?.calfCircumference,
|
||||
},
|
||||
];
|
||||
|
||||
// Generate circumference options (30-150 cm)
|
||||
const circumferenceOptions: SelectionItem[] = Array.from({ length: 121 }, (_, i) => {
|
||||
const value = i + 30;
|
||||
return {
|
||||
label: `${value} cm`,
|
||||
value: value,
|
||||
};
|
||||
});
|
||||
|
||||
const handleMeasurementPress = async (measurement: typeof measurements[0]) => {
|
||||
const isLoggedIn = await ensureLoggedIn();
|
||||
if (!isLoggedIn) {
|
||||
// 如果未登录，用户会被重定向到登录页面
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedMeasurement({
|
||||
key: measurement.key,
|
||||
label: measurement.label,
|
||||
currentValue: measurement.value,
|
||||
});
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleUpdateMeasurement = (value: string | number) => {
|
||||
if (!selectedMeasurement) return;
|
||||
|
||||
const updateData = {
|
||||
[selectedMeasurement.key]: Number(value),
|
||||
};
|
||||
|
||||
dispatch(updateUserBodyMeasurements(updateData));
|
||||
setModalVisible(false);
|
||||
setSelectedMeasurement(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, style]}>
|
||||
<Text style={styles.title}>围度 (cm)</Text>
|
||||
|
||||
<View style={styles.measurementsContainer}>
|
||||
{measurements.map((measurement, index) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
style={styles.measurementItem}
|
||||
onPress={() => handleMeasurementPress(measurement)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.label}>{measurement.label}</Text>
|
||||
<View style={styles.valueContainer}>
|
||||
<Text style={styles.value}>
|
||||
{measurement.value ? measurement.value.toString() : '--'}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<FloatingSelectionModal
|
||||
visible={modalVisible}
|
||||
onClose={() => {
|
||||
setModalVisible(false);
|
||||
setSelectedMeasurement(null);
|
||||
}}
|
||||
title={selectedMeasurement ? `设置${selectedMeasurement.label}` : '设置围度'}
|
||||
items={circumferenceOptions}
|
||||
selectedValue={selectedMeasurement?.currentValue}
|
||||
onValueChange={() => { }} // Real-time update not needed
|
||||
onConfirm={handleUpdateMeasurement}
|
||||
confirmButtonText="确认"
|
||||
pickerHeight={180}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
},
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 12,
|
||||
elevation: 6,
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
marginBottom: 16,
|
||||
},
|
||||
measurementsContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'nowrap',
|
||||
},
|
||||
measurementItem: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
label: {
|
||||
fontSize: 12,
|
||||
color: '#888',
|
||||
marginBottom: 8,
|
||||
textAlign: 'center',
|
||||
},
|
||||
valueContainer: {
|
||||
backgroundColor: '#F5F5F7',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 6,
|
||||
minWidth: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
value: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default CircumferenceCard;
|
||||
122
components/ui/FloatingSelectionCard.tsx
Normal file
122
components/ui/FloatingSelectionCard.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import React from 'react';
|
||||
import {
|
||||
Modal,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
interface FloatingSelectionCardProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function FloatingSelectionCard({
|
||||
visible,
|
||||
onClose,
|
||||
title,
|
||||
children
|
||||
}: FloatingSelectionCardProps) {
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent={true}
|
||||
animationType="fade"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<BlurView intensity={20} tint="dark" style={styles.overlay}>
|
||||
<TouchableOpacity
|
||||
style={styles.backdrop}
|
||||
activeOpacity={1}
|
||||
onPress={onClose}
|
||||
/>
|
||||
|
||||
<View style={styles.container}>
|
||||
<BlurView intensity={80} tint="light" style={styles.blurContainer}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.content}>
|
||||
{children}
|
||||
</View>
|
||||
</BlurView>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.closeButton}
|
||||
onPress={onClose}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.closeButtonInner}>
|
||||
<Ionicons name="close" size={24} color="#666" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</BlurView>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
},
|
||||
backdrop: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 40,
|
||||
},
|
||||
blurContainer: {
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
minWidth: 340,
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 16,
|
||||
minHeight: 100,
|
||||
},
|
||||
header: {
|
||||
paddingBottom: 20,
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#636161ff',
|
||||
},
|
||||
content: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
closeButton: {
|
||||
marginTop: 20,
|
||||
},
|
||||
closeButtonInner: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
});
|
||||
57
components/ui/FloatingSelectionModal.tsx
Normal file
57
components/ui/FloatingSelectionModal.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import { FloatingSelectionCard } from './FloatingSelectionCard';
|
||||
import { SlidingSelection, SelectionItem } from './SlidingSelection';
|
||||
|
||||
interface FloatingSelectionModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
items: SelectionItem[];
|
||||
selectedValue?: string | number;
|
||||
onValueChange: (value: string | number, index: number) => void;
|
||||
onConfirm?: (value: string | number, index: number) => void;
|
||||
showConfirmButton?: boolean;
|
||||
confirmButtonText?: string;
|
||||
pickerHeight?: number;
|
||||
}
|
||||
|
||||
export function FloatingSelectionModal({
|
||||
visible,
|
||||
onClose,
|
||||
title,
|
||||
items,
|
||||
selectedValue,
|
||||
onValueChange,
|
||||
onConfirm,
|
||||
showConfirmButton = true,
|
||||
confirmButtonText = '确认',
|
||||
pickerHeight = 150,
|
||||
}: FloatingSelectionModalProps) {
|
||||
const handleConfirm = (value: string | number, index: number) => {
|
||||
if (onConfirm) {
|
||||
onConfirm(value, index);
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<FloatingSelectionCard
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
title={title}
|
||||
>
|
||||
<SlidingSelection
|
||||
items={items}
|
||||
selectedValue={selectedValue}
|
||||
onValueChange={onValueChange}
|
||||
onConfirm={handleConfirm}
|
||||
showConfirmButton={showConfirmButton}
|
||||
confirmButtonText={confirmButtonText}
|
||||
height={pickerHeight}
|
||||
/>
|
||||
</FloatingSelectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
// Export types for convenience
|
||||
export type { SelectionItem } from './SlidingSelection';
|
||||
131
components/ui/SlidingSelection.tsx
Normal file
131
components/ui/SlidingSelection.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import WheelPickerExpo from 'react-native-wheel-picker-expo';
|
||||
|
||||
export interface SelectionItem {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
interface SlidingSelectionProps {
|
||||
items: SelectionItem[];
|
||||
selectedValue?: string | number;
|
||||
onValueChange: (value: string | number, index: number) => void;
|
||||
onConfirm?: (value: string | number, index: number) => void;
|
||||
showConfirmButton?: boolean;
|
||||
confirmButtonText?: string;
|
||||
height?: number;
|
||||
itemTextStyle?: any;
|
||||
selectedIndicatorStyle?: any;
|
||||
}
|
||||
|
||||
export function SlidingSelection({
|
||||
items,
|
||||
selectedValue,
|
||||
onValueChange,
|
||||
onConfirm,
|
||||
showConfirmButton = true,
|
||||
confirmButtonText = '确认',
|
||||
height = 150,
|
||||
itemTextStyle,
|
||||
selectedIndicatorStyle
|
||||
}: SlidingSelectionProps) {
|
||||
const [currentIndex, setCurrentIndex] = useState(() => {
|
||||
if (selectedValue !== undefined) {
|
||||
const index = items.findIndex(item => item.value === selectedValue);
|
||||
return index >= 0 ? index : 0;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
const handleValueChange = (index: number) => {
|
||||
setCurrentIndex(index);
|
||||
const selectedItem = items[index];
|
||||
if (selectedItem) {
|
||||
onValueChange(selectedItem.value, index);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
const selectedItem = items[currentIndex];
|
||||
if (selectedItem && onConfirm) {
|
||||
onConfirm(selectedItem.value, currentIndex);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={[styles.pickerContainer, { height }]}>
|
||||
<WheelPickerExpo
|
||||
height={height}
|
||||
width={300}
|
||||
initialSelectedIndex={currentIndex}
|
||||
items={items.map(item => ({ label: item.label, value: item.value }))}
|
||||
onChange={({ item, index }) => handleValueChange(index)}
|
||||
backgroundColor="transparent"
|
||||
haptics
|
||||
/>
|
||||
</View>
|
||||
|
||||
{showConfirmButton && (
|
||||
<TouchableOpacity
|
||||
style={styles.confirmButton}
|
||||
onPress={handleConfirm}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.confirmButtonText}>{confirmButtonText}</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
},
|
||||
pickerContainer: {
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
picker: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
itemText: {
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
fontWeight: '500',
|
||||
},
|
||||
selectedIndicator: {
|
||||
backgroundColor: 'rgba(74, 144, 226, 0.1)',
|
||||
borderRadius: 8,
|
||||
},
|
||||
confirmButton: {
|
||||
backgroundColor: '#4A90E2',
|
||||
paddingHorizontal: 32,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 20,
|
||||
marginTop: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 4,
|
||||
elevation: 4,
|
||||
},
|
||||
confirmButtonText: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user