对接完现有接口

config/routes/memberAbility.ts

@@ -2,7 +2,7 @@
  * @Author: LeeJiancong
  * @Date: 2020-08-04 16:47:35
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-08-25 10:47:21
+ * @LastEditTime: 2020-09-10 15:22:29
  */
 const memberAbility =
 {
@@ -23,17 +23,49 @@ const memberAbility =
       component: '@/pages/member/memberMaintain/addMember',
     },
     {
-      path: '/memberAbility/manage/memberDetail',
-      name: 'memberDetail',
+      path: '/memberAbility/manage/maintainDetail',
+      name: 'maintainDetail',
+      key: 'maintainDetail',
       hideInMenu: true,
       hidePageHeader: true,
-      component: '@/pages/member/memberMaintain/memberDetail',
+      component: '@/pages/member/memberMaintain/detailed',
+      routes: [
+        {
+          path: '/memberAbility/manage/maintainDetail/basicInfo',
+          name: 'basicInfo',
+          key: 'basicInfo',
+          component: '@/pages/member/memberMaintain/detailed/basicInfo',
+          hideInMenu: true,
+        },
+        {
+          path: '/memberAbility/manage/maintainDetail/levelInfo',
+          name: 'levelInfo',
+          key: 'levelInfo',
+          component: '@/pages/member/memberMaintain/detailed/levelInfo',
+          hideInMenu: true,
+        },
+        {
+          path: '/memberAbility/manage/maintainDetail/equityInfo',
+          name: 'equityInfo',
+          key: 'equityInfo',
+          component: '@/pages/member/memberMaintain/detailed/equityInfo',
+          hideInMenu: true,
+        },
+        {
+          path: '/memberAbility/manage/maintainDetail/sincerityInfo',
+          name: 'sincerityInfo',
+          key: 'sincerityInfo',
+          component: '@/pages/member/memberMaintain/detailed/sincerityInfo',
+          hideInMenu: true,
+        },
+      ],
     },
     {
       path: '/memberAbility/manage/frozen',
       name: 'maintainFrozen',
       key: 'maintainFrozen',
       hideInMenu: true,
+      hidePageHeader: true,
       component: '@/pages/member/memberMaintain/frozen',
     },
     {

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@ant-design/pro-layout": "^5.0.12",
+    "@antv/data-set": "^0.11.5",
     "@formily/antd": "^1.2.11",
     "@formily/antd-components": "^1.2.11",
     "@umijs/hooks": "^1.9.3",

src/components/PolymericTable/NormalTable.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-08-20 16:15:59
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-08-21 17:07:35
+ * @LastEditTime: 2020-09-10 14:07:35
  * @Description: 简单封装了分页事件的 Table
  */
 import React from 'react';

src/global/styles/utils.less

+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+.textOverflowMulti2(@line: 3) {
+  display: -webkit-box;
+  /* autoprefixer: off */
+  -webkit-box-orient:vertical;
+  /* autoprefixer: on */
+  -webkit-line-clamp: @line;
+  overflow: hidden;
+}
\ No newline at end of file

src/locales/zh-CN/menu.ts

@@ -61,7 +61,11 @@ export default {
   'menu.memberAbility': '会员管理',
   'menu.memberAbility.memberMaintain': '会员维护',
   'menu.memberAbility.addMember': '新增会员',
-  'menu.memberAbility.memberDetail': '会员详情',
+  'menu.memberAbility.maintainDetail': '会员详情', 
+  'menu.memberAbility.maintainDetail.basicInfo': '会员基本信息',
+  'menu.memberAbility.maintainDetail.levelInfo': '会员等级信息',
+  'menu.memberAbility.maintainDetail.equityInfo': '权益信息',
+  'menu.memberAbility.maintainDetail.sincerityInfo': '诚信信息',
   'menu.memberAbility.maintainFrozen': '会员冻结',
   'menu.memberAbility.memberPrSubmit': '待提交审核',
   'menu.memberAbility.auditPrSubmit': '待提交审核详情',

src/module/memberModule/index.ts

+export interface IMemberModule {
+  memberMaintainInfo: any;
+
+  setmemberMaintainInfo(data: any): void;
+}
\ No newline at end of file

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

@@ -9,11 +9,11 @@ import classNames from 'classnames';
 import PolymericTable from '@/components/PolymericTable';
 import { EditableColumns } from '@/components/PolymericTable/interface';
 import MellowCard from '@/components/MellowCard';
-import equity1 from '@/assets/imgs/equity-1.png';
-import equity2 from '@/assets/imgs/equity-2.png';
-import equity3 from '@/assets/imgs/equity-3.png';
-import equity4 from '@/assets/imgs/equity-4.png';
-import equity5 from '@/assets/imgs/equity-5.png';
+import equity1 from '@/asserts/equity-1.png';
+import equity2 from '@/asserts/equity-2.png';
+import equity3 from '@/asserts/equity-3.png';
+import equity4 from '@/asserts/equity-4.png';
+import equity5 from '@/asserts/equity-5.png';
 import styles from './index.less';
 
 const { TabPane } = Tabs;

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

@@ -18,22 +18,24 @@ import styles from './index.less';
 export interface InnerHistoryItem {
   createTime?: string, 
   id?: number;
-  operatorName?: string;
-  operatorOrgName?: string;
-  operatorJobTitle?: string;
+  operator?: string;
+  org?: string;
+  jobTitle?: string;
   operation?: string;
-  innerStatusName?: string;
-  remark?: string;
+  operateTime?: string;
   innerStatus?: number;
+  innerStatusName?: string;
+  reason?: string;
 };
 
 export interface OuterHistoryItem {
-  id: number;
-  roleName: string;
-  statusName: string;
-  operation: string;
-  operateTime: string;
-  reason: string;
+  id?: number;
+  roleName?: string;
+  status?: number;
+  statusName?: string;
+  operation?: string;
+  operateTime?: string;
+  reason?: string;
 };
 
 interface FlowRecordsProps {
@@ -60,7 +62,7 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({ outerHistory = [], innerHisto
       dataIndex: 'statusName',
       align: 'center', 
       render: (text, record) => (
-        <Badge color={MEMBER_OUTER_STATUS_BADGE_COLOR[record.status]} text={text} />
+        <Badge color={MEMBER_OUTER_STATUS_BADGE_COLOR[record.status] || '#999999'} text={text} />
       ),
     },
     {
@@ -109,7 +111,7 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({ outerHistory = [], innerHisto
       dataIndex: 'innerStatusName',
       align: 'center', 
       render: (text, record) => (
-        <Badge color={MEMBER_INNER_STATUS_BADGE_COLOR[record.innerStatus]} text={text} />
+        <Badge color={MEMBER_INNER_STATUS_BADGE_COLOR[record.innerStatus] || '#999999'} text={text} />
       ),
     },
     {
@@ -139,7 +141,7 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({ outerHistory = [], innerHisto
             dataSource={outerHistory}
             columns={outerColumns}
             loading={false}
-            pagination={undefined}
+            pagination={null}
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="内部单据流转记录" key="2">
@@ -147,7 +149,7 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({ outerHistory = [], innerHisto
             dataSource={innerHistory}
             columns={innerColumns}
             loading={false}
-            pagination={undefined}
+            pagination={null}
           />
         </Tabs.TabPane>
       </Tabs>

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

@@ -18,7 +18,7 @@ import PolymericTable from '@/components/PolymericTable';
 import { EditableColumns } from '@/components/PolymericTable/interface';
 import { Pie } from '@/components/Charts';
 import MellowCard from '@/components/MellowCard';
-import equity5 from '@/assets/imgs/equity-5.png';
+import equity5 from '@/asserts/equity-5.png';
 import styles from './index.less';
 
 const { TabPane } = Tabs;
@@ -59,7 +59,7 @@ interface MoodProps {
 };
 
 const Mood: React.FC<MoodProps> = ({ type = 'smile' }) => {
-  let node = null;
+  let node: any = null;
 
   switch (type) {
     case 'smile':
@@ -165,33 +165,33 @@ const SincerityInfo: React.FC<SincerityInfoProps> = ({
   const integralItems = basicInfo.items || [];
   const { dataSource: complaintSumData } = complaintSum;
 
-  const [salesEvaluate, setSalesEvaluate] = useState([]);
-  const [salesEvaluatePie, setSalesEvaluatePie] = useState([]);
-  const [afterEvaluate, setAfterEvaluate] = useState([]);
-  const [afterEvaluatePie, setAfterEvaluatePie] = useState([]);
+  const [salesEvaluate, setSalesEvaluate] = useState<EstimateSumItems[]>([]);
+  const [salesEvaluatePie, setSalesEvaluatePie] = useState<{ x: string, y: number }[]>([]);
+  const [afterEvaluate, setAfterEvaluate] = useState<EstimateSumItems[]>([]);
+  const [afterEvaluatePie, setAfterEvaluatePie] = useState<{ x: string, y: number }[]>([]);
   const [salesTabKey, setSalesTabKey] = useState('evaluateSum');
   const [afterTabKey, setAfterTabKey] = useState('evaluateSum');
 
   const [salesPage, setSalesPage] = useState(1);
   const [salesSize, setSalesSize] = useState(PAGE_SIZE);
   const [salesTotal, setSalesTotal] = useState(0);
-  const [salesList, setSalesList] = useState([]);
+  const [salesList, setSalesList] = useState<any[]>([]);
   const [salesListLoading, setSalesListLoading] = useState(false);
 
   const [afterPage, setAfterPage] = useState(1);
   const [afterSize, setAfterSize] = useState(PAGE_SIZE);
   const [afterTotal, setAfterTotal] = useState(0);
-  const [afterList, setAfterList] = useState([]);
+  const [afterList, setAfterList] = useState<any>([]);
   const [afterListLoading, setAfterListLoading] = useState(false);
   
   const [complainPage, setComplainPage] = useState(1);
   const [complainSize, setComplainSize] = useState(PAGE_SIZE);
   const [complainTotal, setComplainTotal] = useState(0);
-  const [complainList, setComplainList] = useState([]);
+  const [complainList, setComplainList] = useState<any[]>([]);
   const [complainListLoading, setComplainListLoading] = useState(false);
 
   const exchangeMood = (star: number): React.ReactNode => {
-    let node = null;
+    let node: any = null;
     switch (star) {
       case 1: 
       case 2: {
@@ -342,7 +342,7 @@ const SincerityInfo: React.FC<SincerityInfoProps> = ({
     for (let i = 0; i < source.length; i++) {
       const item = source[i];
       const { star, ...rest } = item;
-      let target = null;
+      let target: any = null;
 
       switch (item.star) {
         case 1: 
@@ -392,7 +392,7 @@ const SincerityInfo: React.FC<SincerityInfoProps> = ({
   // 取得评价统计 Pie 饼图数据
   const getSummaryEvaluatePie = (data: EstimateSumItems[]) => {
     const source = data || [];
-    const count = source.reduce((pre, now) => now.sum + pre, 0);
+    const count = source.reduce((pre, now) => (now.sum || 0) + pre, 0);
     const good = source[0] && source[0].sum ? source[0].sum : 0;
     const notBad = source[1] && source[1].sum ? source[1].sum : 0;
     const bad = source[2] && source[2].sum ? source[2].sum : 0;
@@ -472,7 +472,7 @@ const SincerityInfo: React.FC<SincerityInfoProps> = ({
 
   // 监听交易评价数据改变，组合所需数据
   useEffect(() => {
-    const evaluate = summaryEvaluate(salesEstimateSum.dataSource);
+    const evaluate = salesEstimateSum && salesEstimateSum.dataSource ? summaryEvaluate(salesEstimateSum.dataSource) : [];
     const evaluatePie = getSummaryEvaluatePie(evaluate);
 
     setSalesEvaluate(evaluate);
@@ -481,7 +481,7 @@ const SincerityInfo: React.FC<SincerityInfoProps> = ({
   
   // 监听售后评价数据改变，组合所需数据
   useEffect(() => {
-    const evaluate = summaryEvaluate(afterEstimateSum.dataSource);
+    const evaluate = afterEstimateSum && afterEstimateSum.dataSource ? summaryEvaluate(afterEstimateSum.dataSource) : [];
     const evaluatePie = getSummaryEvaluatePie(evaluate);
 
     setAfterEvaluate(evaluate);

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, { useEffect, useState } from 'react';
+import { Spin } from 'antd';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import { GetMemberMaintenanceDetailRightBasicResponse } from '@/services/MemberApi';
+import Info, { ReceivedData, UsageData } from '../../components/EquityInfo';
+
+const EquityInfo: React.FC<{}> = () => {
+  const { id, validateId } = usePageStatus();
+  const [equityInfo, setEquityInfo] = useState<GetMemberMaintenanceDetailRightBasicResponse>();
+  const [infoLoading, setInfoLoading] = useState(false);
+
+  const getEquityInfo = () => {
+    setInfoLoading(true);
+    PublicApi.getMemberMaintenanceDetailRightBasic({
+      memberId: id, 
+      validateId, 
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      setEquityInfo(res.data);
+    }).finally(() => {
+      setInfoLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    getEquityInfo();
+  }, []);
+
+  const getReceivedList = params => {
+    return new Promise<{ data: ReceivedData[] , totalCount: number }>((resolve, reject) => {
+      PublicApi.getMemberMaintenanceDetailRightHistoryPage({
+        memberId: id, 
+        validateId, 
+        ...params,
+      }).then(res => {
+        const { data = [], totalCount = 0 } = res.data;
+        resolve({ data, totalCount });
+      }).catch(err => {
+        reject(err);
+      });
+    }) 
+  };
+  
+  const getUsageList = params => {
+    return new Promise<{ data: UsageData[] , totalCount: number }>((resolve, reject) => {
+      PublicApi.getMemberMaintenanceDetailRightSpendHistoryPage({
+        memberId: id, 
+        validateId, 
+        ...params,
+      }).then(res => {
+        const { data = [], totalCount = 0 } = res.data;
+        resolve({ data, totalCount });
+      }).catch(err => {
+        reject(err);
+      });
+    }) 
+  };
+
+  return (
+    <Spin spinning={infoLoading}>
+      <Info 
+        equityInfo={{
+          sumReturnMoney: equityInfo?.sumReturnMoney, 
+          sumUsedPoint: equityInfo?.sumUsedPoint, 
+          sumPoint: equityInfo?.sumPoint, 
+        }}
+        fetchReceivedList={getReceivedList}
+        fetchUsageList={getUsageList}
+      />
+    </Spin>
+  );
+};
+
+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 { GetMemberMaintenanceDetailBasicResponse } from '@/services/MemberApi';
+import { IMemberModule } from '@/module/memberModule';
+import { 
+  MEMBER_STATUS_TAG_MAP, 
+  MEMBER_INNER_STATUS_BADGE_COLOR, 
+  MEMBER_OUTER_STATUS_TYPE, 
+} from '../../constant';
+import { normalizeInnerHistory, normalizeOuterHistory } from '../../utils';
+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 MemberMaintainDetailed: React.FC<QueryProps> = props => {
+  const { MemberStore, children } = props;
+  const { id, validateId } = usePageStatus();
+  const [basicInfo, setBasicInfo] = useState<GetMemberMaintenanceDetailBasicResponse>();
+  const [infoLoading, setInfoLoading] = useState(false);
+
+  const getBasicInfo = () => {
+    if (!id || !validateId) {
+      return;
+    }
+    setInfoLoading(true);
+    PublicApi.getMemberMaintenanceDetailBasic({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      const { outerHistory = [], innerHistory = [] } = res.data;
+      const data = {
+        ...res.data, 
+        outerHistory: normalizeOuterHistory(outerHistory), 
+        innerHistory: normalizeInnerHistory(innerHistory), 
+      };
+      setBasicInfo(data);
+      MemberStore.setmemberMaintainInfo(data);
+    }).finally(() => {
+      setInfoLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    const { match } = props;
+    const url = match.url === '/' ? '' : match.url;
+    // 手动重定向到基础信息页，防止查询字符串被弄掉
+    history.replace(`${url}/basicInfo?id=${id}&validateId=${validateId}`);
+    getBasicInfo();
+  }, []);
+  
+  const tabList = [
+    {
+      key: 'basicInfo',
+      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(MemberMaintainDetailed));
\ 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 { GetMemberMaintenanceDetailLevelBasicResponse } from '@/services/MemberApi';
+import Info, { DataProps } from '../../components/LevelInfo';
+
+const LevelInfo: React.FC<{}> = () => {
+  const { id, validateId } = usePageStatus();
+  const [levelInfo, setLevelInfo] = useState<GetMemberMaintenanceDetailLevelBasicResponse>();
+  const [infoLoading, setInfoLoading] = useState(false);
+
+  const getMemberLevelInfo = () => {
+    if (!id && !validateId) {
+      return;
+    }
+    setInfoLoading(true);
+    PublicApi.getMemberMaintenanceDetailLevelBasic({
+      memberId: id, 
+      validateId, 
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      setLevelInfo(res.data);
+
+    }).finally(() => {
+      setInfoLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    getMemberLevelInfo();
+  }, []);
+
+  const getHistroyList = params => {
+    return new Promise<{ data: DataProps[] , totalCount: number }>((resolve, reject) => {
+      PublicApi.getMemberMaintenanceDetailLevelHistoryPage({
+        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/sincerityInfo.tsx

+import React, { useEffect, useState } from 'react';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import Info, { BasicInfo, ComplaintSum, EstimateSum, SalesProps, ComplaintProps } from '../../components/SincerityInfo';
+
+const SincerityInfo: React.FC<{}> = () => {
+  const { id, validateId } = usePageStatus();
+  const [basicInfo, setBasicInfo] = useState<BasicInfo>({ pieData: [], items: [] });
+  const [infoLoading, setInfoLoading] = useState(false);
+  const [salesEstimateSum, setSalesEstimateSum] = useState<EstimateSum>({ dataSource: [] });
+  const [salesEstimateSumLoading, setSalesEstimateSumLoading] = useState(false);
+  const [afterEstimateSum, setAfterEstimateSum] = useState<EstimateSum>({ dataSource: [] });
+  const [afterEstimateSumLoading, setAfterEstimateSumLoading] = useState(false);
+  const [complainSum, setComplainSum] = useState<ComplaintSum>({ dataSource: {} });
+  const [complainSumLoading, setComplainSumLoading] = useState(false);
+
+  const getBasicInfo = () => {
+    setInfoLoading(true);
+    PublicApi.getMemberMaintenanceDetailCreditBasic({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      const { 
+        tradeCommentPoint, 
+        afterSaleCommentPoint, 
+        complainPoint, 
+        registerYearsPoint, 
+        configs, 
+      } = (res.data || {});
+      const pieData = [
+        {
+          x: '交易评价积分',
+          y: tradeCommentPoint || 0, 
+        },
+        {
+          x: '售后评价积分',
+          y: afterSaleCommentPoint || 0, 
+        },
+        {
+          x: '投诉扣分',
+          y: complainPoint || 0, 
+        },
+        {
+          x: '入驻年数积分',
+          y: registerYearsPoint || 0, 
+        },
+      ];
+      setBasicInfo({
+        pieData, 
+        items: configs,
+      });
+    }).finally(() => {
+      setInfoLoading(false);
+    });
+  };
+
+  // 交易评价汇总
+  const getSalesEstimateSum = () => {
+    setSalesEstimateSumLoading(true);
+    PublicApi.getMemberMaintenanceDetailCreditTradeSummary({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      const { rows = [] } = (res.data || {});
+
+      setSalesEstimateSum({
+        dataSource: rows, 
+      });
+    }).finally(() => {
+      setSalesEstimateSumLoading(false);
+    });
+  };
+  
+  // 售后评价汇总
+  const getAfterEstimateSum = () => {
+    setAfterEstimateSumLoading(true);
+    PublicApi.getMemberMaintenanceDetailCreditAftersaleSummary({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      const { rows = [] } = (res.data || {});
+
+      setAfterEstimateSum({
+        dataSource: rows, 
+      });
+    }).finally(() => {
+      setAfterEstimateSumLoading(false);
+    });
+  };
+  
+  // 投诉汇总
+  const getComplaintSum = () => {
+    setComplainSumLoading(true);
+    PublicApi.getMemberMaintenanceDetailCreditComplainSummary({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      setComplainSum({
+        dataSource: res.data,
+      });
+    }).finally(() => {
+      setComplainSumLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    getBasicInfo();
+    getSalesEstimateSum();
+    getAfterEstimateSum();
+    getComplaintSum();
+  }, []);
+
+  // 交易评论历史记录
+  const getSalesList = (params) => {
+    return new Promise<{ data: SalesProps[] , totalCount: number }>((resolve, reject) => {
+      PublicApi.getMemberMaintenanceDetailCreditTradeHistoryPage({
+        memberId: id, 
+        validateId, 
+        ...params,
+      }).then(res => {
+        const { data = [], totalCount = 0 } = res.data;
+        resolve({ data, totalCount });
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  };
+  
+  // 售后评论历史记录
+  const getAfterList = (params) => {
+    return new Promise<{ data: SalesProps[] , totalCount: number }>((resolve, reject) => {
+      PublicApi.getMemberMaintenanceDetailCreditAftersaleHistoryPage({
+        memberId: id, 
+        validateId, 
+        ...params,
+      }).then(res => {
+        const { data = [], totalCount = 0 } = res.data;
+        resolve({ data, totalCount });
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  };
+  
+    // 投诉历史记录
+  const getComplaintList = (params) => {
+    return new Promise<{ data: ComplaintProps[] , totalCount: number }>((resolve, reject) => {
+      PublicApi.getMemberMaintenanceDetailCreditComplainHistoryPage({
+        memberId: id, 
+        validateId, 
+        ...params,
+      }).then(res => {
+        const { data = [], totalCount = 0 } = res.data;
+        resolve({ data, totalCount });
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  };
+
+  return (
+    <div>
+      <Info 
+        basicInfo={{
+          ...basicInfo, 
+          loading: infoLoading,
+        }}
+        salesEstimateSum={{
+          ...salesEstimateSum, 
+          loading: salesEstimateSumLoading, 
+        }}
+        fetchSalesList={getSalesList}
+        afterEstimateSum={{
+          ...afterEstimateSum, 
+          loading: afterEstimateSumLoading, 
+        }}
+        fetchAfterList={getAfterList}
+        complaintSum={{
+          ...complainSum,
+          loading: complainSumLoading, 
+        }}
+        fetchComplaintList={getComplaintList}
+      />
+    </div>
+  );
+};
+
+export default SincerityInfo;
\ No newline at end of file

src/pages/member/memberMaintain/frozen.tsx

@@ -20,6 +20,7 @@ import {
   MEMBER_INNER_STATUS_BADGE_COLOR, 
   MEMBER_OUTER_STATUS_TYPE, 
 } from '../constant';
+import { normalizeInnerHistory, normalizeOuterHistory } from '../utils';
 import HeadInfo from '../components/HeadInfo';
 import AuditProcess from '../components/AuditProcess';
 import BasicInfo from '../components/BasicInfo';
@@ -45,7 +46,12 @@ const Frozen: React.FC<{}> = () => {
       validateId,
     }).then(res => {
       if (res.code === 1000) {
-        setBasicInfo(res.data);
+        const { outerHistory = [], innerHistory = [] } = res.data;
+        setBasicInfo({
+          ...res.data, 
+          outerHistory: normalizeOuterHistory(outerHistory), 
+          innerHistory: normalizeInnerHistory(innerHistory), 
+        });
       }
     }).finally(() => {
       setInfoLoaading(false);
@@ -130,7 +136,7 @@ const Frozen: React.FC<{}> = () => {
                   <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} />
+                  <Badge color={MEMBER_INNER_STATUS_BADGE_COLOR[basicInfo?.innerStatus] || '#999999'} text={basicInfo?.innerStatusName} />
                 </Descriptions.Item>
               </Descriptions>
             </PageHeader>
@@ -158,11 +164,7 @@ const Frozen: React.FC<{}> = () => {
             created: basicInfo?.createTime, 
           }}
           channel={{
-            memberType: basicInfo?.memberTypeEnum, 
-            level: basicInfo?.channelLevelTag, 
-            type: basicInfo?.channelTypeName, 
-            areas: basicInfo?.areas, 
-            desc: basicInfo?.remark, 
+            memberType: undefined, 
           }}
           extra={basicInfo?.groups}
           outerHistory={basicInfo?.outerHistory}

src/pages/member/memberMaintain/index.tsx

@@ -84,7 +84,7 @@ const memberMaintain: React.FC<[]> = () => {
       key: 'name',
       render: (text: any, record: any) => (
         <EyePreview
-          url={`/memberAbility/manage/memberDetail?id=${record.id}&preview=1`}
+          url={`/memberAbility/manage/maintainDetail?id=${record.memberId}&validateId=${record.validateId}&preview=1`}
         >
           {text}
         </EyePreview>

src/pages/member/memberMaintain/memberDetail.tsx

@@ -17,15 +17,15 @@ const { TabPane } = Tabs;
 const { Step } = Steps;
 
 const MemberDetail: React.FC<{}> = () => {
-  const { pageStatus, id } = usePageStatus();
+  const { pageStatus, id, validateId } = usePageStatus();
   const [hActived, setHActived] = useState('3');
   const [detailData, setDetailData] = useState<any>({});
 
   useEffect(() => {
     const fetchDetailData = async () => {
       const { data } = await PublicApi.getMemberValidateCommitDetail({
-        memberId: '2',
-        validateId: '63',
+        memberId: id,
+        validateId,
       });
       setDetailData(data);
     };

src/pages/member/memberPrConfirm/index.tsx

@@ -45,15 +45,11 @@ const MemberPrConfirm: React.FC<{}> = props => {
       dataIndex: 'name',
       align: 'center',
       render: (text: any, record: any) => (
-        <>
-          {record.innerStatus !== MEMBER_INNER_STATUS_SUCCESS ? (
-            <EyePreview
-              url={`/memberAbility/manage/auditPrComfirm?id=${record.memberId}&validateId=${record.validateId}&preview=1`}
-            >
-              {text}
-            </EyePreview>
-          ) : text}
-        </>
+        <EyePreview
+          url={`/memberAbility/manage/auditPrComfirm?id=${record.memberId}&validateId=${record.validateId}&preview=1`}
+        >
+          {text}
+        </EyePreview>
       ),
     },
     {

src/pages/member/utils.tsx

@@ -11,4 +11,52 @@ export function coverColFiltersItem(
       filters: item, 
     });
   }
+};
+
+// 初始化内部流转记录
+export function normalizeInnerHistory(source: {[key: string]: any}[]) {
+  const ret: any[] = [];
+
+  if (!Array.isArray(source)) {
+    return ret;
+  }
+  
+  source.forEach(item => {
+    const atom = {
+      id: item.id, 
+      operator: item.operatorName, 
+      org: item.operatorOrgName, 
+      jobTitle: item.operatorJobTitle, 
+      innerStatusName: item.innerStatusName, 
+      innerStatus: item.innerStatus, 
+      operation: item.operation, 
+      operateTime: item.createTime, 
+      reason: item.remark, 
+    };
+    ret.push(atom);
+  });
+  return ret;
+};
+
+// 初始化内部流转记录
+export function normalizeOuterHistory(source: {[key: string]: any}[]) {
+  const ret: any[] = [];
+
+  if (!Array.isArray(source)) {
+    return ret;
+  }
+  
+  source.forEach(item => {
+    const atom = {
+      id: item.id, 
+      roleName: item.operatorRoleName, 
+      status: item.status, 
+      statusName: item.statusDescription, 
+      operation: item.operation, 
+      operateTime: item.createTime, 
+      reason: item.remark, 
+    };
+    ret.push(atom);
+  });
+  return ret;
 };
\ No newline at end of file

src/store/index.tsx

 import TestStore from './test'
 import React from 'react';
 import { Provider } from 'mobx-react'
-import { ITestModule } from '@/module/testModule';
 import GlobalSelectStore from './globalSelect';
 import SiteStore from './site'
+import MemberStore from './member'
+import { ITestModule } from '@/module/testModule';
+import { IMemberModule } from '@/module/memberModule';
+
 /**
  *
  * mobx使用说明
@@ -20,13 +23,15 @@ import SiteStore from './site'
  */
 
 export interface IStore {
-  testStore: ITestModule
+  testStore: ITestModule;
+  MemberModuleStore: IMemberModule;
 }
 
 export const store = {
   testStore: new TestStore,
   globalStore: new GlobalSelectStore,
-  SiteStore: new SiteStore
+  SiteStore: new SiteStore, 
+  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;