diff --git a/src/pages/order/components/payment/index.tsx b/src/pages/order/components/payment/index.tsx index 29fd465..f748635 100644 --- a/src/pages/order/components/payment/index.tsx +++ b/src/pages/order/components/payment/index.tsx @@ -1,247 +1,265 @@ -import { Text, View } from "@tarojs/components"; -import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; -import AmountShow from "../amountShow"; -import classnames from "classnames"; -import styles from './index.module.scss' +import { Text, View } from '@tarojs/components' +import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' +import AmountShow from '../amountShow' +import classnames from 'classnames' +import styles from './index.module.scss' -import MCheckbox from "@/components/checkbox"; -import Popup from "@/components/popup"; -import OfflinePay from "../offlinePay"; -import ScanPay from "../scanPay"; -import { GetOrderPayApi, SubmitOrderPayApi, GetPrepayOrderPayApi, SubmitPrepayOrderPayApi } from "@/api/orderPay"; -import { formatPriceDiv } from "@/common/fotmat"; -import {alert} from "@/common/common" -import { ORDER_STATUS, PAYMENT_METHOD, SUBSCRIPTION_MESSAGE_SCENE } from "@/common/enum"; -import { UseSubscriptionMessage } from "@/use/useCommon"; -import { throttle } from "@/common/util"; +import MCheckbox from '@/components/checkbox' +import Popup from '@/components/popup' +import OfflinePay from '../offlinePay' +import ScanPay from '../scanPay' +import { GetOrderPayApi, SubmitOrderPayApi, GetPrepayOrderPayApi, SubmitPrepayOrderPayApi } from '@/api/orderPay' +import { formatPriceDiv } from '@/common/fotmat' +import { alert } from '@/common/common' +import { ORDER_STATUS, PAYMENT_METHOD, SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum' +import { UseSubscriptionMessage } from '@/use/useCommon' +import { throttle } from '@/common/util' type Param = { - show?: true|false, - onClose?: () => void, - onSubmitSuccess?: () => void, //支付成功 - orderInfo?: OrderInfo, + show?: true | false + onClose?: () => void + onSubmitSuccess?: () => void //支付成功 + orderInfo?: OrderInfo } type OrderInfo = { - id?: number, //销售单id - should_collect_order_id?: number, //应付单id - pre_collect_order_id?: number, //预付单id - status?: number, //订单状态 - payment_method?: number, //支付方式 - sale_mode?: number, //订单类型 0:大货 1剪板 2散剪 - actual_weight?: number, //实际重量 - estimate_weight?: number, //预估重量 - [val: string]: any + id?: number //销售单id + should_collect_order_id?: number //应付单id + pre_collect_order_id?: number //预付单id + status?: number //订单状态 + payment_method?: number //支付方式 + sale_mode?: number //订单类型 0:大货 1剪板 2散剪 + actual_weight?: number //实际重量 + estimate_weight?: number //预估重量 + [val: string]: any } -type PayStatus = 1|2|3|4|5|null //1:预存款, 2:账期,3:线下汇款, 4:扫码支付, 5:货到付款 -export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => { +type PayStatus = 1 | 2 | 3 | 4 | 5 | null //1:预存款, 2:账期,3:线下汇款, 4:扫码支付, 5:货到付款 +export default memo(({ show = false, onClose, orderInfo, onSubmitSuccess }: Param) => { + //支付方式枚举 + const { PaymentMethodPreDeposit, PaymentMethodAccountPeriod, PaymentMethodCashOnDelivery } = PAYMENT_METHOD + //订单状态枚举 + const { SaleorderstatusWaitingPrePayment } = ORDER_STATUS - //支付方式枚举 - const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod, PaymentMethodCashOnDelivery} = PAYMENT_METHOD - //订单状态枚举 - const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS + //提交参数 + const [submitData, setSubmitData] = useState<{ id: number; payment_method: PayStatus }>({ + id: 0, + payment_method: null, + }) - //提交参数 - const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({ - id:0, - payment_method: null - }) + //线下付款 + const [offlinePayShow, setofflinePayShow] = useState(false) + const onShowOfflinePay = () => { + setofflinePayShow(true) + // onClose?.() + } - //线下付款 - const [offlinePayShow, setofflinePayShow] = useState(false) - const onShowOfflinePay = () => { - setofflinePayShow(true) - // onClose?.() + //扫码支付 + const [scanPayShow, setScanPayShow] = useState(false) + const onShowScanPay = () => { + setScanPayShow(true) + onClose?.() + } + + //获取支付方式数据 + const [payInfo, setPayInfo] = useState() + const { fetchData: orderFetchData } = GetOrderPayApi() + const { fetchData: prepayOrderFetchData } = GetPrepayOrderPayApi() + const getOrderPay = async () => { + if (orderInfo && orderInfo.should_collect_order_id) { + //有应收单id时用应收单获取数据 + let { data } = await orderFetchData({ id: orderInfo?.should_collect_order_id }) + setPayInfo(() => data) + } else { + //用预付单id获取支付信息 + let { data } = await prepayOrderFetchData({ id: orderInfo?.pre_collect_order_id }) + setPayInfo(() => data) } - - //扫码支付 - const [scanPayShow, setScanPayShow] = useState(false) - const onShowScanPay = () => { - setScanPayShow(true) - onClose?.() + } + useEffect(() => { + if (show && orderInfo && (orderInfo?.should_collect_order_id || orderInfo?.pre_collect_order_id)) { + let id = orderInfo.should_collect_order_id || orderInfo.pre_collect_order_id + setSubmitData((val) => ({ ...val, id: id as number })) + getOrderPay() } + }, [show, orderInfo]) - //获取支付方式数据 - const [payInfo, setPayInfo] = useState() - const {fetchData: orderFetchData} = GetOrderPayApi() - const {fetchData: prepayOrderFetchData} = GetPrepayOrderPayApi() - const getOrderPay = async () => { - if(orderInfo&&orderInfo.should_collect_order_id) { - //有应收单id时用应收单获取数据 - let {data} = await orderFetchData({id: orderInfo?.should_collect_order_id}) - setPayInfo(() => data) - } else { - //用预付单id获取支付信息 - let {data} = await prepayOrderFetchData({id: orderInfo?.pre_collect_order_id}) - setPayInfo(() => data) - } + //预存款选择 + const advanceRef = useRef(null) + const advanceSelectData = useCallback((val) => { + setSubmitData((e) => ({ ...e, payment_method: val })) + }, []) + const changeSelect = () => { + advanceRef.current.onSelectEven() + } + + //账期选择 + const accountPeriodRef = useRef(null) + const periodSelectData = (val) => { + setSubmitData((e) => ({ ...e, payment_method: val })) + } + const accountPeriodSelect = () => { + accountPeriodRef.current.onSelectEven() + } + + //订阅消息 + const { ToPay } = SUBSCRIPTION_MESSAGE_SCENE + const { openSubscriptionMessage } = UseSubscriptionMessage() + + //提交支付 + const { fetchData: submitFetchData } = SubmitOrderPayApi() //应收单提交 + const { fetchData: submitPrepayOrderFetchData } = SubmitPrepayOrderPayApi() //预付单提交 + const submitPay = throttle(async () => { + if (submitData.payment_method === null) { + alert.error('请选择支付方式') + return false } - useEffect(() => { - if(show&&orderInfo&&(orderInfo?.should_collect_order_id||orderInfo?.pre_collect_order_id)) { - let id = orderInfo.should_collect_order_id||orderInfo.pre_collect_order_id - setSubmitData((val) => ({...val, id:id as number})) - getOrderPay() - } - }, [show, orderInfo]) - - //预存款选择 - const advanceRef = useRef(null) - const advanceSelectData = useCallback((val) => { - setSubmitData((e) => ({...e, payment_method:val})) - }, []) - const changeSelect = () => { - advanceRef.current.onSelectEven() + //账期支付,或预付款并且不是剪板才会订阅 + if ( + (submitData.payment_method == PaymentMethodAccountPeriod.value || orderInfo?.status == SaleorderstatusWaitingPrePayment.value) && + orderInfo?.sale_mode != 1 + ) { + await openSubscriptionMessage({ orderId: orderInfo?.id, scenes: ToPay.value }) } - - //账期选择 - const accountPeriodRef = useRef(null) - const periodSelectData = (val) => { - setSubmitData((e) => ({...e, payment_method:val})) + alert.showLoading('正在支付') + let res: any = null + if (orderInfo?.should_collect_order_id) { + res = await submitFetchData(submitData) + } else { + res = await submitPrepayOrderFetchData(submitData) } - const accountPeriodSelect = () => { - accountPeriodRef.current.onSelectEven() + if (res.success) { + alert.success('支付成功') + onSubmitSuccess?.() + } else { + alert.none(res.msg) } - - //订阅消息 - const {ToPay} = SUBSCRIPTION_MESSAGE_SCENE - const {openSubscriptionMessage} = UseSubscriptionMessage() - - //提交支付 - const {fetchData: submitFetchData} = SubmitOrderPayApi() //应收单提交 - const {fetchData: submitPrepayOrderFetchData} = SubmitPrepayOrderPayApi() //预付单提交 - const submitPay = throttle(async () => { - if(submitData.payment_method === null) { - alert.error('请选择支付方式') - return false - } - //账期支付,或预付款并且不是剪板才会订阅 - if((submitData.payment_method == PaymentMethodAccountPeriod.value || orderInfo?.status == SaleorderstatusWaitingPrePayment.value)&& orderInfo?.sale_mode != 1) { - await openSubscriptionMessage({orderId: orderInfo?.id, scenes: ToPay.value}) - } - alert.showLoading('正在支付') - let res:any = null - if(orderInfo?.should_collect_order_id) { - res = await submitFetchData(submitData) - } else { - res = await submitPrepayOrderFetchData(submitData) - } - if(res.success) { - alert.success('支付成功') - onSubmitSuccess?.() - } else { - alert.none(res.msg) - } - alert.hideLoading() - }, 800) - - //预付款 - const advance_payment = useMemo(() => { - const price = payInfo?.should_collect_money - payInfo?.amount_paid - return ( - {(payInfo?.advance_deposit_balance < price)&&'余额不足,' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)} - ) - }, [payInfo]) - - //是否显示七天账期 - const show_account_payment = useMemo(() => { - //剪板和散剪不显示 - if(orderInfo?.sale_mode != 0) return false - //支付方式是账期支付,不显示 - if(orderInfo?.payment_method == PaymentMethodAccountPeriod.value) return false - //支付方式是货到付款,不显示 - if(orderInfo?.payment_method == PaymentMethodCashOnDelivery.value) return false - //订单状态是预付款,不显示 - if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value) return false - return true - }, [orderInfo]) - - //账期 - const account_peyment = useMemo(() => { - const price = payInfo?.should_collect_money - payInfo?.amount_paid - return ( - {(payInfo?.account_period_credit_available_line < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} - ) - }, [payInfo]) - - //在线支付所需数据 - const onlinePayData = useMemo(() => { - return {...orderInfo, offline_remittance_information: payInfo?.offline_remittance_information} - - }, [orderInfo, payInfo]) + alert.hideLoading() + }, 800) + //预付款 + const advance_payment = useMemo(() => { + const price = payInfo?.should_collect_money - payInfo?.amount_paid return ( - - - - - 待支付款项 - - - - {(payInfo?.delivery_payment_name)&&已使用{payInfo?.delivery_payment_name}方式付款} - - - - {/* 向商家发起支付 */} - - - 订单金额 - ¥{formatPriceDiv(payInfo?.should_collect_money)} - - - 已付金额 - ¥{formatPriceDiv(payInfo?.amount_paid)} - - - - - - - - - 预存款 - - {advance_payment} - - advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/> - - {show_account_payment&& - - - - {payInfo?.account_period}天账期 - - {account_peyment} - - periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/> - } - - - - - 线下汇款 - - - - - - - - - 扫码支付 - - - - - - - 确认交易 - - - setofflinePayShow(false)} offlineInfo={payInfo?.offline_remittance_information}/> - setScanPayShow(false)} /> - - + + {payInfo?.advance_deposit_balance < price && '余额不足,'}剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)} + ) -}) \ No newline at end of file + }, [payInfo]) + + //是否显示七天账期 + const show_account_payment = useMemo(() => { + //剪板和散剪不显示 + if (orderInfo?.sale_mode != 0) return false + //支付方式是账期支付,不显示 + if (orderInfo?.payment_method == PaymentMethodAccountPeriod.value) return false + //支付方式是货到付款,不显示 + if (orderInfo?.payment_method == PaymentMethodCashOnDelivery.value) return false + //订单状态是预付款,不显示 + if (orderInfo?.status == SaleorderstatusWaitingPrePayment.value) return false + return true + }, [orderInfo]) + + //账期 + const account_peyment = useMemo(() => { + const price = payInfo?.should_collect_money - payInfo?.amount_paid + return ( + + {payInfo?.account_period_credit_available_line < price && '额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} + + ) + }, [payInfo]) + + //在线支付所需数据 + const onlinePayData = useMemo(() => { + return { ...orderInfo, ...payInfo } + }, [orderInfo, payInfo]) + + return ( + + + + + 待支付款项 + + + + {payInfo?.delivery_payment_name && 已使用{payInfo?.delivery_payment_name}方式付款} + + + + {/* 向商家发起支付 */} + + + 订单金额 + ¥{formatPriceDiv(payInfo?.should_collect_money)} + + + 已付金额 + ¥{formatPriceDiv(payInfo?.amount_paid)} + + + + + + + + + 预存款 + + {advance_payment} + + advanceSelectData(PaymentMethodPreDeposit.value)} + onClose={() => advanceSelectData(null)} + /> + + {show_account_payment && ( + + + + + {payInfo?.account_period}天账期 + + {account_peyment} + + periodSelectData(PaymentMethodAccountPeriod.value)} + onClose={() => periodSelectData(null)} + /> + + )} + + + + + 线下汇款 + + + + + + + + + 扫码支付 + + + + + + + + 确认交易 + + + + setofflinePayShow(false)} offlineInfo={payInfo?.offline_remittance_information} /> + setScanPayShow(false)} /> + + ) +}) diff --git a/src/pages/order/components/scanPay/index.tsx b/src/pages/order/components/scanPay/index.tsx index d8638f2..6e0b784 100644 --- a/src/pages/order/components/scanPay/index.tsx +++ b/src/pages/order/components/scanPay/index.tsx @@ -56,6 +56,7 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => { }) }) }) + console.log('md5_key:::', orderInfo.md5_key) setDetail(() => ({ title: '面料销售电子确认单', company: orderInfo.company_name, //后端公司 @@ -77,7 +78,7 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => { order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格 show_order_total_price: orderInfo.is_display_price, order_total_num: orderInfo.total_number + '', - qrcode: `${PAY_H5_CODE_URL}?sale_order_no=${orderInfo.order_no}`, //跳转链接 + qrcode: `${PAY_H5_CODE_URL}?key=${orderInfo.md5_key}`, //跳转链接 order_total_weight: formatWeightDiv(orderInfo.total_weight || orderInfo.total_estimate_weight).toString(), //订单布匹重量 list: lists, show_qrcode: true, //是否显示码单 @@ -95,7 +96,7 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => { order_total_weight_error: formatWeightDiv(orderInfo.total_weight_error).toString(), //总空差重量 })) } - }, [orderInfo]) + }, [orderInfo, show]) //收货地址 const address = (addressInfo) => {