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

订单支付完善

Browse Source
This commit is contained in:
cheng
2022-06-06 20:32:35 +08:00
parent 52008e153f
commit a552a023f8
18 changed files with 603 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/components/orderState/index.tsx
+16 -4
View File
@@ -3,6 +3,10 @@ import { memo, useMemo, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
type Param = {
list: {
status: string,
@@ -10,10 +14,18 @@ type Param = {
tag: string,
desc: string
}[],
settle_mode: -1|0|1|2, //-1:没选支付方式，0：全额现结，1：定期付款，2：货到付款
payment_method: 0|PAYMENT_METHOD_PARAM,
}
export default memo(({list = [], settle_mode = -1}:Param) => {
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
export default memo(({list = [], payment_method = 0}:Param) => {
const [showMore, setShowMore] = useState(false)
const changeMore = () => {
setShowMore(() => !showMore)
@@ -42,8 +54,8 @@ export default memo(({list = [], settle_mode = -1}:Param) => {
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{(settle_mode == 2)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(settle_mode == 1)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
{(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
</View>
</View>}
</>
src/pages/order/components/payment/index.tsx
+26 -15
View File
@@ -11,21 +11,22 @@ import ScanPay from "../scanPay";
import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay";
import { formatPriceDiv } from "@/common/fotmat";
import {alert} from "@/common/common"
import { PAYMENT_METHOD } from "@/common/enum";
import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
type Param = {
show?: true|false,
onClose?: () => void,
orderId?: number, //应付单id
onSubmitSuccess?: () => void //支付成功
onSubmitSuccess?: () => void, //支付成功
orderInfo?: OrderInfo
}
type PayInfo = {
amount: string
type OrderInfo = {
orderId: number, //应付单id
payment_method: 0|PAYMENT_METHOD_PARAM //支付方式
}
type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款
export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param) => {
export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => {
//提交参数
const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
@@ -51,15 +52,15 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param
const [payInfo, setPayInfo] = useState<any>()
const {fetchData: orderFetchData} = GetOrderPayApi()
const getOrderPay = async () => {
let {data} = await orderFetchData({id: orderId})
let {data} = await orderFetchData({id: orderInfo?.orderId})
setPayInfo(() => data)
}
useEffect(() => {
if(show&&orderId) {
setSubmitData((val) => ({...val, id:orderId}))
if(show&&orderInfo?.orderId) {
setSubmitData((val) => ({...val, id:orderInfo.orderId}))
getOrderPay()
}
}, [show, orderId])
}, [show, orderInfo])
//预存款选择
const advanceSelectData = useCallback((val) => {
@@ -88,10 +89,19 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param
}
}
//预付款
const advance_payment = useMemo(() => {
const price = formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)
const price = payInfo?.should_collect_money - payInfo?.amount_paid
return (
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{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])
//账期
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 < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View>
)
}, [payInfo])
@@ -133,16 +143,17 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param
</View>
<MCheckbox status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/>
</View>
<View className={styles.payment_list_item}>
{(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&&<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}>{payInfo?.account_period}天账期</View>
</View>
<View className={styles.payment_list_item_left_price}>可用额度 ¥{payInfo?.account_period_credit_available_line}</View>
{/* <View className={styles.payment_list_item_left_price}>可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View> */}
{account_peyment}
</View>
<MCheckbox status={submitData.payment_method == PaymentMethodAccountPeriod.value} onSelect={() => periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/>
</View>
</View>}
<View className={styles.payment_list_item} onClick={onShowOfflinePay}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
src/pages/order/index.tsx
+10 -2
View File
@@ -115,6 +115,12 @@ import styles from './index.module.scss'
setShowDesc(() => false)
}, [])
//支付所需数据
const payOrderInfo = useMemo(() => {
if(orderDetail)
return {orderId: orderDetail.should_collect_order_id, payment_method:orderDetail.payment_method }
}, [orderDetail])
//去付款
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
@@ -177,12 +183,14 @@ import styles from './index.module.scss'
//订单状态枚举
const {SaleOrderStatusCancel} = ORDER_STATUS
return (
<View className={styles.order_main}>
{/* <View className={styles.weight_memo_con}>
<WeightMemo/>
</View> */}
<OrderState list={orderDetail?.logistics_details} settle_mode={orderDetail?.settle_mode}/>
<OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
<View >
<AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
</View>
@@ -216,7 +224,7 @@ import styles from './index.module.scss'
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={orderDetail?.should_collect_order_id}/>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
<View className="common_safe_area_y"></View>
</View>
)