Skip to content

J
jinfa-platform
Commit 1bab887c authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix：处理订单积分支付跳转和生成微信二维码扫码支付

parent 42b124cb
Show whitespace changes
Inline Side-by-side
Showing with 159 additions and 56 deletions
src/components/NiceForm/components/DateRangePickerUnix.tsx
View file @ 1bab887c
......@@ -15,16 +15,18 @@ const DateRangePickerUnix = (props) => {
const handleChange = (dates, dateString) => {
if(dateString.length === 2) {
mutators.change([moment(dateString[0]).format('x'), moment(dateString[1]).format('x')]);
mutators.change([dateString[0] ? moment(dateString[0]).format('x') : null, dateString[1] ? moment(dateString[1]).format('x') : null]);
}
}
return (
<RangePicker
showTime={true}
style={{minWidth: 160}}
placeholder={placeholder}
onChange={handleChange}
format="YYYY-MM-DD HH:mm:ss"
{...rest}
/>
)
......
src/components/NiceForm/components/NumberRange.tsx
View file @ 1bab887c
......@@ -38,9 +38,9 @@ const NumberRange = (props) => {
const [rangeValue, setrangeValue] = useState([])
useEffect(() => {
if(rangeValue.length) {
// if(rangeValue.length) {
mutators.change(rangeValue);
}
// }
}, [rangeValue])
const loseBlur = (e, index) => {
......@@ -60,7 +60,8 @@ const NumberRange = (props) => {
textAlign: 'center'
}}
placeholder={placeholder[0] || '最小值'}
onBlur={(e) => loseBlur(e, 0)}
onChange={(e) => loseBlur(e, 0)}
value={value[0] || null}
/>
<Input
className="site-input-split"
......@@ -81,7 +82,8 @@ const NumberRange = (props) => {
textAlign: 'center',
}}
placeholder={placeholder[1] || '最大值'}
onBlur={(e) => loseBlur(e, 1)}
onChange={(e) => loseBlur(e, 1)}
value={value[1] || null}
/>
</Input.Group>
</RowStyleLayout>
......
src/constants/index.ts
View file @ 1bab887c
......@@ -919,7 +919,7 @@ export enum SaleOrderInsideWorkState {
READY_DELEVED_APPROVED,
/**
* 待审核物流单(新增物流单成功)
* 待确认物流单(新增物流单成功)
*/
DELIVERY_APPROVED_SUCCESS,
......@@ -1038,7 +1038,7 @@ export const SaleOrderInsideWorkStateTexts = {
23: '待确认回单',
24: '订单归档',
25: '待审核发货单',
26: '待审核物流单',
26: '待确认物流单',
27: '待手工发货'
}
......
src/pages/commodity/products/addChannelItem/selectProduct.tsx
View file @ 1bab887c
......@@ -220,12 +220,12 @@ const SelectProduct:React.FC<IProps> = (props) => {
confirm={handleOkAddTabs}
cancel={handleCancelAddTabs}
visible={visibleAddTabs}
resetModal={{destroyOnClose: true, forceRender: true}}
resetModal={{destroyOnClose: true}}
columns={productColumns}
rowSelection={productRowSelection}
fetchTableData={(params:any) => fetchProductData(params)}
currentRef={productRef}
forceRender={true}
forceRender={false}
tableProps={{
rowKey: 'id',
onRow: (record) => ({
......
src/pages/payandSettle/constant.ts
View file @ 1bab887c
......@@ -108,8 +108,8 @@ export const CREDIT_INNER_STATUS_BADGE_MAP = {
// 流转状态
export const moveStatusMap = {
'1': { title: '冻结', type: 'danger' },
'2': { title: '解冻', type: 'success' },
'2': { title: '冻结', type: 'danger' },
'1': { title: '解冻', type: 'success' },
}
// 会员状态
......
src/pages/transaction/components/orderPayModal/index.tsx
View file @ 1bab887c
......@@ -11,6 +11,7 @@ import { history } from 'umi'
import { useHttpRequest } from '@/hooks/useHttpRequest'
import { encryptedByAES } from '@/utils/cryptoAes'
import QRCode from 'qrcode'
import { cond } from 'lodash'
export interface OrderPayModalProps {
currentRef: any,
......@@ -68,19 +69,20 @@ const payTextList = ["",
'货到付款'
]
let timeChange; // Tiemr
const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
const formRef = useRef<any>({})
const { id } = usePageStatus()
const { data, payList, currentPayInfoId } = useContext(OrderDetailContext)
// const transformPayList: any = data ? transformPayData(data.paymentInformationResponses, payList) : []
const transformPayList: any = data ? formatting(payList, "payType") : []
const { run, loading } = useHttpRequest(PublicApi.postOrderPendingOrderPay)
const [visible, setVisible] = useState(false)
const [checked, setChecked] = useState<any>({})
const [current, setCurrent] = useState(0) // 0选择方式 1线下支付方式 2授信支付 3余额支付 4微信支付 5货到付款 1000清除
const [current, setCurrent] = useState(0) // 0选择方式 1线下支付方式 2授信支付 3余额支付 4微信支付 5货到付款 6支付宝 1000清除
const [payStep, setPayStep] = useState(0) // 支付模态框的步骤 0选方式 1下一步的具体操作 2输入支付密码
const mobilePayFlag = useRef(0) // 用于判断移动支付类型 4微信
const mobilePayFlag = useRef(0) // 用于判断移动支付类型 4微信6支付宝
const [qrLoading, setQrLoading] = useState(false)
const [code, setCode] = useState('')
const [qrCodeInfo, setQrCodeInfo] = useState({ generateCharacter: '', qrUrl: '' })
const [number, setNumber] = useState([0,1,2,3,4,5])
......@@ -89,6 +91,7 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
const [creditInfo, setCreditInfo] = useState<any>()
const [balanceInfo, setBalanceInfo] = useState<any>()
const [payOnReceived, setPayOnReceived] = useState<boolean>(false) // 是否要禁用到付方式
const [blankAccountInfo, setBlankAccountInfo] = useState<any>()
useEffect(() => {
if (currentRef) {
......@@ -99,6 +102,17 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
}
}, [])
//timer start
const [openTimer, setOpenTimer] = useState(0); // timer
useEffect(() => {
if(openTimer === 1) runTimerJump()
else clearInterval(timeChange)
}, [openTimer])
const runTimerJump = () => {
timeChange = setInterval(() => pollPayResult(), 3000)
}
//timer ending
useEffect(() => {
if (!visible) {
setCurrent(0)
......@@ -128,13 +142,33 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
QRCode.toDataURL(qrCodeInfo.generateCharacter).then((url:any) => {
setQrCodeInfo({...qrCodeInfo, qrUrl: url})
// 轮询支付结果
// setOpenTimer(1)
setOpenTimer(1)
})
.catch((err:any) => {
console.error(err)
})
}
const pollPayResult = () => {
if(qrCodeInfo.qrUrl) {
// @ts-ignore
PublicApi.getOrderPayResultsl({id, paymentInformationId: currentPayInfoId}).then(res => {
console.log(res)
if(res.code === 1000) {
if(res.data) {
setOpenTimer(0)
message.success('支付成功')
setTimeout(() => {
history.goBack()
}, 1000)
}
} else {
message.error(res.message)
}
})
}
}
const handleConfirm = () => {
console.log(data,'data')
if (current === 0) {
......@@ -142,6 +176,12 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
if (checked.id === 5) { // 线下支付
setCurrent(1)
setPayStep(1)
// 获取账户信息
PublicApi.getSettleAccountsCorporateAccountConfig({memberId: data.supplyMembersId}).then(res => {
if(res.code === 1000) {
setBlankAccountInfo(res.data)
}
})
} else if (checked.id === 6) { // 授信额度支付
console.log('选择了授信支付')
setIsSpin(true)
......@@ -181,15 +221,24 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
setPayStep(1)
} else if(checked.id === 2) {
console.log('选择了微信支付')
// 跳转扫码支付
history.push(`/pay?orderId=${btoa(JSON.stringify({ orderId: id, memberId: data.supplyMembersId, memberRoleId: data.supplyMembersRoleId }))}`)
// mobilePayFlag.current = 4
// setCurrent(4)
// 生成微信扫码支付
mobilePayFlag.current = 4
setCurrent(4)
setPayStep(1)
setQrLoading(true)
handleSubmitPay()
}
// else if(checked.id === 1) {
// console.log('选择了支付宝支付')
// // 生成支付宝扫码支付
// mobilePayFlag.current = 6
// setCurrent(6)
// setPayStep(1)
// setQrLoading(true)
// handleSubmitPay()
}
// }
else {
message.error('暂只支持线下支付、授信额度支付、余额支付方式、货到付款')
message.error('暂只支持线下支付、授信额度支付、余额支付、货到付款、微信支付方式')
}
} else {
message.error('请先选择支付方式')
......@@ -243,6 +292,7 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
} else {
setCurrent(0)
setPayStep(0)
setOpenTimer(0)
}
}
......@@ -269,11 +319,11 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
const res = await run(params)
if (res.code === 1000) {
if(mobilePayFlag.current !== 4) {
if(mobilePayFlag.current !== 4) { // 非微信
history.goBack()
} else {
console.log(res, '二维码信息')
setQrCodeInfo({ ...qrCodeInfo, generateCharacter: res.data })
setQrLoading(false)
}
}
}
......@@ -287,6 +337,7 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
const handleBack = () => {
setCurrent(0)
setPayStep(0)
setOpenTimer(0)
}
const handleOk = () => {
......@@ -341,9 +392,6 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
footer={renderModalFooter()}
destroyOnClose={true}
maskClosable={false}
// cancelText={current === 0 ? '取消' : '上一步'}
// okText={current === 0 ? '下一步' : '确认'}
// confirmLoading={loading}
>
{current === 0 &&
transformPayList && Object.entries(transformPayList).map(([key, value]) => <Row key={key} style={{ marginBottom: 24 }}>
......@@ -352,7 +400,7 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
<div className={style.radioBox}>
{
(value as any[]).map(v => {
if(payOnReceived && v.value === 7) { // 到付
if(payOnReceived && v.value === 7) { // 过滤到付
return null
} else {
return <div key={v.value} className={cx(style.payRadio, (checked && v.value === checked.id) ? style.active : '')} onClick={() => setChecked({ id: v.value, channel: v.channel })}>{v.label}</div>
......@@ -367,6 +415,9 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
{
current === 1 &&
<div>
<p>账号名称：{blankAccountInfo?.name}</p>
<p>银行账号：{blankAccountInfo?.bankAccount}</p>
<p>开 户 行：{blankAccountInfo?.bankDeposit}</p>
<p style={{fontWeight: "bold"}}>上传支付凭证</p>
<Upload
name='file'
......@@ -471,15 +522,21 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
}
{/* 微信扫码支付 */}
{
current === 4 &&
(current === 4 || current === 6) &&
<div>
<Spin spinning={qrLoading}>
<div className={style.qrCodeImage}>
<img src={qrCodeInfo.qrUrl} alt=""/>
{
qrCodeInfo.qrUrl && <>
<img src={qrCodeInfo.qrUrl} alt="扫码支付"/>
<div className={style.scanTips}>
<ScanOutlined className={style.scanIcon} />
<span>打开 {mobilePayFlag.current === 4 ? '微信' : '支付宝'}App<br />扫码完成支付</span>
</div>
</>
}
</div>
</Spin>
</div>
}
{/* 输入支付密码 payStep===2 */}
......
src/pages/transaction/purchaseOrder/index.tsx
View file @ 1bab887c
import React, { useState } from 'react'
import React, { useState, useRef } from 'react'
import { Card, Button, Modal } from 'antd'
import { StandardTable } from 'god'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
......@@ -12,6 +12,8 @@ import { FORM_FILTER_PATH } from '@/formSchema/const'
import { DatePicker } from '@formily/antd-components'
import Submit from '@/components/NiceForm/components/Submit'
import DateRangePickerUnix from '@/components/NiceForm/components/DateRangePickerUnix'
import NiceForm from '@/components/NiceForm'
import { createFormActions } from '@formily/antd'
// 订单查询
......@@ -23,10 +25,12 @@ const fetchTableData = async (params) => {
return data
}
const formActions = createFormActions();
// 最后一步开始调试 TODO
const PurchaseOrder: React.FC<PurchaseOrderProps> = (props) => {
const [saleVisible, setSaleVisible] = useState<any>(false)
const ref = useRef<any>({})
// 售后唤起弹窗 @todo
const handleSaleAfter = (id) => {
......@@ -51,43 +55,71 @@ const PurchaseOrder: React.FC<PurchaseOrderProps> = (props) => {
}
])
const controllerBtns = <Button style={{width: 140}} onClick={() => {}} type='default'>导出</Button>
return <PageHeaderWrapper>
<Card>
<StandardTable
fetchTableData={params => fetchTableData(params)}
columns={secondColumns}
rowKey={'orderNo'}
formilyLayouts={{
justify: 'space-between'
currentRef={ref}
controlRender={
<NiceForm
actions={formActions}
onSubmit={values => ref.current.reload(values)}
expressionScope={{
controllerBtns,
}}
formilyChilds={{
layouts: {
order: 2
},
children: <Button style={{width: 140}} onClick={() => {}} type='default'>导出</Button>
}}
formilyProps={{
layouts: {
order: 3
},
ctx: {
inline: false,
schema: tableListSchema,
effects: ($, actions) => {
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'orderNo',
FORM_FILTER_PATH,
);
},
components: {
)
}}
schema={tableListSchema}
components={{
DateRangePickerUnix,
Submit
}}
/>
}
}
tableProps={{
rowKey: 'orderNo',
}}
// rowKey={'orderNo'}
// formilyLayouts={{
// justify: 'space-between'
// }}
// formilyChilds={{
// layouts: {
// order: 2
// },
// children: <Button style={{width: 140}} onClick={() => {}} type='default'>导出</Button>
// }}
// formilyProps={{
// layouts: {
// order: 3
// },
// ctx: {
// inline: false,
// schema: tableListSchema,
// effects: ($, actions) => {
// useStateFilterSearchLinkageEffect(
// $,
// actions,
// 'orderNo',
// FORM_FILTER_PATH,
// );
// },
// components: {
// DateRangePickerUnix,
// Submit
// }
// }
// }}
/>
</Card>
</PageHeaderWrapper>
......
src/pages/transaction/purchaseOrder/readyPayOrder/detail/index.tsx
View file @ 1bab887c
import React, { useState, useCallback, useRef, useContext, useEffect } from 'react';
import { OrderDetailContext } from '../../../_public/order/context';
import { PublicApi } from '@/services/api';
import { history } from 'umi'
import { Button } from 'antd';
import OrderDetailHeader from '@/pages/transaction/components/OrderDetailHeader';
import OrderDetailWrapper from '@/pages/transaction/components/OrderDetailWrapper';
......@@ -11,14 +11,24 @@ import OrderPayModal from '@/pages/transaction/components/orderPayModal';
const ReadyConfirmContract: React.FC = () => {
const { formContext, id, detailList } = useOrderDetail({type: 'purchaseOrder'})
const {data, currentPayInfoId} = formContext
const payRef = useRef<any>({})
const handleClick = useCallback(() => {
// 处理积分支付跳转
if(data && currentPayInfoId){
if(data.paymentInformationResponses.length > 0){
let obj = data.paymentInformationResponses.filter(item => item.id === Number(currentPayInfoId))[0]
if(obj.channel === 0) {
history.push(`/pay?orderId=${btoa(JSON.stringify({ orderId: id, memberId: data.supplyMembersId, memberRoleId: data.supplyMembersRoleId }))}`)
} else {
payRef.current.setVisible(true)
}, [])
}
}
}
}, [data, currentPayInfoId])
const renderPayPrice = () => {
const {data, currentPayInfoId} = formContext
if(data){
if(data.paymentInformationResponses.length > 0){
let obj = data.paymentInformationResponses.filter(item => item.id === Number(currentPayInfoId))[0]
......
src/pages/transaction/purchaseOrder/readyPayOrder/model/useSelfTable.tsx
View file @ 1bab887c
......@@ -133,7 +133,7 @@ export const useSelfTable = (props) => {
{
title: '当前支付', align: 'center', dataIndex: 'currentPayments', width: 140, render: (text, record) => <>
<Row justify='space-between'>
<Col>{record.currentPayments} / {record.sum}</Col>
<Col>{record.currentPayments} / {record.sum} 次</Col>
{/* <Col>
{
record.currentPayments !== record.sum &&
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment