Commit 9c0b358d authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

feat: 添加商户e账户管理页面

parent e1e52df2
......@@ -71,7 +71,19 @@ const settlementManageRoute = {
name: '详情',
hideInMenu: true,
component: '@/pages/settlementManage/capitalAccount/paymentWithdraw/paymentDetails'
}
},
// 商户e账户管理-通联
{
path: '/settlementManage/capitalAccount/eAccountLists',
name: '商户e账户管理-通联',
component: '@/pages/settlementManage/capitalAccount/eAccountLists'
},
{
path: '/settlementManage/capitalAccount/eAccountLists/detail',
name: '商户e账户管理-通联-详情',
hideInMenu: true,
component: '@/pages/settlementManage/capitalAccount/eAccountLists/eAccountDetails',
},
]
},
{
......
......@@ -162,7 +162,7 @@ const AccountDetail: React.FC<{}> = () => {
>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={cx(styles.repayment, styles.repayinfo)}>
<div className={styles['repayment-left']}>
......
......@@ -31,7 +31,7 @@ export const searchSchema: ISchema = {
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
justifyContent: 'end',
justifyContent: 'flex-start',
},
colStyle: {
marginRight: 20,
......
......@@ -152,7 +152,7 @@ const CheckDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户提现">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={styles.repayment}>
<div className={styles['repayment-left']}>
......@@ -211,7 +211,7 @@ const CheckDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={cx(styles.repayment, styles.repayinfo)}>
<div className={styles['repayment-left']}>
......
import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { history } from 'umi'
import { Card, Space, Row, Col, Button, Table, Modal, Form, Input } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ReutrnEle from '@/components/ReturnEle'
import styles from './index.less'
import StatusTag from '@/components/StatusTag'
import cx from 'classnames'
import moment from 'moment'
import { ColumnType } from 'antd/lib/table/interface'
import { memberStatusMap, moveStatusMap, operationMap, statusMap } from '../constant'
import { SettingOutlined, StopOutlined } from '@ant-design/icons'
import { validatorByte } from '@/utils/regExp'
import { StandardTable } from 'god'
import { getPayPlatFormAssetAccountGetAccountStatusRecord, getPayPlatFormAssetAccountGetAccountTradeRecord, getPayPlatFormAssetAccountGetPlatFormAssetAccount, postPayMemberAssetAccountUpdateMemberAssetAccountEnable } from '@/services/PayV2Api'
const { TextArea } = Input
const EAccountDetail: React.FC<{}> = () => {
const refTrade = useRef<any>({})
const [checkForm] = Form.useForm()
const [moveRecord, setMoveRecord] = useState<any>()
const [isDisabled, setIsDisabled] = useState<boolean>(false)
const [visibleModal, setVisibleModal] = useState<boolean>(false)
const [ details, setDetails ] = useState<any>({ accountBalance: 0, lockBalance: 0})
useEffect(() => {
getAccountInfo()
}, [])
const getAccountInfo = async () => {
const { id } = history.location.query
let res = await getPayPlatFormAssetAccountGetPlatFormAssetAccount({id})
const { code, data } = res
setDetails(data)
if(code === 1000){
let statusRecord = await getPayPlatFormAssetAccountGetAccountStatusRecord({memberAssetAccountId: data.id + ''})
setMoveRecord(statusRecord.data)
}
}
// 获取交易记录
const fetchTradeData = (params) => {
return new Promise((resolve, reject) => {
getPayPlatFormAssetAccountGetAccountTradeRecord({memberAssetAccountId: history.location.query.id + '', ...params}).then(res => {
const { data } = res
resolve(data)
})
})
}
const columns: ColumnType<any>[] = [
{
title: '交易流水号',
dataIndex: 'tradeCode',
key: 'tradeCode',
},
{
title: '交易时间',
dataIndex: 'tradeTime',
key: 'tradeTime',
render: (text: any) => moment(text).format("YYYY-MM-DD HH:mm:ss")
},
{
title: '交易金额(元)',
dataIndex: 'tradeMoney',
key: 'tradeMoney',
render: (t, r) => `${operationMap[r.operation]['operator']} ${t.toFixed(2)}`
},
{
title: '交易项目',
dataIndex: 'operation',
key: 'operation',
render: (t, r) => operationMap[t]['title']
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
render: (text:any, record:any) => (<StatusTag title={statusMap[text]['title']} type={statusMap[text]['type']} />)
},
{
title: '意见',
dataIndex: 'remark',
key: 'remark',
},
];
const moveColumns: ColumnType<any>[] = [
{
title: '序号',
dataIndex: 'id',
key: 'id',
render: (t, c, i) => i + 1
},
{
title: '操作角色',
dataIndex: ['memberAssetAccount','parentMemberManageRoleName'],
key: 'id',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
render: (text:any, record:any) => (<StatusTag title={moveStatusMap[text]['title']} type={moveStatusMap[text]['type']} />)
},
{
title: '操作',
dataIndex: 'operation',
key: 'operation',
render: (t, r)=> {
return t === 1 ? '冻结资金账户' : '解冻资金账户'
}
},
{
title: '操作时间',
dataIndex: 'createTime',
key: 'createTime',
render: (text: any) => moment(text).format("YYYY-MM-DD HH:mm:ss")
},
{
title: '意见',
dataIndex: 'remark',
key: 'remark',
},
];
const handleRelieve = () => {
setVisibleModal(true)
}
const handleCancel = () => {
setVisibleModal(false)
}
const handleOK = () => {
checkForm.validateFields().then(values => {
setVisibleModal(false)
postPayMemberAssetAccountUpdateMemberAssetAccountEnable({ id: details.id, status: details.accountStatus === 1 ? 2 : 1, ...values }).then(res => {
if(res.code === 1000)
getAccountInfo()
})
})
}
return (
<PageHeaderWrapper
title="账户详情"
onBack={() => history.goBack()}
backIcon={<ReutrnEle />}
extra={[
<Button
key="1"
onClick={handleRelieve}
type="primary"
icon={details?.accountStatus === 1 ? <SettingOutlined /> : <StopOutlined />}
disabled={isDisabled}
>
{details?.accountStatus === 1 ? '冻结' : '解冻'}
</Button>,
]}
>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={cx(styles.repayment, styles.repayinfo)}>
<div className={styles['repayment-left']}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>可用余额(元):</div>
<div className={styles['statistic-amount']}>
{`${((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>
</div>
</Col>
<Col span={16}>
<div className={styles.infoRight}>
<Row>
<Col span={4}>
<p className={styles.rightTitle}>账户归属:</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>{details?.parentMemberName}</p>
</Col>
</Row>
<Row>
<Col span={4}>
<p className={styles.rightTitle}>账户余额(元):</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>{details?.accountBalance?.toFixed(2)}</p>
</Col>
</Row>
<Row>
<Col span={4}>
<p className={styles.rightTitle}>锁定金额(元):</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>{details?.lockBalance?.toFixed(2)}</p>
</Col>
</Row>
<Row>
<Col span={4}>
<p className={styles.rightTitle}>账户状态:</p>
</Col>
<Col span={20}>
<p className={styles.rightInfo}>
{
details?.accountStatus &&
<StatusTag title={memberStatusMap[details.accountStatus]['title']} type={memberStatusMap[details.accountStatus]['type']} />
}
</p>
</Col>
</Row>
</div>
</Col>
</Row>
</Card>
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="交易记录">
<StandardTable
columns={columns}
currentRef={refTrade}
fetchTableData={(params: any) => fetchTradeData(params)}
/>
</Card>
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="流转记录">
<Table columns={moveColumns} dataSource={moveRecord} pagination={false} />
{/* <StandardTable
columns={moveColumns}
currentRef={refMove}
fetchTableData={(params: any) => fetchMoveData(params)}
tableProps={{
pagination: false
}}
/> */}
</Card>
</Space>
<Modal
title={details?.accountStatus === 1 ? '会员冻结' : '会员解冻'}
visible={visibleModal}
onOk={handleOK}
onCancel={handleCancel}
destroyOnClose={true}
>
<Form
layout="vertical"
form={checkForm}
>
<Form.Item
name="remark"
label={details?.accountStatus === 1 ? '会员冻结原因' : '会员解冻原因'}
rules={[
{
required: true,
message: '请填写原因'
},
{
validator: (r, v, c) => validatorByte(r, v, c, 120)
}
]}
>
<TextArea rows={6} placeholder="请填写原因" />
</Form.Item>
</Form>
</Modal>
</PageHeaderWrapper>
)
}
export default EAccountDetail
.repayment {
padding: 56px 24px 33px;
display: flex;
align-items: center;
background: #8777D9;
border-radius: 4px;
border: 1px solid #8777D9;
color: #fff;
&-left {
flex: 1;
}
&-right {
flex-shrink: 0;
}
&-end {
margin-top: 32px;
}
&-action {
margin-left: 24px;
}
&-time {
line-height: 22px;
margin-right: 8px;
font-weight: 400;
}
}
.statistic {
&-title {
margin-bottom: 28px;
line-height: 22px;
font-weight: 400;
}
&-amount {
line-height: 40px;
font-size: 32px;
font-weight: 500;
}
&-input {
display: block !important;
width: 180px !important;
line-height: 40px !important;
padding: 8px 0 !important;
font-size: 32px !important;
font-weight: 500 !important;
color: #fff !important;
background: none !important;
border-top: none !important;
border-right: none !important;
border-left: none !important;
border-image: initial !important;
outline: none !important;
border-bottom: 1px solid #fff !important;
}
}
.infoRight {
margin: 35px 0;
.rightTitle {
height: 36px;
font-weight: 400;
color: #6B778C;
line-height: 36px;
}
.rightInfo {
height: 36px;
font-weight: 500;
color: #303133;
line-height: 36px;
}
}
.repayinfo {
background-color: #4279DF;
}
// 账户详情右侧操作按钮
.rightActions {
display: flex;
margin-top: 70px;
.rightAction {
width: 88px;
height: 40px;
&:last-child{
background-color: #6B778C;
color: #fff;
margin-left: 24px;
}
}
}
\ No newline at end of file
import React, { useState, useRef } from 'react'
import { Card, Button, Input, Modal, Form } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { StandardTable } from 'god'
import { history } from 'umi'
import { ColumnType } from 'antd/lib/table/interface'
import NiceForm from '@/components/NiceForm'
import { createFormActions } from '@formily/antd'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
import { searchSchema } from './schema'
import { FORM_FILTER_PATH } from '@/formSchema/const'
import EyePreview from '@/components/EyePreview'
import { DatePicker } from '@formily/antd-components'
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect'
import StatusTag from '@/components/StatusTag'
import { accountMemberType, accountStatusMap, memberStatusMap } from '../constant'
import { validatorByte } from '@/utils/regExp'
import { getPayPlatFormAssetAccountGetPlatFormAssetAccountList, postPayPlatFormAssetAccountUpdateMemberAssetAccountEnable } from '@/services/PayV2Api'
import { getMemberManagePageitems } from '@/services/MemberV2Api'
const formActions = createFormActions();
const { TextArea } = Input;
const EAccountLists: React.FC<{}> = () => {
const ref = useRef<any>({})
const [checkForm] = Form.useForm()
const [currentRecord, setCurrentRecord] = useState<any>()
const [visibleModal, setVisibleModal] = useState<boolean>(false)
const columns: ColumnType<any>[] = [
{
title: '会员名称',
dataIndex: 'memberName',
key: 'memberName',
className: 'commonPickColor',
render: (text, record) => <>
<EyePreview
url={`/settlementManage/capitalAccount/eAccountLists/detail?id=${record.id}`}
>
{text}
</EyePreview>
</>
},
{
title: '会员类型',
dataIndex: 'memberType',
key: 'memberType',
render: (t, r) => accountMemberType[t]
},
{
title: '会员角色',
dataIndex: 'memberRoleName',
key: 'memberRoleName',
},
// {
// title: '会员等级',
// dataIndex: 'memberLevel',
// key: 'memberLevel',
// render: (t, r) => <LevelBrand level={r.level} />
// },
{
title: '账户余额',
dataIndex: 'accountBalance',
key: 'accountBalance',
render: text => `¥${text.toFixed(2)}`
},
{
title: '锁定余额',
dataIndex: 'lockBalance',
key: 'lockBalance',
render: text => `¥${text.toFixed(2)}`
},
{
title: '可用余额',
dataIndex: 'usableBalance',
key: 'usableBalance',
render: (t, r) => `¥${((r.accountBalance*100 - r.lockBalance*100)/100).toFixed(2)}`
},
{
title: '会员状态',
dataIndex: 'memberStatus',
key: 'memberStatus',
render: (t, r) => (<StatusTag title={memberStatusMap[t]['title']} type={memberStatusMap[t]['type']} />)
},
{
title: '账户状态',
dataIndex: 'accountStatus',
key: 'accountStatus',
render: (t, r) => (<><span className={accountStatusMap[t]['className']}></span>{accountStatusMap[t]['title']}</>)
},
{
title: '操作',
dataIndex: 'option',
render: (t: any, r: any) => (
// `/settlementManage/capitalAccount/accountLists/detail?id=${record.id}`
// handleRow(r)}>{r.accountStatus===1?'冻结':'解除'
<Button type='link' onClick={() => history.push(`/settlementManage/capitalAccount/eAccountLists/detail?id=${r.id}&status=${r.accountStatus}`)}>{r.accountStatus===1?'冻结':'解除'}</Button>
)
}
]
const handleRow = (data: any) => {
setCurrentRecord(data)
setVisibleModal(true)
}
const fetchData = (params: any) => {
console.log(params)
return new Promise((resolve, reject) => {
let obj = { ...params }
getPayPlatFormAssetAccountGetPlatFormAssetAccountList(obj).then(res => {
resolve(res.data)
})
})
}
// 会员弹框筛选select值
const fetchSelectOptions = async () => {
const res = await getMemberManagePageitems()
if (res.code === 1000) {
const { data = {} }: any = res
const {
memberTypes = [],
roles = [],
levels = [],
} = data
return {
memberType: memberTypes.map(item => ({ label: item.memberTypeName, value: item.memberTypeId })),
memberRoleId: roles.map(item => ({ label: item.roleName, value: item.roleId })),
memberLevel: levels.map(item => ({ label: item.levelTag, value: item.level })),
}
}
return {}
}
const handleCancel = () => {
setVisibleModal(false)
}
const handleOK = () => {
checkForm.validateFields().then(values => {
setVisibleModal(false)
postPayPlatFormAssetAccountUpdateMemberAssetAccountEnable({ id: currentRecord.id, status: currentRecord.accountStatus === 1 ? 2 : 1, ...values }).then(res => {
if(res.code === 1000)
ref.current.reload()
})
})
}
return (
<PageHeaderWrapper>
<Card>
<StandardTable
columns={columns}
currentRef={ref}
tableProps={{ rowKey: "id" }}
fetchTableData={(params: any) => fetchData(params)}
controlRender={
<NiceForm
components={{
RangePicker: DatePicker.RangePicker
}}
actions={formActions}
onSubmit={values => ref.current.reload(values)}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'memberName',
FORM_FILTER_PATH,
);
useAsyncInitSelect(
['memberType', 'memberRoleId', 'memberLevel'],
fetchSelectOptions,
);
}}
schema={searchSchema}
/>
}
/>
</Card>
<Modal
title={currentRecord?.accountStatus === 1 ? '会员冻结' : '会员解冻'}
visible={visibleModal}
onOk={handleOK}
onCancel={handleCancel}
destroyOnClose={true}
>
<Form
layout="vertical"
form={checkForm}
>
<Form.Item
name="remark"
label={currentRecord?.accountStatus === 1 ? '会员账户冻结原因' : '会员账户解冻原因'}
rules={[
{
required: true,
message: '请填写原因'
},
{
validator: (r, v, c) => validatorByte(r, v, c, 120)
}
]}
>
<TextArea rows={6} placeholder="请填写原因" />
</Form.Item>
</Form>
</Modal>
</PageHeaderWrapper>
)
}
export default EAccountLists
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const searchSchema: ISchema = {
type: 'object',
properties: {
mageLayout: {
type: 'object',
'x-component': 'mega-layout',
properties: {
topLayout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
},
properties: {
memberName: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '会员名称',
align: 'flex-left',
},
},
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
justifyContent: 'flex-start',
},
colStyle: {
marginRight: 20,
},
},
properties: {
memberType: {
type: 'string',
enum: [],
"x-component-props": {
placeholder: '请选择会员类型',
style: {
width: 174
}
}
},
memberRoleId: {
type: 'string',
enum: [],
"x-component-props": {
placeholder: '请选择会员角色',
style: {
width: 174
}
}
},
// memberLevel: {
// type: 'string',
// enum: [],
// "x-component-props": {
// placeholder: '请选择会员等级',
// style: {
// width: 174
// }
// }
// },
memberStatus: {
type: 'string',
'x-component-props': {
placeholder: '会员状态',
style: { width: '174px' },
},
enum: [
{
label: '正常',
value: 1,
},
{
label: '已冻结',
value: 2,
}
],
},
accountStatus: {
type: 'string',
'x-component-props': {
placeholder: '账户状态',
style: { width: '174px' },
},
enum: [
{
label: '正常',
value: 1,
},
{
label: '已冻结',
value: 2,
}
],
},
submit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
},
},
},
},
},
},
};
export const rechargeSchema: ISchema = {
type: 'object',
properties: {
NO_SUBMIT: {
type: 'object',
"x-component": "mega-layout",
"x-component-props": {
labelAlign: 'left',
labelCol: 24,
wrapperCol: 24
},
properties: {
money: {
type: "string",
title: '充值金额',
'x-component-props': {
addonBefore: "¥"
},
"x-rules": [
{
required: true,
message: '请输入充值金额'
},
]
},
type: {
type: "array:number",
"x-component": 'CardCheckBox',
"x-component-props": {
dataSource: [],
type: 'radio' // CardCheckBox 单选模式
},
"title": "充值方式",
"x-rules": [
{
required: true,
message: '请选择充值方式'
}
],
}
}
}
}
}
......@@ -246,7 +246,7 @@ const PaymentDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户提现">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={styles.repayment}>
<div className={styles['repayment-left']}>
......@@ -305,7 +305,7 @@ const PaymentDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={cx(styles.repayment, styles.repayinfo)}>
<div className={styles['repayment-left']}>
......
......@@ -31,7 +31,7 @@ export const searchSchema: ISchema = {
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
justifyContent: 'end',
justifyContent: 'flex-start',
},
colStyle: {
marginRight: 20,
......
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