Skip to content

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

fix: 会员资金账户-待审核/支付提现

parent d41d6019
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 91 deletions
src/pages/payandSettle/amountAccountManage/checkWithdraw/checkDetail.tsx
View file @ 3b352d72
......@@ -21,13 +21,14 @@ const CheckDetail: React.FC<{}> = () => {
const refTrade = useRef<any>({})
const [checkForm] = Form.useForm();
const [visibleModal, setVisibleModal] = useState<boolean>(false)
const [dealRecord, setDealRecord] = useState<any>()
const [checkStatus, setCheckStatus] = useState<number>(4)
const [checkStatus, setCheckStatus] = useState<number>(1)
const [disableCheck, setDisableCheck] = useState<boolean>(false)
const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
const [ details, setDetails ] = useState<any>({ accountBalance: 0, lockBalance: 0})
const [details, setDetails] = useState<any>({ accountBalance: 0, lockBalance: 0})
const [bankDetail, setBankDetail] = useState<GetSettleAccountsCorporateAccountConfigResponse>()
const [tempStatus, setTempStatus] = useState<number>(0)
useEffect(() => {
getAccountInfo()
}, [])
......@@ -100,11 +101,12 @@ const CheckDetail: React.FC<{}> = () => {
checkForm.validateFields().then(values => {
setConfirmLoading(true)
// @ts-ignore
PublicApi.postPayMemberAssetAccountCheck({ id: urlParams.id ,...values}).then(res => {
PublicApi.postPayMemberAssetAccountCheck({ id: urlParams.tradeId ,...values}).then(res => {
if(res.code === 1000) {
setDisableCheck(true)
console.log(res.data)
console.log(values, res.data, 'value')
getAccountInfo()
refTrade.current.reload()
setTempStatus(values.status)
}else{
setDisableCheck(false)
}
......@@ -123,7 +125,7 @@ const CheckDetail: React.FC<{}> = () => {
title="审核提现"
onBack={() => history.goBack()}
backIcon={<ReutrnEle />}
extra={[
extra={ urlParams.preview ? [] : [
<Button
icon={<CheckSquareOutlined />}
key="1"
......@@ -137,7 +139,7 @@ const CheckDetail: React.FC<{}> = () => {
>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="外部流转">
<Steps progressDot current={1}>
<Steps progressDot current={urlParams.status === 2 || tempStatus === 1 ? 2 : 1}>
<Step title="申请提现" description="采购商" />
<Step title="审核提现" description="平台" />
<Step title="支付提现" description="平台" />
......@@ -295,15 +297,15 @@ const CheckDetail: React.FC<{}> = () => {
message: '请选择审核状态'
}
]}
initialValue={4}
initialValue={1}
>
<Radio.Group onChange={handleStatusChange}>
<Radio value={4}>审核通过</Radio>
<Radio value={3}>审核不通过</Radio>
<Radio value={1}>审核通过</Radio>
<Radio value={2}>审核不通过</Radio>
</Radio.Group>
</Form.Item>
{
checkStatus===3 && <Form.Item
checkStatus===2 && <Form.Item
name="remark"
label={'审核不通过原因'}
rules={[
......
src/pages/payandSettle/amountAccountManage/checkWithdraw/index.tsx
View file @ 3b352d72
......@@ -32,7 +32,9 @@ const CheckWithdraw: React.FC<{}> = () => {
key: 'memberAssetAccount',
className: 'commonPickColor',
render: (text, record) => <EyePreview
url={`/memberCenter/payandSettle/amountAccountManage/memberAccountManage/detail?id=${record.memberAssetAccount.id}`}
type="button"
handleClick={()=>clickUp({...record, preview: true})}
// url={`/memberCenter/payandSettle/amountAccountManage/memberAccountManage/detail?id=${record.memberAssetAccount.id}`}
>
{text}
</EyePreview>
......@@ -57,7 +59,9 @@ const CheckWithdraw: React.FC<{}> = () => {
title: '提现申请时间',
dataIndex: 'tradeTime',
key: 'tradeTime',
render: (t, r) => moment(t).format('YYYY-MM-DD HH:mm:ss')
render: (t, r) => moment(t).format('YYYY-MM-DD HH:mm:ss'),
// sorter: (a, b) => b.tradeTime - a.tradeTime,
// defaultSortOrder: "ascend"
},
{
title: '状态',
......@@ -68,7 +72,7 @@ const CheckWithdraw: React.FC<{}> = () => {
{
title: '操作',
dataIndex: 'option',
render: (t, r) => (<Button type='link' onClick={()=>clickUp(r)}>审核</Button>)
render: (t, r) => <>{r.status === 1 && <Button type='link' onClick={()=>clickUp(r)}>审核</Button>}</>
}
]
......@@ -86,7 +90,10 @@ const CheckWithdraw: React.FC<{}> = () => {
let params = {
tradeCode: r.tradeCode,
id: r.memberAssetAccount.id,
amount: r.tradeMoney
tradeId: r.id,
amount: r.tradeMoney,
preview: r.preview,
status: r.status,
}
history.push(`/memberCenter/payandSettle/amountAccountManage/checkWithdraw/detail?detailinfo=${btoa(JSON.stringify(params))}`)
}
......
src/pages/payandSettle/amountAccountManage/checkWithdraw/schema/index.tsx
View file @ 3b352d72
......@@ -63,14 +63,14 @@ export const searchSchema: ISchema = {
label: '审核不通过',
value: 3,
},
{
label: '提现成功',
value: 4,
},
{
label: '提现失败',
value: 5,
}
// {
// label: '提现成功',
// value: 4,
// },
// {
// label: '提现失败',
// value: 5,
// }
],
},
"[startTime,endTime]": {
......
src/pages/payandSettle/amountAccountManage/paymentWithdraw/components/CardCheckbox.tsx
View file @ 3b352d72
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import { Row, Col } from 'antd';
import styled from 'styled-components'
import { findItemAndDelete } from '@/utils'
......@@ -47,29 +47,31 @@ const RowStyleLayout = styled(props => <div {...props} />)`
interface IProps {
dataSource: any[],
cardChange: any,
name: string,
type?: string,
editable?: boolean,
}
const CardCheckBox = (props: IProps) => {
const { dataSource = [], type = 'checkbox', editable = true } = props
const { dataSource = [], type = 'checkbox', editable = true, cardChange, name } = props
const [value, setValue] = useState<any>([])
// const value: number[] = props.value || []
useEffect(() => {
let transport = {}
transport[name] = value[0]
cardChange(transport)
}, [value])
const handleChange = (id) => {
console.log(id)
if (!editable) {
return false
}
if (value.includes(id)) {
const newValue = findItemAndDelete(value, id)
setValue(newValue)
console.log(newValue)
// props.mutators.change(newValue)
} else {
// type === 'radio' ? props.mutators.change([id]) : props.mutators.change([...value, id])
console.log([id])
type === 'radio' ? setValue([id]) : setValue([...value, id])
}
}
......
src/pages/payandSettle/amountAccountManage/paymentWithdraw/index.less
View file @ 3b352d72
......@@ -76,4 +76,9 @@
.repayinfo {
background-color: #4279DF;
}
// 支付详情错误提示
.errorTips {
color: red;
}
\ No newline at end of file
src/pages/payandSettle/amountAccountManage/paymentWithdraw/index.tsx
View file @ 3b352d72
import React, { useState, useEffect, useRef } from 'react'
import { history } from 'umi'
import { Card, Space, Button, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { StandardTable } from 'god'
......@@ -9,11 +10,10 @@ import { createFormActions, FormEffectHooks } from '@formily/antd'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
import { searchSchema } from './schema'
import { FORM_FILTER_PATH } from '@/formSchema/const'
import { PlusOutlined } from '@ant-design/icons'
import EyePreview from '@/components/EyePreview'
import { DatePicker } from '@formily/antd-components'
import StatusTag from '@/components/StatusTag'
import { accountStatusMap, memberStatusMap } from '../../constant'
import { statusMap } from '../../constant'
import moment from 'moment'
const formActions = createFormActions();
......@@ -28,7 +28,9 @@ const PaymentWithdraw: React.FC<{}> = () => {
key: 'memberAssetAccount',
className: 'commonPickColor',
render: (text, record) => <EyePreview
url={`/memberCenter/payandSettle/amountAccountManage/memberAccountManage/detail?id=${record.id}`}
type="button"
handleClick={()=>clickUp({...record, preview: true})}
// url={`/memberCenter/payandSettle/amountAccountManage/memberAccountManage/detail?id=${record.id}`}
>
{text}
</EyePreview>
......@@ -45,8 +47,8 @@ const PaymentWithdraw: React.FC<{}> = () => {
},
{
title: '提现金额（元）',
dataIndex: 'memberRoleName',
key: 'memberRoleName',
dataIndex: 'tradeMoney',
key: 'tradeMoney',
render: (t, r) => `￥${t.toFixed(2)}`
},
{
......@@ -56,15 +58,15 @@ const PaymentWithdraw: React.FC<{}> = () => {
render: (t, r) => moment(t).format('YYYY-MM-DD HH:mm:ss')
},
{
title: '会员状态',
dataIndex: 'memberStatus',
key: 'memberStatus',
render: (t, r) => (<StatusTag title={memberStatusMap[t]['title']} type={memberStatusMap[t]['type']} />)
title: '状态',
dataIndex: 'status',
key: 'status',
render: (t, r) => (<StatusTag title={statusMap[t]['title']} type={statusMap[t]['type']} />)
},
{
title: '操作',
dataIndex: 'option',
render: (t, r) => (<Button type='link' onClick={()=>clickUp(r)}>支付</Button>)
render: (t, r) => <>{r.status !== 4 && <Button type='link' onClick={()=>clickUp(r)}>支付</Button>}</>
}
]
......@@ -79,7 +81,15 @@ const PaymentWithdraw: React.FC<{}> = () => {
}
const clickUp = (r: any) => {
console.log('通过')
let params = {
tradeCode: r.tradeCode,
id: r.memberAssetAccount.id,
payId: r.id,
amount: r.tradeMoney,
preview: r.preview,
status: r.status,
}
history.push(`/memberCenter/payandSettle/amountAccountManage/paymentWithdraw/detail?detailinfo=${btoa(JSON.stringify(params))}`)
}
return (
......
src/pages/payandSettle/amountAccountManage/paymentWithdraw/paymentDetail.tsx
View file @ 3b352d72
......@@ -8,23 +8,62 @@ import StatusTag from '@/components/StatusTag'
import cx from 'classnames'
import moment from 'moment'
import { ColumnType } from 'antd/lib/table/interface'
import { statusMap } from '../../constant'
import { memberStatusMap, operationMap, statusMap } from '../../constant'
import { CheckSquareOutlined } from '@ant-design/icons'
import CapitalCardCheckBox from './components/CardCheckbox'
import confirm_img from '@/assets/imgs/img_confirm.png'
import { PublicApi } from '@/services/api'
import { GetSettleAccountsCorporateAccountConfigResponse } from '@/services/SettleApi'
import { StandardTable } from 'god'
import alipay from '@/assets/imgs/alipay_icon.png';
import wxpay from '@/assets/imgs/wechat_icon.png';
import { yellowBright } from 'chalk'
const { Step } = Steps;
const { TextArea } = Input;
const PaymentDetail: React.FC<{}> = () => {
const refTrade = useRef<any>({})
const [visibleModal, setVisibleModal] = useState<boolean>(false)
const [loading, setLoading] = useState<boolean>(false)
const [dealRecord, setDealRecord] = useState<any>()
const [checkStatus, setCheckStatus] = useState<number>(4)
const [disableCheck, setDisableCheck] = useState<boolean>(false)
const [currentStep, setCurrentStep] = useState<number>(0)
const [payResult, setPayResult] = useState<number>(2)
const [payConfirmLoading, setPayConfirmLoading] = useState<boolean>(false)
const [details, setDetails] = useState<any>({ accountBalance: 0, lockBalance: 0})
const [bankDetail, setBankDetail] = useState<GetSettleAccountsCorporateAccountConfigResponse>()
const [payParam, setPayParam] = useState<any>()
const [errorTips, setErrorTips] = useState<any>({ tipMethod: false, tipChannel: false })
useEffect(() => {
getAccountInfo()
}, [])
const { detailinfo } = history.location.query
let urlParams: any = JSON.parse(atob(detailinfo))
const getAccountInfo = async () => {
let res = await PublicApi.getPayMemberAssetAccountGetMemberAssetAccount({id: urlParams.id})
const { code, data } = res
setDetails(data)
if(code === 1000) {
let bankRes = await PublicApi.getSettleAccountsCorporateAccountConfig({memberId: data.memberId + ''})
setBankDetail(bankRes.data)
}
}
// 获取提现处理记录
const fetchTradeData = (params) => {
return new Promise((resolve, reject) => {
PublicApi.getPayMemberAssetAccountGetCashOutRecordList({tradeCode: urlParams.tradeCode, ...params}).then(res => {
const { data } = res
resolve(data)
})
})
}
const columns: ColumnType<any>[] = [
{
title: '交易流水号',
......@@ -41,16 +80,13 @@ const PaymentDetail: React.FC<{}> = () => {
title: '交易金额(元)',
dataIndex: 'tradeMoney',
key: 'tradeMoney',
render: (t, r) => `${operationMap[r.operation]['operator']} ${t.toFixed(2)}`
},
{
title: '交易项目',
dataIndex: 'operation',
key: 'operation',
},
{
title: '交易金额(元)',
dataIndex: 'tradeMoney',
key: 'tradeMoney',
render: (t, r) => operationMap[t]['title']
},
{
title: '状态',
......@@ -66,7 +102,29 @@ const PaymentDetail: React.FC<{}> = () => {
];
const handleOK = () => {
setCurrentStep(1)
console.log(payParam, '确认支付参数')
setPayConfirmLoading(true)
// 1-1 支付成功 1-2确认是否已转账 1-other支付失败
if(!payParam?.payType){
setErrorTips({...errorTips, tipMethod: true})
}else if(!payParam?.payChannel){
setErrorTips({...errorTips, tipChannel: true})
}else{
setErrorTips({tipMethod: false, tipChannel: false})
PublicApi.postPayMemberAssetAccountPayCashOut({ id: urlParams.payId, ...payParam },{ctlType: 'none'}).then(res => {
if(res.code === 1000){
setCurrentStep(1)
setPayResult(1)
getAccountInfo()
refTrade.current.reload()
setDisableCheck(true)
}else{
setCurrentStep(1)
setPayResult(3)
}
setPayConfirmLoading(false)
})
}
}
const handleCancel = () => {
......@@ -75,12 +133,23 @@ const PaymentDetail: React.FC<{}> = () => {
const handleConfirm = () => {
console.log('确认')
setVisibleModal(false)
}
const handleBack = () => {
setCurrentStep(0)
}
const cardChange = (value) => {
console.log(value)
setPayParam(() => {
return {
...payParam,
...value,
}
})
}
const renderModalTitle = () => {
return (
......@@ -111,7 +180,7 @@ const PaymentDetail: React.FC<{}> = () => {
<Button key="back" onClick={handleCancel}>
取消
</Button>,
<Button key="submit" type="primary" loading={loading} onClick={handleOK}>
<Button key="submit" type="primary" loading={payConfirmLoading} onClick={handleOK}>
下一步
</Button>,
]
......@@ -151,7 +220,7 @@ const PaymentDetail: React.FC<{}> = () => {
title="支付提现"
onBack={() => history.goBack()}
backIcon={<ReutrnEle />}
extra={[
extra={ urlParams.preview ? [] : [
<Button
icon={<CheckSquareOutlined />}
key="1"
......@@ -165,7 +234,7 @@ const PaymentDetail: React.FC<{}> = () => {
>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="外部流转">
<Steps progressDot current={0}>
<Steps progressDot current={urlParams.status === 4 || payResult === 1 ? 3 : 2}>
<Step title="申请提现" description="采购商" />
<Step title="审核提现" description="平台" />
<Step title="支付提现" description="平台" />
......@@ -179,21 +248,23 @@ const PaymentDetail: React.FC<{}> = () => {
<Col span={8}>
<div className={styles.repayment}>
<div className={styles['repayment-left']}>
<div className={styles.statistic}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>提现金额(元)：</div>
<div style={{display: 'flex',alignItems:'flex-end'}}>
<InputNumber
disabled={true}
defaultValue={0}
defaultValue={urlParams.amount}
formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
parser={value => value.replace(/\$\s?|(,*)/g, '')}
className={styles['statistic-input']}
precision={2}
min={0}
/>
</div>
</div>
<div className={styles['repayment-end']}>
<span className={styles['repayment-time']}>
最多可以提现：¥10,000.00
最多可以提现：¥ {((details.accountBalance*100 - details.lockBalance*100)/100).toFixed(2)}
</span>
</div>
</div>
......@@ -201,12 +272,12 @@ const PaymentDetail: React.FC<{}> = () => {
</Col>
<Col span={16}>
<div className={styles.infoRight}>
<Row>
<Row>
<Col span={4}>
<p className={styles.rightTitle}>账户归属：</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>广州数商云网络科技有限公司</p>
<p className={styles.rightInfo}>{bankDetail?.name}</p>
</Col>
</Row>
<Row>
......@@ -214,7 +285,7 @@ const PaymentDetail: React.FC<{}> = () => {
<p className={styles.rightTitle}>银行账号：</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>6214 7812 3456 7891 1234</p>
<p className={styles.rightInfo}>{bankDetail?.bankAccount}</p>
</Col>
</Row>
<Row>
......@@ -222,7 +293,7 @@ const PaymentDetail: React.FC<{}> = () => {
<p className={styles.rightTitle}>开户行：</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>中国建设银行广州市分行营业部</p>
<p className={styles.rightInfo}>{bankDetail?.bankDeposit}</p>
</Col>
</Row>
</div>
......@@ -239,12 +310,12 @@ const PaymentDetail: React.FC<{}> = () => {
<div className={styles.statistic}>
<div className={styles['statistic-title']}>可用余额(元)：</div>
<div className={styles['statistic-amount']}>
{`100000`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
{`${((details.accountBalance*100 - details.lockBalance*100)/100).toFixed(2)}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
</div>
</div>
<div className={styles['repayment-end']}>
<span className={styles['repayment-time']}>
温州市龙昌皮具有限公司
{details?.memberName}
</span>
</div>
</div>
......@@ -252,12 +323,12 @@ const PaymentDetail: React.FC<{}> = () => {
</Col>
<Col span={16}>
<div className={styles.infoRight}>
<Row>
<Row>
<Col span={4}>
<p className={styles.rightTitle}>账户归属：</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>广州数商云网络科技有限公司</p>
<p className={styles.rightInfo}>{details?.parentMemberName}</p>
</Col>
</Row>
<Row>
......@@ -265,7 +336,7 @@ const PaymentDetail: React.FC<{}> = () => {
<p className={styles.rightTitle}>账户余额(元)：</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>10,000</p>
<p className={styles.rightInfo}>{details?.accountBalance?.toFixed(2)}</p>
</Col>
</Row>
<Row>
......@@ -273,7 +344,7 @@ const PaymentDetail: React.FC<{}> = () => {
<p className={styles.rightTitle}>锁定金额(元)：</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>0.00</p>
<p className={styles.rightInfo}>{details?.lockBalance?.toFixed(2)}</p>
</Col>
</Row>
<Row>
......@@ -281,7 +352,10 @@ const PaymentDetail: React.FC<{}> = () => {
<p className={styles.rightTitle}>账户状态：</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}><StatusTag type="success" title="正常" /></p>
{
details?.accountStatus &&
<StatusTag title={memberStatusMap[details.accountStatus]['title']} type={memberStatusMap[details.accountStatus]['type']} />
}
</Col>
</Row>
</div>
......@@ -291,7 +365,11 @@ const PaymentDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="提现处理记录">
<Table dataSource={dealRecord} columns={columns} />
<StandardTable
columns={columns}
currentRef={refTrade}
fetchTableData={(params: any) => fetchTradeData(params)}
/>
</Card>
</Space>
<Modal
......@@ -306,25 +384,50 @@ const PaymentDetail: React.FC<{}> = () => {
?
renderResult()
:
<CapitalCardCheckBox
dataSource={[
{
title: '线上支付',
items: [
{id:1, name: '支付宝', logoUrl: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'},
{id:2, name: '微信', logoUrl: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'},
{id:3, name: '银联', logoUrl: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'},
]
},
{
title: '线下支付',
items: [
{id:4, name: '线下转账线上确认'},
]
},
]}
type="radio"
/>
<>
<CapitalCardCheckBox
cardChange={(v)=>cardChange(v)}
name="payType"
dataSource={[
{
title: '支付方式',
items: [
{id:1, name: '支付宝', logoUrl: alipay},
{id:2, name: '微信', logoUrl: wxpay},
{id:3, name: '银联', logoUrl: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'},
]
},
// {
// title: '支付渠道',
// items: [
// {id: 4, name: '线下转账线上确认'},
// ]
// },
]}
type="radio"
/>
{
errorTips.tipMethod &&
<p className={styles.errorTips}>请选择支付方式</p>
}
<CapitalCardCheckBox
cardChange={(v)=>cardChange(v)}
name="payChannel"
dataSource={[
{
title: '支付渠道',
items: [
{id: 1, name: '线下转账线上确认'},
]
},
]}
type="radio"
/>
{
errorTips.tipChannel &&
<p className={styles.errorTips}>请选择支付渠道</p>
}
</>
}
</Modal>
</PageHeaderWrapper>
......
src/pages/payandSettle/amountAccountManage/paymentWithdraw/schema/index.tsx
View file @ 3b352d72
......@@ -47,15 +47,15 @@ export const searchSchema: ISchema = {
enum: [
{
label: '审核通过',
value: 1,
value: 2,
},
{
label: '提现成功',
value: 2,
value: 4,
},
{
label: '提现失败',
value: 3,
value: 5,
}
],
},
......
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