新增会员管理模块

config/base.config.json

+{"userRegister":{"useType":{"memberType":[],"businessType":[]},"useDetail":[]},"global":{"logo":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/logo.png","countryList":[{"name":"简体中文-ZH","key":"cn","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/china.png"},{"name":"English-EN","key":"en","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/us.png"},{"name":"日本語-JP","key":"jp","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/japen.png"},{"name":"한국어-KO","key":"ko","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/koren.png"}]}}

config/config.ts

@@ -36,10 +36,17 @@ export default defineConfig({
   // 自定义修改webpack配置
   chainWebpack(memo, { env, webpack, createCSSRule }) {
   },
-
+  
   cssLoader: {
     localsConvention: 'camelCase',  // 将style中的class由 .foo-body 转化为fooBody调用
   },
+  lessLoader: {
+    // 所有less文件都会引入的变量
+    modifyVars: {
+      // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+      'hack': `true; @import "~@/global/styles/theme.less";`
+    }
+  },
   dynamicImport: {
     loading: '@/components/Loading'
   },

config/proxy.ts

 export default {
   '/api': {
-    'target': 'http://10.0.0.129:8100/',
+    'target': 'http://10.0.0.25:8100/',
     'changeOrigin': true,
     'pathRewrite': { '^/api' : '' },
   }

config/router.tsx

-
 /**
  * @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes
  */
@@ -13,13 +12,13 @@ const router = [
     routes: [
       {
         path: '/',
-        redirect: '/home'
+        redirect: '/home',
       },
       {
         path: '/home',
         name: 'home',
         component: '@/pages/home',
-        icon: 'BarChartOutlined'
+        icon: 'BarChartOutlined',
       },
       {
         path: '/pageCustomized',
@@ -43,10 +42,87 @@ const router = [
             hideInMenu: true,
             hidePageHeader: true,
           },
-        ]
+        ],
+      },
+      {
+        path: '/memberAbility',
+        name: 'memberAbility',
+        icon: 'SmileOutlined',
+        routes: [
+          {
+            path: '/memberAbility/manage/import',
+            name: 'memberImport',
+            component: '@/pages/member/memberImport/index',
+          },
+          {
+            path: '/memberAbility/manage/addMember',
+            name: 'addMember',
+            hideInMenu: true,
+            hidePageHeader: true,
+            component: '@/pages/member/memberImport/addMember',
+          },
+          {
+            path: '/memberAbility/manage/maintian',
+            name: 'memberMaintain',
+            component: '@/pages/member/memberMaintain/index',
+          },
+          {
+            path: '/memberAbility/manage/memberPrSubmit',
+            name: 'memberPrSubmit',
+            component: '@/pages/member/memberPrSubmit/index',
+          },
+          {
+            path: '/memberAbility/manage/auditPrSubmit',
+            name: 'auditPrSubmit',
+            hideInMenu: true,
+            hidePageHeader: true,
+            component: '@/pages/member/memberPrSubmit/auditPrSubmit',
+          },
+          {
+            path: '/memberAbility/manage/memberPr',
+            name: 'memberPr',
+            component: '@/pages/member/memberPr/index',
+          },
+          {
+            path: '/memberAbility/manage/auditPr',
+            name: 'memberPr',
+            hideInMenu: true,
+            hidePageHeader: true,
+            component: '@/pages/member/memberPr/auditPr',
+          },
+          {
+            path: '/memberAbility/manage/memberPrConfirm',
+            name: 'memberPrConfirm',
+            component: '@/pages/member/memberPrConfirm/index',
+          },
+          {
+            path: '/memberAbility/manage/auditPrComfirm',
+            name: 'auditPrComfirm',
+            hideInMenu: true,
+            hidePageHeader: true,
+            component: '@/pages/member/memberPrConfirm/auditPrComfirm',
+          },
+          {
+            path: '/memberAbility/manage/memberUpgradeRule',
+            name: 'memberUpgradeRule',
+            component: '@/pages/member/memberUpgradeRule/index',
+          },
+          {
+            path: '/memberAbility/manage/level',
+            name: 'memberLevel',
+            component: '@/pages/member/memberLevel/index',
+          },
+          {
+            path: '/memberAbility/manage/addEquity',
+            name: 'addEquity',
+            hideInMenu: true,
+            hidePageHeader: true,
+            component: '@/pages/member/memberLevel/addEquity',
+          },
+        ],
       },
-    ]
-  }
-]
+    ],
+  },
+];
 
-export default router
+export default router;

package.json

 {
   "name": "god-template",
   "scripts": {
+    "api": "god-ytt",
     "start:analyze": "ANALYZE=1 umi dev",
     "start": "umi dev",
     "build": "umi build",
@@ -22,6 +23,8 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@ant-design/pro-layout": "^5.0.12",
+    "@formily/antd": "^1.2.8",
+    "@formily/antd-components": "^1.2.8",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
     "braft-editor": "^2.3.9",
@@ -36,5 +39,9 @@
     "react-dom": "^16.12.0",
     "umi": "^3.2.0",
     "yorkie": "^2.0.0"
+  },
+  "devDependencies": {
+    "axios": "^0.19.2",
+    "god-yapi2ts": "^1.6.0"
   }
-}
+}
\ No newline at end of file

src/app.tsx

 import { IRoutes } from '.';
 import { history, RequestConfig } from 'umi';
-import React from 'react'
-import mobxProvider from './store'
-import 'mobx-react-lite/batchingForReactDom'
+import React from 'react';
+import mobxProvider from './store';
+import 'mobx-react-lite/batchingForReactDom';
+import '@/global/styles/reset.less'; // 重置antd样式
+import '@/global/styles/global.less'; // 导入全局样式
+// 默认引入所有的ant样式， 不引入css因为无法做到变量覆盖
+import 'antd/dist/antd.less';
 
-let extraRoutes: never[] = []
+let extraRoutes: never[] = [];
 
 /**
  * @description 配置函数，对已配置的路由做修改， 一般与render函数一起结合可根据接口动态配置路由
@@ -12,19 +16,18 @@ let extraRoutes: never[] = []
  * @date 2020-05-20
  * @export
  * @param {IRoutes} { routes } 预先配置好的路由
- * @example 
+ * @example
  *  routes.unshift({
  *    path: '/foo',
  *    exact: true,
  *    component: require('/extraRoutes/foo').default,
  *  });
- * 
+ *
  */
 // export function patchRoutes({ routes }: IRoutes) {
 //   routes.concat(extraRoutes as [])
 // }
 
