diff --git a/app/screens/previewOrder/perviewOrder.tsx b/app/screens/previewOrder/perviewOrder.tsx
index c43aecb..000cf05 100644
--- a/app/screens/previewOrder/perviewOrder.tsx
+++ b/app/screens/previewOrder/perviewOrder.tsx
@@ -1,31 +1,41 @@
-import { View, Text, TouchableOpacity, StyleSheet, TextInput } from "react-native";
+import {View, Text, TouchableOpacity, StyleSheet, TextInput, ScrollView, Alert} from "react-native";
 import useCreateOrderStore from "../../store/createOrder";
 import BackIcon from "../../components/BackIcon";
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation, useRoute, RouteProp } from "@react-navigation/native";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { useState, useEffect } from "react";
+import useUserStore from "../../store/user";
+import {
+ Order
+} from "../../services/api/orders";
+import { payApi } from "../../services/api/payApi";
 
-// 假设的图标组件 - 请替换为您的实际图标
-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>; // 示例图标
-const UserIcon = ({ size, color }) => <Text style={{fontSize: size, color: color}}>👤</Text>;      // 示例图标 - 姓名
-const PhoneIcon = ({ size, color }) => <Text style={{fontSize: size, color: color}}>📞</Text>;     // 示例图标 - 手机
-const GlobeIcon = ({ size, color }) => <Text style={{fontSize: size, color: color}}>🌍</Text>;     // 示例图标 - 国家
+
+// Define the param list for navigation
+type RootStackParamList = {
+  PreviewOrder: { data: Order, payMethod: string ,currency:string,amount:number};
+  Pay: { payUrl:string };
+};
 
 export const PreviewOrder = () => {
     const {orderData, setOrderData} = useCreateOrderStore();
-    const navigation = useNavigation();
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
     const [phoneNumber, setPhoneNumber] = useState("");
     const [showPhoneInput, setShowPhoneInput] = useState(false);
+    const route = useRoute<RouteProp<RootStackParamList, 'PreviewOrder'>>();
+    const [loading, setLoading] = useState(false);
+    const {user} = useUserStore();
 
     useEffect(() => {
-        if (orderData?.payment_method === "Brainnel Pay(Mobile Money)") {
+        if (!user.user_id){
+          return Alert.alert('检查您未登录')
+        }
+        if (route.params.payMethod === "Brainnel Pay(Mobile Money)") {
             setShowPhoneInput(true);
         } else {
             setShowPhoneInput(false);
         }
-    }, [orderData?.payment_method]);
+    }, [route.params.payMethod, user.user_id]);
 
     const handleSubmit = () => {
         if (showPhoneInput && !phoneNumber) {
@@ -33,98 +43,143 @@ export const PreviewOrder = () => {
             console.log("Phone number is required for Mobile Money");
             return;
         }
-        
-        if (showPhoneInput) {
-            setOrderData({ ...orderData, mobile_money_phone: phoneNumber });
+
+        console.log(route.params.currency);
+
+        const data = {
+          order_id: route.params.data.order_id,
+          method: route.params.payMethod,
+          currency: route.params.currency || route.params.data.currency,
+          amount: route.params.data.actual_amount,
         }
+        setLoading(true);
+
+        payApi.getPayInfo(data).then((res) => {
+          if(res.success){``
+            navigation.navigate('Pay', {
+              payUrl:res.payment_url
+            })
+          }
+        }).catch((err) => {
+          setLoading(false);
+          Alert.alert('支付失败')
+        }).finally(() => {
+          setLoading(false);
+        })
         
-        console.log("orderData", orderData);
-        // Add your submission logic here
+      // navigation.navigate('Pay', {
+      //   orderId: user.user_id,
+      //   payMethod: route.params.payMethod,
+
+      // })
     }
     
   return (
     <View style={styles.container}>
         <View style={styles.titleContainer}>
-        <View style={styles.backIconContainer}>
-          <TouchableOpacity onPress={() => navigation.goBack()}>
-            <BackIcon size={20} />
-          </TouchableOpacity>
+          <View style={styles.backIconContainer}>
+            <TouchableOpacity onPress={() => navigation.goBack()}>
+              <BackIcon size={20} />
+            </TouchableOpacity>
+          </View>
+
+          <Text style={styles.titleHeading}>立即支付</Text>
         </View>
 
-        <Text style={styles.titleHeading}>立即支付</Text>
-      </View>
+        <ScrollView style={styles.scrollContainer}>
+          <View style={styles.mainContent}>
+            {/* Payment Method Section */}
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>支付方式</Text>
+              <View style={styles.paymentMethodContainer}>
+                <Text style={styles.paymentMethodText}>{route.params.payMethod}</Text>
+              </View>
 
-      {/* Payment Details */}
-      <View style={styles.section}>
+              {showPhoneInput && (
+                <View style={styles.phoneInputContainer}>
+                  <Text style={styles.phoneInputLabel}>请输入手机号码</Text>
+                  <TextInput
+                    style={styles.phoneInput}
+                    value={phoneNumber}
+                    onChangeText={setPhoneNumber}
+                    placeholder="输入手机号码"
+                    keyboardType="phone-pad"
+                  />
+                </View>
+              )}
+            </View>
 
-        {showPhoneInput && (
-          <View style={styles.phoneInputContainer}>
-            <Text style={styles.phoneInputLabel}>请输入手机号码</Text>
-            <TextInput
-              style={styles.phoneInput}
-              value={phoneNumber}
-              onChangeText={setPhoneNumber}
-              placeholder="输入手机号码"
-              keyboardType="phone-pad"
-            />
-          </View>
-        )}
+            {/* Order Info Section */}
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>支付信息</Text>
+              
+              <View style={styles.infoRow}>
+                <Text style={styles.infoLabel}>姓名</Text>
+                <Text style={styles.infoValue}>{route.params?.data.receiver_name || "N/A"}</Text>
+              </View>
+              
+              <View style={styles.infoRow}>
+                <Text style={styles.infoLabel}>手机号</Text>
+                <Text style={styles.infoValue}>{route.params?.data.receiver_phone || "N/A"}</Text>
+              </View>
+              
+              {route.params.data?.whatsapp_number && (
+                <View style={styles.infoRow}>
+                  <Text style={styles.infoLabel}>WhatsApp</Text>
+                  <Text style={styles.infoValue}>{route.params.data?.whatsapp_number}</Text>
+                </View>
+              )}
+              
+              <View style={styles.infoRow}>
+                <Text style={styles.infoLabel}>国家</Text>
+                <Text style={styles.infoValue}>{route.params?.data.receiver_country || "N/A"}</Text>
+              </View>
+              
+              <View style={styles.infoRow}>
+                <Text style={styles.infoLabel}>收货地址</Text>
+                <Text style={styles.infoValue}>{route.params?.data.receiver_address || "N/A"}</Text>
+              </View>
+              
+              <View style={styles.infoRow}>
+                <Text style={styles.infoLabel}>订单金额</Text>
+                <Text style={styles.infoValue}>
+                  {route.params.data.actual_amount || "N/A"} {user.currency}
+                </Text>
+              </View>
+              
+              <View style={styles.infoRow}>
+                <Text style={styles.infoLabel}>运费</Text>
+                <Text style={styles.infoValue}>
+                  {(route.params.data.domestic_shipping_fee + route.params.data.shipping_fee).toFixed(2) || "N/A"} {user.currency}
+                </Text>
+              </View>
+            </View>
 
-        {/* Order Details Card */}
-        <View style={styles.card}>
-          <Text style={styles.cardTitle}>支付信息</Text>
-          <View style={styles.detailRow}>
-            <UserIcon size={18} color="#555555" />
-            <Text style={styles.detailLabel}>姓名:</Text>
-            <Text style={styles.detailValue}>{orderData?.receiver_name || "N/A"}</Text>
-          </View>
-          <View style={styles.detailRow}>
-            <PhoneIcon size={18} color="#555555" />
-            <Text style={styles.detailLabel}>手机号:</Text>
-            <Text style={styles.detailValue}>{orderData?.receiver_phone || "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>
+            {/* Order Summary Section */}
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>订单总额</Text>
+              <View style={styles.totalRow}>
+                <Text style={styles.totalLabel}>总金额</Text>
+                <Text style={styles.totalValue}>
+                  {route.params.amount} {route.params.currency}
+                </Text>
+              </View>
             </View>
-          )}
-          <View style={styles.detailRow}>
-            <GlobeIcon size={18} color="#555555" />
-            <Text style={styles.detailLabel}>国家:</Text>
-            <Text style={styles.detailValue}>{orderData?.country || "N/A"}</Text>
-          </View>
-          <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>
-        </View>
-      </View>
+        </ScrollView>
 
-     <View style={styles.submitButtonContainer}>
-            <TouchableOpacity
-              style={[
-                styles.primaryButtonStyle,
-                (!showPhoneInput || (showPhoneInput && phoneNumber)) ? {} : styles.disabledButtonStyle
-              ]}
-              onPress={handleSubmit}
-              disabled={showPhoneInput && !phoneNumber}
-            >
-              <Text style={styles.buttonText}>确认支付</Text>
-            </TouchableOpacity>
-          </View>
+        <View style={styles.submitButtonContainer}>
+          <TouchableOpacity
+            style={[
+              styles.primaryButtonStyle,
+              (!showPhoneInput || (showPhoneInput && phoneNumber)) ? {} : styles.disabledButtonStyle
+            ]}
+            onPress={handleSubmit}
+            disabled={showPhoneInput && !phoneNumber}
+          >
+            <Text style={styles.buttonText}>确认支付</Text>
+          </TouchableOpacity>
+        </View>
     </View>
   );
 };
