feat: 详情替换成公共组件

src/pages/member/memberPrVerifyComingData/detail.tsx

@@ -2,203 +2,49 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-24 16:46:22
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-07-09 14:58:19
+ * @LastEditTime: 2021-07-12 16:10:54
  * @Description: 待审核入库资料详情
  */
-import React, { useState, useEffect } from 'react';
-import {
-  Row,
-  Col,
-  Spin,
-} from 'antd';
+import React from 'react';
 import { usePageStatus } from '@/hooks/usePageStatus';
 import { PublicApi } from '@/services/api';
-import { GetMemberDepositVerifyDetailResponse } from '@/services/MemberV2Api';
-import AnchorPage from '@/layouts/AnchorPage';
-import AvatarWrap from '@/components/AvatarWrap';
-import AuditProcess from '@/components/AuditProcess';
-import LevelBrand from '@/components/LevelBrand';
-import FlowRecords from '@/components/FlowRecords';
-import CustomizeColumn from '@/components/CustomizeColumn';
-import { 
-  MEMBER_OUTER_COLUMNS,
-  MEMBER_INNER_COLUMNS,
-} from '../constant';
-import MemberBasicInfo from '../components/MemberBasicInfo';
-import MemberDocIncomingInfo from '../components/MemberDocIncomingInfo';
-import MemberDocQualification from '../components/MemberDocQualification';
-import PicWrap from '../components/PicWrap';
+import fetchDetailHoc from '../common/hoc/fetchDetailHoc';
+import MemberProfile, { DetailType } from '../components/MemberProfile';
 
 const MemberPrVerifyComingDataDetail: React.FC<{}> = () => {
   const { validateId } = usePageStatus();
-  const [memberInfo, setMemberInfo] = useState<GetMemberDepositVerifyDetailResponse & { depositDetailTexts: any }>(null);
-  const [infoLoading, setInfoLoaading] = useState(false);
 
-  const getBasicInfo = () => {
-    if (!validateId) {
-      return;
-    }
-    setInfoLoaading(true);
-    PublicApi.getMemberDepositVerifyDetail({
-      validateId,
-    }).then(res => {
-      if (res.code === 1000) {
-        setMemberInfo(res.data);
-      }
-    }).finally(() => {
-      setInfoLoaading(false);
+  const getBasicInfo = (): Promise<{ data: DetailType }> => {
+    return new Promise((resolve, reject) => {
+      PublicApi.getMemberDepositVerifyDetail({
+        validateId,
+      }).then(res => {
+        if (res.code === 1000) {
+          resolve({
+            data: {
+              ...res.data,
+              depositDetails: res.data.depositDetailTexts,
+            },
+          });
+          return;
+        }
+        reject(res.data);
+      }).catch((err) => {
+        reject(err);
+      });
     });
   };
 
-  useEffect(() => {
-    getBasicInfo();
-  }, []);
-
-  const anchorsArr = [
-    {
-      key: 'verifySteps',
-      name: '流转进度',
-    },
-    {
-      key: 'basicInfo',
-      name: '基本信息',
-    },
-    ...(
-      memberInfo && memberInfo.registerDetails
-        ? memberInfo.registerDetails.map((item, index) => ({
-          key: `group${index}`,
-          name: item.groupName,
-        }))
-        : []
-    ),
-    {
-      key: 'incomingInfo',
-      name: '入库信息',
-    },
-    (
-      memberInfo
-      && memberInfo.qualities
-      && memberInfo.qualities.length
-        ? {
-          key: 'qualificationInfo',
-          name: '资质证明',
-        }
-        : null
-    ),
-    {
-      key: 'flowRecords',
-      name: '流转记录',
-    },
-  ].filter(Boolean);
+  const MemberProfilePro = fetchDetailHoc({
+    fetchDetail: () => PublicApi.getMemberDepositVerifyDetail({
+      validateId,
+    }),
+  }, MemberProfile);
 
   return (
-    <Spin spinning={infoLoading}>
-      <AnchorPage
-        title={(
-          <AvatarWrap 
-            info={{
-              name: memberInfo?.name, 
-            }} 
-            extra={(
-              <LevelBrand level={memberInfo?.level} />
-            )}
-          />
-        )}
-        anchors={anchorsArr}
-      >
-        <Row gutter={[16, 16]}>
-          {/* 会员审核流程 */}
-          <Col span={24}>
-            <AuditProcess
-              outerVerifySteps={memberInfo?.outerVerifySteps}
-              outerVerifyCurrent={memberInfo?.currentOuterStep}
-              innerVerifySteps={memberInfo?.innerVerifySteps}
-              innerVerifyCurrent={memberInfo?.currentInnerStep}
-              id="verifySteps"
-            />
-          </Col>
-          
-          {/* 基本信息 */}
-          <Col span={24}>
-            <MemberBasicInfo
-              dataSource={{
-                memberId: memberInfo?.memberId,
-                memberTypeName: memberInfo?.memberTypeName,
-                account: memberInfo?.account,
-                name: memberInfo?.name,
-                roleName: memberInfo?.roleName,
-                phone: memberInfo?.phone,
-                outerStatus: memberInfo?.outerStatus,
-                outerStatusName: memberInfo?.outerStatusName,
-                levelTag: memberInfo?.levelTag,
-                email: memberInfo?.email,
-                createTime: memberInfo?.registerTime,
-              }}
-              id="basicInfo"
-            />
-          </Col>
-
-          {/* 其他注册信息 */}
-          {
-            memberInfo && memberInfo.registerDetails
-              ? memberInfo.registerDetails.map((item, index) => (
-                <Col span={24} key={`group${index}`}>
-                  <CustomizeColumn
-                    title={item.groupName}
-                    data={(
-                      item.elements.map((ele) => ({
-                        title: ele.fieldLocalName,
-                        value: (
-                          ele.fieldType !== 'upload'
-                            ? ele.fieldValue
-                            : (
-                              <PicWrap 
-                                pics={[ele.fieldValue]} 
-                              />
-                            )
-                        ),
-                      }))
-                    )}
-                    id={`group${index}`}
-                  />
-                </Col>
-              ))
-              : null
-          }
-
-          {/* 入库信息 */}
-          <Col span={24}>
-            <MemberDocIncomingInfo
-              dataSource={memberInfo?.depositDetailTexts}
-              id="incomingInfo"
-            />
-          </Col>
-
-          {/* 资质证明 */}
-          {memberInfo && memberInfo.qualities && memberInfo.qualities.length ? (
-            <Col span={24}>
-              <MemberDocQualification
-                dataSource={memberInfo?.qualities}
-                id="qualificationInfo"
-              />
-            </Col>
-          ) : null}
-
-          {/* 流转记录 */}
-          <Col span={24}>
-            <FlowRecords
-              outerColumns={MEMBER_OUTER_COLUMNS}
-              innerColumns={MEMBER_INNER_COLUMNS}
-              outerRowkey="id"
-              innerRowkey="id"
-              outerDataSource={memberInfo?.outerHistory}
-              innerDataSource={memberInfo?.innerHistory}
-              id="flowRecords"
-            />
-          </Col>
-        </Row>
-      </AnchorPage>
-    </Spin>
+    <MemberProfilePro
+      showChannelInfo={false}
+    />
   );
 };