-
 /**
  * @description 用于渲染前所做的事， 比如动态路由，权限校验等
  * @author xjm
@@ -40,14 +43,13 @@ let extraRoutes: never[] = []
 //   // 做权限校验
 //   fetch('/auth').then((res: any) => {
 //     if (res.isLogin) {
-//       oldRender() 
+//       oldRender()
 //     } else {
 //       history.push('/login')
 //     }
 //   })
 // }
 
-
 /**
  * @description 在初始加载和路由切换时做一些事情
  * @author xjm
@@ -59,7 +61,6 @@ let extraRoutes: never[] = []
 //   console.log(routes, matchedRoutes, location, action)
 // }
 
-
 /**
  * @description 可对最外层做容器包裹
  * @borrows https://umijs.org/zh-CN/docs/runtime-config#onroutechange-routes-matchedroutes-location-action-
@@ -94,4 +95,4 @@ export function rootContainer(container) {
 //   ],
 //   requestInterceptors: [],
 //   responseInterceptors: []
-// }
\ No newline at end of file
+// }

src/components/UploadModal/index.less

+.step0Description{
+  text-align: left;
+  width: 280px;
+  margin: 0 auto;
+  list-style-type: decimal;
+  li{
+    color: #6B778C;
+    font-size: 14px;
+  }
+}
+.step1Description{
+  h4{
+    height:22px;
+    font-size:14px;
+    font-weight:500;
+    color:rgba(23,43,77,1);
+    line-height:22px;
+  }
+  p{
+    height:20px;
+    font-size:14px;
+    font-weight:400;
+    color:rgba(107,119,140,1);
+    line-height:20px;
+  }
+}

src/components/UploadModal/index.tsx

+import React, { useState, useEffect } from 'react';
+import { Modal, Result, Progress, Button } from 'antd';
+import { FileExcelOutlined } from '@ant-design/icons';
+import styles from './index.less';
+import { PublicApi } from '@/services/api';
+
+interface Uploader {
+  visibleModal: boolean;
+  fileText: string;
+  onCancel: Function;
+}
+
+let timeChange: any;
+
+const UploadModal: React.FC<Uploader> = props => {
+  const [modalTitle, setModalTitle] = useState('导入');
+  const [modalStep, setModalStep] = useState(0);
+
+  const downLoadTemplate = () => {};
+
+  const step0Description = (
+    <>
+      <ul className={styles.step0Description}>
+        <li>
+          点击下载 EXCEL文件模板 <a onClick={downLoadTemplate}>下载</a>
+        </li>
+        <li>按照模板整理{props.fileText}</li>
+        <li>点击导入按钮，导入整理好的{props.fileText}</li>
+      </ul>
+    </>
+  );
+
+  const step1Description = (
+    <div className={styles.step1Description}>
+      <h4>正在进行数据导入检查</h4>
+      <p>请稍后…</p>
+    </div>
+  );
+
+  const step1DescripSuccess = (
+    <div className={styles.step1Description}>
+      <h4>无错误格式数据</h4>
+      <p>继续导入请按下一步</p>
+      <Button type="primary" onClick={() => handleUpload('import')}>
+        下一步
+      </Button>
+    </div>
+  );
+
+  const step1Exception = (
+    <div className={styles.step1Description}>
+      <h4>存在错误格式数据，已生成错误日志</h4>
+      <p>请导出错误日志修正数据后再次导入</p>
+    </div>
+  );
+
+  const step2Description = (
+    <div className={styles.step1Description}>
+      <h4>正在进行数据导入</h4>
+      <p>请稍后…</p>
+    </div>
+  );
+
+  const step2DescripSuccess = (
+    <div className={styles.step1Description}>
+      <h4>数据全部导入成功</h4>
+      <p>继续导入请点击继续导入，导入完成请点击导入完成</p>
+      <Button type="primary" onClick={() => handleUpload('continue')}>
+        继续导入
+      </Button>
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <Button onClick={() => props.onCancel()}>完成导入</Button>
+    </div>
+  );
+
+  const step2Exception = (
+    <div className={styles.step1Description}>
+      <h4>导入完成请点击导入完成</h4>
+      <p>已生成错误日志，请导出错误日志修正数据后再次导入</p>
+    </div>
+  );
+
+  // 导入的时候的描述文字
+  const [step1DescriptState, setStep1DescriptState] = useState(
+    step1Description,
+  );
+  const [step2DescriptState, setStep2DescriptState] = useState(
+    step2Description,
+  );
+
+  // timer  计时器模拟导入过程
+  const [exceptionCheck, setExceptionCheck] = useState(false); // 默认无异常
+  const [exceptionData, setExceptionData] = useState(false); // 默认无异常
+  const [time, setTime] = useState(0); // timer
+
+  useEffect(() => {
+    clearInterval(timeChange);
+  }, []);
+
+  useEffect(() => {
+    if (modalStep === 1) runTimer();
+    if (modalStep === 2) runTimer();
+  }, [modalStep]);
+
+  useEffect(() => {
+    if (time >= 100) {
+      clearInterval(timeChange);
+      setTime(100);
+      if (modalStep === 1) setStep1DescriptState(step1DescripSuccess);
+      if (modalStep === 2) setStep2DescriptState(step2DescripSuccess);
+    }
+  }, [time]);
+
+  const runTimer = () => {
+    setTime(0);
+    timeChange = setInterval(
+      () => setTime(t => t + Math.floor(Math.random() * 10)),
+      200,
+    );
+  };
+  //timer end
+
+  // 导入的时候 进度条的颜色配置
+  const step1Icon = (
+    <Progress
+      type="circle"
+      strokeColor={{
+        '0%': '#669EDE',
+        '100%': '#41CC9E',
+      }}
+      percent={time}
+    />
+  );
+
+  const step2Icon = (
+    <Progress
+      type="circle"
+      strokeColor={{
+        '0%': '#669EDE',
+        '100%': '#41CC9E',
+      }}
+      percent={time}
+    />
+  );
+
+  // 上传
+  const handleUpload = (type: string, step: number = 0) => {
+    let title = '';
+    switch (type) {
+      case 'continue':
+        step = 0;
+        title = '继续导入';
+        break;
+      case 'upload':
+        step = 1;
+        title = '导入检查';
+        break;
+      case 'import':
+        step = 2;
+        title = '数据导入';
+        break;
+    }
+    setModalStep(step);
+    setModalTitle(title);
+  };
+
+  const exportErrorLog = () => {};
+
+  const handleClose = () => {
+    setModalStep(0);
+    setModalTitle('导入');
+    setTime(0);
+    clearInterval(timeChange);
+  };
+
+  return (
+    <>
+      <Modal
+        title={modalTitle}
+        visible={props.visibleModal}
+        onCancel={() => props.onCancel()}
+        afterClose={() => handleClose()}
+        maskClosable={false}
+        footer={null}
+        destroyOnClose
+      >
+        {modalStep === 0 && (
+          <>
+            <Result
+              icon={<FileExcelOutlined />}
+              title={step0Description}
+              extra={
+                <Button
+                  style={{ width: '100%' }}
+                  type="primary"
+                  onClick={() => handleUpload('upload')}
+                >
+                  上传
+                </Button>
+              }
+            />
+          </>
+        )}
+        {modalStep === 1 && !exceptionCheck && (
+          <>
+            <Result icon={step1Icon} title={step1DescriptState} />
+          </>
+        )}
+        {modalStep === 1 && exceptionCheck && (
+          <>
+            <Result
+              icon={<Progress type="circle" percent={100} status="exception" />}
+              title={step1Exception}
+              extra={<Button onClick={exportErrorLog}>导出错误日志</Button>}
+            />
+          </>
+        )}
+        {modalStep === 2 && !exceptionData && (
+          <>
+            <Result icon={step2Icon} title={step2DescriptState} />
+          </>
+        )}
+        {modalStep === 2 && exceptionData && (
+          <>
+            <Result
+              icon={<Progress type="circle" percent={100} status="exception" />}
+              title={step2Exception}
+              extra={<Button onClick={exportErrorLog}>导出错误日志</Button>}
+            />
+          </>
+        )}
+      </Modal>
+    </>
+  );
+};
+
+export default UploadModal;

src/global/config/global.d.ts

+export interface UseType {
+	memberType: any[];
+	businessType: any[];
+}
+
+export interface UserRegister {
+	useType: UseType;
+	useDetail: any[];
+}
+
+export interface CountryList {
+	name: string;
+	key: string;
+	icon: string;
+}
+
+export interface Global {
+	logo: string;
+	countryList: CountryList[];
+}
+
+export interface RootObject {
+	userRegister: UserRegister;
+	global: Global;
+}
\ No newline at end of file

src/global/config/index.ts

+/**
+ * 
+ * **********
+ * 脚本注入全局配置
+ * 
+ * **********
+ */
+
+import SELF_CONFIG from '../../../config/base.config.json'
+import { RootObject } from './global'
+
+export const GlobalConfig: RootObject = SELF_CONFIG

