lifei
/
water-sys
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 Commits
2 Branches
0 Tags
31 MiB
 
Tree: fbf7cd05f8
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'fbf7cd05f8'
${ noResults }
water-sys/app/screens/banner/ShippingDetailsSection.tsx

654 lines
22 KiB
Raw Blame History

// import React, { useState, useEffect } from 'react';
// import { View, Text, Image, TouchableOpacity, StyleSheet, ImageBackground, ActivityIndicator, SafeAreaView, StatusBar, Platform, Modal, TextInput, FlatList } from 'react-native';
// import BackIcon from '../../components/BackIcon';
// import fontSize from '../../utils/fontsizeUtils';
// import widthUtils from '../../utils/widthUtils';
// import { useNavigation } from '@react-navigation/native';
// import { NativeStackNavigationProp } from '@react-navigation/native-stack';
// import { settingApi } from '../../services/api/setting';
// import { CountryList } from '../../constants/countries';
// import { useTranslation } from 'react-i18next';
// // Pre-require images to avoid dynamic require issues
// const MARITIME_BACKGROUND = require('../../../assets/img/image_f67fe9bc.png');
// const AIRWAY_BACKGROUND = require('../../../assets/img/feijiback.png');
// type RootStackParamList = {
// Home: undefined;
// ShippingDetails: undefined;
// Main: undefined;
// // Add other screens as needed
// };
// type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
// export const ShippingDetailsSection = () => {
// const { t } = useTranslation();
// const [shippingMethod, setShippingMethod] = useState('maritime'); // 'maritime' or 'airway'
// const [isLoading, setIsLoading] = useState(true);
// const [showCountryModal, setShowCountryModal] = useState(false);
// const [countries, setCountries] = useState<CountryList[]>([]);
// const [selectedCountry, setSelectedCountry] = useState<CountryList | null>(null);
// const [parcelVolume, setParcelVolume] = useState('');
// const [isCalculating, setIsCalculating] = useState(false);
// const [showResultModal, setShowResultModal] = useState(false);
// const [shippingFee, setShippingFee] = useState<number | null>(null);
// const [shippingCurrency, setShippingCurrency] = useState<string>('');
// const navigation = useNavigation<NavigationProp>();
// useEffect(() => {
// const preloadImages = async () => {
// try {
// await Promise.all([
// Image.prefetch(Image.resolveAssetSource(MARITIME_BACKGROUND).uri),
// Image.prefetch(Image.resolveAssetSource(AIRWAY_BACKGROUND).uri)
// ]);
// setIsLoading(false);
// } catch (error) {
// console.error('Error preloading images:', error);
// setIsLoading(false);
// }
// };
// const fetchCountries = async () => {
// try {
// const response = await settingApi.getCountryList();
// setCountries(response);
// } catch (error) {
// console.error('Error fetching countries:', error);
// }
// };
// preloadImages();
// fetchCountries();
// }, []);
// const handleShippingMethodChange = (method: 'maritime' | 'airway') => {
// setShippingMethod(method);
// };
// const handleCountrySelect = (country: CountryList) => {
// setSelectedCountry(country);
// setShowCountryModal(false);
// };
// // Get background image based on shipping method
// const getBackgroundImage = () => {
// return shippingMethod === 'maritime'
// ? MARITIME_BACKGROUND
// : AIRWAY_BACKGROUND;
// };
// const handleCalculateShipping = async () => {
// if (!selectedCountry || !parcelVolume) {
// // TODO: Show error message
// return;
// }
// setIsCalculating(true);
// try {
// const volume = parseFloat(parcelVolume);
// if (isNaN(volume)) {
// // TODO: Show error message for invalid input
// return;
// }
// const shippingData = {
// weight_kg: shippingMethod === 'airway' ? volume : 0,
// volume_m3: shippingMethod === 'maritime' ? volume : 0,
// country_code: selectedCountry.country
// };
// const response = await settingApi.getShippingFee(shippingData);
// const fee = shippingMethod === 'maritime'
// ? response.estimated_shipping_fee_sea
// : response.estimated_shipping_fee_air;
// setShippingFee(fee);
// setShippingCurrency(response.currency);
// setShowResultModal(true);
// } catch (error) {
// console.error('Error calculating shipping fee:', error);
// // TODO: Show error message
// } finally {
// setIsCalculating(false);
// }
// };
// const renderCountryItem = ({ item }: { item: CountryList }) => (
// <TouchableOpacity
// style={styles.countryItem}
// onPress={() => handleCountrySelect(item)}
// >
// <Text style={styles.countryItemText}>{item.name}</Text>
// {selectedCountry?.country === item.country && (
// <Text style={styles.checkIcon}>✓</Text>
// )}
// </TouchableOpacity>
// );
// const renderResultModal = () => (
// <Modal
// visible={showResultModal}
// transparent={true}
// animationType="fade"
// onRequestClose={() => setShowResultModal(false)}
// >
// <View style={styles.resultModalContainer}>
// <View style={styles.resultModalContent}>
// <Text style={styles.resultTitle}>{t('banner.shipping.calculation_result')}</Text>
// <Text style={styles.resultText}>
// {t('banner.shipping.estimated_fee')}: {shippingFee?.toFixed(2)} {shippingCurrency}
// </Text>
// <TouchableOpacity
// style={styles.resultCloseButton}
// onPress={() => setShowResultModal(false)}
// >
// <Text style={styles.resultCloseButtonText}>{t('banner.shipping.confirm')}</Text>
// </TouchableOpacity>
// </View>
// </View>
// </Modal>
// );
// return (
// <SafeAreaView style={styles.safeArea}>
// <StatusBar barStyle="light-content" backgroundColor="#005EE4" />
// <View style={styles.safeAreaContent}>
// {isLoading ? (
// <View style={styles.loadingContainer}>
// <ActivityIndicator size="large" color="#005EE4" />
// </View>
// ) : (
// <ImageBackground
// source={getBackgroundImage()}
// style={styles.backgroundImage}
// >
// <View style={styles.contentContainer}>
// <View style={styles.timeShippingSection}>
// <View style={styles.shippingCostContainer}>
// <View style={styles.svgContainer}>
// <TouchableOpacity
// style={styles.backButton}
// onPress={() => {
// navigation.goBack();
// }}
// >
// <BackIcon size={fontSize(18)} color="#ffffff"/>
// </TouchableOpacity>
// </View>
// <Text style={styles.shippingCostLabelTextStyle}>{t('banner.shipping.fee')}</Text>
// </View>
// </View>
// {/* Calculator Form */}
// <View style={styles.shippingCalculatorContainer}>
// <View style={styles.flexColumnCenteredWithSelect}>
// {/* Shipping Method Selection */}
// <View style={styles.shippingMethodContainer}>
// {/* Maritime Option */}
// <TouchableOpacity
// style={[
// styles.maritimeInfoBox,
// shippingMethod === 'maritime' ? styles.activeShippingMethod : {}
// ]}
// onPress={() => handleShippingMethodChange('maritime')}
// >
// <View style={styles.svgContainer1}>
// <Image
// source={require('../../../assets/img/海运 (1) 1.png')}
// style={{width: widthUtils(24, 24).width, height: widthUtils(24, 24).height,
// tintColor: shippingMethod === 'maritime' ? '#fff' : '#747474'}}
// />
// </View>
// <Text style={[
// styles.maritimeHeadingStyle,
// shippingMethod === 'maritime' ? {} : {color: '#747474'}
// ]}>{t('banner.shipping.maritime')}</Text>
// </TouchableOpacity>
// {/* Airway Option */}
// <TouchableOpacity
// style={[
// styles.airwayInfoContainer,
// shippingMethod === 'airway' ? styles.activeShippingMethod : {}
// ]}
// onPress={() => handleShippingMethodChange('airway')}
// >
// <View style={styles.svgContainer2}>
// <Image
// source={require('../../../assets/img/空运 1.png')}
// style={{width: widthUtils(24, 24).width, height: widthUtils(24, 24).height, tintColor: shippingMethod === 'airway' ? '#fff' : '#747474'}}
// />
// </View>
// <Text style={[
// styles.flightModeLabel,
// shippingMethod === 'airway' ? {color: '#fff'} : {}
// ]}>{t('banner.shipping.airway')}</Text>
// </TouchableOpacity>
// </View>
// {/* Parcel Volume Form */}
// <View style={styles.parcelVolumeFormContainer}>
// {/* Country Selection */}
// <View style={styles.parcelVolumeContainer}>
// <Text style={styles.parcelVolumeLabel}>{t('banner.shipping.select_country')}</Text>
// <TouchableOpacity
// style={styles.volumeInputContainer}
// onPress={() => setShowCountryModal(true)}
// >
// <Text style={styles.volumePromptTextStyle}>
// {selectedCountry ? selectedCountry.name : t('banner.shipping.select_country')}
// </Text>
// </TouchableOpacity>
// </View>
// {/* Parcel Volume Input */}
// <View style={styles.parcelVolumeContainer}>
// <Text style={styles.parcelVolumeLabel}>{t('banner.shipping.parcel_volume')}</Text>
// <View style={styles.volumeInputContainer}>
// <TextInput
// style={styles.volumeInput}
// value={parcelVolume}
// onChangeText={(text) => {
// // 只允许输入数字和小数点
// const numericValue = text.replace(/[^0-9.]/g, '');
// // 确保只有一个小数点
// const parts = numericValue.split('.');
// if (parts.length > 2) {
// setParcelVolume(parts[0] + '.' + parts.slice(1).join(''));
// } else {
// setParcelVolume(numericValue);
// }
// }}
// placeholder={t('banner.shipping.enter_parcel_volume')}
// keyboardType="decimal-pad"
// placeholderTextColor="#807e7e"
// />
// <Text style={styles.unitText}>
// {shippingMethod === 'maritime' ? 'm³' : 'kg'}
// </Text>
// </View>
// </View>
// </View>
// {/* Submit Button */}
// <TouchableOpacity
// style={[styles.primaryButton, isCalculating && styles.disabledButton]}
// onPress={handleCalculateShipping}
// disabled={isCalculating || !selectedCountry || !parcelVolume}
// >
// {isCalculating ? (
// <ActivityIndicator color="white" />
// ) : (
// <Text style={{color: 'white', fontSize: fontSize(16), fontFamily: 'PingFang SC', fontWeight: '600'}}>
// {t('banner.shipping.calculate_shipping')}
// </Text>
// )}
// </TouchableOpacity>
// </View>
// </View>
// </View>
// </ImageBackground>
// )}
// {/* Country Selection Modal */}
// <Modal
// visible={showCountryModal}
// animationType="slide"
// transparent={true}
// onRequestClose={() => setShowCountryModal(false)}
// >
// <View style={styles.modalContainer}>
// <View style={styles.modalContent}>
// <View style={styles.modalHeader}>
// <Text style={styles.modalTitle}>{t('banner.shipping.select_country_modal_title')}</Text>
// <TouchableOpacity onPress={() => setShowCountryModal(false)}>
// <Text style={styles.modalCloseButton}>{t('banner.shipping.close')}</Text>
// </TouchableOpacity>
// </View>
// <FlatList
// data={countries}
// renderItem={renderCountryItem}
// keyExtractor={(item) => item.country.toString()}
// style={styles.countryList}
// />
// </View>
// </View>
// </Modal>
// {renderResultModal()}
// </View>
// </SafeAreaView>
// );
// };
// const styles = StyleSheet.create({
// safeArea: {
// flex: 1,
// backgroundColor: '#005EE4',
// },
// safeAreaContent: {
// flex: 1,
// paddingTop: 0,
// },
// container: {
// width: '100%',
// flex: 1,
// },
// backgroundImage: {
// width: '100%',
// height: '100%',
// resizeMode: 'cover',
// },
// contentContainer: {
// flex: 1,
// padding: 15,
// },
// timeShippingSection: {
// flexDirection: 'column',
// },
// timeAndImageContainer: {
// flexDirection: 'row',
// gap: 8,
// alignItems: 'center',
// justifyContent: 'space-between',
// paddingLeft: 36,
// },
// timeDisplay: {
// width: widthUtils(42, 42).width,
// fontSize: fontSize(17),
// fontFamily: 'SF Pro',
// fontWeight: '600',
// color: 'white',
// textAlign: 'center',
// },
// timeImageContainer: {
// width: widthUtils(54, 154).width,
// height: widthUtils(54, 154).height,
// },
// shippingCostContainer: {
// flexDirection: 'row',
// alignItems: 'center',
// marginTop: 20,
// justifyContent: 'center',
// },
// svgContainer: {
// width: widthUtils(18, 18).width,
// height: widthUtils(18, 18).height,
// position: 'absolute',
// left: 0,
// },
// shippingCostLabelTextStyle: {
// fontSize: fontSize(20),
// lineHeight: 22,
// fontFamily: 'Microsoft YaHei UI',
// fontWeight: '700',
// color: 'white',
// textAlign: 'center',
// textTransform: 'capitalize',
// width: '100%',
// },
// shippingCalculatorContainer: {
// marginTop: widthUtils(100,100).height,
// paddingTop: 18,
// paddingRight: 20,
// paddingBottom: 28,
// paddingLeft: 20,
// backgroundColor: 'white',
// borderRadius: 5,
// justifyContent: 'center',
// },
// flexColumnCenteredWithSelect: {
// flexDirection: 'column',
// justifyContent: 'center',
// },
// shippingMethodContainer: {
// flexDirection: 'row',
// alignItems: 'center',
// justifyContent: 'center',
// height: widthUtils(80, 80).height,
// paddingRight: 10,
// paddingLeft: 10,
// backgroundColor: '#f2f6ff',
// borderRadius: 5,
// },
// maritimeInfoBox: {
// height: widthUtils(60, 60).height,
// paddingRight: 19,
// paddingLeft: 20,
// backgroundColor: '#f2f6ff',
// borderRadius: 5,
// justifyContent: 'center',
// alignItems: 'center',
// },
// airwayInfoContainer: {
// height: widthUtils(60, 60).height,
// paddingRight: 24,
// paddingLeft: 25,
// marginLeft: 10,
// backgroundColor: '#f2f6ff',
// borderRadius: 5,
// justifyContent: 'center',
// alignItems: 'center',
// },
// activeShippingMethod: {
// backgroundColor: '#005EE4',
// },
// svgContainer1: {
// width: widthUtils(32, 32).width,
// height: widthUtils(32, 32).height,
// },
// maritimeHeadingStyle: {
// marginTop: -5,
// fontSize: fontSize(14),
// fontFamily: 'Segoe UI',
// fontWeight: '700',
// color: 'white',
// textTransform: 'capitalize',
// },
// svgContainer2: {
// width: widthUtils(24, 24).width,
// height: widthUtils(24, 24).height,
// },
// flightModeLabel: {
// marginTop: -2,
// fontSize: fontSize(14),
// fontFamily: 'Segoe UI',
// fontWeight: '400',
// color: '#747474',
// textTransform: 'capitalize',
// },
// parcelVolumeFormContainer: {
// marginTop: 16,
// backgroundColor: 'white',
// borderWidth: 1,
// borderColor: '#dbdce0',
// },
// optionContainer: {
// flexDirection: 'row',
// alignItems: 'center',
// justifyContent: 'center',
// height: widthUtils(60, 60).height,
// paddingRight: 6,
// paddingLeft: 8,
// backgroundColor: 'white',
// borderWidth: 1,
// borderColor: '#dbdce0',
// borderTopLeftRadius: 5,
// borderTopRightRadius: 5,
// },
// pingfangTextSelect: {
// fontSize: fontSize(12),
// fontFamily: 'PingFang SC',
// fontWeight: '500',
// color: '#646472',
// },
// iconSelectDropdown: {
// width: widthUtils(24, 24).width,
// height: widthUtils(24, 24).height,
// marginLeft: 10,
// },
// parcelVolumeContainer: {
// width: '100%',
// paddingTop: 6,
// paddingRight: 8,
// paddingBottom: 10,
// paddingLeft: 8,
// marginTop: -1,
// backgroundColor: 'white',
// borderWidth: 1,
// borderColor: '#dbdce0',
// borderBottomLeftRadius: 5,
// borderBottomRightRadius: 5,
// },
// parcelVolumeLabel: {
// fontSize: fontSize(12),
// fontFamily: 'PingFang SC',
// fontWeight: '600',
// color: '#646472',
// },
// volumeInputContainer: {
// flexDirection: 'row',
// gap: 8,
// alignItems: 'center',
// justifyContent: 'space-between',
// width: '100%',
// },
// volumePromptTextStyle: {
// fontSize: fontSize(16),
// lineHeight: 22,
// fontFamily: 'PingFang SC',
// fontWeight: '400',
// color: '#807e7e',
// },
// unitText: {
// fontSize: fontSize(16),
// lineHeight: 22,
// fontFamily: 'PingFang SC',
// fontWeight: '600',
// color: '#1c284e',
// },
// primaryButton: {
// width:'100%',
// height: widthUtils(50, 50).height,
// marginTop: 34,
// backgroundColor: '#002fa7',
// borderRadius: 25,
// justifyContent: 'center',
// alignItems: 'center',
// },
// backButton: {
// padding: 10,
// borderRadius: 20,
// zIndex: 10,
// },
// loadingContainer: {
// flex: 1,
// justifyContent: 'center',
// alignItems: 'center',
// backgroundColor: '#f2f6ff',
// },
// modalContainer: {
// flex: 1,
// backgroundColor: 'rgba(0, 0, 0, 0.5)',
// justifyContent: 'flex-end',
// },
// modalContent: {
// backgroundColor: 'white',
// borderTopLeftRadius: 20,
// borderTopRightRadius: 20,
// paddingBottom: Platform.OS === 'ios' ? 34 : 20,
// maxHeight: '80%',
// },
// modalHeader: {
// flexDirection: 'row',
// justifyContent: 'space-between',
// alignItems: 'center',
// padding: 16,
// borderBottomWidth: 1,
// borderBottomColor: '#dbdce0',
// },
// modalTitle: {
// fontSize: fontSize(18),
// fontWeight: '600',
// color: '#1c284e',
// },
// modalCloseButton: {
// fontSize: fontSize(16),
// color: '#005EE4',
// },
// countryList: {
// paddingHorizontal: 16,
// },
// countryItem: {
// paddingVertical: 16,
// borderBottomWidth: 1,
// borderBottomColor: '#dbdce0',
// flexDirection: 'row',
// justifyContent: 'space-between',
// alignItems: 'center',
// },
// countryItemText: {
// fontSize: fontSize(16),
// color: '#1c284e',
// },
// checkIcon: {
// fontSize: fontSize(20),
// color: '#005EE4',
// fontWeight: 'bold',
// },
// volumeInput: {
// flex: 1,
// fontSize: fontSize(16),
// color: '#1c284e',
// padding: 0,
// },
// disabledButton: {
// opacity: 0.6,
// },
// resultModalContainer: {
// flex: 1,
// backgroundColor: 'rgba(0, 0, 0, 0.5)',
// justifyContent: 'center',
// alignItems: 'center',
// },
// resultModalContent: {
// backgroundColor: 'white',
// borderRadius: 10,
// padding: 20,
// width: '80%',
// alignItems: 'center',
// },
// resultTitle: {
// fontSize: fontSize(18),
// fontWeight: '600',
// color: '#1c284e',
// marginBottom: 15,
// },
// resultText: {
// fontSize: fontSize(16),
// color: '#1c284e',
// marginBottom: 20,
// },
// resultCloseButton: {
// backgroundColor: '#005EE4',
// paddingVertical: 10,
// paddingHorizontal: 30,
// borderRadius: 5,
// },
// resultCloseButtonText: {
// color: 'white',
// fontSize: fontSize(16),
// fontWeight: '600',
// },
// });
import { View, Text } from 'react-native';
export const ShippingDetailsSection = () => {
return (
<View>
<Text>ShippingDetailsSection</Text>
</View>
)
}