对接会员维护-》会员详情中

config/routes/memberRoute.ts

@@ -48,7 +48,44 @@ const MemberRoute = {
           name: 'maintainDetail',
           key: 'maintainDetail',
           hideInMenu: true,
-          component: '@/pages/member/memberMaintain/maintainDetail',
+          component: '@/pages/member/memberMaintain/detailed',
+          routes: [
+            {
+              path: '/memberCenter/memberAbility/manage/maintainDetail/basicInfo',
+              name: 'basicInfo',
+              key: 'basicInfo',
+              component: '@/pages/member/memberMaintain/detailed/basicInfo',
+              hideInMenu: true,
+            },
+            {
+              path: '/memberCenter/memberAbility/manage/maintainDetail/powerInfo',
+              name: 'powerInfo',
+              key: 'powerInfo',
+              component: '@/pages/member/memberMaintain/detailed/powerInfo',
+              hideInMenu: true,
+            },
+            {
+              path: '/memberCenter/memberAbility/manage/maintainDetail/levelInfo',
+              name: 'levelInfo',
+              key: 'levelInfo',
+              component: '@/pages/member/memberMaintain/detailed/levelInfo',
+              hideInMenu: true,
+            },
+            {
+              path: '/memberCenter/memberAbility/manage/maintainDetail/equityInfo',
+              name: 'equityInfo',
+              key: 'equityInfo',
+              component: '@/pages/member/memberMaintain/detailed/equityInfo',
+              hideInMenu: true,
+            },
+            {
+              path: '/memberCenter/memberAbility/manage/maintainDetail/sincerityInfo',
+              name: 'sincerityInfo',
+              key: 'sincerityInfo',
+              component: '@/pages/member/memberMaintain/detailed/sincerityInfo',
+              hideInMenu: true,
+            },
+          ],
         },
         {
           path: '/memberCenter/memberAbility/manage/frozen',
@@ -143,10 +180,6 @@ const MemberRoute = {
       component: '@/pages/member/memberQuery/detailed',
       hideInMenu: true,
       routes: [
-        // {
-        //   path: '/memberCenter/memberAbility/query/detailed',
-        //   redirect: '/memberCenter/memberAbility/query/detailed/basicInfo',
-        // },
         {
           path: '/memberCenter/memberAbility/query/detailed/basicInfo',
           name: 'basicInfo',

package.json

@@ -38,7 +38,7 @@
     "@umijs/test": "^3.2.0",
     "bizcharts": "^4.0.14",
     "copy-to-clipboard": "^3.3.1",
-    "god": "^0.1.26",
+    "god": "^0.1.27",
     "lingxi-design": "^1.0.7",
     "lingxi-design-ui": "^1.0.8",
     "lingxi-editor-core": "^1.0.6",

src/locales/zh-CN/menu.ts

@@ -75,6 +75,11 @@ export default {
   'menu.memberAbility.memberManage.memberLevel': '会员等级',
   'menu.memberAbility.memberManage.addEquity': '会员权益设置',
   'menu.memberAbility.memberManage.maintainDetail': '会员详情',
+  'menu.memberAbility.memberManage.maintainDetail.basicInfo': '会员基本信息',
+  'menu.memberAbility.memberManage.maintainDetail.powerInfo': '会员权限信息',
+  'menu.memberAbility.memberManage.maintainDetail.levelInfo': '会员等级信息',
+  'menu.memberAbility.memberManage.maintainDetail.equityInfo': '权益信息',
+  'menu.memberAbility.memberManage.maintainDetail.sincerityInfo': '诚信信息',
   'menu.memberAbility.memberManage.maintainFrozen': '会员冻结与解除',
   'menu.memberAbility.memberQuery': '会员信息查询',
   'menu.memberAbility.memberQueryDetailed': '会员信息详情',

src/module/memberModule/index.ts

+import { GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberApi';
+
+export interface IMemberModule {
+  memberMaintainInfo: GetMemberAbilityMaintenanceDetailBasicResponse;
+
+  setmemberMaintainInfo(data: GetMemberAbilityMaintenanceDetailBasicResponse): void;
+}
\ No newline at end of file

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

@@ -101,7 +101,7 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
               <Row gutter={20}>
                 <Col span={12}>
                   <Descriptions column={1} className={styles.descriptions}>
-                    {item.elements.map((ele, index) => index % 2 !== 0 ? (
+                    {item.elements.map((ele, index) => (index + 1) % 2 !== 0 ? (
                       <Descriptions.Item key={index} label={ele.fieldCNName}>
                         {
                           ele.fieldType !== 'upload' ? 
@@ -118,7 +118,7 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
                 </Col>
                 <Col span={12}>
                   <Descriptions column={1} className={styles.descriptions}>
-                    {item.elements.map((ele, index) => index % 2 === 0 ? (
+                    {item.elements.map((ele, index) => (index + 1) % 2 === 0 ? (
                       <Descriptions.Item key={index} label={ele.fieldCNName}>
                         {
                           ele.fieldType !== 'upload' ? 

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

@@ -18,11 +18,17 @@ import styles from './index.less';
 
 const { TabPane } = Tabs;
 
-interface PageProps {
-  detailData: any;
+interface EquityInfoProps {
+  equityInfo?: {
+    sumReturnMoney?: number, 
+    sumUsedPoint?: number, 
+    sumPoint?: number, 
+  };
 }
 
-const EquityInfo: React.FC<{}> = props => {
+const EquityInfo: React.FC<EquityInfoProps> = ({
+  equityInfo = {}, 
+}) => {
 
   const columns: EditableColumns[] = [
     {
@@ -106,7 +112,7 @@ const EquityInfo: React.FC<{}> = props => {
                   <ul className={styles.tofo}>
                     <li className={styles['tofo-item']}>
                       <div className={styles['tofo-item-logo']}>
-                        <img src={equity1} />
+                        <img src={equity3} />
                       </div>
                       <div className={styles['tofo-item-title']}>
                         价格权益
@@ -119,7 +125,7 @@ const EquityInfo: React.FC<{}> = props => {
                     
                     <li className={styles['tofo-item']}>
                       <div className={styles['tofo-item-logo']}>
-                        <img src={equity2} />
+                        <img src={equity1} />
                       </div>
                       <div className={styles['tofo-item-title']}>
                         返现权益
@@ -132,7 +138,7 @@ const EquityInfo: React.FC<{}> = props => {
                     
                     <li className={styles['tofo-item']}>
                       <div className={styles['tofo-item-logo']}>
-                        <img src={equity3} />
+                        <img src={equity2} />
                       </div>
                       <div className={styles['tofo-item-title']}>
                         积分权益
@@ -156,7 +162,7 @@ const EquityInfo: React.FC<{}> = props => {
                         累计返现金额
                       </div>
                       <div className={styles['exhibition-amount']}>
-                        50000.00
+                        {equityInfo?.sumReturnMoney}
                         <span>CNY</span>
                       </div>
                     </div>
@@ -180,7 +186,7 @@ const EquityInfo: React.FC<{}> = props => {
                         可用积分
                       </div>
                       <div className={styles['exhibition-amount']}>
-                        2000/200000
+                        {equityInfo?.sumUsedPoint}/{equityInfo?.sumPoint}
                       </div>
                     </div>
 

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

@@ -24,7 +24,7 @@ export interface InnerHistoryItem {
   operation?: string;
   innerStatusName?: string;
   remark?: string;
-  innerStatus?: string;
+  innerStatus?: number;
 };
 
 export interface OuterHistoryItem {

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

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { 
   Row, 
   Col, 
   Progress, 
-  Card, 
 } from 'antd';
 import classNames from 'classnames';
 import { MiniArea } from '@/components/Charts';
@@ -12,24 +11,48 @@ import { EditableColumns } from '@/components/PolymericTable/interface';
 import MellowCard from '@/components/MellowCard';
 import styles from './index.less';
 
-interface LevelInfoProps {
-  detailData: any;
-}
+const PAGE_SIZE = 8;
+
+export interface DataProps {
+  id?: number; 
+  createTime?: string;
+  ruleName?: string;
+  score?: number;
+  remark?: string;
+};
+
+export interface FetchParams {
+  current: number;
+  pageSize: number;
+};
 
-function getActiveData() {
-  const activeData = [];
-  for (let i = 0; i < 12; i += 1) {
-    activeData.push({
-      x: `${i}月`,
-      y: Math.floor(Math.random() * 200) + i * 50,
-    });
-  }
-  return activeData;
+export interface LevelInfoProps {
+  levelInfo?: {
+    level?: string, 
+    score?: number, 
+    nextLevel?: string, 
+    nextScore?: number, 
+  };
+  chartData?: {
+    x: React.ReactText,
+    y: number,
+  }[];
+  fetchList?: (params: FetchParams) => Promise<{ data: DataProps[] , totalCount: number }>;
 }
 
-const LevelInfo: React.FC<{}> = props => {
+const LevelInfo: React.FC<LevelInfoProps> = ({
+  levelInfo = {}, 
+  chartData = [], 
+  fetchList, 
+}) => {
 
-  const [chartData , setChartData] = useState(getActiveData());
+  const score = levelInfo.score  || 0;
+  const nextScore = levelInfo.nextScore  || 0;
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(PAGE_SIZE);
+  const [total, setTotal] = useState(0);
+  const [list, setList] = useState([]);
+  const [listLoading, setListLoading] = useState(false);
 
   const columns: EditableColumns[] = [
     {
@@ -39,7 +62,7 @@ const LevelInfo: React.FC<{}> = props => {
     },
     {
       title: '获取项目',
-      dataIndex: 'project',
+      dataIndex: 'ruleName',
       align: 'center',
     },
     {
@@ -49,17 +72,43 @@ const LevelInfo: React.FC<{}> = props => {
     },
     {
       title: '获取时间',
-      dataIndex: 'created',
+      dataIndex: 'createTime',
       align: 'center',
     },
     {
       title: '备注',
-      dataIndex: 'node',
+      dataIndex: 'remark',
       align: 'center',
       ellipsis: true, 
     },
   ];
 
+  const getHistoryList = () => {
+    if (fetchList) {
+      setListLoading(true);
+      fetchList({ 
+        current: page, 
+        pageSize: size, 
+      }).then(res => {
+        const { data = [], totalCount = 0 } = (res || {});
+        setList(data);
+        setTotal(totalCount);
+      }).finally(() => {
+        setListLoading(false);
+      });
+    }
+  };
+
+  useEffect(() => {
+    getHistoryList();
+  }, []);
+
+  const handlePaginationChange = (page: number, size: number) => {
+    setPage(page);
+    setSize(size);
+    getHistoryList();
+  };
+
   return (
     <div className={styles.levelInfo}>
       <Row gutter={[0, 24]}>
@@ -73,23 +122,23 @@ const LevelInfo: React.FC<{}> = props => {
             <div className={styles.infoWrap}>
               <div className={styles['infoWrap-left']}>
                 <div className={classNames(styles.card, styles['card-level1'])}>
-                  <div className={styles['card-name']}>青铜会员</div>
+                  <div className={styles['card-name']}>{levelInfo?.level}</div>
 
                   <div className={styles['card-progress']}>
                     <Progress 
                       strokeWidth={4}
                       strokeLinecap="square"
                       showInfo={false}
-                      percent={75}
+                      percent={nextScore? (score / levelInfo.nextScore) * 100 : 100}
                     />
                   </div>
 
                   <div className={styles['card-txt']}>
                     <div className={styles['card-experience']}>
-                      5000/15000
+                      {score}/{nextScore}
                     </div>
                     <div className={styles['card-higher']}>
-                      白银会员
+                      {levelInfo.nextLevel}
                     </div>
                   </div>
 
@@ -166,10 +215,14 @@ const LevelInfo: React.FC<{}> = props => {
             }}
           >
             <PolymericTable
-              dataSource={[]}
+              dataSource={list}
               columns={columns}
-              loading={false}
-              pagination={null}
+              loading={listLoading}
+              pagination={{
+                pageSize: size, 
+                total,
+              }}
+              onPaginationChange={handlePaginationChange}
             />
           </MellowCard>
         </Col>

src/pages/member/memberImport/addMember.tsx

@@ -44,6 +44,21 @@ const addMember: React.FC<any> = props => {
           memberTypeEnum, 
           groups = [], 
           areaCodes, 
+
+          account, 
+          channelLevelTag, 
+          channelTypeName, 
+          countryCode, 
+          createTime, 
+          currentStep, 
+          levelTag, 
+          memberId, 
+          memberTypeName, 
+          name, 
+          outerHistory, 
+          outerStatusName, 
+          roleName, 
+          verifySteps, 
           ...rest
         }: any = (res.data || {});
         // 注册资料处理
@@ -59,8 +74,6 @@ const addMember: React.FC<any> = props => {
           }
         }
 
-        console.log('detail', detail)
-
         setMemberInfo({
           memberTypeId: memberTypeEnum, 
           ...rest, 
@@ -109,7 +122,9 @@ const addMember: React.FC<any> = props => {
         if (res.code !== 1000) {
           return;
         }
-        history.replace('/memberCenter/memberAbility/manage/import');
+        setTimeout(() => {
+          history.replace('/memberCenter/memberAbility/manage/import');
+        }, 1000);
       }).finally(() => {
         setSubmitLoading(false);
       });
@@ -132,7 +147,9 @@ const addMember: React.FC<any> = props => {
         if (res.code !== 1000) {
           return;
         }
-        history.replace('/memberCenter/memberAbility/manage/import');
+        setTimeout(() => {
+          history.replace('/memberCenter/memberAbility/manage/import');
+        }, 1000);
       }).finally(() => {
         setSubmitLoading(false);
       });

src/pages/member/memberImport/importDetail.tsx

 import React, { useState, useEffect } from 'react';
 import { history } from 'umi';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { PageHeader, Tag, Descriptions, Steps } from 'antd';
-import { STATUS_COLOR_MAP, STATUS_COLOR_TXT } from '../constant';
+import { PageHeader, Tag, Descriptions, Steps, Badge, Spin } from 'antd';
 import { usePageStatus } from '@/hooks/usePageStatus';
 import { PublicApi } from '@/services/api';
+import { GetMemberAbilitySubGetResponse } from '@/services/MemberApi';
 import MellowCard from '@/components/MellowCard';
+import { STATUS_COLOR_MAP, MEMBER_STATUS_TAG_MAP, MEMBER_OUTER_STATUS_TYPE } from '../constant';
 import HeadInfo from '../components/HeadInfo';
 import BasicInfo from '../components/BasicInfo';
+import StatusTag from '../components/StatusTag';
 import styles from './index.less';
 
 const importDetail: React.FC<{}> = () => {
-  const { pageStatus, id, validateId } = usePageStatus();
-  const [detailed, setDetailed] = useState<any>({});
+  const { id, validateId } = usePageStatus();
+  const [memberInfo, setMemberInfo] = useState<GetMemberAbilitySubGetResponse>(null);
+  const [infoLoading, setInfoLoading] = useState(false);
 
-  useEffect(() => {
+  const getDetailedInfo = () => {
+    if (id && validateId) {
+      setInfoLoading(true);
+      PublicApi.getMemberAbilitySubGet({
+        memberId: id, 
+        validateId,
+      }).then(res => {
+        if (res.code !== 1000) {
+          return;
+        }
+        setMemberInfo(res.data || null);
+      }).finally(() => {
+        setInfoLoading(false);
+      });
+    }
+  };
 
+  useEffect(() => {
+    getDetailedInfo();
   }, []);
 
   return (
-    <PageHeaderWrapper
-      title={
-        <>
-          <PageHeader
-            style={{ padding: '0' }}
-            onBack={() => history.goBack()}
-            title={
-              <HeadInfo 
-                info={{
-                  name: '广州市极致皮具有限公司', 
-                  level: 1,
-                }} 
-              />
-            }
-          >
-            <Descriptions 
-              size="small" 
-              column={2} 
-              style={{ 
-                padding: '0 32px', 
-              }}
+    <Spin spinning={infoLoading}>
+      <PageHeaderWrapper
+        title={
+          <>
+            <PageHeader
+              style={{ padding: '0' }}
+              onBack={() => history.goBack()}
+              title={
+                <HeadInfo 
+                  info={{
+                    name: memberInfo?.name, 
+                    level: 1,
+                  }} 
+                />
+              }
             >
-              <Descriptions.Item label="会员类型">{123}</Descriptions.Item>
-              <Descriptions.Item label="会员角色">{123}</Descriptions.Item>
-              <Descriptions.Item label="会员状态">
-                <Tag color={STATUS_COLOR_MAP[1]}>{STATUS_COLOR_TXT[1]}</Tag>
-              </Descriptions.Item>
-              <Descriptions.Item label="外部状态">
-                <Tag color={STATUS_COLOR_MAP[2]}>{STATUS_COLOR_TXT[2]}</Tag>
-              </Descriptions.Item>
-            </Descriptions>
-          </PageHeader>
-        </>
-      }
-    >
-      <MellowCard
-        title="会员审核流程"
-        style={{
-          marginBottom: 24, 
-        }}
+              <Descriptions 
+                size="small" 
+                column={3} 
+                style={{ 
+                  padding: '0 32px', 
+                }}
+              >
+                <Descriptions.Item label="会员类型">{memberInfo?.memberTypeName}</Descriptions.Item>
+                <Descriptions.Item label="会员角色" span={2}>{memberInfo?.roleName}</Descriptions.Item>
+                <Descriptions.Item label="会员状态">
+                  <StatusTag type={MEMBER_STATUS_TAG_MAP[memberInfo?.status]} title={memberInfo?.statusName} />
+                </Descriptions.Item>
+                <Descriptions.Item label="外部状态">
+                  <StatusTag type={MEMBER_OUTER_STATUS_TYPE[memberInfo?.outerStatus]} title={memberInfo?.outerStatusName} />
+                </Descriptions.Item>
+              </Descriptions>
+            </PageHeader>
+          </>
+        }
       >
-        <Steps style={{ marginTop: 30 }} progressDot current={2}>
-          <Steps.Step title="会员" description="申请注册" />
-          <Steps.Step title="平台" description="审核会员" />
-          <Steps.Step title="完成" description="" />
-        </Steps>
-      </MellowCard>
+        <MellowCard
+          title="会员审核流程"
+          style={{
+            marginBottom: 24, 
+          }}
+        >
+          <Steps style={{ marginTop: 30 }} progressDot current={memberInfo?.currentStep}>
+            {memberInfo && memberInfo.verifySteps && memberInfo.verifySteps.map(item => (
+              <Steps.Step key={item.step} title={item.roleName} description={item.stepName} />
+            ))}
+          </Steps>
+        </MellowCard>
 
-      <BasicInfo />
-    </PageHeaderWrapper>
+        <BasicInfo 
+          basic={{
+            account: memberInfo?.account, 
+            phone: memberInfo?.phone, 
+            email: memberInfo?.email, 
+            created: memberInfo?.createTime, 
+          }}
+          channel={{
+            memberType: memberInfo?.memberTypeEnum, 
+            level: memberInfo?.channelLevelTag, 
+            type: memberInfo?.channelTypeName, 
+            areas: memberInfo?.areas, 
+            desc: memberInfo?.remark, 
+          }}
+          extra={memberInfo?.groups}
+          outerHistory={memberInfo?.outerHistory}
+          innerHistory={memberInfo?.innerHistory}
+        />
+      </PageHeaderWrapper>
+    </Spin>
   );
 };
 

src/pages/member/memberImport/index.tsx

@@ -6,7 +6,8 @@ import {
   Button,
   Menu,
   Popconfirm,
-  Dropdown,
+  Dropdown, 
+  message, 
 } from 'antd';
 import {
   PlusOutlined,
@@ -47,6 +48,7 @@ const memberMaintain: React.FC<[]> = () => {
   const [visibleModal, setVisibleModal] = useState(false);
 
   const handleDelete = (memberId: number, validateId: number) => {
+    const mesInstance = message.loading('正在删除');
     PublicApi.postMemberAbilitySubDelete({
       memberId, 
       validateId,
@@ -55,6 +57,8 @@ const memberMaintain: React.FC<[]> = () => {
         return;
       }
       ref.current.reload();
+    }).finally(() => {
+      mesInstance();
     });
   };
   
@@ -133,8 +137,8 @@ const memberMaintain: React.FC<[]> = () => {
       align: 'center',
       filters: [],
       onFilter: (value, record) => record.outerStatus === value,
-      render: (_, record) => (
-        <StatusTag type={MEMBER_OUTER_STATUS_TYPE[record.outerStatus]} title={MEMBER_OUTER_STATUS[record.outerStatus]} />
+      render: (text, record) => (
+        <StatusTag type={MEMBER_OUTER_STATUS_TYPE[record.outerStatus]} title={text} />
       ),
     },
     {

src/pages/member/memberMaintain/detailed/basicInfo.tsx

+import React from 'react';
+import { observer, inject } from 'mobx-react';
+import { IMemberModule } from '@/module/memberModule';
+import BasicInfo from '../../components/BasicInfo';
+import AuditProcess from '../../components/AuditProcess';
+
+interface MemberBasicInfoProps {
+  MemberStore?: IMemberModule;
+};
+
+const MemberBasicInfo: React.FC<MemberBasicInfoProps> = ({
+  MemberStore,
+}) => {
+  const { memberMaintainInfo } = MemberStore;
+
+  return (
+    <div>
+      <div
+        style={{
+          marginBottom: 24, 
+        }}
+      >
+        <AuditProcess 
+          outerVerifyCurrent={memberMaintainInfo?.currentOuterStep}
+          innerVerifyCurrent={memberMaintainInfo?.currentInnerStep}
+          outerVerifySteps={memberMaintainInfo?.outerVerifySteps} 
+          innerVerifySteps={memberMaintainInfo?.innerVerifySteps}
+        />
+      </div>
+
+      <BasicInfo 
+        basic={{
+          account: memberMaintainInfo?.account, 
+          phone: memberMaintainInfo?.phone, 
+          email: memberMaintainInfo?.email, 
+          created: memberMaintainInfo?.createTime, 
+        }}
+        channel={{
+          memberType: memberMaintainInfo?.memberTypeEnum, 
+          level: memberMaintainInfo?.channelLevelTag, 
+          type: memberMaintainInfo?.channelTypeName, 
+          areas: memberMaintainInfo?.areas, 
+          desc: memberMaintainInfo?.remark, 
+        }}
+        extra={memberMaintainInfo?.groups}
+        outerHistory={memberMaintainInfo?.outerHistory}
+        innerHistory={memberMaintainInfo?.innerHistory}
+      />
+    </div>
+  );
+};
+
+export default inject('MemberStore')(observer(MemberBasicInfo));
\ No newline at end of file

src/pages/member/memberMaintain/detailed/equityInfo.tsx

+import React from 'react';
+import Info from '../../components/EquityInfo';
+
+const EquityInfo: React.FC<{}> = () => {
+  return (
+    <div>
+      <Info />
+    </div>
+  );
+};
+
+export default EquityInfo;
\ No newline at end of file

src/pages/member/memberMaintain/detailed/index.tsx

+import React, { useState, useEffect } from 'react';
+import { history } from 'umi';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { PageHeader, Descriptions, Badge, Spin } from 'antd';
+import { observer, inject } from 'mobx-react';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberApi';
+import { IMemberModule } from '@/module/memberModule';
+import { 
+  MEMBER_STATUS_NORMAL, 
+  MEMBER_STATUS_FROZEN, 
+  MEMBER_STATUS, 
+  MEMBER_OUTER_STATUS,
+  MEMBER_INNER_STATUS_SUCCESS, 
+} from '@/constants';
+import { 
+  MEMBER_STATUS_TAG_MAP, 
+  MEMBER_INNER_STATUS_BADGE_COLOR, 
+  MEMBER_OUTER_STATUS_TYPE, 
+} from '../../constant';
+import HeadInfo from '../../components/HeadInfo';
+import StatusTag from '../../components/StatusTag';
+import styles from './index.less';
+
+interface QueryProps {
+  match: {
+    url: string;
+    path: string;
+  };
+  location: {
+    pathname: string;
+  };
+  MemberStore?: IMemberModule;
+}
+
+const MemberQueryDetailed: React.FC<QueryProps> = props => {
+  const { MemberStore, children } = props;
+  const { id, validateId } = usePageStatus();
+  const [basicInfo, setBasicInfo] = useState<GetMemberAbilityMaintenanceDetailBasicResponse>(null);
+  const [infoLoading, setInfoLoaading] = useState(false);
+
+  const getBasicInfo = () => {
+    if (!id || !validateId) {
+      return;
+    }
+    setInfoLoaading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailBasic({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      setBasicInfo(res.data);
+      MemberStore.setmemberMaintainInfo(res.data);
+    }).finally(() => {
+      setInfoLoaading(false);
+    });
+  };
+
+  useEffect(() => {
+    // 手动重定向到基础信息页，防止查询字符串被弄掉
+    history.replace(`/memberCenter/memberAbility/manage/maintainDetail/basicInfo?id=${id}&validateId=${validateId}`);
+    getBasicInfo();
+  }, []);
+  
+  const tabList = [
+    {
+      key: 'basicInfo',
+      tab: '基本信息',
+    },
+    // {
+    //   key: 'powerInfo',
+    //   tab: '权限信息',
+    // },
+    {
+      key: 'levelInfo',
+      tab: '等级信息',
+    },
+    {
+      key: 'equityInfo',
+      tab: '权益信息',
+    },
+    {
+      key: 'sincerityInfo',
+      tab: '诚信信息',
+    },
+  ];
+
+  const handleTabChange = (val: string) => {
+    const { match } = props;
+    const url = match.url === '/' ? '' : match.url;
+
+    switch (val) {
+      case 'basicInfo':
+        history.push(`${url}/basicInfo?id=${id}&validateId=${validateId}`);
+        break;
+      case 'powerInfo':
+        history.push(`${url}/powerInfo?id=${id}&validateId=${validateId}`);
+        break;
+      case 'levelInfo':
+        history.push(`${url}/levelInfo?id=${id}&validateId=${validateId}`);
+        break;
+      case 'equityInfo':
+        history.push(`${url}/equityInfo?id=${id}&validateId=${validateId}`);
+        break;
+      case 'sincerityInfo':
+        history.push(`${url}/sincerityInfo?id=${id}&validateId=${validateId}`);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const getTabKey = () => {
+    const { match, location } = props;
+    const url = match.path === '/' ? '' : match.path;
+    const tabKey = location.pathname.replace(`${url}/`, '');
+    if (tabKey && tabKey !== '/') {
+      return tabKey;
+    }
+    return 'basicInfo';
+  };
+
+  return (
+    <Spin spinning={infoLoading}>
+      <PageHeaderWrapper
+        title={
+          <>
+            <PageHeader
+              style={{ padding: '0' }}
+              onBack={() => history.goBack()}
+              title={
+                <HeadInfo 
+                  info={{
+                    name: basicInfo?.name, 
+                    level: 1,
+                  }} 
+                />
+              }
+            >
+              <Descriptions 
+                size="small" 
+                column={3} 
+                style={{ 
+                  padding: '0 32px', 
+                }}
+              >
+                <Descriptions.Item label="会员类型">{basicInfo?.memberTypeName}</Descriptions.Item>
+                <Descriptions.Item label="会员角色" span={2}>{basicInfo?.roleName}</Descriptions.Item>
+                <Descriptions.Item label="会员状态">
+                  <StatusTag type={MEMBER_STATUS_TAG_MAP[basicInfo?.status]} title={basicInfo?.statusName} />
+                </Descriptions.Item>
+                <Descriptions.Item label="外部状态">
+                  <StatusTag type={MEMBER_OUTER_STATUS_TYPE[basicInfo?.outerStatus]} title={basicInfo?.outerStatusName} />
+                </Descriptions.Item>
+                <Descriptions.Item label="内部状态">
+                  <Badge color={MEMBER_INNER_STATUS_BADGE_COLOR[basicInfo?.innerStatus]} text={basicInfo?.innerStatusName} />
+                </Descriptions.Item>
+              </Descriptions>
+            </PageHeader>
+          </>
+        }
+        tabList={tabList}
+        tabActiveKey={getTabKey()}
+        onTabChange={handleTabChange}
+      >
+        {children}
+      </PageHeaderWrapper>
+    </Spin>
+  );
+};
+
+export default inject('MemberStore')(observer(MemberQueryDetailed));
\ No newline at end of file

src/pages/member/memberMaintain/detailed/levelInfo.tsx

+import React, { useState, useEffect } from 'react';
+import { Spin } from 'antd';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilityMaintenanceDetailLevelBasicResponse } from '@/services/MemberApi';
+import Info, { DataProps } from '../../components/LevelInfo';
+import { reject } from 'lodash';
+
+const LevelInfo: React.FC<{}> = () => {
+  const { id, validateId } = usePageStatus();
+  const [levelInfo, setLevelInfo] = useState<GetMemberAbilityMaintenanceDetailLevelBasicResponse>(null);
+  const [infoLoading, setInfoLoaading] = useState(false);
+
+  const getMemberLevelInfo = () => {
+    if (!id && !validateId) {
+      return;
+    }
+    setInfoLoaading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailLevelBasic({
+      memberId: id, 
+      validateId, 
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      setLevelInfo(res.data);
+
+    }).finally(() => {
+      setInfoLoaading(false);
+    });
+  };
+
+  useEffect(() => {
+    getMemberLevelInfo();
+  }, []);
+
+  const getHistroyList = params => {
+    return new Promise<{ data: DataProps[] , totalCount: number }>((resolve, reject) => {
+      PublicApi.getMemberAbilityMaintenanceDetailLevelHistoryPage({
+        memberId: id, 
+        validateId, 
+        ...params,
+      }).then(res => {
+        const { data = [], totalCount = 0 } = res.data;
+        resolve({ data, totalCount });
+      }).catch(err => {
+        reject(err);
+      });
+    }) 
+  };
+
+  return (
+    <Spin spinning={infoLoading}>
+      <Info 
+        levelInfo={{
+          level: levelInfo?.levelTag, 
+          score: levelInfo?.score, 
+          nextLevel: levelInfo?.nextLevelTag, 
+          nextScore: levelInfo?.nextScore, 
+        }}
+        chartData={levelInfo?.points}
+        fetchList={getHistroyList}
+      />
+  </Spin>
+  );
+};
+
+export default LevelInfo;
\ No newline at end of file

src/pages/member/memberMaintain/detailed/powerInfo.tsx

+import React from 'react';
+
+const PowerInfo: React.FC<{}> = () => {
+  return (
+    <div>123</div>
+  );
+};
+
+export default PowerInfo;
\ No newline at end of file

src/pages/member/memberMaintain/detailed/sincerityInfo.tsx

+import React from 'react';
+import Info from '../../components/SincerityInfo';
+
+const SincerityInfo: React.FC<{}> = () => {
+  return (
+    <div>
+      <Info />
+    </div>
+  );
+};
+
+export default SincerityInfo;
\ No newline at end of file

src/pages/member/memberMaintain/frozen.tsx

@@ -127,7 +127,7 @@ const Frozen: React.FC<{}> = () => {
                   <StatusTag type={MEMBER_STATUS_TAG_MAP[basicInfo?.status]} title={basicInfo?.statusName} />
                 </Descriptions.Item>
                 <Descriptions.Item label="外部状态">
-                  <StatusTag type={MEMBER_OUTER_STATUS_TYPE[basicInfo?.outerStatus]} title={MEMBER_OUTER_STATUS[basicInfo?.outerStatus]} />
+                  <StatusTag type={MEMBER_OUTER_STATUS_TYPE[basicInfo?.outerStatus]} title={basicInfo?.outerStatusName} />
                 </Descriptions.Item>
                 <Descriptions.Item label="内部状态">
                   <Badge color={MEMBER_INNER_STATUS_BADGE_COLOR[basicInfo?.innerStatus]} text={basicInfo?.innerStatusName} />

src/pages/member/memberMaintain/index.tsx

@@ -60,7 +60,7 @@ const memberMaintain: React.FC<[]> = () => {
       render: (text, record) => (
         <>
           <EyePreview
-            url={`/memberCenter/memberAbility/query/detailed?id=${record.memberId}&validateId=${record.validateId}`}
+            url={`/memberCenter/memberAbility/manage/maintainDetail?id=${record.memberId}&validateId=${record.validateId}`}
           >
             {text}
           </EyePreview>
@@ -115,8 +115,8 @@ const memberMaintain: React.FC<[]> = () => {
       align: 'center',
       filters: [],
       onFilter: (value, record) => record.outerStatus === value,
-      render: (_, record) => (
-        <StatusTag type={MEMBER_OUTER_STATUS_TYPE[record.outerStatus]} title={MEMBER_OUTER_STATUS[record.outerStatus]} />
+      render: (text, record) => (
+        <StatusTag type={MEMBER_OUTER_STATUS_TYPE[record.outerStatus]} title={text} />
       ),
     },
     {

src/store/index.tsx

 import React from 'react';
+import { Provider } from 'mobx-react'
 import UserStore from './user'
 import ThemeStore from './theme'
 import ProductStroe from './product'
@@ -6,10 +7,11 @@ import ChannelProudctStore from './channelProduct'
 import SiteStore from './site'
 import CategoryStore from './category'
 import FilterStore from './filter'
-import { Provider } from 'mobx-react'
+import MemberStore from './member'
 import { ILoginModule } from '@/module/userModule';
 import { IProductModule } from '@/module/productModule'
 import { IChannelProductModule } from '@/module/channelProductModule'
+import { IMemberModule } from '@/module/memberModule';
 
 
 // import { ProductContext } from '@/pages/commodity/products/addProducts';
@@ -33,6 +35,7 @@ export interface IStore {
   UserStore: ILoginModule;
   ProductStore: IProductModule;
   ChannelProudctStore: IChannelProductModule;
+  MemberModuleStore: IMemberModule;
 }
 
 export const store = {
@@ -42,7 +45,8 @@ export const store = {
   ChannelProudctStore: new ChannelProudctStore,
   SiteStore: new SiteStore,
   CategoryStore: new CategoryStore,
-  FilterStore: new FilterStore,
+  FilterStore: new FilterStore, 
+  MemberStore: new MemberStore, 
 }
 
 const MobxProvider: React.FC = (props) => {

src/store/member/index.ts

+import { action, observable}  from 'mobx'
+import { IMemberModule } from '@/module/memberModule';
+
+/**
+ * 会员管理
+ */
+
+class MemberStore implements IMemberModule {
+  @observable public memberMaintainInfo: any = {};
+
+  @action.bound
+  public setmemberMaintainInfo(data: any) {
+    this.memberMaintainInfo = data;
+  }
+}
+
+export default MemberStore;