src/global/styles/global.less

+/********************************** 布局 ******************************************/
+@import './mixins/layout.less';
+@import './index.less';
+@import '../../theme/style/colors.less';
+
+@makeCenters : text,
+block,
+flex,
+flexAlign,
+flexJustify,
+absolute,
+fixed,
+margin;
+@makeCentersLen: length(@makeCenters);
+
+.loopCenter(@list, @i: 1, @val: extract(@list, @i)) when (@i < @makeCentersLen + 1) {
+  .center-@{val} {
+    .make-center(@val);
+  }
+
+  .loopCenter(@list, @i + 1)
+}
+
+;
+.loopCenter(@makeCenters);
+
+// antd default
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #6B778C;
+}
+
+.@{prefix}-margin_content {
+  .center-margin;
+  width: 1190px;
+}
+
+.@{prefix}-content1024 {
+  .center-margin;
+  width: 1024px;
+}
+
+// 公共的title伪类竖线
+.commonPanelTitle {
+  padding-left: 8px;
+  position: relative;
+
+  &::before {
+    content         : "";
+    display         : inline-block;
+    position        : absolute;
+    left            : 0;
+    top             : 50%;
+    margin-top      : -.42667rem;
+    width           : 2px;
+    height          : .85333rem;
+    background-color: @primary-color;
+    box-shadow: 0 0.14933rem 0.256rem 0 rgba(97, 144, 232, .2);
+    border-radius: 1px;
+  }
+}
+
+// 公共显示隐藏处理
+.commonShowBlock {
+  display: block;
+}
+
+.commonShow {
+  display: inline-block;
+}
+
+.commonHide {
+  display: none;
+}
+
+// 公共着色 主体颜色
+.commonPickColor {
+  color: @main-color;
+}
+
+// 公共状态 圆点
+.commonStatus {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.commonStatusStop {
+  .commonStatus();
+  background-color: @status-stop; // 停用
+}
+
+.commonStatusModify {
+  .commonStatus();
+  background-color: @status-modify; // 已修改
+}
+
+.commonStatusValid {
+  .commonStatus();
+  background-color: @status-valid; // 已生成，有效、审核通过
+}
+
+.commonStatusInvalid {
+  .commonStatus();
+  background-color: @status-invalid; // 未生成，无效、待审核
+}
+
+.commonStatusNoPass {
+  .commonStatus();
+  background-color: @status-nopass; // 审核不通过
+}
+
+.mb-30 {
+  margin-bottom: 30px;
+}
+
+.sc-fzpans {
+  display: block;
+  width  : 100%;
+}
+
+
+.mr_t-40 {
+  margin-top: 40px;
+}
+
+#registerForm {
+  .ant-input-group-addon {
+    padding: 0;
+    border: none;
+    background: none;
+  }
+}
\ No newline at end of file

src/global/styles/index.less

+@primary-color: #00B37A;
+
+// 公共padding变量
+@padding-lg: 24px;
+@padding-sm: 12px;
+@padding-xs: 8px;
+@padding-xss: 4px;
+
+// 公共margin变量
+@margin-lg: 24px;
+@margin-md: 16px;
+@margin-sm: 12px;
+@margin-xs: 8px;
+@margin-xss: 4px;
\ No newline at end of file

src/global/styles/mixins/layout.less

+/**
+* @description 布局类
+* @author xjm
+*/
+
+// ------------  容器container  ------------
+
+.make-container(@pad-x: @padding-lg) {
+  width: 100%;
+  .make-center(block);
+}
+.make-container(@pad-x) when not (@pad-x = none) {
+  padding-left: @pad-x;
+  padding-right: @pad-x;
+}
+
+// ------------  居中相关 center  ------------
+
+.make-center(@type:text) {}
+.make-center(@type) when (@type = text) {
+  text-align: center;
+}
+.make-center(@type) when (@type = margin) {
+  margin-left: auto;
+  margin-right: auto;
+}
+.make-center(@type) when (@type = block) {
+  .make-center(center);
+  display: block;
+}
+.make-center(@type) when (@type = flex) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.make-center(@type) when (@type = flexAlign) {
+  display: flex;
+  align-items: center;
+}
+.make-center(@type) when (@type = flexJustify) {
+  display: flex;
+  justify-content: center;
+}
+.make-center(@type) when (@type = absolute), (@type = fixed) {
+  position: @type;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}    
+
+// margin带上下边距居中
+.make-center-space(@type: margin, @top: 0, @bottom: 0) {
+  .make-center(@type);
+  margin-top: unit(@top, px);
+  margin-bottom: unit(@bottom, px);
+}
+
+// position绝对定位
+.ab-position(@_, @_, @num1: 0, @num2: 0){
+  position: absolute;
+}
+.ab-position(right, bottom, @num1: 0, @num2: 0){
+  right: @num1 * 1px;
+  bottom: @num2 * 1px;
+}
+.ab-position(right, top, @num1: 0, @num2: 0){
+  right: @num1 * 1px;
+  top: @num2 * 1px;
+}
+.ab-position(left, bottom, @num1: 0, @num2: 0){
+  left: @num1 * 1px;
+  bottom: @num2 * 1px;
+}
+.ab-position(left, top, @num1: 0, @num2: 0){
+  left: @num1 * 1px;
+  top: @num2 * 1px;;
+}
+
+
+// 高 行高等同并混入字体大小 颜色
+.mixinFontSize (@size) when (isnumber(@size)) {
+  font-size: unit(@size, px);
+}
+.mixinFontColor (@color) when (iscolor(@color)) {
+  color: @color;
+}
+.mixinBgColor(@bgcolor) when (iscolor(@bgcolor)) {
+  background-color: @bgcolor;
+}
+.font-height-color (@size: undefined, @height, @color: undefined, @bgcolor: undefined) {
+  .mixinFontSize(@size);
+  height: unit(@height, px);
+  line-height: unit(@height, px);
+  .mixinFontColor(@color);
+  .mixinBgColor(@bgcolor);
+}
\ No newline at end of file

src/global/styles/reset.less

+@import './mixins/layout.less';
+
+#root {
+  .identityRadio{
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    .make-center(text);
+    & label{
+      width: 320px;
+      height: 48px;
+      .make-center-space(margin, 12);
+      vertical-align: middle;
+      line-height: 48px;
+    }
+  }
+  .businessRadio{
+    display: flex;
+    flex-wrap: wrap;
+    width: 320px;
+    .make-center(margin);
+    .make-center(text);
+    & label{
+      width: 148px;
+      height: 32px;
+      line-height: 32px;
+      margin: 8px 0;
+    }
+    & label:nth-child(odd) {
+      margin-right: 24px;
+    }
+  }
+}
\ No newline at end of file

src/global/styles/theme.less

+/**
+* global
+*/
+@prefix: lingxi-business;
+
+// layout
+@header-nav-height        : 64px;
+@layout-min-content-height: 100vh;
+
+/**
+* colors
+*/
+
+@white: #fff;
+
+// global main color
+@main-color: #00B37A;
+
+// layout
+@header-global-nav-bg: #38414A;
+@menu-select-color   : rgba(0, 0, 0, 0.85);
+@menu-select-bg      : rgba(0, 0, 0, .02);
+@menu-circle-color   : #D8DEE4;
+
+// status circle color
+@status-stop   : #C1C7D0; // 停用
+@status-modify : #669EDE; // 已修改、待提交
+@status-valid  : #41CC9E; // 已生成，有效、审核通过
+@status-invalid: #FFC400; // 未生成，无效、待审核
+@status-nopass: #EF6260; // 审核不通过

