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.
1562 lines
52 KiB
1562 lines
52 KiB
import React, { useEffect, useState } from "react"; |
|
import { |
|
View, |
|
Text, |
|
StyleSheet, |
|
TouchableOpacity, |
|
ActivityIndicator, |
|
ScrollView, |
|
Image, |
|
Alert, |
|
Linking, |
|
SafeAreaView, |
|
StatusBar, |
|
Platform, |
|
Modal, |
|
} from "react-native"; |
|
import { useTranslation } from "react-i18next"; |
|
import BackIcon from "../../components/BackIcon"; |
|
import MassageIcon from "../../components/MassageIcon"; |
|
import fontSize from "../../utils/fontsizeUtils"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
import { useRoute, RouteProp } from "@react-navigation/native"; |
|
import { ordersApi, OrderDetailsType } from "../../services/api/orders"; |
|
import { payApi, PaymentMethod } from "../../services/api/payApi"; |
|
import useUserStore from "../../store/user"; |
|
import OrderIcon from "../../components/OrderIcon"; |
|
import InfoIcon from "../../components/InfoIcon"; |
|
import Progress from "./Progress"; |
|
import AddressIcon from "../../components/AddressIcon"; |
|
import EditIcon from "../../components/ColorfulEditIcon"; |
|
import BrightnessIcon from "../../components/BrightnessIcon"; |
|
import PhoneIcon from "../../components/PhoneIcon"; |
|
import ShoppingBagIcon from "../../components/ShoppingBagIcon"; |
|
import PowerIcon from "../../components/PowerIcon"; |
|
import CardIcon from "../../components/ShoppingCartIcon"; |
|
import WhatsAppIcon from "../../components/WatchAppIcon"; |
|
import { useOrderListStore } from "../../store/orderList"; |
|
import CircleOutlineIcon from "../../components/CircleOutlineIcon"; |
|
import CheckIcon from "../../components/CheckIcon"; |
|
import payMap from "../../utils/payMap"; |
|
import PhoneNumberInputModal from "../../screens/BalanceScreen/PhoneNumberInputModal"; |
|
|
|
// 定义选项类型 |
|
interface PaymentOption { |
|
id: string; |
|
label: string; |
|
key: string; |
|
} |
|
|
|
// 定义标签页类型 |
|
interface TabType { |
|
id: string; |
|
label: string; |
|
options: PaymentOption[]; |
|
} |
|
|
|
export const OrderDetails = () => { |
|
const navigation = useNavigation<NativeStackNavigationProp<any>>(); |
|
const { t } = useTranslation(); |
|
const route = useRoute< |
|
RouteProp< |
|
{ |
|
OrderDetails: { |
|
orderId: string; |
|
status:number |
|
}; |
|
}, |
|
"OrderDetails" |
|
> |
|
>(); |
|
const [orderDetails, setOrderDetails] = useState<OrderDetailsType>(); |
|
const [isLoading, setIsLoading] = useState(true); |
|
const { deleteOrder, changeOrder,updateOrderShippingInfo } = useOrderListStore(); |
|
const [showPaymentModal, setShowPaymentModal] = useState(false); |
|
const [selectedPayment, setSelectedPayment] = useState<string | null>(null); |
|
const [currentTab, setCurrentTab] = useState("online"); |
|
const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]); |
|
const [tabs, setTabs] = useState<TabType[]>([ |
|
{ |
|
id: "online", |
|
label: t("order.payment.online"), |
|
options: [], |
|
}, |
|
{ |
|
id: "offline", |
|
label: t("order.payment.offline"), |
|
options: [ |
|
{ id: "cash", label: t("order.payment.cash") || "Cash", key: "cash" }, |
|
{ id: "bank", label: t("order.payment.bank") || "Bank Transfer", key: "bank" } |
|
], |
|
}, |
|
]); |
|
const [selectedCurrency, setSelectedCurrency] = useState("USD"); |
|
const [convertedAmount, setConvertedAmount] = useState<{ |
|
converted_amount: number; |
|
item_key: string; |
|
original_amount: number; |
|
}[]>([]); |
|
const [isConverting, setIsConverting] = useState(false); |
|
const { user } = useUserStore(); |
|
const [isPaymentLoading, setIsPaymentLoading] = useState(false); |
|
const [isPaypalExpanded, setIsPaypalExpanded] = useState(false); |
|
const [paymentParams, setPaymentParams] = useState<{ |
|
originalAmount: number; |
|
amount: number; |
|
currency: string; |
|
payment_method: string; |
|
selectedPriceLabel: string; |
|
onCloses?: () => void; |
|
} | null>(null); |
|
const [showPhoneModal, setShowPhoneModal] = useState(false); |
|
|
|
const getOrderDetails = async () => { |
|
try { |
|
setIsLoading(true); |
|
const response = await ordersApi.getOrderDetails(route.params.orderId); |
|
setOrderDetails(response); |
|
} catch (error) { |
|
console.error("Error fetching order details:", error); |
|
} finally { |
|
setIsLoading(false); |
|
} |
|
}; |
|
|
|
useEffect(() => { |
|
getOrderDetails(); |
|
|
|
// 获取支付方式 |
|
payApi.getCountryPaymentMethods().then((res) => { |
|
if (res && res.current_country_methods) { |
|
setPaymentMethods(res.current_country_methods); |
|
|
|
// 更新在线支付选项 |
|
setTabs(prev => { |
|
const updatedTabs = [...prev]; |
|
const onlineTabIndex = updatedTabs.findIndex(tab => tab.id === "online"); |
|
|
|
if (onlineTabIndex !== -1) { |
|
// 将API返回的支付方式转换为选项格式 |
|
const options: PaymentOption[] = res.current_country_methods.map(method => ({ |
|
id: method.key, |
|
label: method.key.charAt(0).toUpperCase() + method.key.slice(1), // 首字母大写 |
|
key: method.key |
|
})); |
|
|
|
updatedTabs[onlineTabIndex].options = options; |
|
} |
|
|
|
return updatedTabs; |
|
}); |
|
} |
|
}).catch(error => { |
|
console.error("获取支付方式失败:", error); |
|
}); |
|
}, []); |
|
//拨打电话 |
|
const callPhone = async (phoneNumber: string) => { |
|
const url = `tel:${phoneNumber}`; |
|
|
|
try { |
|
await Linking.openURL(url); // 直接尝试打开拨号界面 |
|
} catch (error) { |
|
Alert.alert(t("error"), t("order.error.phone_open")); |
|
console.error("拨号失败:", error); |
|
} |
|
}; |
|
|
|
const onSelectPayment = (paymentId: string) => { |
|
if (paymentId !== selectedPayment) { |
|
setIsPaypalExpanded(false); |
|
} |
|
|
|
setSelectedPayment(paymentId); |
|
|
|
if (paymentId === "paypal" && paymentId !== selectedPayment) { |
|
setIsPaypalExpanded(true); |
|
setIsConverting(true); |
|
|
|
setSelectedCurrency("USD"); |
|
|
|
const data = { |
|
from_currency: orderDetails?.currency || "", |
|
to_currency: "USD", |
|
amounts: { |
|
total_amount: orderDetails?.total_amount || 0, |
|
domestic_shipping_fee: orderDetails?.domestic_shipping_fee || 0, |
|
shipping_fee: orderDetails?.shipping_fee || 0, |
|
}, |
|
}; |
|
|
|
payApi |
|
.convertCurrency(data) |
|
.then((res) => { |
|
setConvertedAmount(res.converted_amounts_list); |
|
setIsConverting(false); |
|
}) |
|
.catch((error) => { |
|
console.error("Currency conversion failed:", error); |
|
setIsConverting(false); |
|
}); |
|
} |
|
}; |
|
|
|
const onSelectCurrency = (currency: string) => { |
|
setSelectedCurrency(currency); |
|
setIsConverting(true); |
|
const data = { |
|
from_currency: orderDetails?.currency || "", |
|
to_currency: currency, |
|
amounts: { |
|
total_amount: orderDetails?.total_amount || 0, |
|
domestic_shipping_fee: orderDetails?.domestic_shipping_fee || 0, |
|
shipping_fee: orderDetails?.shipping_fee || 0, |
|
}, |
|
}; |
|
payApi |
|
.convertCurrency(data) |
|
.then((res) => { |
|
setConvertedAmount(res.converted_amounts_list); |
|
setIsConverting(false); |
|
}) |
|
.catch((error) => { |
|
console.error("Currency conversion failed:", error); |
|
setIsConverting(false); |
|
}); |
|
}; |
|
|
|
const handlePaymentConfirm = async () => { |
|
if (!selectedPayment || !orderDetails?.order_id) return; |
|
|
|
// 如果是mobile_money支付方式，显示电话号码输入模态框 |
|
if (selectedPayment === "mobile_money") { |
|
// 准备支付参数 |
|
const params = { |
|
originalAmount: orderDetails.total_amount, |
|
amount: orderDetails.total_amount, |
|
currency: user?.currency, |
|
payment_method: selectedPayment, |
|
selectedPriceLabel: orderDetails.total_amount + " " + user?.currency, |
|
onCloses: () => setShowPaymentModal(false), // 关闭支付模态框 |
|
}; |
|
|
|
setPaymentParams(params); |
|
setShowPhoneModal(true); |
|
return; |
|
} |
|
|
|
setIsPaymentLoading(true); |
|
|
|
const paymentData = { |
|
order_id: orderDetails.order_id, |
|
payment_method: selectedPayment, |
|
currency: selectedPayment === "paypal" ? selectedCurrency : user.currency, |
|
total_amount: selectedPayment === "paypal" |
|
? convertedAmount.reduce((acc, item) => acc + item.converted_amount, 0) |
|
: orderDetails?.total_amount || 0, |
|
actual_amount: selectedPayment === "paypal" |
|
? convertedAmount.reduce((acc, item) => acc + item.converted_amount, 0) |
|
: orderDetails?.actual_amount || 0, |
|
shipping_fee: selectedPayment === "paypal" |
|
? convertedAmount.find(item => item.item_key === "shipping_fee")?.converted_amount || 0 |
|
: orderDetails?.shipping_fee || 0, |
|
domestic_shipping_fee: selectedPayment === "paypal" |
|
? convertedAmount.find(item => item.item_key === "domestic_shipping_fee")?.converted_amount || 0 |
|
: orderDetails?.domestic_shipping_fee || 0 |
|
}; |
|
try { |
|
await ordersApi.updateOrderPaymentMethod(paymentData) |
|
|
|
const payData = { |
|
order_id: orderDetails.order_id, |
|
method: selectedPayment, |
|
currency: selectedPayment === "paypal" ? selectedCurrency : user.currency, |
|
amount: selectedPayment === "paypal" |
|
? convertedAmount.reduce((acc, item) => acc + item.converted_amount, 0) |
|
: orderDetails?.total_amount || 0 |
|
}; |
|
payApi |
|
.getPayInfo(payData) |
|
.then((res) => { |
|
if (res.success) { |
|
setIsPaymentLoading(false); |
|
setShowPaymentModal(false); |
|
navigation.navigate("Pay", { |
|
payUrl: res.payment_url, |
|
}); |
|
}else{ |
|
Alert.alert(t("error"), t("pay.payment_failed")); |
|
} |
|
}) |
|
.catch((err) => { |
|
Alert.alert(t("error"), t("order.error.payment_update")); |
|
setIsPaymentLoading(false); |
|
}) |
|
.finally(() => { |
|
setIsPaymentLoading(false); |
|
}); |
|
|
|
} catch (error) { |
|
Alert.alert(t("error"), t("order.error.payment_update")); |
|
setIsPaymentLoading(false); |
|
} |
|
}; |
|
|
|
// 添加手机号码提交函数 |
|
const handlePhoneSubmit = async (phoneNumber: string) => { |
|
if (!paymentParams) { |
|
return; |
|
} |
|
|
|
// 验证电话号码（添加更严格的验证） |
|
if (!phoneNumber || phoneNumber.length < 8) { |
|
Alert.alert( |
|
t("error"), |
|
t("order.error.invalid_phone") |
|
); |
|
return; |
|
} |
|
|
|
setIsPaymentLoading(true); |
|
|
|
try { |
|
// 准备请求数据 |
|
const paymentData = { |
|
order_id: orderDetails?.order_id || "", |
|
payment_method: paymentParams.payment_method, |
|
currency: paymentParams.currency, |
|
total_amount: paymentParams.amount, |
|
actual_amount: paymentParams.amount, |
|
shipping_fee: 0, |
|
domestic_shipping_fee: 0, |
|
phone: phoneNumber |
|
}; |
|
|
|
// 更新订单支付方式 |
|
await ordersApi.updateOrderPaymentMethod(paymentData); |
|
|
|
// 创建支付请求 |
|
const payData = { |
|
order_id: orderDetails?.order_id || "", |
|
method: paymentParams.payment_method, |
|
currency: paymentParams.currency, |
|
amount: paymentParams.amount, |
|
phone: phoneNumber |
|
}; |
|
|
|
const response = await payApi.getPayInfo(payData); |
|
if (response.success) { |
|
setShowPhoneModal(false); |
|
setShowPaymentModal(false); |
|
// 打开支付页面 |
|
navigation.navigate("Pay", { |
|
payUrl: response.payment_url, |
|
}); |
|
} else { |
|
Alert.alert(t("error"), t("order.error.payment_update")); |
|
} |
|
} catch (error) { |
|
console.error("Payment error:", error); |
|
Alert.alert(t("error"), t("order.error.payment_update")); |
|
} finally { |
|
setIsPaymentLoading(false); |
|
} |
|
}; |
|
|
|
// 添加确定按钮禁用逻辑函数 |
|
const isConfirmButtonDisabled = () => { |
|
// 如果没有选择支付方式，禁用按钮 |
|
if (!selectedPayment) { |
|
return true; |
|
} |
|
|
|
// 如果正在进行货币转换，禁用按钮 |
|
if (isConverting) { |
|
return true; |
|
} |
|
|
|
// 如果选择了Paypal支付方式，但还没有转换结果，禁用按钮 |
|
if ( |
|
selectedPayment === "paypal" && |
|
(convertedAmount.length === 0 || |
|
!convertedAmount.find((item) => item.item_key === "total_amount")) |
|
) { |
|
return true; |
|
} |
|
|
|
// 其他情况下，启用按钮 |
|
return false; |
|
}; |
|
|
|
return ( |
|
<SafeAreaView style={styles.safeArea}> |
|
<StatusBar barStyle="dark-content" backgroundColor="#fff" /> |
|
<View style={styles.safeAreaContent}> |
|
<View style={styles.header}> |
|
<TouchableOpacity onPress={() => navigation.goBack()}> |
|
<BackIcon /> |
|
</TouchableOpacity> |
|
<Text style={styles.title}>{t("order.details")}</Text> |
|
<MassageIcon size={22} /> |
|
</View> |
|
{isLoading ? ( |
|
<View style={styles.loadingContainer}> |
|
<ActivityIndicator size="large" color="#f77f3a" /> |
|
</View> |
|
) : orderDetails ? ( |
|
<View style={styles.container}> |
|
<ScrollView |
|
showsVerticalScrollIndicator={false} |
|
style={{ flex: 1 }} |
|
contentContainerStyle={{ paddingBottom: 70 }} |
|
> |
|
<View style={styles.orderStatus}> |
|
<View style={styles.orderStatusContent}> |
|
<View style={styles.orderStatusTitle}> |
|
<OrderIcon size={20} color="#3D3D3D" /> |
|
<Text style={styles.orderStatusTitleText}>{t("order.status")}</Text> |
|
</View> |
|
|
|
<View style={styles.orderStatusContentPreview}> |
|
<Progress |
|
statuses={route.params.status} |
|
labels={[ |
|
t("order.status.waiting_payment"), |
|
t("order.status.waiting_shipment"), |
|
t("order.status.in_transit"), |
|
t("order.status.waiting_receipt"), |
|
t("order.status.completed") |
|
]} |
|
/> |
|
</View> |
|
</View> |
|
</View> |
|
{/* 订单信息 */} |
|
<View style={styles.orderStatus}> |
|
<View style={styles.orderStatusContent}> |
|
<View style={styles.orderStatusTitle}> |
|
<InfoIcon size={20} color="#3D3D3D" /> |
|
<Text style={styles.orderStatusTitleText}>{t("order.information")}</Text> |
|
</View> |
|
<View style={styles.orderStatusContentPreview}> |
|
<View style={styles.orderId}> |
|
<Text style={styles.orderIdText}>{t("order.id")}</Text> |
|
<Text style={styles.orderIdText1}> |
|
{orderDetails.order_id} |
|
</Text> |
|
</View> |
|
<View style={styles.orderId}> |
|
<Text style={styles.orderIdText}>{t("order.create_time")}</Text> |
|
<Text style={styles.orderIdText1}> |
|
{orderDetails.create_time} |
|
</Text> |
|
</View> |
|
<View style={styles.orderId}> |
|
<Text style={styles.orderIdText}>{t("order.shipping_type")}</Text> |
|
<Text style={styles.orderIdText1}> |
|
{orderDetails.shipping_type === 0 ? t("order.shipping.sea") : t("order.shipping.air")} |
|
</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
{/* 配送信息 */} |
|
<View style={styles.orderStatus}> |
|
<View style={styles.orderStatusContent}> |
|
<View style={styles.orderStatusTitle}> |
|
<AddressIcon size={22} color={"#3D3D3D"} /> |
|
<Text style={styles.orderStatusTitleText}>{t("order.delivery_info")}</Text> |
|
</View> |
|
<View style={styles.orderStatusContentPreview}> |
|
<View style={styles.orderStatusContentPreviewInformation}> |
|
<View style={styles.warehouse}> |
|
<View style={styles.recipientTitle}> |
|
<Text |
|
style={ |
|
styles.orderStatusContentPreviewInformationText |
|
} |
|
> |
|
{t("order.warehouse")} |
|
</Text> |
|
</View> |
|
<View style={styles.recipientTitle}> |
|
<EditIcon size={22} /> |
|
</View> |
|
<View style={styles.recipientTitle}> |
|
<Text>{orderDetails.receiver_address}</Text> |
|
</View> |
|
<View style={styles.recipientTitle}> |
|
<View style={styles.warehousePhone}> |
|
<View style={styles.warehousePhoneTextContainer}> |
|
<BrightnessIcon size={16} color="#3D3D3D" /> |
|
</View> |
|
<View style={styles.warehousePhoneTextContainer}> |
|
<Text style={styles.warehousePhoneText}> |
|
{t("order.contact_after_payment")} |
|
</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.recipient}> |
|
<View style={styles.recipientTitle}> |
|
<Text |
|
style={ |
|
styles.orderStatusContentPreviewInformationText |
|
} |
|
> |
|
{t("order.recipient")} |
|
</Text> |
|
</View> |
|
<View style={styles.recipientTitle}> |
|
<EditIcon size={22} /> |
|
</View> |
|
{/* 姓名 */} |
|
<View style={styles.recipientTitle}> |
|
<Text style={styles.recipientName}> |
|
{orderDetails.receiver_name} |
|
</Text> |
|
</View> |
|
|
|
{/* 电话 */} |
|
<View style={styles.recipientTitle}> |
|
<View style={styles.recipientPhoneContainer}> |
|
<PhoneIcon size={16} color="#3D3D3D" /> |
|
<Text style={styles.recipientPhone}> |
|
{orderDetails.receiver_phone} |
|
</Text> |
|
</View> |
|
</View> |
|
{/* watchApp */} |
|
<View style={styles.recipientTitle}> |
|
<View style={styles.recipientPhoneContainer}> |
|
<WhatsAppIcon size={16} /> |
|
<Text style={styles.recipientPhone}>WhatsApp:</Text> |
|
<Text style={styles.recipientPhone}> |
|
{orderDetails.receiver_phone} |
|
</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
{/* 商品信息 */} |
|
<View style={styles.orderStatus}> |
|
<View style={styles.orderStatusContent}> |
|
<View style={styles.orderStatusTitle}> |
|
<ShoppingBagIcon size={16} color="#3D3D3D" /> |
|
<Text style={styles.orderStatusTitleText}> |
|
{t("order.product_info")} ({orderDetails.items.length}) |
|
</Text> |
|
</View> |
|
<View style={styles.orderStatusContentPreview}> |
|
{orderDetails.items.map((item, index) => ( |
|
<View style={styles.productItem} key={index}> |
|
<View style={styles.productItemImage}> |
|
<Image |
|
source={{ uri: item.sku_image }} |
|
style={{ width: "100%", height: "100%" }} |
|
/> |
|
</View> |
|
<View style={styles.productItemInfo}> |
|
<View style={styles.productItemInfoName}> |
|
<Text style={styles.productItemInfoNameText}> |
|
{item.product_name} |
|
</Text> |
|
</View> |
|
<View style={styles.productItemInfoSku}> |
|
{item.sku_attributes.map((sku, index) => ( |
|
<Text |
|
key={index} |
|
style={styles.productItemInfoSkuText} |
|
> |
|
{sku.attribute_name}:{sku.attribute_value} |
|
</Text> |
|
))} |
|
{/* <text>{item.product_name}</text> */} |
|
</View> |
|
<View style={styles.productItemInfoPrice}> |
|
<Text |
|
style={{ |
|
color: "#f77f3a", |
|
fontSize: fontSize(16), |
|
fontWeight: "600", |
|
}} |
|
> |
|
{item.total_price} {orderDetails.currency} |
|
</Text> |
|
</View> |
|
</View> |
|
<View style={styles.productItemNum}> |
|
<Text style={styles.productItemNumText}> |
|
x{item.quantity} |
|
</Text> |
|
</View> |
|
</View> |
|
))} |
|
</View> |
|
<View style={styles.dottedLine}></View> |
|
|
|
<View style={styles.orderStatusContentPreview}> |
|
<TouchableOpacity style={styles.addCard}> |
|
<View style={styles.addCardBox}> |
|
<CardIcon size={16} color="#0098ef" /> |
|
<Text style={styles.addCardText}>{t("order.add_to_cart")}</Text> |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
{/* 价格信息 */} |
|
<View style={styles.orderStatus}> |
|
<View style={styles.orderStatusContent}> |
|
<View style={styles.orderStatusTitle}> |
|
<PowerIcon size={20} color="#3D3D3D" /> |
|
<Text style={styles.orderStatusTitleText}>{t("order.price_details")}</Text> |
|
</View> |
|
<View style={styles.orderStatusContentPreview}> |
|
{/* <View style={styles.orderId}> |
|
<Text style={styles.orderIdText}>{t("order.subtotal")}</Text> |
|
<Text style={styles.orderIdText1}> |
|
</Text> |
|
</View> */} |
|
<View style={styles.orderId}> |
|
<Text style={styles.orderIdText}> |
|
{t("order.platform_shipping")} |
|
</Text> |
|
<Text style={styles.orderIdText1}> |
|
{orderDetails.domestic_shipping_fee} |
|
</Text> |
|
</View> |
|
<View style={styles.orderId}> |
|
<Text style={styles.orderIdText}> |
|
{t("order.international_shipping")} |
|
</Text> |
|
<Text style={styles.orderIdText1}> |
|
{orderDetails.shipping_fee} |
|
</Text> |
|
</View> |
|
<View style={styles.dottedLine}></View> |
|
<View style={styles.orderId}> |
|
<Text style={styles.TotalText}>{t("order.total")}</Text> |
|
<Text style={styles.TotalPrice}> |
|
{orderDetails.total_amount} |
|
</Text> |
|
</View> |
|
<View> |
|
<Text style={styles.orderRemakeText}> |
|
+ ${orderDetails.shipping_fee} {t("order.estimated_shipping")} |
|
(COD) |
|
</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</ScrollView> |
|
{/* 代付款 */} |
|
{orderDetails.order_status === 0 && ( |
|
<View style={styles.bottomButtons}> |
|
<TouchableOpacity |
|
style={styles.bottomButton1} |
|
onPress={() => { |
|
deleteOrder(route.params.orderId); |
|
}} |
|
> |
|
<Text style={styles.bottomButtonText1}>{t("order.cancel")}</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={styles.bottomButton} |
|
onPress={() => { |
|
setShowPaymentModal(true); |
|
}} |
|
> |
|
<Text style={styles.bottomButtonText}>{t("order.pay")}</Text> |
|
</TouchableOpacity> |
|
</View> |
|
)} |
|
{/* 待发货 */} |
|
{orderDetails.order_status === 1 && ( |
|
<View style={styles.bottomButtons}> |
|
<TouchableOpacity |
|
style={styles.bottomButton1} |
|
onPress={() => { |
|
callPhone("15903995548"); |
|
}} |
|
> |
|
<Text style={styles.bottomButtonText1}>{t("order.contact_shipping")}</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={styles.bottomButton} |
|
onPress={() => { |
|
changeOrder(route.params.orderId, 2); |
|
navigation.goBack(); |
|
}} |
|
> |
|
<Text style={styles.bottomButtonText}>{t("order.cancel")}</Text> |
|
</TouchableOpacity> |
|
</View> |
|
)} |
|
{/* 代收货 */} |
|
{orderDetails.order_status === 2 && ( |
|
<View style={styles.bottomButtons}> |
|
<TouchableOpacity style={styles.bottomButton1} onPress={() => {}}> |
|
<Text style={styles.bottomButtonText1}>{t("order.check_logistics")}</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={styles.bottomButton} |
|
onPress={() => { |
|
updateOrderShippingInfo(route.params.orderId,{ |
|
shipping_status: 0, |
|
shipping_info: { |
|
shipping_company: "string", |
|
shipping_no: "string", |
|
shipping_info: {} |
|
} |
|
}); |
|
navigation.goBack(); |
|
}} |
|
> |
|
<Text style={styles.bottomButtonText}>{t("order.confirm_receipt")}</Text> |
|
</TouchableOpacity> |
|
</View> |
|
)} |
|
{/* 已完成 */} |
|
{orderDetails.order_status === 3 && ( |
|
<View style={styles.bottomButtons}> |
|
<TouchableOpacity |
|
style={styles.bottomButton1} |
|
onPress={() => { |
|
deleteOrder(route.params.orderId); |
|
navigation.goBack(); |
|
}} |
|
> |
|
<Text style={styles.bottomButtonText1}>{t("order.cancel")}</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity style={styles.bottomButton}> |
|
<Text style={styles.bottomButtonText}>{t("order.pay_now")}</Text> |
|
</TouchableOpacity> |
|
</View> |
|
)} |
|
{/* 已取消 */} |
|
{orderDetails.order_status === 4 && ( |
|
<View style={styles.bottomButtons}> |
|
<TouchableOpacity style={styles.bottomButton1} onPress={() => {}}> |
|
<Text style={styles.bottomButtonText1}>{t("order.add_to_cart")}</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity style={styles.bottomButton}> |
|
<Text style={styles.bottomButtonText}>{t("order.reorder")}</Text> |
|
</TouchableOpacity> |
|
</View> |
|
)} |
|
</View> |
|
) : ( |
|
<Text>{t("order.unable_to_load")}</Text> |
|
)} |
|
</View> |
|
|
|
<Modal |
|
visible={showPaymentModal} |
|
transparent={true} |
|
animationType="slide" |
|
|
|
onRequestClose={() => setShowPaymentModal(false)} |
|
> |
|
<View style={styles.modalOverlay}> |
|
<View style={styles.modalContent}> |
|
<View style={styles.modalHeader}> |
|
<Text style={styles.modalTitle}>{t("order.select_payment")}</Text> |
|
<TouchableOpacity onPress={() => setShowPaymentModal(false)} style={styles.closeButtonContainer}> |
|
<Text style={styles.closeButtonText}>×</Text> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
<View style={styles.tabContainer}> |
|
{tabs.map((tab) => ( |
|
<TouchableOpacity |
|
key={tab.id} |
|
style={[styles.tab, currentTab === tab.id && styles.tabActive]} |
|
onPress={() => setCurrentTab(tab.id)} |
|
> |
|
<Text style={[styles.tabText, currentTab === tab.id && styles.tabTextActive]}> |
|
{tab.label} |
|
</Text> |
|
</TouchableOpacity> |
|
))} |
|
</View> |
|
|
|
<ScrollView showsVerticalScrollIndicator={false} style={styles.paymentOptions}> |
|
{currentTab === "online" ? ( |
|
<> |
|
{tabs |
|
.find((tab) => tab.id === "online") |
|
?.options.map((option) => ( |
|
<View key={option.id}> |
|
<View style={styles.cardContainer}> |
|
<View style={styles.iconRow}> |
|
<View style={styles.imageContainer}> |
|
{option.key === "balance" ? ( |
|
<View style={styles.leftInfo}> |
|
<View style={styles.blueBox}> |
|
<Image |
|
source={payMap(option.key) as any} |
|
style={styles.operatorImage} |
|
/> |
|
</View> |
|
<Text style={styles.balanceText}> |
|
{t("order.balance_remaining") || "Balance remaining"} |
|
{"\n"} |
|
{user.balance} |
|
{user.currency} |
|
</Text> |
|
</View> |
|
) : ( |
|
<View> |
|
<Image |
|
source={payMap(option.key) as any} |
|
style={styles.operatorImage} |
|
/> |
|
{option.key === "mobile_money" && ( |
|
<View style={styles.mobileMoneyTextContainer}> |
|
{paymentMethods.find(method => method.key === option.key)?.value && |
|
Array.isArray(paymentMethods.find(method => method.key === option.key)?.value) ? ( |
|
(paymentMethods.find(method => method.key === option.key)?.value as string[]).map((item, index) => ( |
|
<View key={index} style={styles.mobileMoneyImgContainer}> |
|
<Image |
|
source={payMap(item) as any} |
|
style={styles.mobileMoneyImg} |
|
/> |
|
</View> |
|
)) |
|
) : ( |
|
<Text style={styles.mobileMoneyText}> |
|
{paymentMethods.find(method => method.key === option.key)?.value as string} |
|
</Text> |
|
) |
|
} |
|
</View> |
|
)} |
|
</View> |
|
)} |
|
</View> |
|
</View> |
|
<TouchableOpacity onPress={() => onSelectPayment(option.id)}> |
|
<View style={styles.checkboxContainer}> |
|
<CircleOutlineIcon |
|
size={fontSize(24)} |
|
strokeColor={selectedPayment === option.id ? "#007efa" : "#C6C6C6"} |
|
fillColor={selectedPayment === option.id ? "#007efa" : "transparent"} |
|
/> |
|
{selectedPayment === option.id && ( |
|
<View style={styles.checkmarkContainer}> |
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
</View> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
{/* PayPal Currency Selection */} |
|
{selectedPayment === "paypal" && option.id === "paypal" && isPaypalExpanded && ( |
|
<View style={styles.paypalExpandedContainer}> |
|
<View style={styles.paypalCurrencyContainer}> |
|
<Text style={styles.currencyTitle}> |
|
{t("order.select_currency") || "Select Currency"} |
|
</Text> |
|
<View style={styles.currencyButtonsContainer}> |
|
<TouchableOpacity |
|
style={[ |
|
styles.currencyButton, |
|
selectedCurrency === "USD" && styles.currencyButtonActive, |
|
]} |
|
onPress={() => onSelectCurrency("USD")} |
|
> |
|
<Text |
|
style={[ |
|
styles.currencyButtonText, |
|
selectedCurrency === "USD" && styles.currencyButtonTextActive, |
|
]} |
|
> |
|
USD |
|
</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={[ |
|
styles.currencyButton, |
|
selectedCurrency === "EUR" && styles.currencyButtonActive, |
|
]} |
|
onPress={() => onSelectCurrency("EUR")} |
|
> |
|
<Text |
|
style={[ |
|
styles.currencyButtonText, |
|
selectedCurrency === "EUR" && styles.currencyButtonTextActive, |
|
]} |
|
> |
|
EUR |
|
</Text> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
{/* 显示转换后的金额 */} |
|
{isConverting ? ( |
|
<View style={styles.convertingContainer}> |
|
<ActivityIndicator size="small" color="#007efa" /> |
|
<Text style={styles.convertingText}> |
|
{t("order.converting") || "Converting..."} |
|
</Text> |
|
</View> |
|
) : convertedAmount.length > 0 ? ( |
|
<View style={styles.convertedAmountContainer}> |
|
<Text style={styles.convertedAmountLabel}> |
|
{t("order.equivalent_amount") || "Equivalent Amount:"} |
|
</Text> |
|
<Text style={styles.convertedAmountValue}> |
|
{convertedAmount |
|
.find((item) => item.item_key === "total_amount") |
|
?.converted_amount.toFixed(2)}{" "} |
|
{selectedCurrency} |
|
</Text> |
|
</View> |
|
) : null} |
|
</View> |
|
</View> |
|
)} |
|
</View> |
|
))} |
|
</> |
|
) : ( |
|
<View style={styles.outerContainer}> |
|
{tabs |
|
.find((tab) => tab.id === "offline") |
|
?.options.map((option, index) => ( |
|
<View key={option.id} style={styles.flexContainer}> |
|
<View style={styles.imageContainer}> |
|
{option.id === "cash" ? ( |
|
<Image |
|
source={require("../../../assets/img/image_c6aa9539.png")} |
|
style={styles.imageStyle} |
|
resizeMode="cover" |
|
/> |
|
) : ( |
|
<Image |
|
source={require("../../../assets/img/Global 1.png")} |
|
style={styles.imageStyle} |
|
resizeMode="cover" |
|
/> |
|
)} |
|
</View> |
|
<View style={styles.verticalAlignEndContent}> |
|
<View style={styles.svgContainer}> |
|
<TouchableOpacity |
|
onPress={() => onSelectPayment(option.id)} |
|
> |
|
<View style={styles.checkboxContainer}> |
|
<CircleOutlineIcon |
|
size={fontSize(24)} |
|
strokeColor={ |
|
selectedPayment === option.id ? "#007efa" : undefined |
|
} |
|
fillColor={ |
|
selectedPayment === option.id ? "#007efa" : undefined |
|
} |
|
/> |
|
{selectedPayment === option.id && ( |
|
<View style={styles.checkmarkContainer}> |
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
</View> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
))} |
|
</View> |
|
)} |
|
</ScrollView> |
|
|
|
<View style={styles.actionButtonsContainer}> |
|
<View style={styles.actionButtons}> |
|
<TouchableOpacity |
|
style={styles.cancelButton} |
|
onPress={() => setShowPaymentModal(false)} |
|
> |
|
<Text style={styles.buttonTextDark}>{t("cancel")}</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={[ |
|
styles.confirmButton, |
|
(isConfirmButtonDisabled() || isPaymentLoading) && styles.confirmButtonDisabled, |
|
]} |
|
onPress={handlePaymentConfirm} |
|
disabled={isConfirmButtonDisabled() || isPaymentLoading} |
|
> |
|
{isPaymentLoading ? ( |
|
<ActivityIndicator size="small" color="#fff" /> |
|
) : ( |
|
<Text style={styles.buttonTextWhite}> |
|
{isConverting |
|
? t("order.converting") || "Converting..." |
|
: t("order.confirm_payment")} |
|
</Text> |
|
)} |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</Modal> |
|
|
|
{/* PhoneNumberInputModal组件 */} |
|
<PhoneNumberInputModal |
|
isVisible={showPhoneModal} |
|
onClose={() => setShowPhoneModal(false)} |
|
paymentParams={paymentParams} |
|
onSubmit={handlePhoneSubmit} |
|
onCloses={() => setShowPaymentModal(false)} |
|
/> |
|
</SafeAreaView> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
safeArea: { |
|
flex: 1, |
|
backgroundColor: '#fff', |
|
}, |
|
safeAreaContent: { |
|
flex: 1, |
|
paddingTop: 0, |
|
}, |
|
container: { |
|
flex: 1, |
|
backgroundColor: "#f8f9fa", |
|
}, |
|
header: { |
|
flexDirection: "row", |
|
justifyContent: "space-between", |
|
alignItems: "center", |
|
padding: 16, |
|
backgroundColor: "#fff", |
|
shadowColor: "#000", |
|
shadowOffset: { |
|
width: 0, |
|
height: 2, |
|
}, |
|
shadowOpacity: 0.1, |
|
shadowRadius: 3, |
|
elevation: 3, |
|
}, |
|
title: { |
|
fontSize: fontSize(16), |
|
fontWeight: "600", |
|
}, |
|
orderStatus: { |
|
paddingInline: 16, |
|
marginTop: 10, |
|
}, |
|
orderStatusContent: { |
|
backgroundColor: "#fff", |
|
borderRadius: 16, |
|
}, |
|
orderStatusTitle: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
borderBottomWidth: 1, |
|
borderColor: "#f5f5f5", |
|
padding: 10, |
|
}, |
|
orderStatusTitleText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "600", |
|
marginLeft: 10, |
|
}, |
|
orderStatusContentPreview: { |
|
padding: 10, |
|
justifyContent: "center", |
|
}, |
|
productItem: { |
|
flexDirection: "row", |
|
width: "100%", |
|
borderBottomWidth: 1, |
|
borderColor: "#f5f5f5", |
|
padding: 10, |
|
}, |
|
productItemImage: { |
|
width: "15%", |
|
height: 50, |
|
borderRadius: 10, |
|
}, |
|
productItemInfo: { |
|
width: "75%", |
|
justifyContent: "space-between", |
|
paddingLeft: 10, |
|
}, |
|
productItemNum: { |
|
width: "10%", |
|
alignItems: "center", |
|
justifyContent: "flex-end", |
|
}, |
|
productItemNumText: { |
|
fontSize: fontSize(16), |
|
color: "#999", |
|
}, |
|
productItemInfoName: { |
|
width: "100%", |
|
paddingVertical: 5, |
|
}, |
|
productItemInfoNameText: { |
|
fontSize: fontSize(13), |
|
fontWeight: "600", |
|
}, |
|
productItemInfoSkuText: { |
|
fontSize: fontSize(13), |
|
color: "#999", |
|
}, |
|
productItemInfoSku: { |
|
width: "100%", |
|
paddingVertical: 5, |
|
}, |
|
productItemInfoPrice: { |
|
width: "100%", |
|
paddingVertical: 5, |
|
}, |
|
orderStatusContentPreviewInformation: { |
|
flexDirection: "row", |
|
justifyContent: "space-between", |
|
width: "100%", |
|
}, |
|
|
|
loadingContainer: { |
|
flex: 1, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
orderId: { |
|
flexDirection: "row", |
|
justifyContent: "space-between", |
|
paddingVertical: 10, |
|
width: "100%", |
|
}, |
|
orderIdText: { |
|
color: "#999", |
|
width: "50%", |
|
fontSize: fontSize(14), |
|
}, |
|
orderIdText1: { |
|
width: "50%", |
|
textAlign: "right", |
|
fontSize: fontSize(14), |
|
}, |
|
TotalText: { |
|
color: "#f77f3a", |
|
fontSize: fontSize(18), |
|
fontWeight: "600", |
|
width: "50%", |
|
}, |
|
TotalPrice: { |
|
color: "#f77f3a", |
|
fontSize: fontSize(18), |
|
fontWeight: "600", |
|
width: "50%", |
|
textAlign: "right", |
|
}, |
|
warehouse: { |
|
width: "50%", |
|
}, |
|
recipientTitle: { |
|
paddingVertical: 5, |
|
}, |
|
recipientPhoneContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
recipient: { |
|
width: "50%", |
|
}, |
|
orderStatusContentPreviewInformationText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "600", |
|
}, |
|
warehousePhone: { |
|
padding: 5, |
|
backgroundColor: "#f9f9f9", |
|
borderRadius: 10, |
|
width: "90%", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
warehousePhoneText: { |
|
fontSize: fontSize(14), |
|
fontWeight: "400", |
|
color: "#3D3D3D", |
|
}, |
|
warehousePhoneTextContainer: { |
|
paddingRight: 5, |
|
}, |
|
recipientName: { |
|
fontSize: fontSize(16), |
|
fontWeight: "600", |
|
}, |
|
recipientPhone: { |
|
fontSize: fontSize(14), |
|
fontWeight: "400", |
|
color: "#3D3D3D", |
|
}, |
|
dottedLine: { |
|
width: "100%", |
|
borderBottomWidth: 2, |
|
borderColor: "#f5f5f5", |
|
borderStyle: "dashed", |
|
}, |
|
orderRemakeText: { |
|
fontSize: fontSize(14), |
|
fontWeight: "400", |
|
color: "#999", |
|
}, |
|
addCard: { |
|
width: "100%", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
addCardBox: { |
|
padding: 10, |
|
borderWidth: 1, |
|
borderColor: "#0098ef", |
|
borderRadius: 10, |
|
backgroundColor: "#e2f2fd", |
|
opacity: 0.5, |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
addCardText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "600", |
|
color: "#0098ef", |
|
marginLeft: 5, |
|
}, |
|
bottomButtons: { |
|
position: "absolute", |
|
bottom: 0, |
|
width: "100%", |
|
flexDirection: "row", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
padding: 10, |
|
backgroundColor: "#fff", |
|
shadowColor: "#000", |
|
shadowOffset: { |
|
width: 0, |
|
height: -4, |
|
}, |
|
shadowOpacity: 0.1, |
|
shadowRadius: 3, |
|
elevation: 3, |
|
}, |
|
bottomButton1: { |
|
padding: 10, |
|
marginHorizontal: 10, |
|
alignItems: "center", |
|
backgroundColor: "#f0f0f0", |
|
borderRadius: 5, |
|
flex: 1, |
|
}, |
|
bottomButton: { |
|
padding: 10, |
|
marginHorizontal: 10, |
|
alignItems: "center", |
|
backgroundColor: "#fe7f42", |
|
borderRadius: 5, |
|
flex: 1, |
|
}, |
|
bottomButtonText: { |
|
fontSize: fontSize(18), |
|
fontWeight: "600", |
|
color: "#fff", |
|
}, |
|
bottomButtonText1: { |
|
fontSize: fontSize(18), |
|
fontWeight: "600", |
|
color: "#999", |
|
}, |
|
modalOverlay: { |
|
flex: 1, |
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
|
justifyContent: 'flex-end', |
|
}, |
|
modalContent: { |
|
backgroundColor: '#fff', |
|
borderTopLeftRadius: 20, |
|
borderTopRightRadius: 20, |
|
padding: 20, |
|
maxHeight: '80%', |
|
}, |
|
modalHeader: { |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
alignItems: 'center', |
|
marginBottom: 20, |
|
}, |
|
modalTitle: { |
|
fontSize: fontSize(18), |
|
fontWeight: '600', |
|
}, |
|
closeButtonContainer: { |
|
padding: 5, |
|
}, |
|
closeButtonText: { |
|
fontSize: fontSize(24), |
|
color: '#999', |
|
}, |
|
tabContainer: { |
|
flexDirection: 'row', |
|
marginBottom: 15, |
|
borderBottomWidth: 1, |
|
borderBottomColor: '#f5f5f5', |
|
}, |
|
tab: { |
|
paddingVertical: 10, |
|
paddingHorizontal: 15, |
|
marginRight: 10, |
|
}, |
|
tabActive: { |
|
borderBottomWidth: 2, |
|
borderBottomColor: '#FF5100', |
|
}, |
|
tabText: { |
|
fontSize: fontSize(16), |
|
color: '#666', |
|
}, |
|
tabTextActive: { |
|
color: '#FF5100', |
|
fontWeight: '500', |
|
}, |
|
paymentOptions: { |
|
maxHeight: 300, |
|
}, |
|
cardContainer: { |
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
justifyContent: 'space-between', |
|
padding: 15, |
|
backgroundColor: '#F8F8F8', |
|
borderRadius: 8, |
|
marginBottom: 10, |
|
}, |
|
iconRow: { |
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
flex: 1, |
|
}, |
|
imageContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
flex: 1, |
|
}, |
|
paymentIconContainer: { |
|
marginRight: 10, |
|
}, |
|
paymentIcon: { |
|
fontSize: fontSize(24), |
|
marginRight: 8, |
|
}, |
|
checkboxContainer: { |
|
position: "relative", |
|
width: fontSize(24), |
|
height: fontSize(24), |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
checkmarkContainer: { |
|
position: "absolute", |
|
top: 0, |
|
left: 0, |
|
right: 0, |
|
bottom: 0, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
currencyTitle: { |
|
fontSize: fontSize(14), |
|
color: '#666', |
|
marginBottom: 10, |
|
}, |
|
paypalExpandedContainer: { |
|
backgroundColor: '#f8f8f8', |
|
borderRadius: 8, |
|
marginTop: -5, |
|
marginBottom: 10, |
|
paddingHorizontal: 15, |
|
paddingBottom: 15, |
|
}, |
|
paypalCurrencyContainer: { |
|
padding: 10, |
|
}, |
|
currencyButtonsContainer: { |
|
flexDirection: 'row', |
|
marginBottom: 10, |
|
}, |
|
currencyButton: { |
|
paddingVertical: 8, |
|
paddingHorizontal: 15, |
|
borderRadius: 20, |
|
borderWidth: 1, |
|
borderColor: '#ddd', |
|
marginRight: 10, |
|
}, |
|
currencyButtonActive: { |
|
backgroundColor: '#FFF0E8', |
|
borderColor: '#FF5100', |
|
}, |
|
currencyButtonText: { |
|
fontSize: fontSize(14), |
|
color: '#333', |
|
}, |
|
currencyButtonTextActive: { |
|
color: '#FF5100', |
|
fontWeight: '600', |
|
}, |
|
convertingContainer: { |
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
justifyContent: 'flex-end', |
|
marginTop: 10, |
|
}, |
|
convertingText: { |
|
fontSize: fontSize(14), |
|
color: '#999', |
|
marginLeft: 10, |
|
}, |
|
convertedAmountContainer: { |
|
marginTop: 10, |
|
}, |
|
convertedAmountLabel: { |
|
fontSize: fontSize(14), |
|
color: '#666', |
|
marginBottom: 5, |
|
}, |
|
convertedAmountValue: { |
|
fontSize: fontSize(16), |
|
fontWeight: '600', |
|
color: '#FF5100', |
|
}, |
|
actionButtonsContainer: { |
|
marginTop: 20, |
|
paddingTop: 20, |
|
borderTopWidth: 1, |
|
borderTopColor: '#f5f5f5', |
|
}, |
|
actionButtons: { |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
}, |
|
cancelButton: { |
|
flex: 1, |
|
padding: 15, |
|
marginRight: 10, |
|
borderRadius: 25, |
|
borderWidth: 1, |
|
borderColor: '#999', |
|
alignItems: 'center', |
|
}, |
|
confirmButton: { |
|
flex: 1, |
|
padding: 15, |
|
marginLeft: 10, |
|
borderRadius: 25, |
|
backgroundColor: '#FF5100', |
|
alignItems: 'center', |
|
}, |
|
confirmButtonDisabled: { |
|
backgroundColor: '#ccc', |
|
}, |
|
buttonTextDark: { |
|
fontSize: fontSize(16), |
|
color: '#666', |
|
}, |
|
buttonTextWhite: { |
|
fontSize: fontSize(16), |
|
color: '#fff', |
|
fontWeight: '600', |
|
}, |
|
operatorImage: { |
|
width: 80, |
|
height: 30, |
|
resizeMode: "contain", |
|
marginRight: 10, |
|
}, |
|
mobileMoneyTextContainer: { |
|
width: "100%", |
|
marginTop: 3, |
|
alignItems: "flex-start", |
|
flexDirection: "row", |
|
}, |
|
mobileMoneyImgContainer: { |
|
width: 60, |
|
height: 22, |
|
borderWidth: 0, |
|
marginRight: 5, |
|
}, |
|
mobileMoneyImg: { |
|
width: 60, |
|
height: 22, |
|
borderWidth: 0, |
|
}, |
|
mobileMoneyText: { |
|
fontSize: fontSize(12), |
|
color: "#999", |
|
}, |
|
outerContainer: { |
|
width: "100%", |
|
}, |
|
flexContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
height: 50, |
|
paddingRight: 16, |
|
paddingLeft: 16, |
|
backgroundColor: "white", |
|
borderRadius: 5, |
|
marginTop: 10, |
|
}, |
|
imageStyle: { |
|
width: 60, |
|
height: 22, |
|
marginRight: 10, |
|
}, |
|
verticalAlignEndContent: { |
|
flexDirection: "column", |
|
alignItems: "flex-end", |
|
justifyContent: "center", |
|
height: "100%", |
|
}, |
|
svgContainer: { |
|
width: 24, |
|
height: 24, |
|
}, |
|
leftInfo: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
flex: 1, |
|
}, |
|
blueBox: { |
|
flexDirection: "row", |
|
backgroundColor: "#3955f6", |
|
paddingHorizontal: 7, |
|
paddingLeft: 6, |
|
alignItems: "center", |
|
borderRadius: 4, |
|
}, |
|
balanceText: { |
|
marginLeft: 17, |
|
fontSize: fontSize(11), |
|
lineHeight: 14, |
|
fontWeight: "500", |
|
color: "#333333", |
|
}, |
|
});
|
|
|