Browse Source

feat: 为支付信息详情行添加图标

main
Your Name (aider) 4 weeks ago
parent
commit
2a24ddc3ad
  1. 18
      app/screens/previewOrder/perviewOrder.tsx

18
app/screens/previewOrder/perviewOrder.tsx

@ -4,6 +4,12 @@ import BackIcon from "../../components/BackIcon";
import { useNavigation } from "@react-navigation/native";
import { useState, useEffect } from "react";
// 假设的图标组件 - 请替换为您的实际图标
const AddressIcon = ({ size, color }) => <Text style={{fontSize: size, color: color}}>📍</Text>; // 示例图标
const AmountIcon = ({ size, color }) => <Text style={{fontSize: size, color: color}}>💰</Text>; // 示例图标
const ShippingIcon = ({ size, color }) => <Text style={{fontSize: size, color: color}}>🚚</Text>; // 示例图标
const WhatsAppIcon = ({ size, color }) => <Text style={{fontSize: size, color: color}}>💬</Text>; // 示例图标
export const PreviewOrder = () => {
const {orderData, setOrderData} = useCreateOrderStore();
const navigation = useNavigation();
@ -65,19 +71,23 @@ export const PreviewOrder = () => {
<View style={styles.card}>
<Text style={styles.cardTitle}></Text>
<View style={styles.detailRow}>
<AddressIcon size={18} color="#555555" />
<Text style={styles.detailLabel}>:</Text>
<Text style={styles.detailValue} numberOfLines={2} ellipsizeMode="tail">{orderData?.address || "请选择地址"}</Text>
</View>
<View style={styles.detailRow}>
<AmountIcon size={18} color="#555555" />
<Text style={styles.detailLabel}>:</Text>
<Text style={styles.detailValue}>{orderData?.amount ? `${orderData.currency || ''} ${orderData.amount}` : "N/A"}</Text>
</View>
<View style={styles.detailRow}>
<ShippingIcon size={18} color="#555555" />
<Text style={styles.detailLabel}>:</Text>
<Text style={styles.detailValue}>{orderData?.shipping_fee ? `${orderData.currency || ''} ${orderData.shipping_fee}` : "N/A"}</Text>
</View>
{orderData?.whatsapp_phone && (
<View style={styles.detailRow}>
<WhatsAppIcon size={18} color="#555555" />
<Text style={styles.detailLabel}>WhatsApp:</Text>
<Text style={styles.detailValue}>{orderData.whatsapp_phone}</Text>
</View>
@ -232,9 +242,9 @@ const styles = StyleSheet.create({
},
detailRow: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-start", // Align items to the start for multi-line values
paddingVertical: 8, // Vertical padding for each row
// justifyContent: "space-between", // We'll handle spacing differently with icons
alignItems: "center", // Align items vertically centered
paddingVertical: 10, // Adjusted vertical padding
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0", // Lighter separator line
},
@ -243,7 +253,9 @@ const styles = StyleSheet.create({
color: "#555555", // Slightly lighter label color
fontFamily: "PingFang SC",
fontWeight: '500',
marginLeft: 8, // Add margin to the left of the label, after the icon
marginRight: 10, // Space between label and value
flex: 1, // Allow label to take available space before value
},
detailValue: {
fontSize: 15,

Loading…
Cancel
Save