调整页面,新增会员维护

src/global/styles/global.less

-
 /********************************** 布局 ******************************************/
 @import './mixins/layout.less';
 
-@makeCenters: text, block, flex, flexAlign, flexJustify, absolute, fixed, margin;
+@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 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: #6B778C;
 }
+
 .@{prefix}-margin_content {
   .center-margin;
   width: 1190px;
@@ -30,19 +45,20 @@ h1, h2, h3, h4, h5, h6 {
 // 公共的title伪类竖线
 .commonPanelTitle {
   padding-left: 8px;
-  position: relative;
+  position    : relative;
+
   &::before {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    margin-top: -.42667rem;
-    width: 2px;
-    height: .85333rem;
+    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;
+    box-shadow      : 0 0.14933rem 0.256rem 0 rgba(97, 144, 232, .2);
+    border-radius   : 1px;
   }
 }
 
@@ -50,49 +66,63 @@ h1, h2, h3, h4, h5, h6 {
 .commonShowBlock {
   display: block;
 }
+
 .commonShow {
   display: inline-block;
 }
+
 .commonHide {
   display: none;
 }
+
 // 公共着色 主体颜色
-.commonPickColor{
+.commonPickColor {
   color: @main-color;
 }
+
 // 公共状态 圆点
 .commonStatus {
-  display: inline-block;
-  width:8px;
-  height:8px;
-  margin-right: 6px;
-  border-radius: 50%;
+  display       : inline-block;
+  width         : 8px;
+  height        : 8px;
+  margin-right  : 6px;
+  border-radius : 50%;
   vertical-align: middle;
 }
-.commonStatusStop{
+
+.commonStatusStop {
   .commonStatus();
   background-color: @status-stop; // 停用
 }
-.commonStatusModify{
+
+.commonStatusModify {
   .commonStatus();
   background-color: @status-modify; // 已修改
 }
-.commonStatusValid{
+
+.commonStatusValid {
+  .commonStatus();
+  background-color: @status-valid; // 已生成，有效、审核通过
+}
+
+.commonStatusInvalid {
   .commonStatus();
-  background-color: @status-valid;  // 有效、已生成
+  background-color: @status-invalid; // 未生成，无效、待审核
 }
-.commonStatusInvalid{
+
+.commonStatusNoPass {
   .commonStatus();
-  background-color: @status-invalid;  // 无效、未生成
+  background-color: @status-nopass; // 审核不通过
 }
 
 
-.mb-30{
+.mb-30 {
   margin-bottom: 30px;
 }
+
 .sc-fzpans {
   display: block;
-  width: 100%;
+  width  : 100%;
 }
 
 

src/global/styles/theme.less

@@ -4,7 +4,7 @@
 @prefix: lingxi-business;
 
 // layout
-@header-nav-height: 64px;
+@header-nav-height        : 64px;
 @layout-min-content-height: 100vh;
 
 /**
@@ -18,12 +18,13 @@
 
 // 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;
+@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-stop   : #C1C7D0; // 停用
+@status-modify : #669EDE; // 已修改、待提交
+@status-valid  : #41CC9E; // 已生成，有效、审核通过
+@status-invalid: #FFC400; // 未生成，无效、待审核
\ No newline at end of file
+@status-nopass: #EF6260; // 审核不通过
\ No newline at end of file

src/layouts/BasicLayout.tsx

@@ -73,7 +73,6 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const menuData = basicInfo.menuData ? basicInfo.menuData.filter(item => !item.redirect) : []
 
   const menuRouter = getMenuRouter(menuData, location.pathname)
-  console.log(menuData)
 
   useEffect(() => {
     if (menuRouter && menuRouter.children) {

src/pages/member/memberImport/index.less

-.nameCell {
+  .col {
+    margin-bottom: 16px;
+
+    &:nth-last-of-type(1) {
+      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;
@@ -24,13 +46,13 @@
       background-size: 54px 16px;
       margin-top     : 8px;
     }
-}
+  }
 
-.importBtn {
+  .importBtn {
     margin: 0 16px;
-}
+  }
 
-.headerTop {
+  .headerTop {
     display    : flex;
     align-items: center;
 
@@ -45,9 +67,37 @@
         margin-left: 16px;
       }
     }
-}
+  }
 
-.saveBtn {
+  .saveBtn {
     color     : #fff;
     background: @main-color
-}
+  }
\ No newline at end of file
+
+  .address {
+    display: flex;
+
+    &-addition {
+      display      : inline-block;
+      width        : 32px;
+      height       : 32px;
+      text-align   : center;
+      margin-left  : 24px;
+      border       : 1px solid #EBFBFC;
+      border-radius: 2px;
+      cursor       : pointer;
+      overflow     : hidden;
+
+      &:hover {
+        background-color: #00B37A;
+        border          : 0;
+        color           : #fff;
+      }
+
+      &-icon {
+        width : 20px;
+        height: 20px;
+        color : '#6B778C';
+      }
+    }
+  }
\ No newline at end of file

src/pages/member/memberLevel/addEquity.tsx

@@ -141,7 +141,7 @@ const addEquity: React.FC<[]> = () => {
   return (
     <PageHeaderWrapper
       onBack={() => window.history.back()}
-      title={[
+      title={
         <>
           <div className='headerTop'>
             <div className='headerTop-icon'>钻</div>
@@ -149,8 +149,8 @@ const addEquity: React.FC<[]> = () => {
             <div className='headerTop-identity'>商户会员</div>
           </div>
         </>
-      ]}
-      content={[
+      }
+      content={
         <div className='headerMain'>
           <div className='headerMain-left'>
             <div className='headerMain-left-option'>
@@ -182,7 +182,7 @@ const addEquity: React.FC<[]> = () => {
             <Button className='saveBtn' icon={<ContainerOutlined />}>保存</Button>
           </div>
         </div>
-      ]}
+      }
     >
       <Card>
         <StandardTable

src/pages/member/memberLevel/index.less

-.row {
-  display        : flex;
-  justify-content: flex-end;
-  box-sizing     : border-box;
-
-  .col {
-    padding      : 0 8px;
+.col {
   margin-bottom: 12px;
-  }
+  text-align   : right;
+}
+
+.resetBtn {
+  margin-left: 16px;
 }
 
 .headerMain {
@@ -54,9 +52,10 @@
   }
 }
 
-
-
-
+.nameCellTitle {
+  color : @main-color;
+  cursor: pointer;
+}
 
 .levelIcon1 {
   width          : 100%;

src/pages/member/memberLevel/index.tsx

-import React, { ReactNode, useState, useRef } from 'react'
+import React, { ReactNode, useState, useRef, useEffect } from 'react'
 import { history } from 'umi'
-import { Row, Col, Button, Popconfirm, Card, Input } from 'antd'
+import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import {
-  UpOutlined,
-  DownOutlined,
-  PlayCircleOutlined,
-  EyeOutlined
-} from '@ant-design/icons'
+import { PlayCircleOutlined, PauseCircleOutlined, EyeOutlined } from '@ant-design/icons'
 import { StandardTable } from 'god'
 import { ColumnType } from 'antd/lib/table/interface'
-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;
-}
+import style from './index.less'
 
 const data = [
   {
@@ -82,8 +63,8 @@ const data = [
 ]
 
 const memberLevel: React.FC<[]> = () => {
-  let [isSearch, setIsSearch] = useState(false)
   const ref = useRef({})
+  const [keywords, setKeywords] = useState('')
 
   const columns: ColumnType<any>[] = [
     {
@@ -97,14 +78,14 @@ const memberLevel: React.FC<[]> = () => {
       dataIndex: 'level',
       align: 'center',
       key: 'level',
-      render: (text: any, record: any) => <div className={`levelIcon${record.level}`}></div>
+      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="commonPickColor" onClick={() => handleSee(record)}>{text}&nbsp;<EyeOutlined /></span>
+      render: (text: any, record: any) => <span className={style.nameCellTitle} onClick={() => handleSee(record)}>{text}&nbsp;<EyeOutlined /></span>
     },
     {
       title: '会员等级类型',
@@ -157,7 +138,25 @@ const memberLevel: React.FC<[]> = () => {
             okText="是"
             cancelText="否"
           >
-            <Button type="link" onClick={() => handleModify(record)} style={record.status === 1 ? { color: '#00B37A' } : { color: 'red' }}>{record.status === 1 ? '有效' : '无效'} <PlayCircleOutlined /></Button>
+            <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
@@ -185,6 +184,10 @@ const memberLevel: React.FC<[]> = () => {
     })
   }
 
+  useEffect(() => {
+    console.log(keywords)
+  })
+
   const handleSee = (record: any) => {
 
   }
@@ -202,13 +205,9 @@ const memberLevel: React.FC<[]> = () => {
     console.log('执行状态修改', record)
   }
 
-  const handleSearch = (val: string) => {
-    console.log(val)
-  }
+  const handleSearch = () => { }
 
-  const handleReset = () => {
-
-  }
+  const handleReset = () => { }
 
   const handleSet = (record: any) => {
     history.push('/memberCenter/memberAbility/manage/level/addEquity')
@@ -222,29 +221,23 @@ const memberLevel: React.FC<[]> = () => {
           currentRef={ref}
           fetchTableData={(params: any) => fetchData(params)}
           controlRender={
-            <Row className='row'>
-              <Col className='col' span={4}>
-                <Input.Search placeholder="搜索" 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='row'>
-                    <Col className='col' span={4}>
-                      <Input placeholder="会员等级标签"></Input>
-                    </Col>
-                    <Col className='col' span={4}>
-                      <Input placeholder="会员角色名称"></Input>
-                    </Col>
+            <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>
           }
         />

src/pages/member/memberMaintain/index.less

+.nameCell {
+  text-align: left;
+
+  .nameCellTitle {
+    color : @main-color;
+    cursor: pointer;
+  }
+
+  .levelIcon1 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("../../../assets/imgs/level1@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon2 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("../../../assets/imgs/level2@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon3 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("../../../assets/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