Your Name
3 weeks ago
19 changed files with 881 additions and 96 deletions
@ -0,0 +1,185 @@ |
|||||||
|
import { View, Text, TouchableOpacity, StyleSheet, TextInput } from "react-native"; |
||||||
|
import useCreateOrderStore from "../../store/createOrder"; |
||||||
|
import BackIcon from "../../components/BackIcon"; |
||||||
|
import { useNavigation } from "@react-navigation/native"; |
||||||
|
import { useState, useEffect } from "react"; |
||||||
|
|
||||||
|
export const PreviewOrder = () => { |
||||||
|
const {orderData, setOrderData} = useCreateOrderStore(); |
||||||
|
const navigation = useNavigation(); |
||||||
|
const [phoneNumber, setPhoneNumber] = useState(""); |
||||||
|
const [showPhoneInput, setShowPhoneInput] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (orderData?.payment_method === "Brainnel Pay(Mobile Money)") { |
||||||
|
setShowPhoneInput(true); |
||||||
|
} else { |
||||||
|
setShowPhoneInput(false); |
||||||
|
} |
||||||
|
}, [orderData?.payment_method]); |
||||||
|
|
||||||
|
const handleSubmit = () => { |
||||||
|
if (showPhoneInput && !phoneNumber) { |
||||||
|
// Show error or alert if needed
|
||||||
|
console.log("Phone number is required for Mobile Money"); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (showPhoneInput) { |
||||||
|
setOrderData({ ...orderData, mobile_money_phone: phoneNumber }); |
||||||
|
} |
||||||
|
|
||||||
|
console.log("orderData", orderData); |
||||||
|
// Add your submission logic here
|
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
<View style={styles.titleContainer}> |
||||||
|
<View style={styles.backIconContainer}> |
||||||
|
<TouchableOpacity onPress={() => navigation.goBack()}> |
||||||
|
<BackIcon size={20} /> |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
|
||||||
|
<Text style={styles.titleHeading}>立即支付</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> |
||||||
|
|
||||||
|
<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> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
flex: 1, |
||||||
|
backgroundColor: "white", |
||||||
|
}, |
||||||
|
submitButtonContainer: { |
||||||
|
paddingRight: 11, |
||||||
|
paddingLeft: 11, |
||||||
|
marginTop: 20, |
||||||
|
marginBottom: 20, |
||||||
|
}, |
||||||
|
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, |
||||||
|
}, |
||||||
|
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", |
||||||
|
}, |
||||||
|
titleContainer: { |
||||||
|
width: "100%", |
||||||
|
padding: 15, |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "center", |
||||||
|
position: "relative", |
||||||
|
backgroundColor: "#fff", |
||||||
|
|
||||||
|
}, |
||||||
|
backIconContainer: { |
||||||
|
position: "absolute", |
||||||
|
left: 15, |
||||||
|
backgroundColor: "#fff", |
||||||
|
|
||||||
|
}, |
||||||
|
titleHeading: { |
||||||
|
fontWeight: "600", |
||||||
|
fontSize: 20, |
||||||
|
lineHeight: 22, |
||||||
|
fontFamily: "PingFang SC", |
||||||
|
color: "black", |
||||||
|
|
||||||
|
}, |
||||||
|
// Order Summary Styles
|
||||||
|
section: { |
||||||
|
backgroundColor: "#fff", |
||||||
|
borderRadius: 8, |
||||||
|
paddingHorizontal: 15, |
||||||
|
marginTop: 15, |
||||||
|
paddingVertical: 12, |
||||||
|
}, |
||||||
|
sectionTitle: { |
||||||
|
fontWeight: "600", |
||||||
|
fontSize: 16, |
||||||
|
marginBottom: 8, |
||||||
|
color: "#333", |
||||||
|
}, |
||||||
|
paymentMethod: { |
||||||
|
fontSize: 15, |
||||||
|
color: "#666", |
||||||
|
marginBottom: 10, |
||||||
|
}, |
||||||
|
phoneInputContainer: { |
||||||
|
marginTop: 10, |
||||||
|
marginBottom: 10, |
||||||
|
}, |
||||||
|
phoneInputLabel: { |
||||||
|
fontSize: 14, |
||||||
|
color: "#333", |
||||||
|
marginBottom: 5, |
||||||
|
}, |
||||||
|
phoneInput: { |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: "#ccc", |
||||||
|
borderRadius: 8, |
||||||
|
padding: 10, |
||||||
|
fontSize: 16, |
||||||
|
backgroundColor: "#f9f9f9", |
||||||
|
}, |
||||||
|
}); |
||||||
@ -0,0 +1,113 @@ |
|||||||
|
/** |
||||||
|
* OrderCreate，订单创建模型 |
||||||
|
*/ |
||||||
|
export interface createOrderDataType { |
||||||
|
/** |
||||||
|
* Actual Amount，实际支付金额 |
||||||
|
*/ |
||||||
|
actual_amount?: number | null; |
||||||
|
/** |
||||||
|
* Address Id，收货地址ID |
||||||
|
*/ |
||||||
|
address_id: number; |
||||||
|
/** |
||||||
|
* Buyer Message，买家留言 |
||||||
|
*/ |
||||||
|
buyer_message?: null | string; |
||||||
|
/** |
||||||
|
* Create Payment，是否创建支付记录 |
||||||
|
*/ |
||||||
|
create_payment?: boolean | null; |
||||||
|
/** |
||||||
|
* Currency，货币 |
||||||
|
*/ |
||||||
|
currency?: null | string; |
||||||
|
/** |
||||||
|
* Discount Amount，优惠金额 |
||||||
|
*/ |
||||||
|
discount_amount?: number | null; |
||||||
|
/** |
||||||
|
* Domestic Shipping Fee，国内运费 |
||||||
|
*/ |
||||||
|
domestic_shipping_fee?: number | null; |
||||||
|
/** |
||||||
|
* Items，订单项 |
||||||
|
*/ |
||||||
|
items: OrderItemBase[]; |
||||||
|
/** |
||||||
|
* Payment Method，支付方式 |
||||||
|
*/ |
||||||
|
payment_method?: null | string; |
||||||
|
/** |
||||||
|
* Receiver Address，货代地址 |
||||||
|
*/ |
||||||
|
receiver_address: string; |
||||||
|
/** |
||||||
|
* Shipping Fee，运费 |
||||||
|
*/ |
||||||
|
shipping_fee?: number | null; |
||||||
|
/** |
||||||
|
* Total Amount，订单总金额 |
||||||
|
*/ |
||||||
|
total_amount?: number | null; |
||||||
|
/** |
||||||
|
* Transport Type，运输方式 1-海运 2-空运 |
||||||
|
*/ |
||||||
|
transport_type?: number | null; |
||||||
|
[property: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* OrderItemBase，订单项基础信息模型 |
||||||
|
*/ |
||||||
|
export interface OrderItemBase { |
||||||
|
/** |
||||||
|
* Cart Item Id，购物车项ID（如来源于购物车则必填） |
||||||
|
*/ |
||||||
|
cart_item_id?: number | null; |
||||||
|
/** |
||||||
|
* Offer Id，商品ID |
||||||
|
*/ |
||||||
|
offer_id: number; |
||||||
|
/** |
||||||
|
* Product Image，商品图片 |
||||||
|
*/ |
||||||
|
product_image?: null | string; |
||||||
|
/** |
||||||
|
* Product Name，商品名称 |
||||||
|
*/ |
||||||
|
product_name: string; |
||||||
|
/** |
||||||
|
* Product Name Ar，商品阿拉伯语名称 |
||||||
|
*/ |
||||||
|
product_name_ar?: null | string; |
||||||
|
/** |
||||||
|
* Product Name En，商品法语名称 |
||||||
|
*/ |
||||||
|
product_name_en?: null | string; |
||||||
|
/** |
||||||
|
* Product Name Fr，商品中文名称 |
||||||
|
*/ |
||||||
|
product_name_fr?: null | string; |
||||||
|
/** |
||||||
|
* Quantity，商品数量 |
||||||
|
*/ |
||||||
|
quantity: number; |
||||||
|
/** |
||||||
|
* Sku Attributes，SKU属性 |
||||||
|
*/ |
||||||
|
sku_attributes?: { [key: string]: any }[] | null; |
||||||
|
/** |
||||||
|
* Sku Id，SKU ID |
||||||
|
*/ |
||||||
|
sku_id?: number | null; |
||||||
|
/** |
||||||
|
* Total Price，商品总价 |
||||||
|
*/ |
||||||
|
total_price: number; |
||||||
|
/** |
||||||
|
* Unit Price，商品单价 |
||||||
|
*/ |
||||||
|
unit_price: number; |
||||||
|
[property: string]: any; |
||||||
|
} |
||||||
Loading…
Reference in new issue