@@ -132,154 +187,149 @@ export const PreviewOrder = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "white",
+    backgroundColor: "#f7f7fa",
+  },
+  scrollContainer: {
+    flex: 1,
+  },
+  mainContent: {
+    padding: 16,
   },
   submitButtonContainer: {
-    paddingRight: 11,
-    paddingLeft: 11,
-    marginTop: 20,
-    marginBottom: 20,
+    paddingHorizontal: 16,
+    paddingVertical: 20,
+    backgroundColor: "white",
+    borderTopWidth: 1,
+    borderTopColor: "#eaeaea",
   },
   primaryButtonStyle: {
     width: "100%",
     height: 50,
     justifyContent: "center",
     alignItems: "center",
-    fontWeight: "600",
-    fontSize: 16,
-    lineHeight: 22,
-    fontFamily: "PingFang SC",
-    color: "white",
     backgroundColor: "#002fa7",
-    borderWidth: 0,
     borderRadius: 25,
+    shadowColor: "#002fa7",
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
+    elevation: 5,
   },
   buttonText: {
     color: "white",
     fontWeight: "600",
     fontSize: 16,
-    lineHeight: 22,
-    fontFamily: "PingFang SC",
-  },
-  selectedCountryText: {
-    padding: 0,
-    margin: 0,
-    fontWeight: "500",
-    fontSize: 16,
-    lineHeight: 22,
     fontFamily: "PingFang SC",
-    color: "#646472",
   },
   disabledButtonStyle: {
-    backgroundColor: "#ccc",
+    backgroundColor: "#c0c0c0",
+    shadowOpacity: 0,
   },
   titleContainer: {
     width: "100%",
-    padding: 15,
+    padding: 16,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
     position: "relative",
     backgroundColor: "#fff",
-
+    borderBottomWidth: 1,
+    borderBottomColor: "#eaeaea",
   },
   backIconContainer: {
     position: "absolute",
-    left: 15,
-    backgroundColor: "#fff",
-
+    left: 16,
   },
   titleHeading: {
     fontWeight: "600",
-    fontSize: 20,
-    lineHeight: 22,
+    fontSize: 18,
+    color: "#333",
     fontFamily: "PingFang SC",
-    color: "black",
-
   },
