新增会员等级页面、会员升级规则

config/routes/memberRoute.ts

@@ -26,6 +26,16 @@ const MemberRoute = {
           path: '/memberAbility/manage/maintian',
           name: 'memberMaintain',
           component: '@/pages/member/memberMaintain/index',
+        },
+        {
+          path: '/memberAbility/manage/upgradeRule',
+          name: 'memberUpgradeRule',
+          component: '@/pages/member/memberUpgradeRule/index',
+        },
+        {
+          path: '/memberAbility/manage/level',
+          name: 'memberLevel',
+          component: '@/pages/member/memberLevel/index',
         }
       ]
     }

package.json

@@ -26,7 +26,7 @@
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
     "bizcharts": "^4.0.7",
-    "god": "0.0.28",
+    "god": "0.0.36",
     "lint-staged": "^10.0.7",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",

src/locales/zh-CN/menu.ts

@@ -42,6 +42,8 @@ export default {
   'menu.memberAbility.memberManage': '会员管理',
   'menu.memberAbility.memberManage.memberImport': '会员导入',
   'menu.memberAbility.memberManage.memberMaintain': '会员维护',
+  'menu.memberAbility.memberManage.memberUpgradeRule': '会员升级规则',
+  'menu.memberAbility.memberManage.memberLevel': '会员等级',
 
   // 店铺能力
   'menu.shopAbility': '店铺',

src/pages/member/memberLevel/index.less

+.row {
+  display        : flex;
+  justify-content: flex-end;
+
+  .col {
+    padding-left : 6px;
+    padding-right: 6px;
+    margin-bottom: 12px;
+  }
+}
+
+
+.levelIcon1 {
+  width          : 100%;
+  height         : 20px;
+  background     : url("../../../assets/imgs/vip1@2x.png") no-repeat center;
+  background-size: 24px 20px;
+}
+
+.levelIcon2 {
+  width          : 100%;
+  height         : 20px;
+  background     : url("../../../assets/imgs/vip2@2x.png") no-repeat center;
+  background-size: 24px 20px;
+}
+
+.levelIcon3 {
+  width          : 100%;
+  height         : 20px;
+  background     : url("../../../assets/imgs/vip3@2x.png") no-repeat center;
+  background-size: 24px 20px;
+}
+
+.levelIcon4 {
+  width          : 100%;
+  height         : 20px;
+  background     : url("../../../assets/imgs/vip4@2x.png") no-repeat center;
+  background-size: 24px 20px;
+}
\ No newline at end of file

src/pages/member/memberLevel/index.tsx

+import React, { ReactNode, useState, useRef } from 'react'
+import { history } from 'umi'
+import { Row, Col, Button, Popconfirm, Card, Input } from 'antd'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import {
+  PlusOutlined,
+  UpOutlined,
+  DownOutlined,
+  PlayCircleOutlined,
+  EyeOutlined
+} 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'
+
+interface Item {
+  key: string;
+  id: string;
+  level: string;
+  levelTab: string;
+  levelType: string;
+  scoreTab: string;
+  name: string;
+  type: string;
+  roleType: string;
+  thresvalue: string;
+  status: number;
+}
+
+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<[]> = () => {
+  let [isSearch, setIsSearch] = useState(false)
+  const ref = useRef({})
+
+  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={`levelIcon${record.level}`}></div>
+    },
+    {
+      title: '会员等级标签',
+      dataIndex: 'levelTab',
+      align: 'center',
+      key: 'levelTab',
+      render: (text: any, record: any) => <span className="commonPickColor" 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 ? '有效' : '无效'} <PlayCircleOutlined /></Button>
+          </Popconfirm>
+        )
+        return component
+      }
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      align: 'center',
+      render: (record: any) => <Button type='link'>设置</Button>
+    }
+  ];
+
+  // 模拟请求
+  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 handleSearch = (val: string) => {
+    console.log(val)
+  }
+
+  const handleReset = () => {
+
+  }
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <StandardTable
+          columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchData(params)}
+          controlRender={
+            <Row className='row'>
+              <Col className='col' span={4}>
+                <Input.Search onSearch={(val) => handleSearch(val)} />
+              </Col>
+              <Col className='col'>
+                <Button onClick={() => setIsSearch(isSearch = !isSearch)}>高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />}</Button>
+              </Col>
+              <Col className='col'>
+                <Button onClick={() => handleReset()}>重置</Button>
+              </Col>
+              {
+                isSearch ?
+                  <Col span={24} className='col'>132</Col>
+                  :
+                  ''
+              }
+            </Row>
+          }
+        />
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default memberLevel
\ 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 { PageHeaderWrapper } from '@ant-design/pro-layout'
+import {
+  PlusOutlined,
+  FileExcelOutlined,
+  EyeOutlined
+} 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'
+
+interface Item {
+
+}
+
+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) => {
+    return new Promise((resolve, reject) => {
+      const queryResult = data.find(v => v.key === params.keywords)
+      setTimeout(() => {
+        resolve({
+          code: 200,
+          message: '',
+          data: queryResult ? [queryResult] : data
+        })
+      }, 1000)
+    })
+  }
+
+  return (
+    <PageHeaderWrapper extra={[<Button key="3">Operation</Button>]}>
+      <Card>
+        <StandardTable
+          columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchData(params)} />
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default memberUpgradeRule
\ No newline at end of file