✨ feat(会员支付参数配置 ): 新增微信退款证书上传

src/pages/payandSettle/paySetting/components/modal.tsx

 import React, { useCallback, useEffect, useState } from 'react';
-import { Modal, Form, Select, Input } from 'antd';
-import { PublicApi } from '@/services/api';
 import { isEmpty } from 'lodash';
+import { Modal, Form, Select, Input, Typography, Upload, Button, message } from 'antd';
+import { PublicApi } from '@/services/api';
+import { DeleteOutlined, UploadOutlined } from '@ant-design/icons';
+import UploadProps from '@/pages/transaction/common/uploadProps';
+import style from '../index.less';
 const { Option } = Select;
 const { TextArea } = Input;
 
@@ -49,7 +52,8 @@ const ModalLayout: React.FC<ModalProps> = ({
 }) => {
   const [form] = Form.useForm();
   const [channel, setChannel] = useState<channel>([])
-
+  const [files, setFiles] = useState<any>({});
+  const [loading, setloading] = useState(false);
 
   const handleChannelFind = useCallback(async () => {
     await PublicApi.getOrderMemberPaymentParameterChannelFind({ payChannel }).then(res => {
@@ -81,14 +85,43 @@ const ModalLayout: React.FC<ModalProps> = ({
     })
   }
 
+  /**判断文件类型和大小 */
+  const beforeDocUpload = (file: any) => {
+    const isLt20M = file.size / 1024 / 1024 < 20;
+    if (!isLt20M) {
+      message.error('上传文件大小不超过 20M!');
+    }
+    return isLt20M;
+  }
+  // 上传回调
+  const handleChange = ({ file }) => {
+    setloading(true);
+    if (file.response) {
+      if (file.response.code === 1000) {
+        setFiles({
+          name: file.name,
+          url: file.response.data
+        })
+        form.setFieldsValue({ value: file.response.data })
+        setloading(false);
+      }
+    }
+  }
+
   useEffect(() => {
     if (!isEmpty(value)) {
       console.log(value)
       form.setFieldsValue({
         ...value
       })
+      if (value.code === 14) {
+        setFiles({
+          name: value.remark,
+          url: value.value
+        })
+      }
     }
-  }, [value])
+  }, [visible, value])
 
   return (
     <Modal
@@ -111,8 +144,34 @@ const ModalLayout: React.FC<ModalProps> = ({
             }
           </Select>
         </Form.Item>
-        <Form.Item name='value' label='参数值' rules={[{ required: true, message: '请输入参数值' }]}>
-          <Input maxLength={200} />
+        <Form.Item
+          noStyle
+          shouldUpdate={(prevValues, curValues) => prevValues.code !== curValues.code}
+        >
+          {({ getFieldValue }) =>
+            getFieldValue('code') === 14 ? (
+              <Form.Item name='value' label='退款证书' rules={[{ required: true, message: '请上传退款证书' }]}>
+                {!isEmpty(files) && (
+                  <div className={style.upload_fileList}>
+                    <Typography.Link>{files.url}</Typography.Link>
+                    <DeleteOutlined className={style.delect_icon} style={{ color: '#00B37A' }} onClick={() => setFiles({})} />
+                  </div>
+                )}
+                {isEmpty(files) && (
+                  <Upload
+                    {...UploadProps}
+                    showUploadList={false}
+                    beforeUpload={beforeDocUpload}
+                    onChange={handleChange}
+                  >
+                    <Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
+                  </Upload>
+                )}
+              </Form.Item>
+            ) : <Form.Item name='value' label='参数值' rules={[{ required: true, message: '请输入参数值' }]}>
+              <Input maxLength={200} />
+            </Form.Item>
+          }
         </Form.Item>
         <Form.Item name='remark' label='参数描述'>
           <TextArea maxLength={200} rows={4} />

src/pages/payandSettle/paySetting/index.less

@@ -52,4 +52,19 @@
     }
   }
 }
+.upload_fileList {
 
+  .delect_icon {
+    margin-left: 15px;
+    opacity: 0;
+  }
+
+  &:hover {
+
+    .delect_icon {
+      cursor: pointer;
+      opacity: 1;
+    }
+
+  }
+}

src/pages/payandSettle/paySetting/index.tsx

 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, Empty, Input } from 'antd';
+import { Tabs, Form, Button, Radio, Table, Space, Image, Popconfirm, Empty, Input, Typography } from 'antd';
 import { PublicApi } from '@/services/api';
 import Card from '@/pages/transaction/components/card';
 import style from './index.less';
@@ -81,7 +81,11 @@ const PaySettingLayout = () => {
     {
       title: '参数值',
       key: 'value',
-      dataIndex: 'value'
+      dataIndex: 'value',
+      render: (text, record) => <>
+        {record.code === 14 && <Typography.Link href={text} target="_blank">{text}</Typography.Link>}
+        {record.code !== 14 && <>{text}</>}
+      </>
     },
     {
       title: '参数描述',