代码规范修改，NFT基础页面提交

package.json

@@ -56,6 +56,7 @@
     "@formily/antd": "^2.0.7",
     "@formily/core": "^2.0.7",
     "@formily/react": "^2.0.7",
+    "@metamask/detect-provider": "^1.2.0",
     "@umijs/route-utils": "^2.0.3",
     "ahooks": "^2.10.14",
     "antd": "^4.17.2",
@@ -74,7 +75,8 @@
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
     "umi": "^3.5.0",
-    "umi-serve": "^1.9.10"
+    "umi-serve": "^1.9.10",
+    "web3": "^1.7.5"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^2.0.2",

src/pages/DataBoard/ActiveAnalysis/List/components/moreData.tsx

@@ -1,6 +1,6 @@
 import { Col, Row, Statistic } from 'antd';
 import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
-const moreData = (props: any, title: string, company = '人') => {
+const MoreData = (props: any, title: string, company = '人') => {
   return (
     <div>
       <p>{title}</p>
@@ -42,4 +42,4 @@ const moreData = (props: any, title: string, company = '人') => {
     </div>
   );
 };
-export default moreData;
+export default MoreData;

src/pages/DataBoard/ActiveAnalysis/List/index.tsx

@@ -1,8 +1,13 @@
 import React, { useRef, useState } from 'react';
-import echarts from 'echarts/lib/echarts'; // 引入 ECharts 主模块
+import echarts from 'echarts/lib/echarts';
-import { getDwuData } from '@/services/DataBorad';
+import {
-import moreData from '@/pages/DataBoard/ActiveAnalysis/List/components/moreData';
+  getActiveData,
-import { getCoreData } from '@/services/DataBorad';
+  getMonthUserData,
+  getOldUserData,
+  getTodayUserData,
+  getWeekUserData,
+} from '@/services/DataBorad/activeanalysis';
+import MoreData from '@/pages/DataBoard/ActiveAnalysis/List/components/MoreData';
 import ReactEcharts from 'echarts-for-react';
 import { Card, Col, Row, Select } from 'antd';
 const ActiveAnalysis: React.FC = () => {
@@ -13,13 +18,13 @@ const ActiveAnalysis: React.FC = () => {
     return res.data;
   };
 
-  const [data, setData] = useState(getData(getCoreData));
+  const [data, setData] = useState(getData(getTodayUserData));
-  const [oldUserData, setOldUserData] = useState(getData(getCoreData));
+  const [oldUserData, setOldUserData] = useState(getData(getOldUserData));
-  const [weekData, setWeekData] = useState(getData(getCoreData));
+  const [weekData, setWeekData] = useState(getData(getWeekUserData));
-  const [monthData, setMonthData] = useState(getData(getCoreData));
+  const [monthData, setMonthData] = useState(getData(getMonthUserData));
 
   const getOption = async (item = 'day') => {
-    const res = await getDwuData({ time_type: item });
+    const res = await getActiveData({ time_type: item });
     const xData: any = [];
     const seriesData: any = [];
     res.data.foreach((item: any) => {
@@ -55,24 +60,22 @@ const ActiveAnalysis: React.FC = () => {
     <div>
       <Row gutter={24} justify="space-between" style={{ marginBottom: 10 }}>
         <Col span={6}>
-          <Card style={{ height: '200px' }}>{moreData(data, '今日活跃用户数')}</Card>
+          <Card style={{ height: '200px' }}>{MoreData(data, '今日活跃用户数')}</Card>
         </Col>
         <Col span={6}>
-          <Card style={{ height: '200px' }}>{moreData(oldUserData, '今日登录老用户数')}</Card>
+          <Card style={{ height: '200px' }}>{MoreData(oldUserData, '今日登录老用户数')}</Card>
         </Col>
         <Col span={6}>
-          <Card style={{ height: '200px' }}>{moreData(weekData, 'WAU(本周去重人数)')}</Card>
+          <Card style={{ height: '200px' }}>{MoreData(weekData, 'WAU(本周去重人数)')}</Card>
         </Col>
         <Col span={6}>
-          <Card style={{ height: '200px' }}>{moreData(monthData, 'MAU(本月去重人数)')}</Card>
+          <Card style={{ height: '200px' }}>{MoreData(monthData, 'MAU(本月去重人数)')}</Card>
         </Col>
       </Row>
       <Card style={{ width: '100%' }}>
         <Row gutter={32} style={{ marginBottom: 10 }}>
           <Col span={6}>
             <h1>DAU</h1>
-            <h3>今日人数</h3>
-            {/* <h2>{data}人</h2> */}
             <Select
               defaultValue="lucy"
               value={timeType}

src/pages/DataBoard/CoreData/List/index.tsx

@@ -1,9 +1,16 @@
 import React, { useRef, useState } from 'react';
 import Table, { ProColumns, ActionType } from '@/components/Table';
-import { getCoreData } from '@/services/DataBorad';
 import moment from 'moment';
 import TimeType from '@/constants/enum/timeType';
-import moreData from '@/pages/DataBoard/ActiveAnalysis/List/components/moreData';
+import { getData } from '@/utils/getData';
+import {
+  getCoreData,
+  getPayData,
+  getTodayUserData,
+  getMonthPayData,
+  getNewUserData,
+} from '@/services/DataBorad/coredata';
+import MoreData from '@/pages/DataBoard/ActiveAnalysis/List/components/MoreData';
 import { Card, Col, Row, DatePicker, Select } from 'antd';
 const CoreData: React.FC = () => {
   const tableRef = useRef<ActionType>();
@@ -14,12 +21,12 @@ const CoreData: React.FC = () => {
     setStartTimeValue(moment(data[0]).valueOf());
     setEndTimeValue(moment(data[1]).valueOf());
   };
-  const getData = async () => {
+
-    const res = await getCoreData({});
-    return res.data;
-  };
   // const [date, setDate] = useState(getData);
-  const [date, setDate] = useState(getData);
+  const [userDate, setUserDate] = useState(getData(getTodayUserData));
+  const [newUserdate, setNewUserDate] = useState(getData(getNewUserData));
+  const [payData, setPayDate] = useState(getData(getMonthPayData));
+  const [allPay, setAllPayDate] = useState(getData(getPayData));
   const columns: ProColumns<any>[] = [
     {
       title: '时间类型',
@@ -58,9 +65,10 @@ const CoreData: React.FC = () => {
         return (
           <DatePicker.RangePicker
             style={{ width: '300px' }}
-            defaultValue={[moment(), moment()]}
             format={'YYYY-MM-DD'}
-            onChange={getTimedata}
+            onChange={(vaw: any) => {
+              getTimedata(vaw);
+            }}
           />
         );
       },
@@ -113,16 +121,16 @@ const CoreData: React.FC = () => {
     <div>
       <Row gutter={24} style={{ marginBottom: 10 }}>
         <Col span={6}>
-          <Card style={{ height: '200px' }}>{moreData(2, '今日活跃用户数', '人')}</Card>
+          <Card style={{ height: '200px' }}>{MoreData(userDate, '今日活跃用户数', '人')}</Card>
         </Col>
         <Col span={6}>
-          <Card style={{ height: '200px' }}>{moreData(2, '今日新增人数', '人')}</Card>
+          <Card style={{ height: '200px' }}>{MoreData(newUserdate, '今日新增人数', '人')}</Card>
         </Col>
         <Col span={6}>
-          <Card style={{ height: '200px' }}>{moreData(2, '本月充值总额', '万元')}</Card>
+          <Card style={{ height: '200px' }}>{MoreData(payData, '本月充值总额', '万元')}</Card>
         </Col>
         <Col span={6}>
-          <Card style={{ height: '200px' }}>{moreData(2, '充值总额', '万元')}</Card>
+          <Card style={{ height: '200px' }}>{MoreData(allPay, '充值总额', '万元')}</Card>
         </Col>
       </Row>
 

src/pages/DataBoard/RechargeAnalysis/List/index.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import Table, { ProColumns, ActionType } from '@/components/Table';
-import { getCoreData } from '@/services/DataBorad';
+import { getRententionData } from '@/services/DataBorad/rechargeAnalysis';
 import { DatePicker, Select } from 'antd';
 import moment from 'moment';
 import TimeType from '@/constants/enum/timeType';
@@ -17,7 +17,7 @@ const Address: React.FC = () => {
   const columns: ProColumns<any>[] = [
     {
       title: '时间类型',
-      dataIndex: 'coinType',
+      dataIndex: 'time_type',
       hideInTable: true,
       initialValue: TimeType.DAY,
       renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
@@ -48,17 +48,22 @@ const Address: React.FC = () => {
       title: '日期',
       dataIndex: 'time',
       width: '10%',
-      // hideInSearch: true,
+      hideInSearch: true,
+    },
+    {
+      title: '时间筛选',
+      dataIndex: 'timeData',
+      hideInTable: true,
+      width: '20%',
       renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
         return (
-          <div>
+          <DatePicker.RangePicker
-            <DatePicker.RangePicker
+            style={{ width: '300px' }}
-              style={{ width: '300px' }}
+            format={'YYYY-MM-DD'}
-              defaultValue={[moment(), moment()]}
+            onChange={(vaw: any) => {
-              format={'YYYY-MM-DD'}
+              getTimedata(vaw);
-              onChange={getTimedata}
+            }}
-            />
+          />
-          </div>
         );
       },
     },
@@ -101,25 +106,19 @@ const Address: React.FC = () => {
   ];
 
   return (
-    // <div>
-    //   <Table
-    //     columns={columns}
-    //     rowKey="id"
-    //     actionRef={tableRef}
-    //     // search={false}
-    //     request={async (params) => {
-    //       return getCoreData(params);
-    //     }}
-    //   />
     <Table
       columns={columns}
       rowKey="id"
       actionRef={tableRef}
       // search={false}
       request={async (params) => {
+        console.log(params);
+
         params.start_time = startTimeValue;
         params.end_time = endTimeValue;
-        return getCoreData(params);
+        console.log(params.data.timeData);
+        console.log(params.time_type);
+        return getRententionData(params);
       }}
     />
   );

src/pages/DataBoard/RetentionAnalysis/List/components/TableModal.tsx

@@ -1,9 +1,9 @@
 import React, { useRef } from 'react';
 import Modal, { ModalProps } from '@/components/Modal';
 import { fetchTableData } from '@/utils/table';
-import { getchannelRetentionData } from '@/services/DataBorad';
 import Table, { ProColumns, ActionType } from '@/components/Table';
 import TimeText from '@/components/Typography/TimeText';
+import { getChannelData } from '@/services/DataBorad/retentionAnalysis';
 
 interface TableModalPropsType extends ModalProps {
   modalData: any;
@@ -21,7 +21,7 @@ const TableModal = ({ onCancel, modalData, ...rest }: TableModalPropsType) => {
     },
     {
       title: '渠道类型',
-      dataIndex: 'login_user',
+      dataIndex: 'channel_name',
       hideInSearch: true,
       ellipsis: true,
     },
@@ -76,7 +76,7 @@ const TableModal = ({ onCancel, modalData, ...rest }: TableModalPropsType) => {
         actionRef={tableRef}
         request={async (params) => {
           params.time = modalData;
-          return fetchTableData(getchannelRetentionData, params);
+          return fetchTableData(getChannelData, params);
         }}
       />
     </Modal>

src/pages/DataBoard/RetentionAnalysis/List/index.tsx

@@ -3,7 +3,7 @@ import Table, { ProColumns, ActionType } from '@/components/Table';
 import { DatePicker } from 'antd';
 import moment from 'moment';
 import { fetchTableData } from '@/utils/table';
-import { getRetentionData } from '@/services/DataBorad';
+import { getRententionData } from '@/services/DataBorad/retentionAnalysis';
 import TableModal from '@/pages/DataBoard/RetentionAnalysis/List/components/TableModal';
 
 const RetentionAnalysis = () => {
@@ -34,7 +34,6 @@ const RetentionAnalysis = () => {
           <DatePicker.RangePicker
             value={requestData}
             style={{ width: '200px' }}
-            defaultValue={[moment(), moment()]}
             format={'YYYY-MM-DD'}
             onChange={getTimedata}
           />
@@ -102,7 +101,7 @@ const RetentionAnalysis = () => {
         request={async (params) => {
           params.start_time = startTimeValue;
           params.end_time = endTimeValue;
-          return await fetchTableData(getRetentionData, params);
+          return await fetchTableData(getRententionData, params);
         }}
       />
       <TableModal

src/pages/Nft/NftContract/List/components/AddNftContract.tsx

@@ -30,26 +30,26 @@ const AddNftContractModal = ({ onOk, onCancel, ...rest }: AddNftContractModalPro
   };
 
   return (
-    <Modal title="创建NFT" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
+    <Modal title="添加合约" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
       <Form form={form} labelCol={4} wrapperCol={18}>
         <SchemaField>
           <SchemaField.String
-            name="nft_name"
+            name="contract_name"
             title="名称"
             required
             x-decorator="FormItem"
             x-component="Input"
           />
           <SchemaField.Number
-            name="address"
+            name="contract_address"
-            title=""
+            title="合约"
             required
             x-decorator="FormItem"
             x-component="NumberPicker"
           />
-          <SchemaField.String
+          <SchemaField.Number
-            name="contract"
+            name="description"
-            title="量"
+            title="gas费"
             required
             x-decorator="FormItem"
             x-component="NumberPicker"

src/pages/Nft/NftContract/List/index.tsx

@@ -0,0 +1,80 @@
+import React, { useRef, useState } from 'react';
+import Table, { ProColumns, ActionType } from '@/components/Table';
+import { message } from 'antd';
+// import { fetchTableData } from '@/utils/table';
+import AddNftContractModal from '@/pages/Nft/NftContract/List/components/AddNftContract';
+
+const Address: React.FC = () => {
+  const tableRef = useRef<ActionType>();
+  const [NftModal, setNftModal] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  const columns: ProColumns<any>[] = [
+    {
+      title: '合约名称',
+      dataIndex: 'time',
+      width: '10%',
+      hideInSearch: true,
+    },
+    {
+      title: '合约地址',
+      dataIndex: 'address',
+      hideInSearch: true,
+      width: '20%',
+    },
+    {
+      title: 'NFT数量',
+      dataIndex: 'nft_num',
+      width: 150,
+      hideInSearch: true,
+    },
+  ];
+
+  return (
+    <div>
+      <Table
+        columns={columns}
+        rowKey="id"
+        actionRef={tableRef}
+        toolBarActions={[
+          {
+            type: 'add',
+            text: '添加NFT',
+            onConfirm: () => {
+              setVisible(true);
+            },
+          },
+          {
+            type: 'add',
+            text: '新建NFT合约',
+            onConfirm: () => {
+              setVisible(true);
+            },
+          },
+        ]}
+        // request={async (params) => {
+        //   // return fetchTableData(, params);
+        // }}
+      />
+      <AddNftContractModal
+        visible={NftModal}
+        onCancel={function () {
+          setNftModal(false);
+        }}
+        onOk={async function (val: any): Promise<void> {
+          try {
+            const params = { ...val };
+            // await creatNftAddress(params);
+            message.success('添加成功');
+          } catch (e) {
+            console.log(e);
+            message.success('发生错误');
+            setVisible(false);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default Address;

src/pages/Nft/NftToken/List/components/AddNftModel.tsx

@@ -30,7 +30,7 @@ const AddNftModal = ({ onOk, onCancel, ...rest }: AddNftModalPropsType) => {
   };
 
   return (
-    <Modal title="添加合约" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
+    <Modal title="添加NFT" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
       <Form form={form} labelCol={4} wrapperCol={18}>
         <SchemaField>
           <SchemaField.String

src/pages/Nft/NftToken/List/index.tsx

@@ -2,13 +2,14 @@ import React, { useRef, useState } from 'react';
 import Table, { ProColumns, ActionType } from '@/components/Table';
 import { message } from 'antd';
 // import { fetchTableData } from '@/utils/table';
-import AddNftModal from '@/pages/Nft/NftContractManage/List/components/addNftModel';
+
-import AddNftContractModal from '@/pages/Nft/NftContractManage/List/components/addNftContract';
+// import AddNftModal from '@/pages/Nft/NftToken/List/components/AddNftModel';
+import PaySelectModal from '@/widget/Work/PaySelectModal';
 
 const Address: React.FC = () => {
   const tableRef = useRef<ActionType>();
   const [NftModal, setNftModal] = useState(false);
-  const [, setVisible] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   const columns: ProColumns<any>[] = [
     {
@@ -18,14 +19,14 @@ const Address: React.FC = () => {
       hideInSearch: true,
     },
     {
-      title: '合约地址',
+      title: 'NFT名称',
       dataIndex: 'address',
       hideInSearch: true,
       width: '20%',
     },
     {
-      title: 'NFT数量',
+      title: 'TokenId',
-      dataIndex: 'nft_num',
+      dataIndex: 'token_id',
       width: 150,
       hideInSearch: true,
     },
@@ -47,9 +48,9 @@ const Address: React.FC = () => {
           },
           {
             type: 'add',
-            text: '新建NFT合约',
+            text: '分发NFT',
             onConfirm: () => {
-              setVisible(true);
+              setNftModal(true);
             },
           },
         ]}
@@ -57,8 +58,8 @@ const Address: React.FC = () => {
         //   // return fetchTableData(, params);
         // }}
       />
-      <AddNftModal
+      {/* <AddNftModal
-        visible={NftModal}
+        visible={visible}
         onCancel={function () {
           setVisible(false);
         }}
@@ -73,9 +74,9 @@ const Address: React.FC = () => {
             setVisible(false);
           }
         }}
-      />
+      /> */}
-      <AddNftContractModal
+      <PaySelectModal
-        visible={NftModal}
+        visible={visible}
         onCancel={function () {
           setVisible(false);
         }}
@@ -83,6 +84,7 @@ const Address: React.FC = () => {
           try {
             const params = { ...val };
             // await creatNftAddress(params);
+            console.log(params);
             message.success('添加成功');
           } catch (e) {
             console.log(e);

src/routes/index.ts

@@ -64,6 +64,27 @@ export default [
       },
     ],
   },
+  {
+    name: 'NFT',
+    path: RoutePath.NFT,
+    routes: [
+      {
+        path: RoutePath.NFT,
+        redirect: RoutePath.NFTCONTRACT.LIST,
+        hideInMenu: true,
+      },
+      {
+        name: 'NFT合约管理',
+        path: RoutePath.NFTCONTRACT.LIST,
+        component: './NFT/NftContract/List',
+      },
+      {
+        name: 'NFT管理',
+        path: RoutePath.NFTTOKEN.LIST,
+        component: './NFT/NftToken/List',
+      },
+    ],
+  },
   {
     path: '/',
     redirect: RoutePath.WORK.LIST,

src/routes/routePath.ts

@@ -1,20 +1,28 @@
 const SETTING = '/setting';
 const DATABOARD = '/databoard';
+const NFT = '/nft';
 const RoutePath = {
   LOGIN: '/login',
   SETTING: SETTING,
   DATABOARD: DATABOARD,
+  NFT: NFT,
+  NFTCONTRACT: {
+    LIST: `${NFT}/nftcontract`,
+  },
+  NFTTOKEN: {
+    LIST: `${NFT}/nfttoken`,
+  },
   COREDATA: {
-    LIST: '${DATABOARD}/coredata',
+    LIST: `${DATABOARD}/coredata`,
   },
   ACTIVEANALYSIS: {
-    LIST: '${DATABOARD}/activeanalysis',
+    LIST: `${DATABOARD}/activeanalysis`,
   },
   RETENTIONANALYSIS: {
-    LIST: '${DATABOARD}/retentionanalysis',
+    LIST: `${DATABOARD}/retentionanalysis`,
   },
   RECHARGEANALYSIS: {
-    LIST: '${DATABOARD}/rechargeanalysis',
+    LIST: `${DATABOARD}/rechargeanalysis`,
   },
   WORK: {
     LIST: `${SETTING}/work`,

src/services/DataBorad.ts

@@ -1,33 +0,0 @@
-import request from '@/utils/request';
-
-export const getCoreData = (data) => {
-  return request.request({
-    url: '/tgb/api/v1/data/get',
-    method: 'post',
-    data,
-  });
-};
-// 活跃分析
-export const getRetentionData = (data) => {
-  return request.request({
-    url: '/tgb/api/v1/data/get',
-    method: 'post',
-    data,
-  });
-};
-// 渠道活跃分析
-export const getchannelRetentionData = (data) => {
-  return request.request({
-    url: '/tgb/api/v1/data/get',
-    method: 'post',
-    data,
-  });
-};
-
-export const getDwuData = (data) => {
-  return request.request({
-    url: '/tgb/api/v1/data/get',
-    method: 'post',
-    data,
-  });
-};

src/services/DataBorad/activeanalysis.ts

@@ -0,0 +1,41 @@
+import request from '@/utils/request';
+//获取基础数据报表
+export const getActiveData = (data) => {
+  return request.request({
+    url: '/tgb/api/v1/data/get',
+    method: 'post',
+    data,
+  });
+};
+// 获取今日登陆人数接口
+export const getTodayUserData = (params) => {
+  return request.request({
+    url: '/tgb/api/v1/data/user/today',
+    method: 'get',
+    params,
+  });
+};
+//获取本日新用户人数
+export const getMonthUserData = (params) => {
+  return request.request({
+    url: '/tgb/api/v1/data/user/month',
+    method: 'get',
+    params,
+  });
+};
+// 获取本周登录人数
+export const getWeekUserData = (params) => {
+  return request.request({
+    url: '/tgb/api/v1/data/user/week',
+    method: 'get',
+    params,
+  });
+};
+// 获取本日老用户登录人数
+export const getOldUserData = (params) => {
+  return request.request({
+    url: '/tgb/api/v1/data/user/old',
+    method: 'get',
+    params,
+  });
+};

src/services/DataBorad/coredata.ts

@@ -15,26 +15,26 @@ export const getTodayUserData = (params) => {
     params,
   });
 };
-//获取本月登录人数
+//获取今日新用户
-export const getMonthUserData = (params) => {
+export const getNewUserData = (params) => {
   return request.request({
-    url: '/tgb/api/v1/data/user/month',
+    url: '/tgb/api/v1/data/user/new',
     method: 'get',
     params,
   });
 };
-// 获取本周登录人数
+// 获取本月充值总额
-export const getWeekUserData = (params) => {
+export const getMonthPayData = (params) => {
   return request.request({
-    url: '/tgb/api/v1/data/user/week',
+    url: '/tgb/api/v1/data/pay/month',
     method: 'get',
     params,
   });
 };
-// 获取本日老用户登录人数
+// 获取充值总额
-export const getOldUserData = (params) => {
+export const getPayData = (params) => {
   return request.request({
-    url: '/tgb/api/v1/data/user/old',
+    url: '/tgb/api/v1/data/pay/all',
     method: 'get',
     params,
   });

src/services/DataBorad/rechargeAnalysis.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+//获取基础数据报表
+export const getRententionData = (data) => {
+  return request.request({
+    url: '/tgb/api/v1/data/get',
+    method: 'post',
+    data,
+  });
+};

src/services/DataBorad/retentionAnalysis.ts

@@ -0,0 +1,17 @@
+import request from '@/utils/request';
+//获取基础数据报表
+export const getRententionData = (data) => {
+  return request.request({
+    url: '/tgb/api/v1/data/get',
+    method: 'post',
+    data,
+  });
+};
+//获取渠道
+export const getChannelData = (data) => {
+  return request.request({
+    url: '/tgb/api/v1/data/get',
+    method: 'post',
+    data,
+  });
+};

src/utils/Nft/nftContract.ts

@@ -0,0 +1,43 @@
+import Web3 from 'web3';
+import detectEthereumProvider from '@metamask/detect-provider';
+import { message } from 'antd';
+
+let provider: any;
+
+export const web3 = new Web3();
+if (typeof window.ethereum !== 'undefined') {
+  web3.eth.defaultAccount = window.ethereum.selectedAddress;
+}
+
+export async function initWeb3() {
+  provider = await detectEthereumProvider();
+
+  if (!provider) {
+    console.log('请安装MetaMask');
+    return false;
+  }
+
+  try {
+    web3.setProvider(provider);
+    const accounts = await provider.request({
+      method: 'eth_requestAccounts',
+    });
+    //如果用户同意了登录请求，你就可以拿到用户的账号
+    web3.eth.defaultAccount = accounts[0];
+    return true;
+  } catch (reason) {
+    switch (reason) {
+      case 'Already processing eth_requestAccounts. Please wait.': // 已有请求存在
+        message.warning('请打开MetaMask完成授权');
+        break;
+      case 'User rejected provider access': //如果用户拒绝了登录请求
+        message.warning('请同意登录请求');
+        break;
+      default:
+        // 本不该执行到这里，但是真到这里了，说明发生了意外
+        message.warning('登录出错！err:' + reason);
+        break;
+    }
+  }
+  return false;
+}

src/utils/getData.ts

@@ -0,0 +1,4 @@
+export const getData = async (fetch: any) => {
+  const res = (await fetch()) || {};
+  return res.data;
+};

src/widget/Work/PaySelectModal.tsx

@@ -0,0 +1,70 @@
+import React, { useRef, useState } from 'react';
+import { createForm, onFieldChange } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import Modal, { ModalProps } from '@/components/Modal';
+// import { fetchTableData } from '@/utils/table';
+import { Form, FormItem, Input, Select, Radio, Switch } from '@formily/antd';
+
+interface PaySelectModalPropsType extends ModalProps {
+  onOk: (val: any) => void;
+  onCancel: () => void;
+  // modalData: any;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Select,
+    Radio,
+    Switch,
+  },
+});
+
+const form = createForm({});
+
+const PaySelectModal = ({ onOk, onCancel, ...rest }: PaySelectModalPropsType) => {
+  const [send, useSend] = useState(true);
+
+  const handleOk = () => {
+    const formState = form.getFormState();
+    onOk(formState.values);
+  };
+  const handleCancel = () => {
+    onCancel();
+  };
+
+  return (
+    <Modal title="选择方式" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
+      <Form form={form} labelCol={4} wrapperCol={18}>
+        <SchemaField>
+          <SchemaField.Number
+            name="type"
+            title="支付方式"
+            required
+            x-decorator="FormItem"
+            x-component="Radio.Group"
+            enum={[
+              { label: '秘钥支付', value: 1 },
+              { label: '小狐狸钱包支付', value: 2 },
+            ]}
+          />
+
+          {send == true && (
+            <SchemaField.String
+              name="key"
+              title="秘钥"
+              x-decorator="FormItem"
+              x-component="Input"
+              x-component-props={{
+                placeholder: '请输入秘钥，若使用小狐狸支付则不需要输入',
+              }}
+            />
+          )}
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default PaySelectModal;