Skip to content

J
jinfa-platform
Commit 5b69310e authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

fix: 抽离还款跳窗、还款支付渠道从接口读取

parent c81985ca
Hide whitespace changes
Inline Side-by-side
Showing with 436 additions and 354 deletions
src/pages/payandSettle/creditApplication/components/DetailInfo/index.tsx
View file @ 5b69310e
......@@ -100,15 +100,6 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
setSubmitLoading(true);
const { fileList, ...rest } = quotaValues;
console.log({
applyId: +id,
creditId: creditId ? +creditId : 0,
fileList: fileList.map((item: any) => ({ name: item.name, fileUrl: item.data.url })),
...rest,
})
return;
PublicApi.postPayCreditApplyAddCreditApply({
applyId: +id,
creditId: creditId ? +creditId : 0,
......
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/index.tsx
View file @ 5b69310e
......@@ -14,21 +14,19 @@ import {
import { createFormActions, FormEffectHooks } from '@formily/antd';
import lodash from 'lodash';
import { PublicApi } from '@/services/api';
import { PAY_CHANNEL_WECHAT } from '@/constants';
import MellowCard from '@/components/MellowCard';
import { Pie } from '@/components/Charts';
import StatusTag from '@/components/StatusTag';
import NiceForm from '@/components/NiceForm';
import { repaymentModalSchema, uploadVoucherModalSchema } from './schema';
import { createEffects } from './effects/repayment';
import { uploadVoucherModalSchema } from './schema';
import TradeRecord, { RecordParams, RecordRes } from '../TradeRecord';
import WxPayModal from '../WxPayModal';
import RefundModal from '../RefundModal';
import styles from './index.less';
const repaymentFormActions = createFormActions();
const uploadVoucherFormActions = createFormActions();
const { onFormInit$ } = FormEffectHooks;
const { Option } = Select;
export interface BillDetailParams {
......@@ -259,7 +257,7 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
switch (tradeChannel) {
// 微信支付
case 1: {
case PAY_CHANNEL_WECHAT: {
this.setState({
wxPayPrice: values.repayQuota,
wxPayUrl: res.data.payQRCode,
......@@ -319,7 +317,6 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
};
beforeUploadVoucher = file => {
console.log(file.size)
if (file.size / 1024 > 200) {
message.warning('图片大小超过200K');
return Promise.reject();
......@@ -565,57 +562,14 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
</MellowCard>
</Col>
</Row>
<Modal
title="还款"
width={576}
<RefundModal
visible={visibleRepayment}
confirmLoading={repaymentSubmitLoading}
onOk={() => repaymentFormActions.submit()}
billInfo={billInfo}
onCancel={() => this.setState({ visibleRepayment: false })}
destroyOnClose
>
<NiceForm
previewPlaceholder=""
effects={($, actions) => {
const { setFieldState, setFieldValue } = actions;
onFormInit$().subscribe(() => {
// 初始化数据
setFieldState('repayQuota', fileState => {
fileState.value = billInfo.residueRepayQuota;
fileState.rules = fileState.rules.concat({
validator(value) {
return +value > billInfo.residueRepayQuota ? '输入值已超出还款金额' : '';
}
});
});
setFieldState('amountSlide', fileState => {
fileState.value = billInfo.residueRepayQuota;
fileState.props['x-component-props'].max = billInfo.residueRepayQuota;
fileState.props['x-component-props'].marks = {
0: {
label: 0,
},
[billInfo.residueRepayQuota]: {
label: billInfo.residueRepayQuota,
},
};
});
});
createEffects($, actions);
}}
expressionScope={{
}}
actions={repaymentFormActions}
schema={repaymentModalSchema}
onSubmit={this.handleRepaymentSubmit}
/>
</Modal>
onSubmit={this.handleRepaymentSubmit}
confirmLoading={repaymentSubmitLoading}
/>
<Modal
title="上传支付凭证"
......
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/schema/index.ts
View file @ 5b69310e
import { ISchema } from '@formily/antd';
import { UPLOAD_TYPE } from '@/constants';
export const repaymentModalSchema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelAlign: 'top',
full: true,
},
properties: {
repayQuota: {
type: 'string',
title: '还款金额',
'x-component-props': {
placeholder: '',
addonBefore: '¥',
},
'x-rules': [
{
required: true,
message: '请填写还款金额',
},
],
},
amountSlide: {
type: 'number',
title: '',
'x-component': 'range',
'x-component-props': {
min: 0,
// max: 20000,
},
},
tradeType: {
type: 'number',
enum: [
{
label: '线上支付方式',
value: 1,
},
{
label: '线下支付方式',
value: 2,
},
],
default: 1,
title: '选择支付方式',
'x-component-props': {
placeholder: '请选择',
},
'x-rules': [
{
required: true,
message: '请选择支付方式',
},
],
},
tradeChannel: {
type: 'string',
title: '选择支付渠道',
enum: [
{
label: '微信',
value: 1,
},
{
label: '支付宝',
value: 2,
},
{
label: '银联',
value: 3,
},
],
default: 1,
'x-component-props': {
placeholder: '请选择',
},
'x-rules': [
{
required: true,
message: '请选择支付渠道',
},
],
},
},
},
},
};
export const uploadVoucherModalSchema: ISchema = {
type: 'object',
properties: {
......
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/effects/repayment/useBusinessEffects.ts → src/pages/payandSettle/creditApplication/quotaMenage/detail/components/RefundModal/effects/useBusinessEffects.ts
View file @ 5b69310e
/*
* @Author: XieZhiXiong
* @Date: 2020-10-22 17:31:08
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-24 10:40:03
* @Description: 联动逻辑相关
*/
import { FormEffectHooks, FormPath } from '@formily/antd';
import { useLinkageUtils } from '@/utils/formEffectUtils';
const {
onFieldInputChange$,
onFieldValueChange$,
} = FormEffectHooks;
export const useBusinessEffects = (context, actions) => {
const {
getFieldValue,
setFieldValue,
getFieldState,
setFieldState,
} = actions;
const linkage = useLinkageUtils();
// 还款金额 联动 滑块条
onFieldInputChange$('repayQuota').subscribe(fieldState => {
linkage.value('amountSlide', +fieldState.value);
});
// 滑块条 联动 还款金额
onFieldInputChange$('amountSlide').subscribe(fieldState => {
linkage.value('repayQuota', `${fieldState.value}`);
});
// 支付方式 联动 支付渠道
onFieldValueChange$('tradeType').subscribe(fieldState => {
const { value } = fieldState;
if (value === 2) {
linkage.hide('tradeChannel');
} else {
linkage.show('tradeChannel');
}
});
/*
* @Author: XieZhiXiong
* @Date: 2020-10-22 17:31:08
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-24 10:40:03
* @Description: 联动逻辑相关
*/
import { FormEffectHooks, FormPath } from '@formily/antd';
import { useLinkageUtils } from '@/utils/formEffectUtils';
const {
onFieldInputChange$,
onFieldValueChange$,
} = FormEffectHooks;
export const useBusinessEffects = (context, actions) => {
const {
getFieldValue,
setFieldValue,
getFieldState,
setFieldState,
} = actions;
const linkage = useLinkageUtils();
// 还款金额 联动 滑块条
onFieldInputChange$('repayQuota').subscribe(fieldState => {
linkage.value('amountSlide', +fieldState.value);
});
// 滑块条 联动 还款金额
onFieldInputChange$('amountSlide').subscribe(fieldState => {
linkage.value('repayQuota', `${fieldState.value}`);
});
// 支付方式 联动 支付渠道
onFieldValueChange$('tradeType').subscribe(fieldState => {
const { value } = fieldState;
if (value === 2) {
linkage.hide('tradeChannel');
} else {
linkage.show('tradeChannel');
}
});
}
\ No newline at end of file
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/RefundModal/index.tsx 0 → 100644
View file @ 5b69310e
import React from 'react';
import { Modal } from 'antd';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { PublicApi } from '@/services/api';
import NiceForm from '@/components/NiceForm';
import { BillDetailData } from '../IntroduceRow';
import { repaymentModalSchema } from './schema';
import { createEffects } from './effects';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
const { onFormInit$ } = FormEffectHooks;
const repaymentFormActions = createFormActions();
interface RefundModalProps {
/**
* 是否可见
*/
visible: boolean,
/**
* 隐藏事件
*/
onCancel: () => void,
/**
* 确认按钮 loading
*/
confirmLoading?: boolean,
/**
* 账单信息
*/
billInfo: BillDetailData | null,
/**
* 提交事件
*/
onSubmit: (values: any) => void,
};
const RefundModal: React.FC<RefundModalProps> = (props) => {
const {
visible,
onCancel,
confirmLoading,
billInfo,
onSubmit,
} = props;
// 获取供应商支付渠道
const getPayChannels = (): Promise<any[]> => {
return new Promise((resolve, reject) => {
PublicApi.getPayCreditRepaymentList({
payType: `${1}`, // 支付方式：1 线上支付
memberId: `${billInfo.memberId}`,
memberRoleId: `${billInfo.memberRoleId}`,
}).then(res => {
if (res.code === 1000) {
const options =
res.data ?
res.data.map(item => ({
label: item.way,
value: item.wayId,
})) :
[];
resolve(options);
}
reject();
}).catch(() => {
reject();
});
});
};
const handleRepaymentSubmit = (values) => {
if (onSubmit) {
onSubmit(values);
}
};
return (
<Modal
title="还款"
width={576}
visible={visible}
confirmLoading={confirmLoading}
onOk={() => repaymentFormActions.submit()}
onCancel={onCancel}
destroyOnClose
>
<NiceForm
previewPlaceholder=""
effects={($, actions) => {
const { setFieldState, setFieldValue } = actions;
onFormInit$().subscribe(() => {
// 初始化数据
setFieldState('repayQuota', fileState => {
fileState.value = billInfo.residueRepayQuota;
fileState.rules = fileState.rules.concat({
validator(value) {
return +value > billInfo.residueRepayQuota ? '输入值已超出还款金额' : '';
}
});
});
setFieldState('amountSlide', fileState => {
fileState.value = billInfo.residueRepayQuota;
fileState.props['x-component-props'].max = billInfo.residueRepayQuota;
fileState.props['x-component-props'].marks = {
0: {
label: 0,
},
[billInfo.residueRepayQuota]: {
label: billInfo.residueRepayQuota,
},
};
});
});
createEffects($, actions);
console.log('123')
useAsyncSelect('tradeChannel', getPayChannels, ['label', 'value']);
}}
expressionScope={{
}}
actions={repaymentFormActions}
schema={repaymentModalSchema}
onSubmit={handleRepaymentSubmit}
/>
</Modal>
);
};
export default RefundModal;
\ No newline at end of file
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/RefundModal/schema/index.ts 0 → 100644
View file @ 5b69310e
import { ISchema } from '@formily/antd';
import { UPLOAD_TYPE } from '@/constants';
export const repaymentModalSchema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelAlign: 'top',
full: true,
},
properties: {
repayQuota: {
type: 'string',
title: '还款金额',
'x-component-props': {
placeholder: '',
addonBefore: '¥',
},
'x-rules': [
{
required: true,
message: '请填写还款金额',
},
],
},
amountSlide: {
type: 'number',
title: '',
'x-component': 'range',
'x-component-props': {
min: 0,
// max: 20000,
},
},
tradeType: {
type: 'number',
enum: [
{
label: '线上支付方式',
value: 1,
},
{
label: '线下支付方式',
value: 2,
},
],
default: 1,
title: '选择支付方式',
'x-component-props': {
placeholder: '请选择',
},
'x-rules': [
{
required: true,
message: '请选择支付方式',
},
],
},
tradeChannel: {
type: 'string',
title: '选择支付渠道',
enum: [
{
label: '微信',
value: 1,
},
{
label: '支付宝',
value: 2,
},
{
label: '银联',
value: 3,
},
],
default: 1,
'x-component-props': {
placeholder: '请选择',
},
'x-rules': [
{
required: true,
message: '请选择支付渠道',
},
],
},
},
},
},
};
\ No newline at end of file
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/WxPayModal/index.tsx
View file @ 5b69310e
/*
* @Author: XieZhiXiong
* @Date: 2020-12-16 11:07:13
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-16 15:09:21
* @Description: 微信支付弹窗
*/
import React, { useState, useEffect, useRef } from 'react';
import { Modal, Upload } from 'antd';
import QRCode from 'qrcode';
import { priceFormat } from '@/utils/numberFomat';
import WechatIcon from '@/assets/imgs/wechat_icon.png';
import styles from './index.less';
interface WxPayModalProps {
/**
* 需要生成 二维码的 地址
*/
url: string;
/**
* 支付金额
*/
price: number;
/**
* 是否可见
*/
visible: boolean;
/**
* 弹窗取消事件
*/
onCancel: () => void;
/**
* 轮训查询支付结果事件
*/
onCheckResult: () => Promise<{ success: Boolean }>;
/**
* 轮训查询支付结果成功
*/
onSuccess?: () => void;
/**
* 轮训查询支付结果失败
*/
onFail?: () => void;
};
const WxPayModal: React.FC<WxPayModalProps> = ({
url,
price,
visible,
onCancel,
onCheckResult,
onSuccess,
onFail,
}) => {
const [qrCode, setQrCode] = useState<string>('');
const getQRCode = async params => {
if (!params) {
return;
}
// 生成二维码
const res = await QRCode.toDataURL(params);
setQrCode(res);
};
let timer = useRef(null);
// 最多请求3600次，2000毫秒一次，二维码过期两小时
let count = 0;
const handleCheckResult = () => {
if (!onCheckResult) {
return;
}
count++;
if (count > 3600) {
return;
}
onCheckResult().then(res => {
if (!res.success) {
timer.current = setTimeout(() => {
handleCheckResult();
}, 2000);
console.log('timer', timer)
} else {
clearTimeout(timer.current);
timer = null;
if (onSuccess) {
onSuccess();
}
}
});
};
useEffect(() => {
getQRCode(url);
if (url) {
handleCheckResult();
}
return () => {
if (timer.current) {
clearTimeout(timer.current);
timer.current = null;
}
};
}, [url]);
useEffect(() => {
if (!visible) {
console.log('隐藏咯')
console.log('timer', timer.current)
if (timer.current) {
clearTimeout(timer.current);
timer.current = null;
}
}
}, [visible]);
const handleCancel = () => {
if (onCancel) {
onCancel();
}
};
return (
<Modal
title={(
<div className={styles.common_title}>
<div className={styles.common_title_icon}><img src={WechatIcon} /></div>
<span>微信支付</span>
</div>
)}
width={576}
visible={visible}
onCancel={handleCancel}
footer={null}
maskClosable={false}
destroyOnClose
>
<div className={styles.wechat_payway}>
<p className={styles.wechat_payway_title}>使用微信扫一扫下方二维码</p>
<div className={styles.wechat_payway_imgbox}>
{qrCode && <img src={qrCode} />}
</div>
<div className={styles.wechat_payway_needpay}>
<label>当前需支付：</label>
<span>{priceFormat(price)}</span>
<label>RMB</label>
</div>
</div>
</Modal>
);
};
/*
* @Author: XieZhiXiong
* @Date: 2020-12-16 11:07:13
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-30 13:50:05
* @Description: 微信支付弹窗
*/
import React, { useState, useEffect, useRef } from 'react';
import { Modal, Upload } from 'antd';
import QRCode from 'qrcode';
import { priceFormat } from '@/utils/numberFomat';
import WechatIcon from '@/assets/imgs/wechat_icon.png';
import styles from './index.less';
interface WxPayModalProps {
/**
* 需要生成 二维码的 地址
*/
url: string;
/**
* 支付金额
*/
price: number;
/**
* 是否可见
*/
visible: boolean;
/**
* 弹窗取消事件
*/
onCancel: () => void;
/**
* 轮训查询支付结果事件
*/
onCheckResult: () => Promise<{ success: Boolean }>;
/**
* 轮训查询支付结果成功
*/
onSuccess?: () => void;
/**
* 轮训查询支付结果失败
*/
onFail?: () => void;
};
const WxPayModal: React.FC<WxPayModalProps> = ({
url,
price,
visible,
onCancel,
onCheckResult,
onSuccess,
onFail,
}) => {
const [qrCode, setQrCode] = useState<string>('');
const getQRCode = async params => {
if (!params) {
return;
}
// 生成二维码
const res = await QRCode.toDataURL(params);
setQrCode(res);
};
let timer = useRef(null);
// 最多请求3600次，2000毫秒一次，二维码过期两小时
let count = 0;
const handleCheckResult = () => {
if (!onCheckResult) {
return;
}
count++;
if (count > 3600) {
return;
}
onCheckResult().then(res => {
if (!res.success) {
timer.current = setTimeout(() => {
handleCheckResult();
}, 2000);
} else {
clearTimeout(timer.current);
timer = null;
if (onSuccess) {
onSuccess();
}
}
});
};
useEffect(() => {
getQRCode(url);
if (url) {
handleCheckResult();
}
return () => {
if (timer.current) {
clearTimeout(timer.current);
timer.current = null;
}
};
}, [url]);
useEffect(() => {
if (!visible) {
if (timer.current) {
clearTimeout(timer.current);
timer.current = null;
}
}
}, [visible]);
const handleCancel = () => {
if (onCancel) {
onCancel();
}
};
return (
<Modal
title={(
<div className={styles.common_title}>
<div className={styles.common_title_icon}><img src={WechatIcon} /></div>
<span>微信支付</span>
</div>
)}
width={576}
visible={visible}
onCancel={handleCancel}
footer={null}
maskClosable={false}
destroyOnClose
>
<div className={styles.wechat_payway}>
<p className={styles.wechat_payway_title}>使用微信扫一扫下方二维码</p>
<div className={styles.wechat_payway_imgbox}>
{qrCode && <img src={qrCode} />}
</div>
<div className={styles.wechat_payway_needpay}>
<label>当前需支付：</label>
<span>{priceFormat(price)}</span>
<label>RMB</label>
</div>
</div>
</Modal>
);
};
export default WxPayModal;
\ No newline at end of file
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