refactor

config/routes/returnManageRoute.ts

-/*
- * @Author: XieZhiXiong
- * @Date: 2020-12-18 10:42:26
- * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-12-18 15:38:02
- * @Description: 退货查询相关路由
- */
-const returnManageRoute = {
-  path: '/returnManage', 
-  name: 'returnManage', 
-  icon: 'SmileOutlined', 
-  routes: [
-    // 换货申请单查询
-    {
-      path: '/returnManage/query',
-      name: 'query',
-      component: '@/pages/returnManage/query/index',
-    }, 
-    // 换货申请单详情
-    {
-      path: '/returnManage/query/detail',
-      name: 'queryDetail',
-      component: '@/pages/returnManage/query/detail',
-      hideInMenu: true, 
-      hidePageHeader: true,
-    }, 
-    // 待退款
-    {
-      path: '/returnManage/returnPrReturn',
-      name: 'returnPrReturn',
-      component: '@/pages/returnManage/returnPrReturn/index',
-    }, 
-    // 待退款-详情
-    {
-      path: '/returnManage/returnPrReturn/detail',
-      name: 'returnPrReturnDetail',
-      component: '@/pages/returnManage/returnPrReturn/detail',
-      hideInMenu: true, 
-      hidePageHeader: true,
-    }, 
-    // 待退款-审核
-    {
-      path: '/returnManage/returnPrReturn/verify',
-      name: 'prReturnVerify',
-      component: '@/pages/returnManage/returnPrReturn/verify',
-      hideInMenu: true, 
-      hidePageHeader: true,
-    }, 
-  ],
-};
-
+/*
+ * @Author: XieZhiXiong
+ * @Date: 2020-12-18 10:42:26
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2020-12-23 14:50:54
+ * @Description: 退货查询相关路由
+ */
+const returnManageRoute = {
+  path: '/returnManage', 
+  name: 'returnManage', 
+  icon: 'SmileOutlined', 
+  routes: [
+    // 退货申请单查询
+    {
+      path: '/returnManage/query',
+      name: 'query',
+      component: '@/pages/returnManage/query/index',
+    }, 
+    // 退货申请单详情
+    {
+      path: '/returnManage/query/detail',
+      name: 'queryDetail',
+      component: '@/pages/returnManage/query/detail',
+      hideInMenu: true, 
+      hidePageHeader: true,
+    }, 
+    // 待退款
+    {
+      path: '/returnManage/returnPrReturn',
+      name: 'returnPrReturn',
+      component: '@/pages/returnManage/returnPrReturn/index',
+    }, 
+    // 待退款-详情
+    {
+      path: '/returnManage/returnPrReturn/detail',
+      name: 'returnPrReturnDetail',
+      component: '@/pages/returnManage/returnPrReturn/detail',
+      hideInMenu: true, 
+      hidePageHeader: true,
+    }, 
+    // 待退款-审核
+    {
+      path: '/returnManage/returnPrReturn/verify',
+      name: 'prReturnVerify',
+      component: '@/pages/returnManage/returnPrReturn/verify',
+      hideInMenu: true, 
+      hidePageHeader: true,
+    }, 
+  ],
+};
+
 export default returnManageRoute;
\ No newline at end of file

env.js

