239 lines
12 KiB
TypeScript
239 lines
12 KiB
TypeScript
import { Text, View } from "@tarojs/components";
|
||
import { memo, useCallback, useEffect, useMemo, 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";
|
||
|
||
type Param = {
|
||
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散剪
|
||
[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) => {
|
||
|
||
//支付方式枚举
|
||
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 [offlinePayShow, setofflinePayShow] = useState(false)
|
||
const onShowOfflinePay = () => {
|
||
setofflinePayShow(true)
|
||
// onClose?.()
|
||
}
|
||
|
||
//扫码支付
|
||
const [scanPayShow, setScanPayShow] = useState(false)
|
||
const onShowScanPay = () => {
|
||
setScanPayShow(true)
|
||
onClose?.()
|
||
}
|
||
|
||
//获取支付方式数据
|
||
const [payInfo, setPayInfo] = useState<any>()
|
||
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)
|
||
}
|
||
}
|
||
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 advanceSelectData = useCallback((val) => {
|
||
setSubmitData((e) => ({...e, payment_method:val}))
|
||
}, [])
|
||
|
||
//账期选择
|
||
const periodSelectData = (val) => {
|
||
setSubmitData((e) => ({...e, payment_method:val}))
|
||
}
|
||
|
||
//订阅消息
|
||
const {ToPay} = SUBSCRIPTION_MESSAGE_SCENE
|
||
const {openSubscriptionMessage} = UseSubscriptionMessage()
|
||
|
||
//提交支付
|
||
const {fetchData: submitFetchData} = SubmitOrderPayApi() //应收单提交
|
||
const {fetchData: submitPrepayOrderFetchData} = SubmitPrepayOrderPayApi() //预付单提交
|
||
const submitPay = 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.loading('正在支付')
|
||
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)
|
||
}
|
||
}
|
||
|
||
//预付款
|
||
const advance_payment = useMemo(() => {
|
||
const price = payInfo?.should_collect_money - payInfo?.amount_paid
|
||
return (
|
||
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)}</View>
|
||
)
|
||
}, [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 (
|
||
<View className={styles.payment_list_item_left_price}>{(payInfo?.account_period_credit_available_line < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View>
|
||
)
|
||
}, [payInfo])
|
||
|
||
//选择改变
|
||
const changeSelect = () => {
|
||
}
|
||
|
||
//在线支付所需数据
|
||
const onlinePayData = useMemo(() => {
|
||
return {...orderInfo, offline_remittance_information: payInfo?.offline_remittance_information}
|
||
|
||
}, [orderInfo, payInfo])
|
||
|
||
return (
|
||
<View className={styles.payment_main}>
|
||
<Popup show={show} showTitle={false} onClose={onClose} >
|
||
<View className={styles.payment_con}>
|
||
<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={formatPriceDiv(payInfo?.amount_to_be_paid) as number}/>
|
||
</View>
|
||
{(payInfo?.delivery_payment_name)&&<View className={styles.playMode}>已使用{payInfo?.delivery_payment_name}方式付款</View>}
|
||
<View className={styles.payment_list}>
|
||
<View className={styles.payment_list_top_border}></View>
|
||
<View className={styles.payment_list_title}>
|
||
{/* <Text>向商家发起支付</Text> */}
|
||
<View className={styles.payment_list_title_price}>
|
||
<View className={styles.payment_list_title_price_item}>
|
||
<Text>订单金额</Text>
|
||
<Text>¥{formatPriceDiv(payInfo?.should_collect_money)}</Text>
|
||
</View>
|
||
<View className={styles.payment_list_title_price_item}>
|
||
<Text>已付金额</Text>
|
||
<Text>¥{formatPriceDiv(payInfo?.amount_paid)}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View className={styles.payment_list_con}>
|
||
<View className={styles.payment_list_item} onClick={changeSelect}>
|
||
<View className={styles.payment_list_item_left}>
|
||
<View className={styles.payment_list_item_left_name}>
|
||
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont, styles.advance_payment)}></View>
|
||
<View className={styles.payment_list_item_left_text}>预存款</View>
|
||
</View>
|
||
{advance_payment}
|
||
</View>
|
||
<MCheckbox status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/>
|
||
</View>
|
||
{show_account_payment&&<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-xtianzhangqi', styles.miconfont, styles.account_period)}></View>
|
||
<View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
|
||
</View>
|
||
{account_peyment}
|
||
</View>
|
||
<MCheckbox status={submitData.payment_method == PaymentMethodAccountPeriod.value} onSelect={() => periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/>
|
||
</View>}
|
||
<View className={styles.payment_list_item} onClick={onShowOfflinePay}>
|
||
<View className={styles.payment_list_item_left}>
|
||
<View className={styles.payment_list_item_left_name}>
|
||
<View className={classnames('iconfont icon-xianxiahuikuan', styles.miconfont)}></View>
|
||
<View className={styles.payment_list_item_left_text}>线下汇款</View>
|
||
</View>
|
||
</View>
|
||
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
|
||
</View>
|
||
<View className={styles.payment_list_item} onClick={onShowScanPay}>
|
||
<View className={styles.payment_list_item_left}>
|
||
<View className={styles.payment_list_item_left_name}>
|
||
<View className={classnames('iconfont icon-saomazhifu', styles.miconfont)}></View>
|
||
<View className={styles.payment_list_item_left_text}>扫码支付</View>
|
||
</View>
|
||
</View>
|
||
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View className={styles.btns} onClick={submitPay}>确认交易</View>
|
||
</View>
|
||
</Popup>
|
||
<OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)} offlineInfo={payInfo?.offline_remittance_information}/>
|
||
<ScanPay orderInfo={onlinePayData} show={scanPayShow} onClose={() => setScanPayShow(false)} />
|
||
</View>
|
||
|
||
)
|
||
}) |