feat: 添加订单详情卡片并更新支付按钮文本

app/screens/previewOrder/perviewOrder.tsx

@@ -45,6 +45,29 @@ export const PreviewOrder = () => {
         <Text style={styles.titleHeading}>立即支付</Text>
       </View>
 
+      {/* Order Details Card */}
+      <View style={styles.card}>
+        <Text style={styles.cardTitle}>订单详情</Text>
+        <View style={styles.detailRow}>
+          <Text style={styles.detailLabel}>收货地址:</Text>
+          <Text style={styles.detailValue} numberOfLines={2} ellipsizeMode="tail">{orderData?.address || "请选择地址"}</Text>
+        </View>
+        <View style={styles.detailRow}>
+          <Text style={styles.detailLabel}>订单金额:</Text>
+          <Text style={styles.detailValue}>{orderData?.amount ? `${orderData.currency || ''} ${orderData.amount}` : "N/A"}</Text>
+        </View>
+        <View style={styles.detailRow}>
+          <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}>
+            <Text style={styles.detailLabel}>WhatsApp:</Text>
+            <Text style={styles.detailValue}>{orderData.whatsapp_phone}</Text>
+          </View>
+        )}
+      </View>
+
       {/* Payment Details */}
       <View style={styles.section}>
 
@@ -71,7 +94,7 @@ export const PreviewOrder = () => {
               onPress={handleSubmit}
               disabled={showPhoneInput && !phoneNumber}
             >
-              <Text style={styles.buttonText}>提交</Text>
+              <Text style={styles.buttonText}>确认支付</Text>
             </TouchableOpacity>
           </View>
     </View>
@@ -182,4 +205,49 @@ const styles = StyleSheet.create({
     fontSize: 16,
     backgroundColor: "#f9f9f9",
   },
+  // Card styles for order details
+  card: {
+    backgroundColor: "#ffffff", // White background for the card
+    borderRadius: 12,          // Rounded corners
+    marginHorizontal: 15,      // Horizontal margin
+    marginTop: 20,             // Margin from the top element
+    padding: 18,               // Inner padding
+    shadowColor: "#000",       // Shadow for depth
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,              // Elevation for Android
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "#333333",
+    marginBottom: 15,          // Space below the title
+    fontFamily: "PingFang SC",
+  },
+  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
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0", // Lighter separator line
+  },
+  detailLabel: {
+    fontSize: 15,
+    color: "#555555",        // Slightly lighter label color
+    fontFamily: "PingFang SC",
+    fontWeight: '500',
+    marginRight: 10,          // Space between label and value
+  },
+  detailValue: {
+    fontSize: 15,
+    color: "#333333",        // Darker value color
+    fontFamily: "PingFang SC",
+    textAlign: 'right',
+    flexShrink: 1,            // Allow text to shrink and wrap
+  },
 });