-// 这里的env只有对本地起效, 线上构建不用
-
-const path = require('path')
-module.exports = {
-  scm: {
-    SITE_ID: '1',
-    BACK_GATEWAY: 'http://lingxi-scm.wg.shushangyun.com',
-    USE_ROUTE_CONFIG: false,
-    SOCKET_URL: 'ws://lingxi-scm.wg.shushangyun.com',
-    ssh: JSON.stringify({
-      user: "www",
-      // Password optional, prompted if none given
-      password: "!@#project_$%^231(1)wwwuser3",
-      host: "119.23.219.65",
-      port: 8122,
-      localRoot: path.resolve('./dist/'),
-      remoteRoot: "/usr/local/nginx/html/lingxi/yanshi/api/scm/admin/dist/",
-      // include: ["*", "**/*"],      // this would upload everything except dot files
-      include: ["*"],
-      // e.g. exclude sourcemaps, and ALL files in node_modules (including dot files)
-      // exclude: ["dist/**/*.map", "node_modules/**", "node_modules/**/.*", ".git/**"],
-      // delete ALL existing files at destination before uploading, if true
-      deleteRemote: true,
-      // Passive mode is forced (EPSV command is not sent)
-      forcePasv: true
-    })
-  },
-  10: {
-    SITE_ID: '1',
-    BACK_GATEWAY: 'http://10.0.0.10:8100',
-    USE_ROUTE_CONFIG: true,
-    SOCKET_URL: 'ws://10.0.0.10:8100',
-    ssh: JSON.stringify({
-      user: "root",
-      // Password optional, prompted if none given
-      password: "123456",
-      host: "10.0.0.10",
-      port: 22,
-      localRoot: path.resolve('./dist/'),
-      remoteRoot: "/home/www/lingxi/lingxi-business-system/dist/",
-      // include: ["*", "**/*"],      // this would upload everything except dot files
-      include: ["*"],
-      // e.g. exclude sourcemaps, and ALL files in node_modules (including dot files)
-      // exclude: ["dist/**/*.map", "node_modules/**", "node_modules/**/.*", ".git/**"],
-      // delete ALL existing files at destination before uploading, if true
-      deleteRemote: true,
-      // Passive mode is forced (EPSV command is not sent)
-      forcePasv: true
-    })
-  },
-  25: {
-    SITE_ID: '1',
-    BACK_GATEWAY: 'http://10.0.0.25:8100',
-    USE_ROUTE_CONFIG: true,
-    SOCKET_URL: 'ws://10.0.0.25:8100',
-    ssh: JSON.stringify({
-      user: "root",
-      // Password optional, prompted if none given
-      password: "123456",
-      host: "10.0.0.25",
-      port: 22,
-      localRoot: path.resolve('./dist/'),
-      remoteRoot: "/data/.jenkins/workspace/lingxi-business-system/dist/",
-      // include: ["*", "**/*"],      // this would upload everything except dot files
-      include: ["*"],
-      // e.g. exclude sourcemaps, and ALL files in node_modules (including dot files)
-      // exclude: ["dist/**/*.map", "node_modules/**", "node_modules/**/.*", ".git/**"],
-      // delete ALL existing files at destination before uploading, if true
-      deleteRemote: true,
-      // Passive mode is forced (EPSV command is not sent)
-      forcePasv: true
-    })
-  }
-}
+// 这里的env只有对本地起效, 线上构建不用
+
+const path = require('path')
+module.exports = {
+  scm: {
+    SITE_ID: '1',
+    BACK_GATEWAY: 'http://lingxi-scm.wg.shushangyun.com',
+    USE_ROUTE_CONFIG: false,
+    SOCKET_URL: 'ws://lingxi-scm.wg.shushangyun.com',
+    ssh: JSON.stringify({
+      user: "www",
+      // Password optional, prompted if none given
+      password: "!@#project_$%^231(1)wwwuser3",
+      host: "119.23.219.65",
+      port: 8122,
+      localRoot: path.resolve('./dist/'),
+      remoteRoot: "/usr/local/nginx/html/lingxi/yanshi/api/scm/admin/dist/",
+      // include: ["*", "**/*"],      // this would upload everything except dot files
+      include: ["*"],
+      // e.g. exclude sourcemaps, and ALL files in node_modules (including dot files)
+      // exclude: ["dist/**/*.map", "node_modules/**", "node_modules/**/.*", ".git/**"],
+      // delete ALL existing files at destination before uploading, if true
+      deleteRemote: true,
+      // Passive mode is forced (EPSV command is not sent)
+      forcePasv: true
+    })
+  },
+  10: {
+    SITE_ID: '1',
+    BACK_GATEWAY: 'http://10.0.0.10:8100',
+    USE_ROUTE_CONFIG: true,
+    SOCKET_URL: 'ws://10.0.0.10:8100',
+    ssh: JSON.stringify({
+      user: "root",
+      // Password optional, prompted if none given
+      password: "123456",
+      host: "10.0.0.10",
+      port: 22,
+      localRoot: path.resolve('./dist/'),
+      remoteRoot: "/home/www/lingxi/lingxi-business-system/dist/",
+      // include: ["*", "**/*"],      // this would upload everything except dot files
+      include: ["*"],
+      // e.g. exclude sourcemaps, and ALL files in node_modules (including dot files)
+      // exclude: ["dist/**/*.map", "node_modules/**", "node_modules/**/.*", ".git/**"],
+      // delete ALL existing files at destination before uploading, if true
+      deleteRemote: true,
+      // Passive mode is forced (EPSV command is not sent)
+      forcePasv: true
+    })
+  },
+  25: {
+    SITE_ID: '1',
+    BACK_GATEWAY: 'http://10.0.0.25:8100',
+    USE_ROUTE_CONFIG: true,
+    SOCKET_URL: 'ws://10.0.0.25:8100',
+    ssh: JSON.stringify({
+      user: "root",
+      // Password optional, prompted if none given
+      password: "123456",
+      host: "10.0.0.25",
+      port: 22,
+      localRoot: path.resolve('./dist/'),
+      remoteRoot: "/data/.jenkins/workspace/lingxi-business-system/dist/",
+      // include: ["*", "**/*"],      // this would upload everything except dot files
+      include: ["*"],
+      // e.g. exclude sourcemaps, and ALL files in node_modules (including dot files)
+      // exclude: ["dist/**/*.map", "node_modules/**", "node_modules/**/.*", ".git/**"],
+      // delete ALL existing files at destination before uploading, if true
+      deleteRemote: true,
+      // Passive mode is forced (EPSV command is not sent)
+      forcePasv: true
+    })
+  }
+}

package.json