src/layouts/index.tsx

-import { Link, useIntl } from 'umi'
-import React, { useState, useRef, useEffect } from 'react'
+import { Link, useIntl } from 'umi';
+import React, { useState, useRef, useEffect } from 'react';
 import ProLayout, {
   BasicLayoutProps as ProLayoutProps,
   DefaultFooter,
@@ -9,13 +9,13 @@ import ProLayout, {
 } from '@ant-design/pro-layout';
 import RightContent from './RightContent';
 import { Button } from 'antd';
-import styles from './index.less'
-import cx from 'classnames'
+import styles from './index.less';
+import cx from 'classnames';
 import MenuSlider from './components/menuSlider';
 import PageHeader from './components/PageHeader';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
-import { MenuDataItem } from '@/utils/typing'
-import { getMatchMenu } from '@umijs/route-utils'
+import { MenuDataItem } from '@/utils/typing';
+import { getMatchMenu } from '@umijs/route-utils';
 
 const defaultFooterDom = (
   <DefaultFooter
@@ -31,24 +31,32 @@ export const getSelectedMenuKeys = (
 ): string[] => {
   const menus = getMatchMenu(pathname, menuData);
 
-  return menus.map((item) => item.key || item.path || '');
+  return menus.map(item => item.key || item.path || '');
 };
 
-
-
-const Layout = (props) => {
+const Layout = props => {
   const { formatMessage } = useIntl();
-  const basicInfo = getMenuData(props.route.routes, { locale: true }, formatMessage)
-  const [collapseState, setCollapseState] = useState(false)
+  const basicInfo = getMenuData(
+    props.route.routes,
+    { locale: true },
+    formatMessage,
+  );
+  const [collapseState, setCollapseState] = useState(false);
   const defaultOpenKeysRef = useRef<string[]>([]);
   const [selectedKeys, setSelectedKeys] = useState<string[] | undefined>([]);
 
-  const keys = getSelectedMenuKeys(location.pathname || '/', basicInfo.menuData || []);
+  const keys = getSelectedMenuKeys(
+    location.pathname || '/',
+    basicInfo.menuData || [],
+  );
   defaultOpenKeysRef.current = keys;
 
   useEffect(() => {
     // if pathname can't match, use the nearest parent's key
-    const keys = getSelectedMenuKeys(location.pathname || '/', basicInfo.menuData || []);
+    const keys = getSelectedMenuKeys(
+      location.pathname || '/',
+      basicInfo.menuData || [],
+    );
     const animationFrameId = requestAnimationFrame(() => {
       setSelectedKeys(keys);
     });
@@ -58,18 +66,34 @@ const Layout = (props) => {
   }, [location.pathname]);
 
   // 标题生成
-  const currentRouter = basicInfo.breadcrumb[props.location.pathname]
-  const headerTitle = currentRouter?.name
+  const currentRouter = basicInfo.breadcrumb[props.location.pathname];
+  const headerTitle = currentRouter?.name;
 
   return (
     <ProLayout
-      title='瓴犀'
-      navTheme='light'
+      title="瓴犀"
+      navTheme="light"
       formatMessage={formatMessage}
-      onCollapse={collapse => { setCollapseState(collapse) }}
+      onCollapse={collapse => {
+        setCollapseState(collapse);
+      }}
+      breadcrumbRender={(routers = []) => []}
       collapsed={collapseState}
-      collapsedButtonRender={() => collapseState ? <MenuUnfoldOutlined style={{ color: '#fff' }} /> : <MenuFoldOutlined style={{ color: '#fff' }} />}
-      menuRender={headerProps => <MenuSlider selectedKeys={selectedKeys} defaultOpenKeysRef={defaultOpenKeysRef} collapseState={collapseState} {...headerProps} />}
+      collapsedButtonRender={() =>
+        collapseState ? (
+          <MenuUnfoldOutlined style={{ color: '#fff' }} />
+        ) : (
+          <MenuFoldOutlined style={{ color: '#fff' }} />
+        )
+      }
+      menuRender={headerProps => (
+        <MenuSlider
+          selectedKeys={selectedKeys}
+          defaultOpenKeysRef={defaultOpenKeysRef}
+          collapseState={collapseState}
+          {...headerProps}
+        />
+      )}
       footerRender={() => defaultFooterDom}
       // headerRender={() => []}
       rightContentRender={() => <RightContent />}
@@ -77,11 +101,16 @@ const Layout = (props) => {
       {...props}
     >
       <PageHeader title={headerTitle} routeInfo={currentRouter} />
-      <div className={cx(styles.lxPageContent, currentRouter?.hidePageHeader ? styles.noHeader : '')}>
+      <div
+        className={cx(
+          styles.lxPageContent,
+          currentRouter?.hidePageHeader ? styles.noHeader : '',
+        )}
+      >
         {props.children}
       </div>
     </ProLayout>
-  )
-}
+  );
+};
 
-export default Layout
\ No newline at end of file
+export default Layout;

src/locales/en-US/menu.ts

@@ -4,5 +4,5 @@ export default {
   'menu.home': 'index',
   'menu.memberManage': 'member',
   'menu.memberManage.addMemberRole': 'addMemberRole',
-  'menu.memberManage.memberMenuManage': 'memberMenuManage'
+  'menu.memberManage.memberMenuManage': 'memberMenuManage',
 }
\ No newline at end of file

src/locales/zh-CN/menu.ts

@@ -43,6 +43,19 @@ export default {
   'menu.pageCustomized.shopCenterTemplate': '商城模版',
   'menu.pageCustomized.shopTemplate': '店铺模版',
   'menu.pageCustomized.templateDetail': '模版详情',
-
+  // 会员能力
+  'menu.memberAbility': '会员管理',
+  'menu.memberAbility.memberImport': '会员导入',
+  'menu.memberAbility.addMember': '新增会员',
+  'menu.memberAbility.memberMaintain': '会员维护',
+  'menu.memberAbility.memberPrSubmit': '待提交审核',
+  'menu.memberAbility.auditPrSubmit': '待提交审核详情',
+  'menu.memberAbility.memberPr': '待审核',
+  'menu.memberAbility.auditPr': '待审核详情',
+  'menu.memberAbility.memberPrConfirm': '待确认审核',
+  'menu.memberAbility.auditPrComfirm': '待确认审核详情',
+  'menu.memberAbility.memberUpgradeRule': '会员升级规则',
+  'menu.memberAbility.memberLevel': '会员等级',
+  'menu.memberAbility.addEquity': '会员权益设置',
 }
 // export default utils.transformDataPre(data, 'menu')

src/pages/member/components/index.less

+.col {
+  margin-bottom: 16px;
+}
+
+.subRow {
+  width: 100%;
+
+  .subCol {
+    width     : 100%;
+    text-align: right;
+
+    .select {
+      width     : 160px;
+      margin    : 0 0 16px 16px;
+      text-align: left;
+
+      &:nth-of-type(1) {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.mainCol {
+  background-color: #fff;
+  margin-bottom   : 24px;
+  padding         : 0 24px;
+  box-sizing      : border-box;
+
+  &-title {
+    font-size  : 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color      : #172B4D;
+    padding    : 20px 0;
+  }
+
+  &:nth-last-of-type(1) {
+    margin: 0;
+  }
+
+  &-row {
+    display       : flex;
+    flex-wrap     : wrap;
+    padding-bottom: 16px;
+
+    &-col {
+      display: flex;
+      width  : calc(100% / 2);
+      padding: 16px 0;
+
+      &-option {
+        flex       : 1;
+        font-size  : 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color      : #6B778C;
+
+        &:nth-last-of-type(1) {
+          flex         : 3;
+          padding-right: 20px;
+          box-sizing   : border-box;
+          color        : #172B4D;
+        }
+      }
+    }
+  }
+
+  &-rows {
+    display       : flex;
+    padding-bottom: 16px;
+
+    &-cols {
+      flex: 1;
+
+      .cols-main {
+        display: flex;
+        padding: 16px 0;
+
+        &:nth-last-of-type(1) {
+          padding-bottom: 0;
+        }
+
+        &-options {
+          flex       : 1;
+          font-size  : 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color      : #6B778C;
+
+          &:nth-last-of-type(1) {
+            flex         : 3;
+            padding-right: 20px;
+            box-sizing   : border-box;
+            color        : #172B4D;
+          }
+        }
+      }
+    }
+  }
+}
+
+.nameCell {
+  text-align: left;
+
+  .nameCellTitle {
+    color : @main-color;
+    cursor: pointer;
+  }
+
+  .levelIcon1 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("/static/imgs/level1@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon2 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("/static/imgs/level2@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon3 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("/static/imgs/level3@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+}
+
+.headerTop {
+  display    : flex;
+  align-items: center;
+  font-size  : 20px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+
+  &-prefix {
+    width           : 48px;
+    height          : 48px;
+    line-height     : 48px;
+    border-radius   : 4px;
+    border          : 1px solid #DFE1E6;
+    color           : #fff;
+    text-align      : center;
+    background-color: #8777D9;
+  }
+
+  &-name {
+    color : #172B4D;
+    margin: 0 8px 0 12px;
+  }
+}
+
+.headerMain {
+  display: flex;
+
+  &-left {
+    flex        : 6;
+    display     : flex;
+    flex-wrap   : wrap;
+    padding-left: 90px;
+
+    &-option {
+      display      : flex;
+      width        : calc(100% / 3);
+      margin-bottom: 17px;
+      font-size    : 14px;
+      font-family  : PingFangSC-Regular, PingFang SC;
+      font-weight  : 400;
+      color        : #6B778C;
+      padding-right: 20px;
+
+      &:nth-of-type(n + 4) {
+        margin: 0;
+      }
+
+      div {
+        flex: 1;
+
+        &:nth-last-of-type(1) {
+          flex: 2;
+        }
+      }
+
+    }
+  }
+
+  &-right {
+    flex      : 1;
+    text-align: right;
+  }
+}
+
+.saveBtn {
+  color      : #fff;
+  background : @main-color;
+  margin-left: 10px;
+}
\ No newline at end of file

src/pages/member/memberImport/index.less

+.col {
+  margin-bottom: 16px;
+
+  &:nth-last-of-type(1) {
+    text-align: right;
+  }
+}
+
+.subRow {
+  width: 100%;
+
+  .subCol {
+    width     : 100%;
+    text-align: right;
+
+    .select {
+      width     : 160px;
+      margin    : 0 0 16px 16px;
+      text-align: left;
+
+      &:nth-of-type(1) {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.nameCell {
+  text-align: left;
+
+  .nameCellTitle {
+    color : @main-color;
+    cursor: pointer;
+  }
+
+  .levelIcon1 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("/static/imgs/level1@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon2 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("/static/imgs/level2@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon3 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("/static/imgs/level3@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+}
+
+.importBtn {
+  margin: 0 16px;
+}
+
+.headerTop {
+  display    : flex;
+  align-items: center;
+
+  span {
+    font-size  : 14px;
+    font-weight: 400;
+
+    &:nth-last-of-type(1) {
+      font-size  : 20px;
+      font-weight: 500;
+      color      : #172B4D;
+      margin-left: 16px;
+    }
+  }
+}
+
+.saveBtn {
+  color     : #fff;
+  background: @main-color
+}
+
+.btn {
+  display      : inline-block;
+  width        : 32px;
+  line-height  : 32px;
+  text-align   : center;
+  border       : 1px solid #EBFBFC;
+  border-radius: 2px;
+  cursor       : pointer;
+  overflow     : hidden;
+
+  &:nth-last-of-type(1) {
+    margin-left: 8px;
+  }
+
+  &:hover {
+    background-color: #00B37A;
+    border          : 0;
+    color           : #fff;
+  }
+
+  &-icon {
+    width : 20px;
+    height: 20px;
+    color : '#6B778C';
+  }
+}
+
+.required {
+  display     : inline-block;
+  margin-right: 4px;
+  color       : #ff4d4f;
+  font-size   : 14px;
+  font-family : SimSun, sans-serif;
+  line-height : 1;
+}
\ No newline at end of file

src/pages/member/memberLevel/addEquity.tsx

+import React, { ReactNode, useState, useRef } from 'react'
+import { history } from 'umi'
+import { Button, Popconfirm, Card, Input, Slider } from 'antd'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import { PlayCircleOutlined, ContainerOutlined } from '@ant-design/icons'
+import { StandardTable } from 'god'
+import { ColumnType } from 'antd/lib/table/interface'
+import './index.less'
+
+const data = [
+  {
+    key: '1',
+    id: '1',
+    name: '价格权益',
+    explain: '交易一方能获得另一方的价格折扣',
+    type: '交易获取',
+    setting: '按交易金额比例设置',
+    params: '1',
+    status: 2
+  },
+  {
+    key: '2',
+    id: '2',
+    name: '返现权益',
+    explain: '交易一方能获得另一方的交易返现',
+    type: '交易获取',
+    setting: '按交易金额比例设置',
+    params: '1',
+    status: 1
+  }
+]
+
+const addEquity: React.FC<[]> = () => {
+  const ref = useRef({})
+  const [thresholdValue, setThresholdValue] = useState(10000)
+
+  const marks = {
+    0: '0',
+    5000: '5000',
+    10000: '10000',
+    15000: '15000',
+    20000: '20000',
+    50000: '50000',
+  };
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+      key: 'id',
+    },
+    {
+      title: '会员权益名称',
+      dataIndex: 'name',
+      align: 'center',
+      key: 'name',
+    },
+    {
+      title: '会员权益说明',
+      dataIndex: 'explain',
+      align: 'center',
+      key: 'explain',
+    },
+    {
+      title: '权益获取方式',
+      dataIndex: 'type',
+      align: 'center',
+      key: 'type',
+    },
+    {
+      title: '参数设置方式',
+      dataIndex: 'setting',
+      align: 'center',
+      key: 'setting',
+    },
+    {
+      title: '参数',
+      dataIndex: 'params',
+      align: 'center',
+      key: 'params',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      align: 'center',
+      key: 'status',
+      render: (text: any, record: any) => {
+        let component: ReactNode = null
+        component = (
+          <Popconfirm
+            title="确定要执行这个操作?"
+            onConfirm={confirm}
+            onCancel={cancel}
+            okText="是"
+            cancelText="否"
+          >
+            <Button type="link" onClick={() => handleModify(record)} style={record.status === 1 ? { color: '#00B37A' } : { color: 'red' }}>{record.status === 1 ? '有效' : '无效'} <PlayCircleOutlined /></Button>
+          </Popconfirm>
+        )
+        return component
+      }
+    }
+  ];
+
+  // 模拟请求
+  const fetchData = (params: any) => {
+    return new Promise((resolve, reject) => {
+      const queryResult = data.find(v => v.key === params.keywords)
+      setTimeout(() => {
+        resolve({
+          code: 200,
+          message: '',
+          data: queryResult ? [queryResult] : data
+        })
+      }, 1000)
+    })
+  }
+
+  const handleSee = (record: any) => {
+
+  }
+
+  const confirm = () => {
+    console.log('confirm')
+  }
+
+  const cancel = () => {
+    console.log('cancel')
+  }
+
+  const handleModify = (record: object) => {
+    // 通过传入的params字符串判断是修改那种类型的数据
+    console.log('执行状态修改', record)
+  }
+
+  const handleInput = (e: any) => {
+    console.log(e)
+  }
+
+  return (
+    <PageHeaderWrapper
+      onBack={() => window.history.back()}
+      title={
+        <>
+          <div className='headerTop'>
+            <div className='headerTop-icon'>钻</div>
+            <div className='headerTop-level'>钻石会员</div>
+            <div className='headerTop-identity'>商户会员</div>
+          </div>
+        </>
+      }
+      content={
+        <div className='headerMain'>
+          <div className='headerMain-left'>
+            <div className='headerMain-left-option'>
+              <div>会员等级：</div>
+              <div>1</div>
+            </div>
+            <div className='headerMain-left-option'>
+              <div>升级分值标签：</div>
+              <div>交易分</div>
+            </div>
+            <div className='headerMain-left-option'>
+              <div>角色类型：</div>
+              <div>服务消费</div>
+            </div>
+            <div className='headerMain-left-option'>
+              <div>会员等级说明：</div>
+              <div>商户所属钻石会员</div>
+            </div>
+            <div className='headerMain-left-option'>
+              <div>会员角色名称：</div>
+              <div>采购商</div>
+            </div>
+            <div className='headerMain-left-option'>
+              <div>会员类型：</div>
+              <div>企业会员</div>
+            </div>
+          </div>
+          <div className='headerMain-right'>
+            <Button className='saveBtn' icon={<ContainerOutlined />}>保存</Button>
+          </div>
+        </div>
+      }
+    >
+      <Card>
+        <StandardTable
+          columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchData(params)}
+          controlRender={
+            <>
+              <div className='extra'>
+                <h3>升级阀值</h3>
+                <div className='extra-main'>
+                  <div className='extra-main-content left'>
+                    <div className='icon'>当前阀值</div>
+                    <div className='input'>
+                      <div className='input-main'>
+                        <Input className='input-main-com'
+                          value={thresholdValue}
+                          onChange={(e: any) => { e.persist(); setThresholdValue(e.target.value) }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className='extra-main-content right'>
+                    <Slider
+                      marks={marks}
+                      max={50000}
+                      value={thresholdValue}
+                      onChange={(val: number) => setThresholdValue(val)}
+                    />
+                  </div>
+                </div>
+              </div>
+              <h3>会员权益</h3>
+            </>
+          }
+        />
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default addEquity
\ No newline at end of file

src/pages/member/memberLevel/index.less

+.col {
+  margin-bottom: 12px;
+  text-align   : right;
+}
+
+.resetBtn {
+  margin-left: 16px;
+}
+
+.headerMain {
+  display: flex;
+
+  &-left {
+    flex        : 6;
+    display     : flex;
+    flex-wrap   : wrap;
+    padding-left: 90px;
+
+    &-option {
+      display      : flex;
+      width        : calc(100% / 3);
+      margin-bottom: 17px;
+      font-size    : 14px;
+      font-family  : PingFangSC-Regular, PingFang SC;
+      font-weight  : 400;
+      color        : #6B778C;
+      padding-right: 20px;
+
+      &:nth-of-type(n + 4) {
+        margin: 0;
+      }
+
+      div {
+        flex: 1;
+
+        &:nth-last-of-type(1) {
+          flex: 2;
+        }
+      }
+
+    }
+  }
+
+  &-right {
+    flex      : 1;
+    text-align: right;
+
+    .saveBtn {
+      color     : #fff;
+      background: @main-color
+    }
+  }
+}
+
+.nameCellTitle {
+  color : @main-color;
+  cursor: pointer;
+}
+
+.levelIcon1 {
+  width          : 100%;
+  height         : 20px;
+  background     : url("/static/imgs/vip1@2x.png") no-repeat center;
+  background-size: 24px 20px;
+}
+
+.levelIcon2 {
+  width          : 100%;
+  height         : 20px;
+  background     : url("/static/imgs/vip2@2x.png") no-repeat center;
+  background-size: 24px 20px;
+}
+
+.levelIcon3 {
+  width          : 100%;
+  height         : 20px;
+  background     : url("/static/imgs/vip3@2x.png") no-repeat center;
+  background-size: 24px 20px;
+}
+
+.levelIcon4 {
+  width          : 100%;
+  height         : 20px;
+  background     : url("/static/imgs/vip4@2x.png") no-repeat center;
+  background-size: 24px 20px;
+}
+
+.headerTop {
+  display    : flex;
+  align-items: center;
+  font-size  : 20px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+
+  &-icon {
+    width           : 48px;
+    height          : 48px;
+    line-height     : 48px;
+    border-radius   : 4px;
+    border          : 1px solid #DFE1E6;
+    color           : #fff;
+    text-align      : center;
+    background-color: #8777D9;
+  }
+
+  &-level {
+    color : #172B4D;
+    margin: 0 8px 0 12px;
+  }
+
+  &-identity {
+    width           : 72px;
+    height          : 24px;
+    line-height     : 24px;
+    background-color: #FFEBE6;
+    border-radius   : 4px;
+    color           : #E63F3B;
+    font-size       : 14px;
+    font-weight     : 400;
+    text-align      : center;
+  }
+}
+
+h3 {
+  margin-bottom: 20px;
+}
+
+.extra {
+  margin-bottom: 48px;
+
+  &-main {
+    display: flex;
+
+    &-content {
+      position: relative;
+      flex    : 1;
+      height  : 104px;
+
+      &:nth-last-of-type(1) {
+        flex: 2.5;
+      }
+    }
+
+    .left {
+      display        : flex;
+      justify-content: center;
+      align-items    : center;
+
+      .icon {
+        position        : absolute;
+        left            : 0;
+        top             : 0;
+        width           : 72px;
+        height          : 24px;
+        color           : #fff;
+        background-color: #42526E;
+        border-radius   : 4px 0px 4px 0px;
+        text-align      : center;
+      }
+
+      .input {
+        display        : flex;
+        justify-content: center;
+
+        &-main {
+          position      : relative;
+          width         : 128px;
+          height        : 38px;
+          padding-bottom: 8px;
+
+          &::after {
+            content         : '';
+            position        : absolute;
+            left            : 0;
+            bottom          : 0;
+            width           : 100%;
+            height          : 1px;
+            background-color: #DFE1E6;
+          }
+
+          &-com {
+            width           : 100%;
+            height          : 100%;
+            border          : 0;
+            outline         : none;
+            background-color: rgba(0, 0, 0, 0);
+            font-size       : 32px;
+            font-family     : PingFangSC-Medium, PingFang SC;
+            font-weight     : 500;
+            color           : #172B4D;
+          }
+        }
+      }
+    }
+
+    .right {
+      padding: 27px 40px;
+    }
+  }
+}
\ No newline at end of file

src/pages/member/memberLevel/index.tsx

+import React, { ReactNode, useState, useRef, useEffect } from 'react';
+import { history } from 'umi';
+import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd';
+import {
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  EyeOutlined,
+} from '@ant-design/icons';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+import style from './index.less';
+import { PublicApi } from '@/services/api';
+
+const data = [
+  {
+    key: '1',
+    id: '1',
+    level: '1',
+    levelTab: '钻石会员',
+    levelType: '商户会员',
+    scoreTab: '交易分',
+    name: '采购商',
+    type: '服务消费',
+    roleType: '企业会员',
+    thresvalue: '100000',
+    status: 1,
+  },
+  {
+    key: '2',
+    id: '2',
+    level: '2',
+    levelTab: '钻石会员',
+    levelType: '商户会员',
+    scoreTab: '交易分',
+    name: '采购商',
+    type: '服务消费',
+    roleType: '企业会员',
+    thresvalue: '100000',
+    status: 2,
+  },
+  {
+    key: '3',
+    id: '3',
+    level: '3',
+    levelTab: '钻石会员',
+    levelType: '商户会员',
+    scoreTab: '交易分',
+    name: '采购商',
+    type: '服务消费',
+    roleType: '企业会员',
+    thresvalue: '100000',
+    status: 1,
+  },
+  {
+    key: '4',
+    id: '4',
+    level: '4',
+    levelTab: '钻石会员',
+    levelType: '商户会员',
+    scoreTab: '交易分',
+    name: '采购商',
+    type: '服务消费',
+    roleType: '企业会员',
+    thresvalue: '100000',
+    status: 2,
+  },
+];
+
+const memberLevel: React.FC<[]> = () => {
+  const ref = useRef({});
+  const [keywords, setKeywords] = useState('');
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+      key: 'id',
+    },
+    {
+      title: '会员等级',
+      dataIndex: 'level',
+      align: 'center',
+      key: 'level',
+      render: (text: any, record: any) => (
+        <div className={style[`levelIcon${record.level}`]}></div>
+      ),
+    },
+    {
+      title: '会员等级标签',
+      dataIndex: 'levelTab',
+      align: 'center',
+      key: 'levelTab',
+      render: (text: any, record: any) => (
+        <span className={style.nameCellTitle} onClick={() => handleSee(record)}>
+          {text}&nbsp;
+          <EyeOutlined />
+        </span>
+      ),
+    },
+    {
+      title: '会员等级类型',
+      dataIndex: 'levelType',
+      align: 'center',
+      key: 'levelType',
+    },
+    {
+      title: '升级分值标签',
+      dataIndex: 'scoreTab',
+      align: 'center',
+      key: 'scoreTab',
+    },
+    {
+      title: '会员角色名称',
+      dataIndex: 'name',
+      align: 'center',
+      key: 'name',
+    },
+    {
+      title: '角色类型',
+      dataIndex: 'type',
+      align: 'center',
+      key: 'type',
+    },
+    {
+      title: '会员类型',
+      dataIndex: 'roleType',
+      align: 'center',
+      key: 'roleType',
+    },
+    {
+      title: '升级阈值',
+      dataIndex: 'thresvalue',
+      align: 'center',
+      key: 'thresvalue',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      align: 'center',
+      key: 'status',
+      render: (text: any, record: any) => {
+        let component: ReactNode = null;
+        component = (
+          <Popconfirm
+            title="确定要执行这个操作?"
+            onConfirm={confirm}
+            onCancel={cancel}
+            okText="是"
+            cancelText="否"
+          >
+            <Button
+              type="link"
+              onClick={() => handleModify(record)}
+              style={
+                record.status === 1 ? { color: '#00B37A' } : { color: 'red' }
+              }
+            >
+              {record.status === 1 ? (
+                <>
+                  <span>有效</span>
+                  <PlayCircleOutlined />
+                </>
+              ) : (
+                <>
+                  <span>无效</span>
+                  <PauseCircleOutlined />
+                </>
+              )}
+            </Button>
+          </Popconfirm>
+        );
+        return component;
+      },
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      align: 'center',
+      render: (record: any) => (
+        <Button type="link" onClick={record => handleSet(record)}>
+          设置
+        </Button>
+      ),
+    },
+  ];
+
+  // 模拟请求
+  const fetchData = (params: any) => {
+    return new Promise((resolve, reject) => {
+      PublicApi.getMemberManageLevelPage({
+        cond: '',
+        current: params.current,
+        pageSize: params.pageSize,
+      }).then(res => {
+        resolve(res.data);
+      });
+    });
+  };
+
+  useEffect(() => {
+    console.log(keywords);
+  });
+
+  const handleSee = (record: any) => {};
+
+  const confirm = () => {
+    console.log('confirm');
+  };
+
+  const cancel = () => {
+    console.log('cancel');
+  };
+
+  const handleModify = (record: object) => {
+    // 通过传入的params字符串判断是修改那种类型的数据
+    console.log('执行状态修改', record);
+  };
+
+  const handleSearch = () => {};
+
+  const handleReset = () => {};
+
+  const handleSet = (record: any) => {
+    history.push('/memberAbility/manage/level/addEquity');
+  };
+
+  return (
+    <Card>
+      <StandardTable
+        tableProps={{ rowKey: 'id' }}
+        columns={columns}
+        currentRef={ref}
+        fetchTableData={(params: any) => fetchData(params)}
+        controlRender={
+          <Row>
+            <Col className={style.col} span={12} offset={12}>
+              <Tooltip
+                trigger={['focus']}
+                placement="top"
+                title={
+                  <span>
+                    输入ID、会员等级、会员角色名称&nbsp;&nbsp;进行搜索
+                  </span>
+                }
+              >
+                <Input.Search
+                  style={{ width: '232px' }}
+                  value={keywords}
+                  placeholder="搜索"
+                  onChange={e => setKeywords(e.target.value)}
+                  onSearch={() => handleSearch}
+                />
+              </Tooltip>
+              <Button className={style.resetBtn} onClick={() => handleReset()}>
+                重置
+              </Button>
+            </Col>
+          </Row>
+        }
+      />
+    </Card>
+  );
+};
+
+export default memberLevel;

src/pages/member/memberMaintain/index.less

+.nameCell {
+  text-align: left;
+
+  .nameCellTitle {
+    color : @main-color;
+    cursor: pointer;
+  }
+
+  .levelIcon1 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("/static/imgs/level1@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon2 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("/static/imgs/level2@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon3 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("/static/imgs/level3@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+}
+
+.col {
+  margin    : 0 16px 16px 0;
+
+  &-open {
+    color           : #fff;
+    background-color: #6B778C;
+  }
+
+  &-close {
+    color           : #595959;
+    background-color: #fff;
+  }
+}
+
+.selectBtn {
+  margin: 0 16px;
+}
+
+.select {
+  width : 160px;
+  margin: 0 16px 16px 0;
+
+  &:nth-last-of-type(1) {
+    margin-right: 0;
+  }
+}
\ No newline at end of file

src/pages/member/memberPr/auditPr.tsx

+import React from 'react';
+import AuditDetail from '../components/auditDetail';
+
+const auditPr = () => {
+  return <AuditDetail auditType="2" />;
+};
+
+export default auditPr;

src/pages/member/memberPr/index.tsx

+import React from 'react';
+import AuditList from '../components/auditList';
+
+const memberPr = () => {
+  return <AuditList pageType="2" />;
+};
+
+export default memberPr;

src/pages/member/memberPrConfirm/auditPrComfirm.tsx

+import React from 'react';
+import AuditDetail from '../components/auditDetail';
+
+const auditPrConfirm = () => {
+  return <AuditDetail auditType="3" />;
+};
+
+export default auditPrConfirm;

src/pages/member/memberPrConfirm/index.tsx

+import React from 'react';
+import AuditList from '../components/auditList';
+
+const memberPrConfirm = () => {
+  return <AuditList pageType="3" />;
+};
+
+export default memberPrConfirm;

src/pages/member/memberPrSubmit/auditPrSubmit.tsx

+import React from 'react';
+import AuditDetail from '../components/auditDetail';
+
+const auditPrSubmit = () => {
+  return <AuditDetail auditType="1" />;
+};
+
+export default auditPrSubmit;

src/pages/member/memberPrSubmit/index.tsx

+import React from 'react';
+import AuditList from '../components/auditList';
+
+const memberPrSubmit = () => {
+  return <AuditList pageType="1" />;
+};
+
+export default memberPrSubmit;

src/pages/member/memberUpgradeRule/index.less

+.saveBtn {
+  color     : #fff;
+  background: @main-color
+}
\ No newline at end of file

src/pages/member/memberUpgradeRule/index.tsx

+import React, { useState, useRef, ReactNode } from 'react';
+import { history } from 'umi';
+import { Card, Input, Button } from 'antd';
+import { ContainerOutlined } from '@ant-design/icons';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+import {
+  IFormFilter,
+  IButtonFilter,
+} from 'god/dist/src/standard-table/TableController';
+import './index.less';
+import { PublicApi } from '@/services/api';
+
+const data = [
+  {
+    key: '1',
+    id: '1',
+    rule: 1,
+    explain: '完成交易订单后，按照交易订单金额的百分比记入获取的升级分值',
+    type: '商户会员',
+    score: '',
+  },
+  {
+    key: '2',
+    id: '2',
+    rule: 1,
+    explain: '完成交易订单后，按照交易订单金额的百分比记入获取的升级分值',
+    type: '渠道会员',
+    score: '',
+  },
+  {
+    key: '3',
+    id: '3',
+    rule: 2,
+    explain: '完成交易订单后，按照交易订单金额的百分比记入获取的升级分值',
+    type: '商户会员',
+    score: '',
+  },
+  {
+    key: '4',
+    id: '4',
+    rule: 3,
+    explain: '完成交易订单后，按照交易订单金额的百分比记入获取的升级分值',
+    type: '商户会员',
+    score: '',
+  },
+];
+
+const memberUpgradeRule: React.FC<[]> = () => {
+  const ref = useRef({});
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+      key: 'id',
+    },
+    {
+      title: '升级规则',
+      dataIndex: 'rule',
+      align: 'center',
+      key: 'rule',
+      render: (text: any, record: any) => (
+        <span>
+          {record.rule === 1 ? '交易' : record.rule === 2 ? '评价' : '登录'}
+        </span>
+      ),
+    },
+    {
+      title: '升级规则说明',
+      dataIndex: 'explain',
+      align: 'center',
+      key: 'explain',
+    },
+    {
+      title: '适用会员等级类型',
+      dataIndex: 'type',
+      align: 'center',
+      key: 'type',
+    },
+    {
+      title: '可获取的分值',
+      dataIndex: 'score',
+      align: 'center',
+      key: 'score',
+      render: (text: any, record: any) => {
+        let component: ReactNode = null;
+        component =
+          record.rule === 1 ? (
+            <Input addonAfter="%" defaultValue={record.score} />
+          ) : (
+            <Input defaultValue={record.score} />
+          );
+        return component;
+      },
+    },
+  ];
+
+  // 模拟请求
+  const fetchData = (params: any) => {
+    console.log(params);
+    return new Promise((resolve, reject) => {
+      PublicApi.getMemberManageLevelRulePage({
+        current: params.current,
+        pageSize: params.pageSize,
+      }).then(res => {
+        resolve(res.data);
+      });
+    });
+  };
+
+  return (
+    <Card>
+      <StandardTable
+        tableProps={{ rowKey: 'id' }}
+        columns={columns}
+        currentRef={ref}
+        fetchTableData={(params: any) => fetchData(params)}
+      />
+    </Card>
+  );
+};
+
+export default memberUpgradeRule;

src/services/API.d.ts

+declare namespace API {
+  export interface ResponseModel {
+    
+  }
+}
\ No newline at end of file

src/services/api.ts

+/*
+ * @Author: LeeJiancong
+ * @Date: 2020-07-22 09:54:50
+ * @LastEditors: LeeJiancong
+ * @LastEditTime: 2020-07-22 10:23:38
+ */ 
+import * as Api from './index'
+import request from '@/utils/request'
+
+/**
+ * 可在这里写入自定义的接口
+ */
+export const CustomApi = {
+  
+}
+
+// 公共的接口，从yapi拉下
+export const PublicApi = Api

src/theme/default/styles/colors.less

+@default_btn_color: green;
+@default_text_color: green;
\ No newline at end of file

src/theme/default/styles/login.less

+@import './colors.less';
+
+.welcome_text {
+  color: @default_text_color;
+
+}
+
+// .login_theme(@default_color: red) {}
\ No newline at end of file

src/theme/style/colors.less

+.body-wrap-theme1 {
+  // theme1下的全局变量在此定义
+  --font-color: red;
+  --bg-color: #011313;
+}
+
+.body-wrap-theme2 {
+  // theme2下的全局变量在此定义
+  --font-color: cyan;
+  --bg-color: #ffffff;
+}

src/theme/style/login.less

+.theme-default {
+  @import './default/styles/login.less';
+
+}
+
+.theme-template2 {
+  @import './template2/styles/login.less';
+
+}
\ No newline at end of file

src/theme/template2/styles/colors.less

+@default_btn_color: red;
+@default_text_color: red;
\ No newline at end of file

src/theme/template2/styles/login.less

+@import './colors.less';
+
+.welcome_text {
+  color: @default_text_color;
+
+}
+
+// .login_theme(@default_color: red) {}
\ No newline at end of file

src/utils/request.ts

@@ -57,7 +57,7 @@ const baseRequest = extend({
   headers: defaultHeaders,
   credentials: 'include', // 默认请求是否带上cookie
   errorHandler,
-  prefix: '/api/system'
+  prefix: '/api'
 });
 
 // 请求拦截器

ytt.config.ts

+import { Config } from 'god-yapi2ts'
+
+
+const tokens = [
+  'b063a0a29fb1a570d9f00eaabbdd8ccfe8e6e10e24739441990cc1098e79b601', // 业务中台管理平台
+  '7c8f235d95f6224ceb97c4d832b09658f9a75fb8721a95699b230af0733d7fa4', // 仓库服务
+  '8d14d945507d1f8cd89afe139ca6d111bbad25f702fafe0aec59d3c9cd2e0ffe', // 物流服务
+  '3a46198c5b97ac7147e5b07ad2dff5ac5c93c1afed47e1911961db87149e6ebf', // 商户会员管理服务
+  'efe99e20ed1375dc0db3e809e4fc7692f42ecebaf60cd77e65c50ed65d6ba6c4', // 商品服务
+]
+const genMap = (tokens) => {
+  return tokens.map(v => {
+    return {
+      token: v,
+      categories: [
+        {
+          id: 0,
+          getRequestFunctionName(interfaceInfo, changeCase) {
+            return changeCase.camelCase(interfaceInfo.method + interfaceInfo.path)
+          },
+        },
+      ]
+    }
+  })
+}
+
+const config: Config = [
+  {
+    serverUrl: 'http://10.0.0.25:4000/',
+    typesOnly: false,
+    reactHooks: {
+      enabled: false,
+    },
+    outputFilePath: 'src/services/index.ts',
+    requestFunctionFilePath: 'request.ts',
+    dataKey: 'data',
+    projects: genMap(tokens),
+  },
+]
+
+export default config
\ No newline at end of file