订单列表对接

src/pages/order/components/payment/index.tsx

@@ -1,5 +1,5 @@
 import { Text, View } from "@tarojs/components";
-import { memo, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import AmountShow from "../amountShow";
 import classnames from "classnames";
 import styles  from './index.module.scss'
@@ -8,12 +8,28 @@ import MCheckbox from "@/components/checkbox";
 import Popup from "@/components/popup";
 import OfflinePay from "../offlinePay";
 import ScanPay from "../scanPay";
+import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay";
+import { formatPriceDiv } from "@/common/fotmat";
+import {alert} from "@/common/common"
 
 type Param = {
     show?: true|false,
-    onClose?: () => void
+    onClose?: () => void,
+    orderId?: number //应付单id
 }
-export default memo(({show = false, onClose}:Param) => {
+
+type PayInfo = {
+    amount: string
+}
+
+type PayStatus = 0|1|2|3|4|null //0:预存款， 1:账期，2：线下汇款， 3：扫码支付, 4:货到付款
+export default memo(({show = false, onClose, orderId = 0}:Param) => {
+
+    //提交参数
+    const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
+        id:0,
+        payment_method: null
+    })
 
     //线下付款
     const [offlinePayShow, setofflinePayShow] = useState(false)
@@ -28,6 +44,45 @@ export default memo(({show = false, onClose}:Param) => {
         setScanPayShow(true)
         onClose?.()
     }
+
+    //获取支付方式数据
+    const [payInfo, setPayInfo] = useState<any>()
+    const {fetchData: orderFetchData} = GetOrderPayApi()
+    const getOrderPay = async () => {
+        let {data} = await orderFetchData({id: orderId})
+        setPayInfo(() => data)
+    }
+    useEffect(() => {
+        if(show&&orderId)
+            setSubmitData((val) => ({...val, id:orderId}))
+            getOrderPay()
+    }, [show, orderId]) 
+
+    //预存款选择
+    const advanceSelectData = (val) => {
+        setSubmitData((e) => ({...e, payment_method:val}))
+    }
+    //账期选择
+    const periodSelectData = (val) => {
+        setSubmitData((e) => ({...e, payment_method:val}))
+    }
+
+    //提交支付
+    const {fetchData: submitFetchData} = SubmitOrderPayApi()
+    const submitPay = async () => {
+        if(submitData.payment_method === null) {
+            alert.error('请选择支付方式')
+            return false
+        }
+        alert.loading('正在支付')
+        let res = await submitFetchData(submitData)
+        if(res.success) {
+            alert.success('支付成功')
+        } else {
+            alert.none(res.msg)
+        }
+    }
+
     return (
         <View className={styles.payment_main}>
             <Popup show={show} showTitle={false} onClose={onClose} >
@@ -35,7 +90,7 @@ export default memo(({show = false, onClose}:Param) => {
                     <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
                     <View className={styles.title}>订单支付</View>
                     <View className={styles.amount}>
-                        <AmountShow status={2} number={6000.33}/>
+                        <AmountShow status={2} number={formatPriceDiv(payInfo?.amount)}/>
                     </View>
                     <View className={styles.payment_list}>
                         <View className={styles.payment_list_top_border}></View>
@@ -59,19 +114,19 @@ export default memo(({show = false, onClose}:Param) => {
                                         <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
                                         <View className={styles.payment_list_item_left_text}>预存款</View>
                                     </View>
-                                    <View className={styles.payment_list_item_left_price}>金额不足，剩余 ¥0.00</View>
+                                    <View className={styles.payment_list_item_left_price}>金额不足，剩余 ¥{payInfo?.advance_deposit_balance}</View>
                                 </View>
-                                <MCheckbox  status={true} onSelect={() => console.log()} onClose={() =>console.log()}/>
+                                <MCheckbox  status={submitData.payment_method == 0} onSelect={() => advanceSelectData(0)} onClose={() => advanceSelectData(null)}/>
                             </View>
                             <View className={styles.payment_list_item}>
                                 <View className={styles.payment_list_item_left}>
                                     <View className={styles.payment_list_item_left_name}>
                                         <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
-                                        <View className={styles.payment_list_item_left_text}>x天账期</View>
+                                        <View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
                                     </View>
-                                    <View className={styles.payment_list_item_left_price}>可用额度 ¥3,000.00</View>
+                                    <View className={styles.payment_list_item_left_price}>可用额度 ¥{payInfo?.account_period_credit_available_line}</View>
                                 </View>
-                                <MCheckbox  status={true} onSelect={() => console.log()} onClose={() =>console.log()}/>
+                                <MCheckbox  status={submitData.payment_method == 1} onSelect={() => periodSelectData(1)} onClose={() => periodSelectData(null)}/>
                             </View>
                             <View className={styles.payment_list_item} onClick={onShowOfflinePay}>
                                 <View className={styles.payment_list_item_left}>
@@ -93,7 +148,7 @@ export default memo(({show = false, onClose}:Param) => {
                             </View>
                         </View>
                     </View>
-                    <View className={styles.btns}>确认交易</View>
+                    <View className={styles.btns} onClick={submitPay}>确认交易</View>
                 </View>
             </Popup>
             <OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)}/>