-  // Order Summary Styles
   section: {
     backgroundColor: "#fff",
-    borderRadius: 8,
-    paddingHorizontal: 15,
-    marginTop: 15,
-    paddingVertical: 12,
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
   },
   sectionTitle: {
+    fontSize: 17,
     fontWeight: "600",
-    fontSize: 16,
-    marginBottom: 8,
     color: "#333",
+    marginBottom: 16,
+    fontFamily: "PingFang SC",
+  },
+  paymentMethodContainer: {
+    backgroundColor: "#f8f8f8",
+    padding: 12,
+    borderRadius: 8,
+    borderLeftWidth: 4,
+    borderLeftColor: "#002fa7",
   },
-  paymentMethod: {
+  paymentMethodText: {
     fontSize: 15,
-    color: "#666",
-    marginBottom: 10,
+    color: "#333",
+    fontFamily: "PingFang SC",
   },
   phoneInputContainer: {
-    marginTop: 10,
-    marginBottom: 10,
+    marginTop: 16,
   },
   phoneInputLabel: {
-    fontSize: 14,
-    color: "#333",
-    marginBottom: 5,
+    fontSize: 15,
+    color: "#666",
+    marginBottom: 8,
+    fontFamily: "PingFang SC",
   },
   phoneInput: {
     borderWidth: 1,
-    borderColor: "#ccc",
+    borderColor: "#ddd",
     borderRadius: 8,
-    padding: 10,
-    fontSize: 16,
-    backgroundColor: "#f9f9f9",
-  },
-  // Card styles for order details
-  card: {
-    // backgroundColor: "#ffffff", // Removed, will inherit from section or be transparent
-    // borderRadius: 12,          // Removed rounded corners
-    // marginHorizontal: 15,   // Removed to align with parent section padding
-    marginTop: 10,             // Adjusted margin from the top element
-    // padding: 18,               // Removed inner padding, rely on section or detailRow padding
-    // shadowColor: "#000",    // Removed shadow
-    // shadowOffset: {
-    //   width: 0,
-    //   height: 2,
-    // },
-    // shadowOpacity: 0.1,
-    // shadowRadius: 3.84,
-    // elevation: 5,           // Removed elevation
-    // borderWidth: 1,            // Removed border
-    // borderColor: "#e0e0e0",    // Removed border color
-  },
-  cardTitle: {
-    fontSize: 18,
-    fontWeight: "bold",
-    color: "#333333",
-    marginBottom: 15,          // Space below the title
+    padding: 12,
+    fontSize: 15,
+    backgroundColor: "#fff",
     fontFamily: "PingFang SC",
   },
-  detailRow: {
+  infoRow: {
     flexDirection: "row",
-    // justifyContent: "space-between", // We'll handle spacing differently with icons
-    alignItems: "center", // Align items vertically centered
-    paddingVertical: 10,      // Adjusted vertical padding
+    justifyContent: "space-between",
+    paddingVertical: 12,
     borderBottomWidth: 1,
-    borderBottomColor: "#f0f0f0", // Lighter separator line
+    borderBottomColor: "#f0f0f0",
   },
-  detailLabel: {
+  infoLabel: {
     fontSize: 15,
-    color: "#555555",        // Slightly lighter label color
+    color: "#666",
     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: {
+  infoValue: {
     fontSize: 15,
-    color: "#333333",        // Darker value color
+    color: "#333",
+    textAlign: "right",
+    maxWidth: "60%",
+    fontFamily: "PingFang SC",
+
+  },
+  totalRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+  },
+  totalLabel: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#333",
+    fontFamily: "PingFang SC",
+  },
+  totalValue: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: "#002fa7",
     fontFamily: "PingFang SC",
-    textAlign: 'right',
-    flexShrink: 1,            // Allow text to shrink and wrap
   },
 });