xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎈 perf(1000732【收银台加密优化】):

Browse Source
This commit is contained in:
czm 2022-11-18 19:01:16 +08:00
parent 4302a8fa67
commit 46b80f0700
2 changed files with 247 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/pages/order/components/payment/index.tsx
View File

@ -1,51 +1,50 @@
import { Text, View } from "@tarojs/components"; import { Text, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import AmountShow from "../amountShow"; import AmountShow from '../amountShow'
import classnames from "classnames"; import classnames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
import MCheckbox from "@/components/checkbox"; import MCheckbox from '@/components/checkbox'
import Popup from "@/components/popup"; import Popup from '@/components/popup'
import OfflinePay from "../offlinePay"; import OfflinePay from '../offlinePay'
import ScanPay from "../scanPay"; import ScanPay from '../scanPay'
import { GetOrderPayApi, SubmitOrderPayApi, GetPrepayOrderPayApi, SubmitPrepayOrderPayApi } from "@/api/orderPay"; import { GetOrderPayApi, SubmitOrderPayApi, GetPrepayOrderPayApi, SubmitPrepayOrderPayApi } from '@/api/orderPay'
import { formatPriceDiv } from "@/common/fotmat"; import { formatPriceDiv } from '@/common/fotmat'
import {alert} from "@/common/common" import { alert } from '@/common/common'
import { ORDER_STATUS, PAYMENT_METHOD, SUBSCRIPTION_MESSAGE_SCENE } from "@/common/enum"; import { ORDER_STATUS, PAYMENT_METHOD, SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
import { UseSubscriptionMessage } from "@/use/useCommon"; import { UseSubscriptionMessage } from '@/use/useCommon'
import { throttle } from "@/common/util"; import { throttle } from '@/common/util'
type Param = { type Param = {
show?: true|false, show?: true | false
onClose?: () => void, onClose?: () => void
onSubmitSuccess?: () => void, //支付成功 onSubmitSuccess?: () => void //支付成功
orderInfo?: OrderInfo, orderInfo?: OrderInfo
} }
type OrderInfo = { type OrderInfo = {
id?: number, //销售单id id?: number //销售单id
should_collect_order_id?: number, //应付单id should_collect_order_id?: number //应付单id
pre_collect_order_id?: number, //预付单id pre_collect_order_id?: number //预付单id
status?: number, //订单状态 status?: number //订单状态
payment_method?: number, //支付方式 payment_method?: number //支付方式
sale_mode?: number, //订单类型 0：大货 1剪板 2散剪 sale_mode?: number //订单类型 0：大货 1剪板 2散剪
actual_weight?: number, //实际重量 actual_weight?: number //实际重量
estimate_weight?: number, //预估重量 estimate_weight?: number //预估重量
[val: string]: any [val: string]: any
} }
type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款 type PayStatus = 1 | 2 | 3 | 4 | 5 | null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款
export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => { export default memo(({ show = false, onClose, orderInfo, onSubmitSuccess }: Param) => {
//支付方式枚举 //支付方式枚举
const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod, PaymentMethodCashOnDelivery} = PAYMENT_METHOD const { PaymentMethodPreDeposit, PaymentMethodAccountPeriod, PaymentMethodCashOnDelivery } = PAYMENT_METHOD
//订单状态枚举 //订单状态枚举
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS const { SaleorderstatusWaitingPrePayment } = ORDER_STATUS
//提交参数 //提交参数
const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({ const [submitData, setSubmitData] = useState<{ id: number; payment_method: PayStatus }>({
id:0, id: 0,
payment_method: null payment_method: null,
}) })
//线下付款 //线下付款
@ -64,23 +63,23 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
//获取支付方式数据 //获取支付方式数据
const [payInfo, setPayInfo] = useState<any>() const [payInfo, setPayInfo] = useState<any>()
const {fetchData: orderFetchData} = GetOrderPayApi() const { fetchData: orderFetchData } = GetOrderPayApi()
const {fetchData: prepayOrderFetchData} = GetPrepayOrderPayApi() const { fetchData: prepayOrderFetchData } = GetPrepayOrderPayApi()
const getOrderPay = async () => { const getOrderPay = async () => {
if(orderInfo&&orderInfo.should_collect_order_id) { if (orderInfo && orderInfo.should_collect_order_id) {
//有应收单id时用应收单获取数据 //有应收单id时用应收单获取数据
let {data} = await orderFetchData({id: orderInfo?.should_collect_order_id}) let { data } = await orderFetchData({ id: orderInfo?.should_collect_order_id })
setPayInfo(() => data) setPayInfo(() => data)
} else { } else {
//用预付单id获取支付信息 //用预付单id获取支付信息
let {data} = await prepayOrderFetchData({id: orderInfo?.pre_collect_order_id}) let { data } = await prepayOrderFetchData({ id: orderInfo?.pre_collect_order_id })
setPayInfo(() => data) setPayInfo(() => data)
} }
} }
useEffect(() => { useEffect(() => {
if(show&&orderInfo&&(orderInfo?.should_collect_order_id||orderInfo?.pre_collect_order_id)) { 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 let id = orderInfo.should_collect_order_id || orderInfo.pre_collect_order_id
setSubmitData((val) => ({...val, id:id as number})) setSubmitData((val) => ({ ...val, id: id as number }))
getOrderPay() getOrderPay()
} }
}, [show, orderInfo]) }, [show, orderInfo])
@ -88,7 +87,7 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
//预存款选择 //预存款选择
const advanceRef = useRef<any>(null) const advanceRef = useRef<any>(null)
const advanceSelectData = useCallback((val) => { const advanceSelectData = useCallback((val) => {
setSubmitData((e) => ({...e, payment_method:val})) setSubmitData((e) => ({ ...e, payment_method: val }))
}, []) }, [])
const changeSelect = () => { const changeSelect = () => {
advanceRef.current.onSelectEven() advanceRef.current.onSelectEven()
@ -97,36 +96,39 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
//账期选择 //账期选择
const accountPeriodRef = useRef<any>(null) const accountPeriodRef = useRef<any>(null)
const periodSelectData = (val) => { const periodSelectData = (val) => {
setSubmitData((e) => ({...e, payment_method:val})) setSubmitData((e) => ({ ...e, payment_method: val }))
} }
const accountPeriodSelect = () => { const accountPeriodSelect = () => {
accountPeriodRef.current.onSelectEven() accountPeriodRef.current.onSelectEven()
} }
//订阅消息 //订阅消息
const {ToPay} = SUBSCRIPTION_MESSAGE_SCENE const { ToPay } = SUBSCRIPTION_MESSAGE_SCENE
const {openSubscriptionMessage} = UseSubscriptionMessage() const { openSubscriptionMessage } = UseSubscriptionMessage()
//提交支付 //提交支付
const {fetchData: submitFetchData} = SubmitOrderPayApi() //应收单提交 const { fetchData: submitFetchData } = SubmitOrderPayApi() //应收单提交
const {fetchData: submitPrepayOrderFetchData} = SubmitPrepayOrderPayApi() //预付单提交 const { fetchData: submitPrepayOrderFetchData } = SubmitPrepayOrderPayApi() //预付单提交
const submitPay = throttle(async () => { const submitPay = throttle(async () => {
if(submitData.payment_method === null) { if (submitData.payment_method === null) {
alert.error('请选择支付方式') alert.error('请选择支付方式')
return false return false
} }
//账期支付，或预付款并且不是剪板才会订阅 //账期支付，或预付款并且不是剪板才会订阅
if((submitData.payment_method == PaymentMethodAccountPeriod.value || orderInfo?.status == SaleorderstatusWaitingPrePayment.value)&& orderInfo?.sale_mode != 1) { if (
await openSubscriptionMessage({orderId: orderInfo?.id, scenes: ToPay.value}) (submitData.payment_method == PaymentMethodAccountPeriod.value || orderInfo?.status == SaleorderstatusWaitingPrePayment.value) &&
orderInfo?.sale_mode != 1
) {
await openSubscriptionMessage({ orderId: orderInfo?.id, scenes: ToPay.value })
} }
alert.showLoading('正在支付') alert.showLoading('正在支付')
let res:any = null let res: any = null
if(orderInfo?.should_collect_order_id) { if (orderInfo?.should_collect_order_id) {
res = await submitFetchData(submitData) res = await submitFetchData(submitData)
} else { } else {
res = await submitPrepayOrderFetchData(submitData) res = await submitPrepayOrderFetchData(submitData)
} }
if(res.success) { if (res.success) {
alert.success('支付成功') alert.success('支付成功')
onSubmitSuccess?.() onSubmitSuccess?.()
} else { } else {
@ -139,20 +141,22 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
const advance_payment = useMemo(() => { const advance_payment = useMemo(() => {
const price = payInfo?.should_collect_money - payInfo?.amount_paid const price = payInfo?.should_collect_money - payInfo?.amount_paid
return ( return (
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)}</View> <View className={styles.payment_list_item_left_price}>
{payInfo?.advance_deposit_balance < price && '余额不足，'}剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)}
</View>
) )
}, [payInfo]) }, [payInfo])
//是否显示七天账期 //是否显示七天账期
const show_account_payment = useMemo(() => { const show_account_payment = useMemo(() => {
//剪板和散剪不显示 //剪板和散剪不显示
if(orderInfo?.sale_mode != 0) return false if (orderInfo?.sale_mode != 0) return false
//支付方式是账期支付,不显示 //支付方式是账期支付,不显示
if(orderInfo?.payment_method == PaymentMethodAccountPeriod.value) return false if (orderInfo?.payment_method == PaymentMethodAccountPeriod.value) return false
//支付方式是货到付款,不显示 //支付方式是货到付款,不显示
if(orderInfo?.payment_method == PaymentMethodCashOnDelivery.value) return false if (orderInfo?.payment_method == PaymentMethodCashOnDelivery.value) return false
//订单状态是预付款,不显示 //订单状态是预付款,不显示
if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value) return false if (orderInfo?.status == SaleorderstatusWaitingPrePayment.value) return false
return true return true
}, [orderInfo]) }, [orderInfo])
@ -160,26 +164,27 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
const account_peyment = useMemo(() => { const account_peyment = useMemo(() => {
const price = payInfo?.should_collect_money - payInfo?.amount_paid const price = payInfo?.should_collect_money - payInfo?.amount_paid
return ( return (
<View className={styles.payment_list_item_left_price}>{(payInfo?.account_period_credit_available_line < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View> <View className={styles.payment_list_item_left_price}>
{payInfo?.account_period_credit_available_line < price && '额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}
</View>
) )
}, [payInfo]) }, [payInfo])
//在线支付所需数据 //在线支付所需数据
const onlinePayData = useMemo(() => { const onlinePayData = useMemo(() => {
return {...orderInfo, offline_remittance_information: payInfo?.offline_remittance_information} return { ...orderInfo, ...payInfo }
}, [orderInfo, payInfo]) }, [orderInfo, payInfo])
return ( return (
<View className={styles.payment_main}> <View className={styles.payment_main}>
<Popup show={show} showTitle={false} onClose={onClose} > <Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.payment_con}> <View className={styles.payment_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View> <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>待支付款项</View> <View className={styles.title}>待支付款项</View>
<View className={styles.amount}> <View className={styles.amount}>
<AmountShow status={2} number={formatPriceDiv(payInfo?.amount_to_be_paid) as number}/> <AmountShow status={2} number={formatPriceDiv(payInfo?.amount_to_be_paid) as number} />
</View> </View>
{(payInfo?.delivery_payment_name)&&<View className={styles.playMode}>已使用{payInfo?.delivery_payment_name}方式付款</View>} {payInfo?.delivery_payment_name && <View className={styles.playMode}>已使用{payInfo?.delivery_payment_name}方式付款</View>}
<View className={styles.payment_list}> <View className={styles.payment_list}>
<View className={styles.payment_list_top_border}></View> <View className={styles.payment_list_top_border}></View>
<View className={styles.payment_list_title}> <View className={styles.payment_list_title}>
@ -204,9 +209,15 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
</View> </View>
{advance_payment} {advance_payment}
</View> </View>
<MCheckbox ref={advanceRef} status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/> <MCheckbox
ref={advanceRef}
status={submitData.payment_method == PaymentMethodPreDeposit.value}
onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)}
onClose={() => advanceSelectData(null)}
/>
</View> </View>
{show_account_payment&&<View className={styles.payment_list_item} onClick={accountPeriodSelect}> {show_account_payment && (
<View className={styles.payment_list_item} onClick={accountPeriodSelect}>
<View className={styles.payment_list_item_left}> <View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}> <View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-xtianzhangqi', styles.miconfont, styles.account_period)}></View> <View className={classnames('iconfont icon-xtianzhangqi', styles.miconfont, styles.account_period)}></View>
@ -214,8 +225,14 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
</View> </View>
{account_peyment} {account_peyment}
</View> </View>
<MCheckbox ref={accountPeriodRef} status={submitData.payment_method == PaymentMethodAccountPeriod.value} onSelect={() => periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/> <MCheckbox
</View>} ref={accountPeriodRef}
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} onClick={onShowOfflinePay}>
<View className={styles.payment_list_item_left}> <View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}> <View className={styles.payment_list_item_left_name}>
@ -236,12 +253,13 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
</View> </View>
</View> </View>
</View> </View>
<View className={styles.btns} onClick={submitPay}>确认交易</View> <View className={styles.btns} onClick={submitPay}>
确认交易
</View>
</View> </View>
</Popup> </Popup>
<OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)} offlineInfo={payInfo?.offline_remittance_information}/> <OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)} offlineInfo={payInfo?.offline_remittance_information} />
<ScanPay orderInfo={onlinePayData} show={scanPayShow} onClose={() => setScanPayShow(false)} /> <ScanPay orderInfo={onlinePayData} show={scanPayShow} onClose={() => setScanPayShow(false)} />
</View> </View>
) )
}) })

5
src/pages/order/components/scanPay/index.tsx
View File

@ -56,6 +56,7 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
}) })
}) })
}) })
console.log('md5_key:::', orderInfo.md5_key)
setDetail(() => ({ setDetail(() => ({
title: '面料销售电子确认单', title: '面料销售电子确认单',
company: orderInfo.company_name, //后端公司 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(), //订单价格 order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格
show_order_total_price: orderInfo.is_display_price, show_order_total_price: orderInfo.is_display_price,
order_total_num: orderInfo.total_number + '', 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(), //订单布匹重量 order_total_weight: formatWeightDiv(orderInfo.total_weight || orderInfo.total_estimate_weight).toString(), //订单布匹重量
list: lists, list: lists,
show_qrcode: true, //是否显示码单 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(), //总空差重量 order_total_weight_error: formatWeightDiv(orderInfo.total_weight_error).toString(), //总空差重量
})) }))
} }
}, [orderInfo]) }, [orderInfo, show])
//收货地址 //收货地址
const address = (addressInfo) => { const address = (addressInfo) => {