Commit a9d64e94 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫

🐞 fix(Card组件): 修改大小写

parent e100eae5
......@@ -77,7 +77,7 @@ const memberCenterRoute = {
// AuthConfigRoute,
// MemberRoute,
// HandlingRoute,
PayandSettleRoute,
// PayandSettleRoute,
marketingRoute,
...asyncRoutes,
{
......
import React, { useState, useEffect } from 'react';
import { Space, Radio, Form } from 'antd';
import '../../components/index.less'
interface params {
name: string,
value: number,
selectId: number,
onChange: Function
}
const PayWayRadio: React.FC<params> = (props) => {
const { value, selectId, onChange, name } = props;
const [form] = Form.useForm();
useEffect(() => {
form.resetFields()
}, [value])
const options = [{ label: '是', value: 1 }, { label: '否', value: 0 }]
return (
<Space size={49}>
<span>是否开启{name}</span>
<Form form={form}>
<Form.Item
name={`radio-${selectId}`}
noStyle
initialValue={value}
>
<Radio.Group
options={options}
className='radio-group-box'
size="small"
buttonStyle="solid"
optionType="button"
onChange={(e) => onChange(e)}
/>
</Form.Item>
</Form>
</Space>
)
}
export default PayWayRadio;
\ No newline at end of file
import React, { useState } from 'react';
import { Table, Button } from 'antd';
import { ColumnType } from 'antd/lib/table/interface';
import { PlusOutlined } from '@ant-design/icons';
import SetUpModal from './setUpModal';
interface payWayTableParams {
name?: string,
payParametersList?: any,
payParametersListResponses?: any,
visible?: boolean,
onGet?: Function,
onType?: number,
onDel?: Function,
onEdit?: Function,
id?: number
}
const PayWayTable: React.FC<payWayTableParams> = (props) => {
const [modalvisible, setmodalvisible] = useState<boolean>(false);
const [type, setType] = useState<number>(); // 1.
const [edit, setedit] = useState<any>({});
const [modifyIndex, setModifyIndex] = useState<any>(0)
const [modify, setmodify] = useState<boolean>(false);
const { name, payParametersListResponses, payParametersList, visible, onType, onGet, onDel, onEdit, id } = props;
const columns: ColumnType<any>[] = [
{
title: '参数代码',
key: 'code',
dataIndex: 'code'
},
{
title: '参数值',
key: 'value',
dataIndex: 'value'
},
{
title: '参数描述',
key: 'describe',
dataIndex: 'describe'
},
{
title: '操作',
key: 'options',
dataIndex: 'options',
render: (text: any, record: any, index: number) => <>
<Button type='link' onClick={() => { setedit(record); setmodalvisible(true); setModifyIndex(index); setmodify(true); setType(id) }}>编辑</Button>
<Button type='link' onClick={() => onDel(record.type, index)}>删除</Button>
</>
}
]
const handleOk = (value: any, idx: number) => {
console.log(value, type)
let idType = null;
switch (type) {
case 1:
idType = 1
break;
case 2:
idType = 3
break;
case 3:
idType = 2
break;
}
if (!modify) {
onGet(value, idType)
} else {
onEdit(value, idType, modifyIndex)
}
setedit({});
setmodalvisible(false);
}
return (
<>
{
visible &&
<>
<div style={{ borderLeft: '2px solid #00B37A', margin: '41px 0 8px', padding: '1px 5px' }}>{name}参数配置</div>
<Table
columns={columns}
dataSource={payParametersListResponses}
rowKey={(record: any, index: number) => index}
pagination={false}
/>
<Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => { setmodalvisible(true); setType(id); setmodify(false) }} type='dashed'>新增参数配置</Button>
{
id !== 2 &&
<>
<div style={{ borderLeft: '2px solid #00B37A', margin: '41px 0 8px', padding: '1px 5px' }}>{name}转账到银行卡参数配置</div>
<Table
columns={columns}
dataSource={payParametersList}
rowKey={(record: any, index: number) => index}
pagination={false}
/>
<Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => { setmodalvisible(true); setType(3); setmodify(false) }} type='dashed'>新增参数配置</Button>
</>
}
</>
}
<SetUpModal
onType={onType}
type={type}
modalvisible={modalvisible}
edit={edit}
onOK={(value) => handleOk(value, type)}
onCancel={() => { setmodalvisible(false); setedit({}); }}
/>
</>
)
}
export default PayWayTable;
import React, { useEffect, useState } from 'react';
import { Modal, Form, Select, Input } from 'antd';
import usePayTypeEnum from './usePayTypeEnum';
const { Option } = Select;
const { TextArea } = Input;
interface setUpModalParams {
type?: number,
modalvisible?: boolean,
onOK?: Function,
onCancel?: Function,
onType?: number,
edit?: any
}
const layout: any = {
colon: false,
labelCol: { style: { width: '100px' } },
labelAlign: "left"
};
const SetUpModal: React.FC<setUpModalParams> = (props) => {
const [form] = Form.useForm();
const { payTypeEnum } = usePayTypeEnum();
const { modalvisible, onOK, onCancel, type, edit } = props;
const [option, setOption] = useState<any>({})
const handleOk = () => {
form.validateFields().then(res => {
let idType = null;
switch (type) {
case 1:
idType = 1
break;
case 2:
idType = 3
break;
case 3:
idType = 2
break;
}
const obj = {
id: edit.id ? edit.id : undefined,
code: option.children ? option.children : edit.code,
value: res.value,
describe: res.describe,
type: idType,
payWayCodeTypeEnum: res.code
}
onOK(obj)
form.resetFields();
}).catch(error => {
console.log(error)
})
}
const handleChange = (e: any, option: any) => {
setOption(option)
}
useEffect(() => {
if (Object.keys(edit).length > 0) {
form.setFieldsValue({
code: edit.payWayCodeTypeEnum,
value: edit.value,
describe: edit.describe
})
}
}, [edit])
return (
<Modal
width={576}
title={`${Object.keys(edit).length > 0 ? `编辑` : '新增'}参数配置`}
visible={modalvisible}
onOk={handleOk}
onCancel={() => { onCancel(); form.resetFields(); }}
>
<Form
form={form}
{...layout}
>
<Form.Item name='code' label='参数代码' rules={[{ required: true, message: '请选择参数代码' }]}>
<Select onChange={handleChange}>
{
payTypeEnum.map(item => (
<Option key={item.value} payWayCodeTypeEnum={item.value} value={item.value}>{item.label}</Option>
))
}
</Select>
</Form.Item>
<Form.Item name='value' label='参数值' rules={[{ required: true, message: '请输入参数值' }]}>
<Input maxLength={200} />
</Form.Item>
<Form.Item name='describe' label='参数描述'>
<TextArea maxLength={200} rows={4} />
</Form.Item>
</Form>
</Modal>
)
}
export default SetUpModal;
import { PublicApi } from '@/services/api';
import React, { useState, useEffect, useRef } from 'react';
const usePayTypeEnum = () => {
const [payTypeEnum, setPayTypeEnum] = useState<any>([])
const ref = useRef(payTypeEnum);
useEffect(() => {
const getPayWayType = async () => {
await PublicApi.getPayGetPayWayCodeTypeEnum().then(res => {
if(res.code === 1000) {
const { data } = res;
const payWay: any[] = []
data.forEach(v => {
payWay.push({
label: v.name,
value: v.type
})
})
ref.current = payWay
setPayTypeEnum(ref.current)
}
})
}
getPayWayType();
},[])
return { payTypeEnum };
}
export default usePayTypeEnum;
export const res = {
"code": 1000,
"message": "操作成功",
"data": [
{
"payType": 1,
"payTypeName": "线上支付",
"channels": [
{
"payChannel": 1,
"payChannelName": "支付宝",
"parameters": []
},
{
"payChannel": 2,
"payChannelName": "微信",
"parameters": []
},
{
"payChannel": 3,
"payChannelName": "银联",
"parameters": []
},
{
"payChannel": 4,
"payChannelName": "余额支付",
"parameters": []
}
],
"payChannels": [
1
]
},
{
"payType": 2,
"payTypeName": "线下支付",
"channels": [
{
"payChannel": 5,
"payChannelName": "线下支付线上确认",
"parameters": []
}
],
"payChannels": [
5
]
}
],
"time": 1629166786635
}
import React, { useEffect, useState, Fragment, useCallback } from 'react';
import React, { useEffect, useState, Fragment } from 'react';
import PeripheralLayout from '@/pages/transaction/components/detailLayout';
import { ColumnType } from 'antd/lib/table/interface';
import { Tabs, Form, Button, Radio, Table, Space, Image, Popconfirm } from 'antd';
import { PublicApi } from '@/services/api';
import Card from '@/pages/transaction/components/Card';
import Card from '@/pages/transaction/components/card';
import style from './index.less';
import { PlusOutlined, SaveOutlined } from '@ant-design/icons';
import ModalLayout from './components/modal';
import { isEmpty } from 'lodash';
import { res } from './data';
import alipay from '@/assets/icons/alipay_icon.png';
import wechat from '@/assets/icons/wechat_icon.png';
......
This diff is collapsed.
/*
* @Author: HJX
* @Date: 2020-11-19 15:25:54
* @LastEditors: HJX
* @LastEditTime: 2020-11-19 15:25:54
*/
import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import { Button, Card, Tabs, Space, Input, InputNumber, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { PublicApi } from '@/services/api';
import PayWayRadio from './components/payWayRadio';
import PayWayTable from './components/payWayTable';
const { TabPane } = Tabs
const PayWaySetTemplate: React.FC<{}> = () => {
const [config, setconfig] = useState<any>([]);
const [payItem, setPayItem] = useState<any>([]);
// const [step, setStep] = useState<Array<number>>([]);
const [obj, setObj] = useState<any>({});
const payWayConfigInfo = () => {
// 支付配置信息
return new Promise(resolve => {
PublicApi.getPayMemberPayConfig().then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
})
}
useEffect(() => {
// 支付配置信息
payWayConfigInfo().then((res: any) => {
const arr: any[] = [];
console.log(res)
res.forEach((item: any) => {
arr.push({
id: item.id,
way: item.way,
isPitchOn: item.isPitchOn ? item.isPitchOn : 0,
payType: item.payType,
payParametersList: item.payParametersList ? item.payParametersList : [],
payParametersAddListRequests: item.payParametersListResponses ? item.payParametersListResponses : []
})
})
setconfig([...res]);
setPayItem([...arr]);
})
}, [])
const onChangeRaido = (e: any, index: number) => {
const data = [...payItem];
payItem[index].isPitchOn = e.target.value;
setPayItem(data);
}
const onGet = (value: any, type: number, idx: number) => {
const data = [...payItem];
if (type === 2) {
data[idx].payParametersList = [...data[idx].payParametersList, value]
} else {
data[idx].payParametersAddListRequests = [...data[idx].payParametersAddListRequests, value]
}
setPayItem(data);
}
/**删除 */
const onDel = (value: any, index: number, idx: number) => {
console.log(value, index, idx, 10086)
const data = [...payItem];
if (Number(value) === 2) {
data[idx].payParametersList.splice(index, 1);
data[idx].payParametersList = [...data[idx].payParametersList]
} else {
data[idx].payParametersAddListRequests.splice(index, 1);
data[idx].payParametersAddListRequests = [...data[idx].payParametersAddListRequests]
}
setPayItem([...data]);
}
/**编辑 */
const onEdit = (value: any, type: number, index: number, idx: number) => {
const data = [...payItem];
if (type === 2) {
data[idx].payParametersList[index] = { ...value };
data[idx].payParametersList = [...data[idx].payParametersList]
} else {
data[idx].payParametersAddListRequests[index] = { ...value };
data[idx].payParametersAddListRequests = [...data[idx].payParametersAddListRequests]
}
setPayItem(data);
}
/**保存更新 */
const onHnadleSubmit = () => {
let conditions = false;
let wayName = '';
try {
payItem.forEach(item => {
if (item.id === 2 && item.isPitchOn === 1) {
console.log(1)
if (item.payParametersAddListRequests.length > 0) {
conditions = true
} else {
conditions = false
wayName = `${item.way}缺少支付参数配置`
throw new Error
}
} else if (item.id === 1 && item.isPitchOn === 1) {
if (item.payParametersAddListRequests.length > 0 && item.payParametersList.length > 0) {
conditions = true
} else {
conditions = false
wayName = `${item.way}缺少支付参数配置`
throw new Error
}
} else if (item.id === 6 && item.isPitchOn === 1) {
if (item.payParametersAddListRequests.length > 0) {
const data = item.payParametersAddListRequests[0]
if (data.code && data.value && data.describe) {
conditions = true
} else {
conditions = false
wayName = `请配置${item.way}的参数`
throw new Error
}
}
} else {
conditions = true
}
})
} catch {
message.error(wayName)
}
if (conditions) {
PublicApi.postPayMemberQueryPlatformUpdate({
platformPayWays: payItem
}).then(res => {
if (res.code === 1000) {
history.push('/memberCenter/payandSettle/paySetting/payParamsSetting')
}
})
}
}
/** */
const handleBlur = (e, name, idx) => {
console.log(e)
const data = [...payItem]
const payParametersAddListRequests = data[idx].payParametersAddListRequests;
if(payParametersAddListRequests.length === 0) {
payParametersAddListRequests.push({code: '', value: '', describe: ''})
}
payParametersAddListRequests.map(item => {
for(let key in item) {
if(key === name) {
if(name === 'value') {
item[key] = e
} else {
item[key] = e.target.value
}
}else {
if(name === 'value') {
item[name] = e
} else {
item[name] = e.target.value
}
}
}
item.type = 6;
})
data[idx].payParametersAddListRequests = [...payParametersAddListRequests]
console.log(payParametersAddListRequests, 10086)
setPayItem(data)
}
return (
<PageHeaderWrapper
extra={<Button type='primary' onClick={onHnadleSubmit}>保存</Button>}
>
<Card>
<Tabs type="card">
{config.map((item: any, idx: number) =>
<TabPane tab={item.way} key={item.id} forceRender>
<>
{
payItem.length > 0 &&
<>
<PayWayRadio
name={payItem[idx].way}
value={payItem[idx].isPitchOn}
selectId={payItem[idx].id}
onChange={(value) => onChangeRaido(value, idx)}
/>
{(payItem[idx].id === 1 || payItem[idx].id === 2) &&
<PayWayTable
id={payItem[idx].id}
onType={payItem[idx].payType}
name={payItem[idx].way}
payParametersList={payItem[idx].payParametersList}
payParametersListResponses={payItem[idx].payParametersAddListRequests}
visible={!!payItem[idx].isPitchOn}
onGet={(value, t) => onGet(value, t, idx)}
onDel={(value, index) => onDel(value, index, idx)}
onEdit={(value, type, index) => onEdit(value, type, index, idx)}
/>
}
{
(payItem[idx].id === 6 && !!payItem[idx].isPitchOn) &&
<div style={{ marginTop: 42 }}>
<Space direction="horizontal" size={16}>
初始申请额度不超过
<Input onChange={(e) => handleBlur(e, 'code', idx)} value={payItem[idx].payParametersAddListRequests.length > 0 ? payItem[idx].payParametersAddListRequests[0].code : undefined} addonBefore="¥" />
允许满<InputNumber min={1} onChange={(e) => handleBlur(e, 'value', idx)} value={payItem[idx].payParametersAddListRequests.length > 0 ? payItem[idx].payParametersAddListRequests[0].value : undefined} />
天后申请上调<Input onChange={(e) => handleBlur(e, 'describe', idx)} value={payItem[idx].payParametersAddListRequests.length > 0 ? payItem[idx].payParametersAddListRequests[0].describe : undefined} addonAfter="%" />
</Space>
</div>
}
</>
}
</>
</TabPane>
)}
</Tabs>
</Card>
</PageHeaderWrapper>
)
};
export default PayWaySetTemplate;
......@@ -81,7 +81,7 @@ const OtherExplainLayout: React.FC<OtherExplainLayoutProps> = (props: any) => {
</Form.Item>
<Form.Item
label='询价联系人'
name='contacts'
name='contactName'
rules={[{ required: true, message: '请选择询价联系人' }]}
>
<Input.Search onSearch={() => toggle(true)} readOnly enterButton={<Button style={{ height: '31.19px' }} icon={<LinkOutlined />}>选择</Button>} />
......@@ -104,7 +104,7 @@ const OtherExplainLayout: React.FC<OtherExplainLayoutProps> = (props: any) => {
</Col>
<Col span={16}>
<Form.Item
name='contactsPhone'
name='contactPhone'
rules={[{ required: true, message: '请选择' }]}
>
<Input type='number' maxLength={11} />
......
......@@ -27,7 +27,8 @@ interface TradeTermsLayoutProps {
const TradeTermsLayout: React.FC<TradeTermsLayoutProps> = (props: any) => {
const { getFullAddress, getContacts, fullAddress } = props;
const [visible, setVisible] = useState<boolean>(false)
const [address, setaddress] = useState<any>({})
const [address, setaddress] = useState<any>({});
const [telCode, setTelCode] = useState<any>([]);
const handleFetchData = useCallback((params: any) => {
return new Promise(resolve => {
PublicApi.getMemberManageUsersPage({ ...params }).then(res => {
......@@ -45,6 +46,15 @@ const TradeTermsLayout: React.FC<TradeTermsLayoutProps> = (props: any) => {
setVisible(flag)
}
// 获取手机code
const fetchTelCode = async () => {
const { data, code } = await PublicApi.getManageCountryAreaGetTelCode();
if (code !== 1000) {
return;
}
setTelCode(data)
};
const columns: any = [
{
title: '序号',
......@@ -108,7 +118,7 @@ const TradeTermsLayout: React.FC<TradeTermsLayoutProps> = (props: any) => {
</Form.Item>
<Form.Item
label='询价联系人'
name='contacts'
name='contactName'
rules={[{ required: true, message: '请选择询价联系人' }]}
>
<Input.Search onSearch={() => toggle(true)} readOnly enterButton={<Button style={{ height: '31.19px' }} icon={<LinkOutlined />}>选择</Button>} />
......@@ -125,13 +135,15 @@ const TradeTermsLayout: React.FC<TradeTermsLayoutProps> = (props: any) => {
rules={[{ required: true, message: '请选择' }]}
>
<Select>
<Select.Option value={86}>86</Select.Option>
{telCode.map(item => (
<Select.Option value={item}>{item}</Select.Option>
))}
</Select>
</Form.Item>
</Col>
<Col span={16}>
<Form.Item
name='contactsPhone'
name='contactPhone'
rules={[{ required: true, message: '请选择' }]}
>
<Input type='number' maxLength={11} />
......
import React, { useContext } from 'react';
import { Input, Form, Popconfirm } from 'antd';
import { Input, Form, Popconfirm, Button } from 'antd';
import { EditableContext } from '@/pages/transaction/components/detailLayout/components/context';
const EditableCell = ({
......@@ -12,6 +12,7 @@ const EditableCell = ({
activities,
handleSave,
handleDelete,
handleSetting,
sumTotal,
...restProps
}) => {
......@@ -35,7 +36,7 @@ const EditableCell = ({
break;
case 3:
values = await form.getFieldValue('discount');
record.activityPrice = Number(record.price) * (Number(values))/100
record.activityPrice = Number(record.price) * (Number(values)) / 100
}
console.log(values)
handleSave({ ...record, ...values });
......@@ -160,22 +161,36 @@ const EditableCell = ({
},
]}
>
<Input style={{ width: '112px' }} addonBefore="折"onPressEnter={rate} onBlur={rate} />
<Input style={{ width: '112px' }} addonBefore="折" onPressEnter={rate} onBlur={rate} />
</Form.Item>
)
}
}
}
/** 操作按钮 */
if (operation) {
childNode = (
<Popconfirm
title="是否删除?"
onConfirm={() => handleDelete(record.productId)}
>
<a>删除</a>
</Popconfirm>
)
if (Number(activities) === 15) {
childNode = (
<>
<Button type='link' onClick={() => handleSetting()}>设置搭配</Button>
<Popconfirm
title="是否删除?"
onConfirm={() => handleDelete(record.id)}
>
<Button type='link'>删除</Button>
</Popconfirm>
</>
)
} else {
childNode = (
<Popconfirm
title="是否删除?"
onConfirm={() => handleDelete(record.id)}
>
<a>删除</a>
</Popconfirm>
)
}
}
return <td {...restProps}>{childNode}</td>;
......
......@@ -174,6 +174,11 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
}
}
/** 设置搭配 */
const handleSetting = () => {
}
useEffect(() => {
if (signUpId) {
PublicApi.getMarketingPlatformActivitySignupDetailGoodsPage({ signUpId, current: '1', pageSize: '999' }).then(res => {
......@@ -210,6 +215,7 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
activities: type,
handleSave: handleSave,
handleDelete: handleDelete,
handleSetting: handleSetting,
sumTotal: sumTotal,
}),
};
......@@ -219,6 +225,7 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
size: 'small',
}}
/>
{/* 选择活动商品 */}
<TableModal
modalType="Drawer"
visible={visible}
......
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