-{
-  "name": "lingxi-business-system",
-  "version": "1.0.4",
-  "private": true,
-  "scripts": {
-    "upload:scm": "cross-env local=scm taskName=upload yarn scripts:build",
-    "upload:10": "cross-env local=10 taskName=upload yarn scripts:build",
-    "upload:25": "cross-env local=25 taskName=upload yarn scripts:build",
-    "api": "god-ytt",
-    "start:analyze": "ANALYZE=1 umi dev",
-    "scripts:build": "node scripts/run",
-    "scripts:build-yxc": "node scripts/run http://yxc-web-demo.shushangyun.com/api",
-    "start": "yarn api && yarn scripts:build && umi dev",
-    "start:dev": "umi dev",
-    "build": "yarn api && yarn scripts:build && yarn build:clean",
-    "build:yxc": "yarn api && yarn scripts:build-yxc && umi build",
-    "build:dev": "pm2 start scripts/devServer.js",
-    "build:analyze": "ANALYZE=1 umi build",
-    "build:clean": "umi build",
-    "build:scm": "cross-env SITE_ID=1 BACK_GATEWAY=http://lingxi-scm.wg.shushangyun.com SOCKET_URL=ws://lingxi-scm.wg.shushangyun.com yarn build",
-    "build:10": "cross-env SITE_ID=1 BACK_GATEWAY=http://10.0.0.10:8100 SOCKET_URL=ws://10.0.0.10:9400 yarn build",
-    "build:25": "cross-env SITE_ID=352 BACK_GATEWAY=http://10.0.0.25:8100 SOCKET_URL=ws://10.0.0.25:9400 yarn build",
-    "postinstall": "umi generate tmp",
-    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
-    "test": "umi-test",
-    "test:coverage": "umi-test --coverage",
-    "start:cross": "cross-env SITE_ID=352 SOCKET_URL=ws://10.0.0.25:9400 yarn start",
-    "start:cross-dev": "cross-env SITE_ID=352 SOCKET_URL=ws://10.0.0.25:9400 yarn start:dev",
-    "start:10": "cross-env SITE_ID=1 BACK_GATEWAY=http://10.0.0.10:8100 SOCKET_URL=ws://10.0.0.10:9400 yarn start",
-    "start:scm": "cross-env BACK_GATEWAY=http://lingxi-scm.wg.shushangyun.com SOCKET_URL=ws://lingxi-scm.wg.shushangyun.com SITE_ID=1 yarn start"
-  },
-  "lint-staged": {
-    "*.{js,jsx,less,md,json}": [
-      "prettier --write"
-    ],
-    "*.ts?(x)": [
-      "prettier --parser=typescript --write"
-    ]
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@ant-design/icons": "^4.2.1",
-    "@ant-design/pro-layout": "^5.0.12",
-    "@antv/data-set": "^0.11.5",
-    "@formily/antd": "^1.2.11",
-    "@formily/antd-components": "^1.2.11",
-    "@types/crypto-js": "^4.0.1",
-    "@umijs/hooks": "^1.9.3",
-    "@umijs/preset-react": "1.x",
-    "@umijs/test": "^3.2.0",
-    "bizcharts": "^4.0.13",
-    "braft-editor": "^2.3.9",
-    "classnames": "^2.2.6",
-    "core-js": "^3.6.5",
-    "crypto-js": "^4.0.0",
-    "god": "^0.1.29",
-    "lingxi-design": "^1.0.8",
-    "lingxi-design-ui": "^1.1.15",
-    "lingxi-editor-core": "^1.0.6",
-    "lingxi-web": "^1.0.6",
-    "lint-staged": "^10.0.7",
-    "mobx": "^5.15.4",
-    "mobx-react": "^6.2.2",
-    "pinyin": "^2.9.1",
-    "prettier": "^1.19.1",
-    "query-string": "^6.13.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "styled-components": "^5.2.1",
-    "umi": "^3.2.0",
-    "yorkie": "^2.0.0"
-  },
-  "devDependencies": {
-    "axios": "^0.19.2",
-    "connect-history-api-fallback": "^1.6.0",
-    "cross-env": "^7.0.2",
-    "express": "^4.17.1",
-    "god-upload-scp": "1.2.0",
-    "god-yapi2ts": "^1.9.0",
-    "gulp": "^4.0.2",
-    "http-proxy-middleware": "^1.0.5",
-    "json2ts": "^0.0.7",
-    "ora": "^4.0.4",
-    "typescript": "^3.9.7"
-  }
-}
+{
+  "name": "lingxi-business-system",
+  "version": "1.0.4",
+  "private": true,
+  "scripts": {
+    "upload:scm": "cross-env local=scm taskName=upload yarn scripts:build",
+    "upload:10": "cross-env local=10 taskName=upload yarn scripts:build",
+    "upload:25": "cross-env local=25 taskName=upload yarn scripts:build",
+    "api": "god-ytt",
+    "start:analyze": "ANALYZE=1 umi dev",
+    "scripts:build": "node scripts/run",
+    "scripts:build-yxc": "node scripts/run http://yxc-web-demo.shushangyun.com/api",
+    "start": "yarn api && yarn scripts:build && umi dev",
+    "start:dev": "umi dev",
+    "build": "yarn api && yarn scripts:build && yarn build:clean",
+    "build:yxc": "yarn api && yarn scripts:build-yxc && umi build",
+    "build:dev": "pm2 start scripts/devServer.js",
+    "build:analyze": "ANALYZE=1 umi build",
+    "build:clean": "umi build",
+    "build:scm": "cross-env SITE_ID=1 BACK_GATEWAY=http://lingxi-scm.wg.shushangyun.com SOCKET_URL=ws://lingxi-scm.wg.shushangyun.com yarn build",
+    "build:10": "cross-env SITE_ID=1 BACK_GATEWAY=http://10.0.0.10:8100 SOCKET_URL=ws://10.0.0.10:9400 yarn build",
+    "build:25": "cross-env SITE_ID=352 BACK_GATEWAY=http://10.0.0.25:8100 SOCKET_URL=ws://10.0.0.25:9400 yarn build",
+    "postinstall": "umi generate tmp",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage",
+    "start:cross": "cross-env SITE_ID=352 SOCKET_URL=ws://10.0.0.25:9400 yarn start",
+    "start:cross-dev": "cross-env SITE_ID=352 SOCKET_URL=ws://10.0.0.25:9400 yarn start:dev",
+    "start:10": "cross-env SITE_ID=1 BACK_GATEWAY=http://10.0.0.10:8100 SOCKET_URL=ws://10.0.0.10:9400 yarn start",
+    "start:scm": "cross-env BACK_GATEWAY=http://lingxi-scm.wg.shushangyun.com SOCKET_URL=ws://lingxi-scm.wg.shushangyun.com SITE_ID=1 yarn start"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ant-design/icons": "^4.2.1",
+    "@ant-design/pro-layout": "^5.0.12",
+    "@antv/data-set": "^0.11.5",
+    "@formily/antd": "^1.2.11",
+    "@formily/antd-components": "^1.2.11",
+    "@types/crypto-js": "^4.0.1",
+    "@umijs/hooks": "^1.9.3",
+    "@umijs/preset-react": "1.x",
+    "@umijs/test": "^3.2.0",
+    "bizcharts": "^4.0.13",
+    "braft-editor": "^2.3.9",
+    "classnames": "^2.2.6",
+    "core-js": "^3.6.5",
+    "crypto-js": "^4.0.0",
+    "god": "^0.1.29",
+    "lingxi-design": "^1.0.8",
+    "lingxi-design-ui": "^1.1.15",
+    "lingxi-editor-core": "^1.0.6",
+    "lingxi-web": "^1.0.6",
+    "lint-staged": "^10.0.7",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "pinyin": "^2.9.1",
+    "prettier": "^1.19.1",
+    "query-string": "^6.13.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "styled-components": "^5.2.1",
+    "umi": "^3.2.0",
+    "yorkie": "^2.0.0"
+  },
+  "devDependencies": {
+    "axios": "^0.19.2",
+    "connect-history-api-fallback": "^1.6.0",
+    "cross-env": "^7.0.2",
+    "express": "^4.17.1",
+    "god-upload-scp": "1.2.0",
+    "god-yapi2ts": "^1.9.0",
+    "gulp": "^4.0.2",
+    "http-proxy-middleware": "^1.0.5",
+    "json2ts": "^0.0.7",
+    "ora": "^4.0.4",
+    "typescript": "^3.9.7"
+  }
+}

