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