对接会员维护 -》会员详情 诚信信息中

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

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { 
   Row, 
   Col, 
@@ -18,19 +18,60 @@ import styles from './index.less';
 
 const { TabPane } = Tabs;
 
-interface EquityInfoProps {
+const PAGE_SIZE = 8;
+
+export interface ReceivedData {
+  id?: number; 
+  createTime?: string;
+  ruleName?: string;
+  score?: number;
+  remark?: string;
+};
+
+export interface UsageData {
+  id?: number; 
+  createTime?: string;
+  rightTypeName?: string;
+  spendTypeName?: string;
+  point?: number;
+  remark?: string;
+};
+
+export interface FetchParams {
+  current: number;
+  pageSize: number;
+};
+
+export interface EquityInfoProps {
   equityInfo?: {
-    sumReturnMoney?: number, 
-    sumUsedPoint?: number, 
-    sumPoint?: number, 
+    sumReturnMoney?: number,      // 累计返现金额
+    sumUsedPoint?: number,        // 已用积分
+    sumPoint?: number,            // 累计积分
   };
+
+  fetchReceivedList?: (params: FetchParams) => Promise<{ data: ReceivedData[] , totalCount: number }>;
+  fetchUsageList?: (params: FetchParams) => Promise<{ data: UsageData[] , totalCount: number }>;
 }
 
 const EquityInfo: React.FC<EquityInfoProps> = ({
   equityInfo = {}, 
+  fetchReceivedList, 
+  fetchUsageList, 
 }) => {
 
-  const columns: EditableColumns[] = [
+  const [receivedPage, setReceivedPage] = useState(1);
+  const [receivedSize, setReceivedSize] = useState(PAGE_SIZE);
+  const [receivedTotal, setReceivedTotal] = useState(0);
+  const [receivedList, setReceivedList] = useState([]);
+  const [receivedListLoading, setReceivedListLoading] = useState(false);
+  
+  const [usagePage, setUsagePage] = useState(1);
+  const [usageSize, setUsageSize] = useState(PAGE_SIZE);
+  const [usageTotal, setUsageTotal] = useState(0);
+  const [usageList, setUsageList] = useState([]);
+  const [usageListLoading, setUsageListLoading] = useState(false);
+
+  const receivedColumns: EditableColumns[] = [
     {
       title: 'ID',
       dataIndex: 'id',
@@ -38,28 +79,28 @@ const EquityInfo: React.FC<EquityInfoProps> = ({
     },
     {
       title: '会员权益名称',
-      dataIndex: 'project',
+      dataIndex: 'rightTypeName	',
       align: 'center',
     },
     {
       title: '获取数量',
-      dataIndex: 'score',
+      dataIndex: 'point',
       align: 'center',
     },
     {
       title: '获取时间',
-      dataIndex: 'created',
+      dataIndex: 'createTime',
       align: 'center',
     },
     {
       title: '备注',
-      dataIndex: 'node',
+      dataIndex: 'remark',
       align: 'center',
       ellipsis: true, 
     },
   ];
   
-  const columns2: EditableColumns[] = [
+  const usageColumns: EditableColumns[] = [
     {
       title: 'ID',
       dataIndex: 'id',
@@ -67,34 +108,99 @@ const EquityInfo: React.FC<EquityInfoProps> = ({
     },
     {
       title: '会员权益名称',
-      dataIndex: 'project',
+      dataIndex: 'rightTypeName',
       align: 'center',
     },
     {
       title: '会员权益使用名称',
-      dataIndex: 'name',
+      dataIndex: 'spendTypeName',
       align: 'center',
     },
     {
       title: '使用数量',
-      dataIndex: 'count',
+      dataIndex: 'point',
       align: 'center',
     },
     {
       title: '使用时间',
-      dataIndex: 'created',
+      dataIndex: 'createTime',
       align: 'center',
     },
     {
       title: '备注',
-      dataIndex: 'node',
+      dataIndex: 'remark',
       align: 'center',
       ellipsis: true, 
     },
   ];
 
+  const getReceivedList = () => {
+    if (fetchReceivedList) {
+      if (receivedListLoading) {
+        return;
+      }
+      setReceivedListLoading(true);
+      fetchReceivedList({ 
+        current: receivedPage, 
+        pageSize: receivedSize, 
+      }).then(res => {
+        const { data = [], totalCount = 0 } = (res || {});
+        setReceivedList(data);
+        setReceivedTotal(totalCount);
+      }).finally(() => {
+        setReceivedListLoading(false);
+      });
+    }
+  };
+  
+  const getUsageList = () => {
+    if (fetchUsageList) {
+      if (usageListLoading) {
+        return;
+      }
+      setUsageListLoading(true);
+      fetchUsageList({ 
+        current: usagePage, 
+        pageSize: usageSize, 
+      }).then(res => {
+        const { data = [], totalCount = 0 } = (res || {});
+        setUsageList(data);
+        setUsageTotal(totalCount);
+      }).finally(() => {
+        setUsageListLoading(false);
+      });
+    }
+  };
+
+  useEffect(() => {
+    getReceivedList();
+  }, []);
+
   const handleTabChange = key => {
-    console.log('key', key)
+    switch (key) {
+      case '1':
+        getReceivedList();
+        break;
+        
+      case '2':
+        getUsageList();
+        break;
+    
+      default:
+        break;
+    }
+  };
+  
+  const handleReceivedPaginationChange = (page: number, size: number) => {
+    setReceivedPage(page);
+    setReceivedSize(size);
+    getReceivedList();
+  };
+  
+  const handleUsagePaginationChange = (page: number, size: number) => {
+    setUsagePage(page);
+    setUsageSize(size);
+    getReceivedList();
   };
 
   return (
@@ -209,18 +315,26 @@ const EquityInfo: React.FC<EquityInfoProps> = ({
             <Tabs onChange={handleTabChange}>
               <TabPane tab="权益获取记录" key="1">
                 <PolymericTable
-                  dataSource={[]}
-                  columns={columns}
-                  loading={false}
-                  pagination={null}
+                  dataSource={receivedList}
+                  columns={receivedColumns}
+                  loading={receivedListLoading}
+                  pagination={{
+                    pageSize: receivedSize, 
+                    total: receivedTotal,
+                  }}
+                  onPaginationChange={handleReceivedPaginationChange}
                 />
               </TabPane>
               <TabPane tab="权益使用记录" key="2">
                 <PolymericTable
-                  dataSource={[]}
-                  columns={columns2}
-                  loading={false}
-                  pagination={null}
+                  dataSource={usageList}
+                  columns={usageColumns}
+                  loading={usageListLoading}
+                  pagination={{
+                    pageSize: usageSize, 
+                    total: usageTotal,
+                  }}
+                  onPaginationChange={handleUsagePaginationChange}
                 />
               </TabPane>
             </Tabs>

src/pages/member/memberImport/addMember.tsx

@@ -25,7 +25,7 @@ const {
 const addMember: React.FC<any> = props => {
   const { id, validateId } = usePageStatus();
   const [memberItems, setMemberItems] = useState<any>({});
-  const [memberInfo, setMemberInfo] = useState<GetMemberAbilitySubGetResponse>({ registration_time: '123', company_name: '321' });
+  const [memberInfo, setMemberInfo] = useState<GetMemberAbilitySubGetResponse>(null);
   const [submitLoading, setSubmitLoading] = useState(false);
   const [infoLoading, setInfoLoading] = useState(false);
 

src/pages/member/memberImport/schema/index.tsx

@@ -265,11 +265,17 @@ export const initDetailSchema = (props: any) => {
                   },
                   phone: {
                     type: 'string', 
+                    required: true, 
                     'x-component-props': {
                       placeholder: '请输入你的手机号码',
                       maxLength: 11, 
                     }, 
-                    required: true, 
+                    'x-rules': [
+                      {
+                        pattern: PATTERN_MAPS.phone, 
+                        message: '请输入正确格式的手机号', 
+                      },
+                    ],
                   },
                 },
               },

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

-import React from 'react';
-import Info from '../../components/EquityInfo';
+import React, { useEffect, useState } from 'react';
+import { Spin } from 'antd';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilityMaintenanceDetailRightBasicResponse } from '@/services/MemberApi';
+import Info, { ReceivedData, UsageData } from '../../components/EquityInfo';
 
 const EquityInfo: React.FC<{}> = () => {
+  const { id, validateId } = usePageStatus();
+  const [equityInfo, setEquityInfo] = useState<GetMemberAbilityMaintenanceDetailRightBasicResponse>(null);
+  const [infoLoading, setInfoLoading] = useState(false);
+
+  const getEquityInfo = () => {
+    setInfoLoading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailRightBasic({
+      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.getMemberAbilityMaintenanceDetailRightHistoryPage({
+        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.getMemberAbilityMaintenanceDetailRightSpendHistoryPage({
+        memberId: id, 
+        validateId, 
+        ...params,
+      }).then(res => {
+        const { data = [], totalCount = 0 } = res.data;
+        resolve({ data, totalCount });
+      }).catch(err => {
+        reject(err);
+      });
+    }) 
+  };
+
   return (
-    <div>
-      <Info />
-    </div>
+    <Spin spinning={infoLoading}>
+      <Info 
+        equityInfo={{
+          sumReturnMoney: equityInfo?.sumReturnMoney, 
+          sumUsedPoint: equityInfo?.sumUsedPoint, 
+          sumPoint: equityInfo?.sumPoint, 
+        }}
+        fetchReceivedList={getReceivedList}
+        fetchUsageList={getUsageList}
+      />
+    </Spin>
   );
 };
 

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

@@ -38,13 +38,13 @@ 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 [infoLoading, setInfoLoading] = useState(false);
 
   const getBasicInfo = () => {
     if (!id || !validateId) {
       return;
     }
-    setInfoLoaading(true);
+    setInfoLoading(true);
     PublicApi.getMemberAbilityMaintenanceDetailBasic({
       memberId: id, 
       validateId,
@@ -55,7 +55,7 @@ const MemberQueryDetailed: React.FC<QueryProps> = props => {
       setBasicInfo(res.data);
       MemberStore.setmemberMaintainInfo(res.data);
     }).finally(() => {
-      setInfoLoaading(false);
+      setInfoLoading(false);
     });
   };
 

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

@@ -9,13 +9,13 @@ import { reject } from 'lodash';
 const LevelInfo: React.FC<{}> = () => {
   const { id, validateId } = usePageStatus();
   const [levelInfo, setLevelInfo] = useState<GetMemberAbilityMaintenanceDetailLevelBasicResponse>(null);
-  const [infoLoading, setInfoLoaading] = useState(false);
+  const [infoLoading, setInfoLoading] = useState(false);
 
   const getMemberLevelInfo = () => {
     if (!id && !validateId) {
       return;
     }
-    setInfoLoaading(true);
+    setInfoLoading(true);
     PublicApi.getMemberAbilityMaintenanceDetailLevelBasic({
       memberId: id, 
       validateId, 
@@ -26,7 +26,7 @@ const LevelInfo: React.FC<{}> = () => {
       setLevelInfo(res.data);
 
     }).finally(() => {
-      setInfoLoaading(false);
+      setInfoLoading(false);
     });
   };
 

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

-import React from 'react';
-import Info from '../../components/SincerityInfo';
+import React, { useEffect, useState } from 'react';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import Info, { BasicInfo, EstimateSum } from '../../components/SincerityInfo';
 
 const SincerityInfo: React.FC<{}> = () => {
+  const { id, validateId } = usePageStatus();
+  const [basicInfo, setBasicInfo] = useState<BasicInfo>(null);
+  const [infoLoading, setInfoLoading] = useState(false);
+  const [estimateSum, setEstimateSum] = useState<EstimateSum>(null);
+  const [estimateSumLoading, setEstimateSumLoading] = useState(false);
+
+  const getBasicInfo = () => {
+    setInfoLoading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailCreditBasic({
+      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 getEstimateSum = () => {
+    setEstimateSumLoading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailCreditTradeSummary({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      const { rows = [] } = (res.data || {});
+
+      const mock = [
+        {
+          before180days: 1,
+          last7days: 1,
+          last30days: 1,
+          last180days: 1,
+          star: 1,
+          sum: 1,
+        },
+        {
+          before180days: 2,
+          last7days: 2,
+          last30days: 2,
+          last180days: 2,
+          star: 2,
+          sum: 2,
+        },
+        {
+          before180days: 3,
+          last7days: 3,
+          last30days: 3,
+          last180days: 3,
+          star: 3,
+          sum: 3,
+        },
+        {
+          before180days: 4,
+          last7days: 4,
+          last30days: 4,
+          last180days: 4,
+          star: 4,
+          sum: 4,
+        },
+        {
+          before180days: 5,
+          last7days: 5,
+          last30days: 5,
+          last180days: 5,
+          star: 5,
+          sum: 5,
+        },
+      ];
+
+      setEstimateSum({
+        dataSource: mock, 
+      });
+    }).finally(() => {
+      setEstimateSumLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    getBasicInfo();
+    getEstimateSum();
+  }, []);
+
   return (
     <div>
-      <Info />
+      <Info 
+        basicInfo={{
+          ...basicInfo, 
+          loading: infoLoading,
+        }}
+        estimateSum={{
+          ...estimateSum, 
+          loading: estimateSumLoading, 
+        }}
+      />
     </div>
   );
 };