src/components/PolymericTable/NormalTable.tsx

-/*
- * @Author: XieZhiXiong
- * @Date: 2020-08-20 16:15:59
- * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-09-10 14:07:35
- * @Description: 简单封装了分页事件的 Table
- */
-import React from 'react';
-import { Table } from 'antd';
-import classNames from 'classnames';
-import { StandardTableProps } from './interface';
-import styles from './index.less';
-
-export default class NormalTable extends React.PureComponent<StandardTableProps> {
-
-  state = {
-    page: 1,
-    size: 10,
-  };
-
-  handlePaginationChange = (page: number, size: number) => {
-    const { pagination = {}, onPaginationChange } = this.props;
-    const { current, pageSize } = pagination;
-
-    // 内部自己维护 page、size， 单独控制当前页 或 当前页数
-    if (!('current' in pagination)) {
-      this.setState({ page: current });
-    }
-    if (!('pageSize' in pagination)) {
-      this.setState({ size: pageSize });
-    }
-
-    if (onPaginationChange) {
-      onPaginationChange(page, size);
-    }
-  };
-
-  render() {
-    const { page, size } = this.state; 
-    const { 
-      columns, 
-      dataSource,
-      rowKey = 'id', 
-      pagination = {}, 
-      loading, 
-      className, 
-      onPaginationChange, 
-      ...restProps
-    } = this.props;
-
-    const newPagination: any = pagination ? {
-      current: page, 
-      pageSize: size,
-      showSizeChanger: true,
-      showQuickJumper: true,
-      onChange: this.handlePaginationChange,
-      onShowSizeChange: this.handlePaginationChange,
-      size: 'small', 
-      showTotal: () => `共 ${pagination.total || 0} 条`,
-      ...pagination, 
-    } : false;
-
-    return (
-      <div className={classNames(className)}>
-        <Table 
-          rowKey={rowKey}
-          columns={columns}
-          dataSource={dataSource}
-          loading={loading}
-          pagination={newPagination}
-          {...restProps}
-        />
-      </div>
-    )
-  }
+/*
+ * @Author: XieZhiXiong
+ * @Date: 2020-08-20 16:15:59
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2020-12-21 13:57:49
+ * @Description: 简单封装了分页事件的 Table
+ */
+import React from 'react';
+import { Table } from 'antd';
+import classNames from 'classnames';
+import { StandardTableProps } from './interface';
+import styles from './index.less';
+
+export default class NormalTable extends React.PureComponent<StandardTableProps> {
+
+  state = {
+    page: 1,
+    size: 10,
+  };
+
+  handlePaginationChange = (page: number, size: number) => {
+    const { pagination = {}, onPaginationChange } = this.props;
+    const { current, pageSize } = pagination;
+
+    // 内部自己维护 page、size， 单独控制当前页 或 当前页数
+    if (!('current' in pagination)) {
+      this.setState({ page: current });
+    }
+    if (!('pageSize' in pagination)) {
+      this.setState({ size: pageSize });
+    }
+
+    if (onPaginationChange) {
+      onPaginationChange(page, size);
+    }
+  };
+
+  render() {
+    const { page, size } = this.state; 
+    const { 
+      columns, 
+      dataSource,
+      rowKey = 'id', 
+      pagination = {}, 
+      loading, 
+      className, 
+      onPaginationChange, 
+      ...restProps
+    } = this.props;
+
+    const newPagination: any = pagination ? {
+      current: page, 
+      pageSize: size,
+      showSizeChanger: true,
+      showQuickJumper: true,
+      onChange: this.handlePaginationChange,
+      size: 'small', 
+      showTotal: () => `共 ${pagination.total || 0} 条`,
+      ...pagination, 
+    } : false;
+
+    return (
+      <div className={classNames(className)}>
+        <Table 
+          rowKey={rowKey}
+          columns={columns}
+          dataSource={dataSource}
+          loading={loading}
+          pagination={newPagination}
+          {...restProps}
+        />
+      </div>
+    )
+  }
 }
\ No newline at end of file

src/pages/member/components/EquityInfo/index.tsx

-import React, { useState, useEffect } from 'react';
-import { 
-  Row, 
-  Col, 
-  Tabs, 
-  Tooltip, 
-} from 'antd';
-import { QuestionCircleOutlined } from '@ant-design/icons';
-import classNames from 'classnames';
-import PolymericTable from '@/components/PolymericTable';
-import { EditableColumns } from '@/components/PolymericTable/interface';
-import MellowCard from '@/components/MellowCard';
-import styles from './index.less';
-
-const { TabPane } = Tabs;
-
-const PAGE_SIZE = 8;
-
-export interface ReceivedData {
-  id?: number; 
-  createTime?: string;
-  ruleName?: string;
-  score?: number;
-  remark?: string;
-};
-
-export interface UsageData {
-  id?: number; 
-  createTime?: string;
-  rightTypeName?: string;
-  spendTypeName?: string;
-  point?: number;
-  remark?: string;
-};
-
-export interface FetchParams {
-  current: number;
-  pageSize: number;
-};
-
-export interface EquityInfoProps {
-  equityInfo?: {
-    sumReturnMoney?: number,      // 累计返现金额
-    sumUsedPoint?: number,        // 已用积分
-    sumPoint?: number,            // 累计积分
-    rights?: {
-      acquireWay: string, 
-      id: number, 
-      name: string, 
-      paramWay: string, 
-      parameter: string, 
-      remark: string, 
-      rightTypeEnum: number, 
-      status: number, 
-    }[];
-  };
-
-  fetchReceivedList?: (params: FetchParams) => Promise<{ data: ReceivedData[] , totalCount: number }>;
-  fetchUsageList?: (params: FetchParams) => Promise<{ data: UsageData[] , totalCount: number }>;
-}
-
-const equityTxtMap = {
-  1: '折扣', 
-  2: '返现', 
-  3: '积分', 
-};
-
-const EquityInfo: React.FC<EquityInfoProps> = ({
-  equityInfo = {}, 
-  fetchReceivedList, 
-  fetchUsageList, 
-}) => {
-
-  const [receivedPage, setReceivedPage] = useState(1);
-  const [receivedSize, setReceivedSize] = useState(PAGE_SIZE);
-  const [receivedTotal, setReceivedTotal] = useState(0);
-  const [receivedList, setReceivedList] = useState([]);
-  const [receivedListLoading, setReceivedListLoading] = useState(false);
-  
-  const [usagePage, setUsagePage] = useState(1);
-  const [usageSize, setUsageSize] = useState(PAGE_SIZE);
-  const [usageTotal, setUsageTotal] = useState(0);
-  const [usageList, setUsageList] = useState([]);
-  const [usageListLoading, setUsageListLoading] = useState(false);
-
-  const receivedColumns: EditableColumns[] = [
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      align: 'center',
-    },
-    {
-      title: '会员权益名称',
-      dataIndex: 'rightTypeName	',
-      align: 'center',
-    },
-    {
-      title: '获取数量',
-      dataIndex: 'point',
-      align: 'center',
-    },
-    {
-      title: '获取时间',
-      dataIndex: 'createTime',
-      align: 'center',
-    },
-    {
-      title: '备注',
-      dataIndex: 'remark',
-      align: 'center',
-      ellipsis: true, 
-    },
-  ];
-  
-  const usageColumns: EditableColumns[] = [
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      align: 'center',
-    },
-    {
-      title: '会员权益名称',
-      dataIndex: 'rightTypeName',
-      align: 'center',
-    },
-    {
-      title: '会员权益使用名称',
-      dataIndex: 'spendTypeName',
-      align: 'center',
-    },
-    {
-      title: '使用数量',
-      dataIndex: 'point',
-      align: 'center',
-    },
-    {
-      title: '使用时间',
-      dataIndex: 'createTime',
-      align: 'center',
-    },
-    {
-      title: '备注',
-      dataIndex: 'remark',
-      align: 'center',
-      ellipsis: true, 
-    },
-  ];
-
-  const getReceivedList = () => {
-    if (fetchReceivedList) {
-      if (receivedListLoading) {
-        return;
-      }
-      setReceivedListLoading(true);
-      fetchReceivedList({ 
-        current: receivedPage, 
-        pageSize: receivedSize, 
-      }).then(res => {
-        const { data = [], totalCount = 0 } = (res || {});
-        setReceivedList(data);
-        setReceivedTotal(totalCount);
-      }).finally(() => {
-        setReceivedListLoading(false);
-      });
-    }
-  };
-  
-  const getUsageList = () => {
-    if (fetchUsageList) {
-      if (usageListLoading) {
-        return;
-      }
-      setUsageListLoading(true);
-      fetchUsageList({ 
-        current: usagePage, 
-        pageSize: usageSize, 
-      }).then(res => {
-        const { data = [], totalCount = 0 } = (res || {});
-        setUsageList(data);
-        setUsageTotal(totalCount);
-      }).finally(() => {
-        setUsageListLoading(false);
-      });
-    }
-  };
-
-  useEffect(() => {
-    getReceivedList();
-  }, []);
-
-  const handleTabChange = key => {
-    switch (key) {
-      case '1':
-        getReceivedList();
-        break;
-        
-      case '2':
-        getUsageList();
-        break;
-    
-      default:
-        break;
-    }
-  };
-  
-  const handleReceivedPaginationChange = (page: number, size: number) => {
-    setReceivedPage(page);
-    setReceivedSize(size);
-    getReceivedList();
-  };
-  
-  const handleUsagePaginationChange = (page: number, size: number) => {
-    setUsagePage(page);
-    setUsageSize(size);
-    getReceivedList();
-  };
-
-  return (
-    <div className={styles.equityInfo}>
-      <Row gutter={[0, 24]}>
-        <Col span={24}>
-          <Row gutter={24}>
-            <Col span={8}>
-              <div className={styles.container}>
-                <div className={styles['container-title']}>
-                  当前权益
-                </div>
-                
-                <div className={styles['container-content']}>
-                  <ul className={styles.tofo}>
-                    {equityInfo.rights ? equityInfo.rights.map(item => (
-                      <li key={item.id} className={styles['tofo-item']}>
-                        <div className={styles['tofo-item-logo']}>
-                          <img src={require(`@/asserts/equity-${item.rightTypeEnum}.png`)} />
-                        </div>
-                        <div className={styles['tofo-item-title']}>
-                          {item.name}
-                          <Tooltip title={item.remark}>
-                            <QuestionCircleOutlined />
-                          </Tooltip>
-                        </div>
-                        <div className={styles['tofo-item-extra']}>
-                          <span 
-                            className={classNames(styles['tofo-item-tag'], styles['tofo-item-tag-price'])}
-                          >
-                            {item.parameter} {equityTxtMap[item.rightTypeEnum] || ''}
-                          </span>
-                        </div>
-                      </li>
-                    )) : null}
-                  </ul>
-                </div>
-              </div>
-            </Col>
-
-            <Col span={8}>
-              <div className={styles.container}>
-                <div className={styles['container-content']}>
-                  <div className={styles.exhibition}>
-                    <div className={styles['exhibition-left']}>
-                      <div className={styles['exhibition-title']}>
-                        累计返现金额
-                      </div>
-                      <div className={styles['exhibition-amount']}>
-                        {equityInfo?.sumReturnMoney}
-                        <span>CNY</span>
-                      </div>
-                    </div>
-
-                    <div className={styles['exhibition-right']}>
-                      <div className={styles['exhibition-logo']}>
-                        <img src={require(`@/asserts/equity-4.png`)} />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Col>
-
-            <Col span={8}>
-              <div className={styles.container}>
-                <div className={styles['container-content']}>
-                  <div className={styles.exhibition}>
-                    <div className={styles['exhibition-left']}>
-                      <div className={styles['exhibition-title']}>
-                        可用积分
-                      </div>
-                      <div className={styles['exhibition-amount']}>
-                        {equityInfo?.sumUsedPoint}/{equityInfo?.sumPoint}
-                      </div>
-                    </div>
-
-                    <div className={styles['exhibition-right']}>
-                      <div className={styles['exhibition-logo']}>
-                        <img src={require(`@/asserts/equity-5.png`)} />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Col>
-          </Row>
-        </Col>
-
-        <Col span={24}>
-          <MellowCard
-            title="活跃分获取记录"
-          >
-            <Tabs onChange={handleTabChange}>
-              <TabPane tab="权益获取记录" key="1">
-                <PolymericTable
-                  dataSource={receivedList}
-                  columns={receivedColumns}
-                  loading={receivedListLoading}
-                  pagination={{
-                    pageSize: receivedSize, 
-                    total: receivedTotal,
-                  }}
-                  onPaginationChange={handleReceivedPaginationChange}
-                />
-              </TabPane>
-              <TabPane tab="权益使用记录" key="2">
-                <PolymericTable
-                  dataSource={usageList}
-                  columns={usageColumns}
-                  loading={usageListLoading}
-                  pagination={{
-                    pageSize: usageSize, 
-                    total: usageTotal,
-                  }}
-                  onPaginationChange={handleUsagePaginationChange}
-                />
-              </TabPane>
-            </Tabs>
-          </MellowCard>
-        </Col>
-      </Row>
-    </div>
-  );
-};
-
-export default EquityInfo;
+import React, { useState, useEffect } from 'react';
+import { 
+  Row, 
+  Col, 
+  Tabs, 
+  Tooltip, 
+} from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import PolymericTable from '@/components/PolymericTable';
+import { EditableColumns } from '@/components/PolymericTable/interface';
+import MellowCard from '@/components/MellowCard';
+import styles from './index.less';
+
+const { TabPane } = Tabs;
+
+const PAGE_SIZE = 8;
+
+export interface ReceivedData {
+  id?: number; 
+  createTime?: string;
+  ruleName?: string;
+  score?: number;
+  remark?: string;
+};
+
+export interface UsageData {
+  id?: number; 
+  createTime?: string;
+  rightTypeName?: string;
+  spendTypeName?: string;
+  point?: number;
+  remark?: string;
+};
+
+export interface FetchParams {
+  current: number;
+  pageSize: number;
+};
+
+export interface EquityInfoProps {
+  equityInfo?: {
+    sumReturnMoney?: number,      // 累计返现金额
+    sumUsedPoint?: number,        // 已用积分
+    sumPoint?: number,            // 累计积分
+    rights?: {
+      acquireWay: string, 
+      id: number, 
+      name: string, 
+      paramWay: string, 
+      parameter: string, 
+      remark: string, 
+      rightTypeEnum: number, 
+      status: number, 
+    }[];
+  };
+
+  fetchReceivedList?: (params: FetchParams) => Promise<{ data: ReceivedData[] , totalCount: number }>;
+  fetchUsageList?: (params: FetchParams) => Promise<{ data: UsageData[] , totalCount: number }>;
+}
+
+const equityTxtMap = {
+  1: '折扣', 
+  2: '返现', 
+  3: '积分', 
+};
+
+const EquityInfo: React.FC<EquityInfoProps> = ({
+  equityInfo = {}, 
+  fetchReceivedList, 
+  fetchUsageList, 
+}) => {
+
+  const [receivedPage, setReceivedPage] = useState(1);
+  const [receivedSize, setReceivedSize] = useState(PAGE_SIZE);
+  const [receivedTotal, setReceivedTotal] = useState(0);
+  const [receivedList, setReceivedList] = useState<ReceivedData[]>([]);
+  const [receivedListLoading, setReceivedListLoading] = useState(false);
+  
+  const [usagePage, setUsagePage] = useState(1);
+  const [usageSize, setUsageSize] = useState(PAGE_SIZE);
+  const [usageTotal, setUsageTotal] = useState(0);
+  const [usageList, setUsageList] = useState<UsageData[]>([]);
+  const [usageListLoading, setUsageListLoading] = useState(false);
+
+  const receivedColumns: EditableColumns[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+    },
+    {
+      title: '会员权益名称',
+      dataIndex: 'rightTypeName	',
+      align: 'center',
+    },
+    {
+      title: '获取数量',
+      dataIndex: 'point',
+      align: 'center',
+    },
+    {
+      title: '获取时间',
+      dataIndex: 'createTime',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      align: 'center',
+      ellipsis: true, 
+    },
+  ];
+  
+  const usageColumns: EditableColumns[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+    },
+    {
+      title: '会员权益名称',
+      dataIndex: 'rightTypeName',
+      align: 'center',
+    },
+    {
+      title: '会员权益使用名称',
+      dataIndex: 'spendTypeName',
+      align: 'center',
+    },
+    {
+      title: '使用数量',
+      dataIndex: 'point',
+      align: 'center',
+    },
+    {
+      title: '使用时间',
+      dataIndex: 'createTime',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      align: 'center',
+      ellipsis: true, 
+    },
+  ];
+
+  const getReceivedList = (params?) => {
+    if (fetchReceivedList) {
+      if (receivedListLoading) {
+        return;
+      }
+      setReceivedListLoading(true);
+      fetchReceivedList({ 
+        current: receivedPage, 
+        pageSize: receivedSize, 
+        ...params, 
+      }).then(res => {
+        const { data = [], totalCount = 0 } = (res || {});
+        setReceivedList(data);
+        setReceivedTotal(totalCount);
+      }).finally(() => {
+        setReceivedListLoading(false);
+      });
+    }
+  };
+  
+  const getUsageList = (params?) => {
+    if (fetchUsageList) {
+      if (usageListLoading) {
+        return;
+      }
+      setUsageListLoading(true);
+      fetchUsageList({ 
+        current: usagePage, 
+        pageSize: usageSize, 
+        ...params, 
+      }).then(res => {
+        const { data = [], totalCount = 0 } = (res || {});
+        setUsageList(data);
+        setUsageTotal(totalCount);
+      }).finally(() => {
+        setUsageListLoading(false);
+      });
+    }
+  };
+
+  useEffect(() => {
+    getReceivedList();
+  }, []);
+
+  const handleTabChange = key => {
+    switch (key) {
+      case '1':
+        getReceivedList();
+        break;
+        
+      case '2':
+        getUsageList();
+        break;
+    
+      default:
+        break;
+    }
+  };
+  
+  const handleReceivedPaginationChange = (page: number, size: number) => {
+    setReceivedPage(page);
+    setReceivedSize(size);
+    getReceivedList({
+      current: page, 
+      pageSize: size, 
+    });
+  };
+  
+  const handleUsagePaginationChange = (page: number, size: number) => {
+    setUsagePage(page);
+    setUsageSize(size);
+    getUsageList({
+      current: page, 
+      pageSize: size, 
+    });
+  };
+
+  return (
+    <div className={styles.equityInfo}>
+      <Row gutter={[0, 24]}>
+        <Col span={24}>
+          <Row gutter={24}>
+            <Col span={8}>
+              <div className={styles.container}>
+                <div className={styles['container-title']}>
+                  当前权益
+                </div>
+                
+                <div className={styles['container-content']}>
+                  <ul className={styles.tofo}>
+                    {equityInfo.rights ? equityInfo.rights.map(item => (
+                      <li key={item.id} className={styles['tofo-item']}>
+                        <div className={styles['tofo-item-logo']}>
+                          <img src={require(`@/asserts/equity-${item.rightTypeEnum}.png`)} />
+                        </div>
+                        <div className={styles['tofo-item-title']}>
+                          {item.name}
+                          <Tooltip title={item.remark}>
+                            <QuestionCircleOutlined />
+                          </Tooltip>
+                        </div>
+                        <div className={styles['tofo-item-extra']}>
+                          <span 
+                            className={classNames(styles['tofo-item-tag'], styles['tofo-item-tag-price'])}
+                          >
+                            {item.parameter} {equityTxtMap[item.rightTypeEnum] || ''}
+                          </span>
+                        </div>
+                      </li>
+                    )) : null}
+                  </ul>
+                </div>
+              </div>
+            </Col>
+
+            <Col span={8}>
+              <div className={styles.container}>
+                <div className={styles['container-content']}>
+                  <div className={styles.exhibition}>
+                    <div className={styles['exhibition-left']}>
+                      <div className={styles['exhibition-title']}>
+                        累计返现金额
+                      </div>
+                      <div className={styles['exhibition-amount']}>
+                        {equityInfo?.sumReturnMoney}
+                        <span>CNY</span>
+                      </div>
+                    </div>
+
+                    <div className={styles['exhibition-right']}>
+                      <div className={styles['exhibition-logo']}>
+                        <img src={require(`@/asserts/equity-4.png`)} />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Col>
+
+            <Col span={8}>
+              <div className={styles.container}>
+                <div className={styles['container-content']}>
+                  <div className={styles.exhibition}>
+                    <div className={styles['exhibition-left']}>
+                      <div className={styles['exhibition-title']}>
+                        可用积分
+                      </div>
+                      <div className={styles['exhibition-amount']}>
+                        {equityInfo?.sumUsedPoint}/{equityInfo?.sumPoint}
+                      </div>
+                    </div>
+
+                    <div className={styles['exhibition-right']}>
+                      <div className={styles['exhibition-logo']}>
+                        <img src={require(`@/asserts/equity-5.png`)} />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Col>
+          </Row>
+        </Col>
+
+        <Col span={24}>
+          <MellowCard
+            title="活跃分获取记录"
+          >
+            <Tabs onChange={handleTabChange}>
+              <TabPane tab="权益获取记录" key="1">
+                <PolymericTable
+                  dataSource={receivedList}
+                  columns={receivedColumns}
+                  loading={receivedListLoading}
+                  pagination={{
+                    pageSize: receivedSize, 
+                    total: receivedTotal,
+                  }}
+                  onPaginationChange={handleReceivedPaginationChange}
+                />
+              </TabPane>
+              <TabPane tab="权益使用记录" key="2">
+                <PolymericTable
+                  dataSource={usageList}
+                  columns={usageColumns}
+                  loading={usageListLoading}
+                  pagination={{
+                    pageSize: usageSize, 
+                    total: usageTotal,
+                  }}
+                  onPaginationChange={handleUsagePaginationChange}
+                />
+              </TabPane>
+            </Tabs>
+          </MellowCard>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default EquityInfo;