Skip to content

J
jinfa-platform
Commit da826758 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

feat: 拆分页面锚点数据

parent 777088db
Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 145 deletions
src/pages/member/memberQuery/detailed/archiveInfo.tsx
View file @ da826758
......@@ -5,7 +5,7 @@
* @LastEditTime: 2021-12-04 18:28:03
* @Description: 会员档案信息
*/
import React, { useEffect, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { useIntl } from 'umi';
import { Row, Col, Spin } from 'antd';
import { usePageStatus } from '@/hooks/usePageStatus';
......@@ -14,6 +14,7 @@ import BASE_CONFIG from '@/../config/base.config.json';
import { EditableColumns } from '@/components/PolymericTable/interface';
import AnchorPage from '@/components/AnchorPage';
import { getIncomingInfoAnchorKey } from '../../utils';
import MemberDetailsContext from '../../memberDetailsContext';
import MemberDocIncomingInfo from '../../components/MemberDocIncomingInfo';
import MemberDocQualification from '../../components/MemberDocQualification';
import MemberDocTableList, { ParamsType, ReponseType } from '../../components/MemberDocTableList';
......@@ -104,6 +105,8 @@ const MemberArchiveInfo = () => {
const [archiveInfo, setArchiveInfo] = useState<GetMemberAbilityInfoDetailArchivesResponse>();
const [loading, setLoading] = useState(false);
const contenxt = useContext(MemberDetailsContext);
const intl = useIntl();
const getArchiveInfo = () => {
......@@ -253,6 +256,32 @@ const MemberArchiveInfo = () => {
getArchiveInfo();
}, []);
useEffect(() => {
const anchors = [
...(
archiveInfo?.depositDetails
? archiveInfo?.depositDetails?.map((item, index) => ({
key: getIncomingInfoAnchorKey(index),
name: item.groupName,
}))
: []
),
{
key: 'qualitiesInfo',
name: intl.formatMessage({ id: 'member.management.maintain.detail.qualitiesInfo' }),
},
{
key: 'appraisalInfo',
name: intl.formatMessage({ id: 'member.management.maintain.detail.appraisalInfo' }),
},
{
key: 'rectifyInfo',
name: intl.formatMessage({ id: 'member.management.maintain.detail.rectifyInfo' }),
},
].filter(Boolean);
contenxt.onAnchorsReady(anchors);
}, [archiveInfo]);
return (
<Spin spinning={loading}>
<Row gutter={[16, 16]}>
......
src/pages/member/memberQuery/detailed/basicInfo.tsx
View file @ da826758
......@@ -5,13 +5,11 @@
* @LastEditTime: 2021-07-28 10:02:03
* @Description: 会员基础信息详情
*/
import React from 'react';
import React, { useContext, useEffect } from 'react';
import {
Row,
Col,
} from 'antd';
import { observer, inject } from 'mobx-react';
import { IMemberModule } from '@/module/memberModule';
import {
MEMBER_TYPE_CHANNEL_CORPORATE,
MEMBER_TYPE_CHANNEL_INDIVIDUAL,
......@@ -24,18 +22,55 @@ import {
MEMBER_OUTER_COLUMNS,
MEMBER_INNER_COLUMNS,
} from '../../constant';
import MemberDetailsContext from '../../memberDetailsContext';
import BasicInfo from '../../components/MemberBasicInfo';
import MemberChannelInfo from '../../components/MemberChannelInfo';
import PicWrap from '../../components/PicWrap';
import { useIntl } from 'umi';
interface MemberBasicInfoProps {
MemberStore?: IMemberModule;
};
const MemberBasicInfo: React.FC<any> = () => {
const contenxt = useContext(MemberDetailsContext);
const { details: memberInfo } = contenxt;
const intl = useIntl();
useEffect(() => {
const anchors = [
{
key: 'verifySteps',
name: intl.formatMessage({ id: 'member.components.MemberProfile.verifySteps' }),
},
{
key: 'basicInfo',
name: intl.formatMessage({ id: 'member.components.MemberProfile.basicInfo' }),
},
// 平台录入的会员不需要填渠道信息的
(
memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
|| memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
? {
key: 'channelInfo',
name: intl.formatMessage({ id: 'member.components.MemberProfile.channelInfo' }),
}
: null
),
...(
memberInfo && memberInfo.groups
? memberInfo.groups.map((item, index) => ({
key: `group${index}`,
name: item.groupName,
}))
: []
),
{
key: 'flowRecords',
name: intl.formatMessage({ id: 'member.components.MemberProfile.flowRecords' }),
},
].filter(Boolean);
contenxt.onAnchorsReady(anchors);
}, [memberInfo]);
const MemberBasicInfo: React.FC<MemberBasicInfoProps> = ({
MemberStore,
}) => {
const { memberInfo } = MemberStore;
return (
<Row gutter={[16, 16]}>
{/* 会员审核流程 */}
......@@ -140,4 +175,4 @@ const MemberBasicInfo: React.FC<MemberBasicInfoProps> = ({
);
};
export default inject('MemberStore')(observer(MemberBasicInfo));
\ No newline at end of file
export default MemberBasicInfo;
\ No newline at end of file
src/pages/member/memberQuery/detailed/equityInfo.tsx
View file @ da826758
......@@ -5,11 +5,13 @@
* @LastEditTime: 2021-11-17 18:18:35
* @Description: 会员权益信息详情
*/
import React, { useEffect, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { useIntl } from 'umi';
import { Spin, Row, Col } from 'antd';
import { usePageStatus } from '@/hooks/usePageStatus';
import { getMemberAbilityInfoDetailRightBasic, getMemberAbilityInfoDetailRightHistoryPage, getMemberAbilityInfoDetailRightSpendHistoryPage, GetMemberAbilityMaintenanceDetailRightBasicResponse } from '@/services/MemberV2Api';
import AnchorPage from '@/components/AnchorPage';
import MemberDetailsContext from '../../memberDetailsContext';
import MemberRightsAnalysis from '../../components/MemberRightsAnalysis';
import MemberRights from '../../components/MemberRights';
import MemberRightsRecords, { ReceivedData, UsageData } from '../../components/MemberRightsRecords';
......@@ -19,6 +21,10 @@ const MemberRightsInfo: React.FC<{}> = () => {
const [equityInfo, setEquityInfo] = useState<GetMemberAbilityMaintenanceDetailRightBasicResponse>(null);
const [infoLoading, setInfoLoading] = useState(false);
const contenxt = useContext(MemberDetailsContext);
const intl = useIntl();
const getEquityInfo = () => {
setInfoLoading(true);
getMemberAbilityInfoDetailRightBasic({
......@@ -39,6 +45,25 @@ const MemberRightsInfo: React.FC<{}> = () => {
getEquityInfo();
}, []);
useEffect(() => {
const anchors = [
{
key: 'basicInfo',
name: intl.formatMessage({ id: 'member.management.maintain.basic' }),
},
{
key: 'memberEquity',
name: intl.formatMessage({ id: 'member.management.maintain.detail.memberEquity' }),
},
{
key: 'equityRecords',
name: intl.formatMessage({ id: 'member.management.maintain.detail.equityRecords' }),
},
];
contenxt.onAnchorsReady(anchors);
}, []);
const getReceivedList = params => {
return new Promise<{ data: ReceivedData[] , totalCount: number }>((resolve, reject) => {
getMemberAbilityInfoDetailRightHistoryPage({
......
src/pages/member/memberQuery/detailed/index.tsx
View file @ da826758
import React, { useState, useEffect } from 'react';
import { history, useIntl } from 'umi';
import { history, IRouteComponentProps, useIntl } from 'umi';
import { Spin } from 'antd';
import {
UnorderedListOutlined,
......@@ -8,7 +8,6 @@ import {
InsuranceOutlined,
BulbOutlined,
} from '@ant-design/icons';
import { observer, inject } from 'mobx-react';
import { usePageStatus } from '@/hooks/usePageStatus';
import { getMemberAbilityInfoDetailBasic, GetMemberAbilityInfoDetailBasicResponse } from '@/services/MemberV2Api';
import { IMemberModule } from '@/module/memberModule';
......@@ -16,26 +15,19 @@ import {
MEMBER_TYPE_CHANNEL_CORPORATE,
MEMBER_TYPE_CHANNEL_INDIVIDUAL,
} from '@/constants/member';
import AnchorPage from '@/components/AnchorPage';
import AnchorPage, { AnchorsItem } from '@/components/AnchorPage';
import AvatarWrap from '@/components/AvatarWrap';
import { MemberDetails, MemberDetailsContextProvider } from '../../memberDetailsContext';
import Bookmark from '../../components/Bookmark';
interface QueryProps {
match: {
url: string;
path: string;
};
location: {
pathname: string;
};
MemberStore?: IMemberModule;
}
interface IProps extends IRouteComponentProps {}
const MemberQueryDetailed: React.FC<QueryProps> = props => {
const { MemberStore, children } = props;
const MemberQueryDetailed: React.FC<IProps> = props => {
const { children } = props;
const { validateId } = usePageStatus();
const [memberInfo, setMemberInfo] = useState<GetMemberAbilityInfoDetailBasicResponse>(null);
const [infoLoading, setInfoLoading] = useState(false);
const [anchors, setAnchors] = useState<AnchorsItem[]>([]);
const intl = useIntl();
......@@ -51,7 +43,6 @@ const MemberQueryDetailed: React.FC<QueryProps> = props => {
return;
}
setMemberInfo(res.data);
MemberStore.setMemberInfo(res.data);
}).catch((err) => {
console.warn(err);
}).finally(() => {
......@@ -99,116 +90,8 @@ const MemberQueryDetailed: React.FC<QueryProps> = props => {
return 'basicInfo';
};
const getAnchorsArr = () => {
const markKey = getBookmarkKey();
let ret = [];
switch (markKey) {
case 'basicInfo':
ret = [
{
key: 'verifySteps',
name: intl.formatMessage({ id: 'member.components.MemberProfile.verifySteps' }),
},
{
key: 'basicInfo',
name: intl.formatMessage({ id: 'member.components.MemberProfile.basicInfo' }),
},
// 平台录入的会员不需要填渠道信息的
(
memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
|| memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
? {
key: 'channelInfo',
name: intl.formatMessage({ id: 'member.components.MemberProfile.channelInfo' }),
}
: null
),
...(
memberInfo && memberInfo.groups
? memberInfo.groups.map((item, index) => ({
key: `group${index}`,
name: item.groupName,
}))
: []
),
{
key: 'flowRecords',
name: intl.formatMessage({ id: 'member.components.MemberProfile.flowRecords' }),
},
].filter(Boolean);
break;
case 'levelInfo':
ret = [
{
key: 'memberLevel',
name: intl.formatMessage({ id: 'member.management.maintain.detail.memberLevel' }),
},
{
key: 'activePoints',
name: intl.formatMessage({ id: 'member.management.maintain.detail.activePoints' }),
},
];
break;
case 'equityInfo':
ret = [
{
key: 'basicInfo',
name: intl.formatMessage({ id: 'member.management.maintain.basic' }),
},
{
key: 'memberEquity',
name: intl.formatMessage({ id: 'member.management.maintain.detail.memberEquity' }),
},
{
key: 'equityRecords',
name: intl.formatMessage({ id: 'member.management.maintain.detail.equityRecords' }),
},
];
break;
case 'sincerityInfo':
ret = [
{
key: 'basicInfo',
name: intl.formatMessage({ id: 'member.management.maintain.basic' }),
},
{
key: 'orderEvaluation',
name: intl.formatMessage({ id: 'member.management.maintain.detail.orderEvaluation' }),
},
{
key: 'afterServiceEvaluation',
name: intl.formatMessage({ id: 'member.management.maintain.detail.afterServiceEvaluation' }),
},
{
key: 'feedbackRecords',
name: intl.formatMessage({ id: 'member.management.maintain.detail.feedbackRecords' }),
},
];
break;
case 'archiveInfo':
ret = [
{
key: 'depositDetails',
name: intl.formatMessage({ id: 'member.management.maintain.detail.depositDetails' }),
},
{
key: 'qualitiesInfo',
name: intl.formatMessage({ id: 'member.management.maintain.detail.qualitiesInfo' }),
},
{
key: 'appraisalInfo',
name: intl.formatMessage({ id: 'member.management.maintain.detail.appraisalInfo' }),
},
{
key: 'rectifyInfo',
name: intl.formatMessage({ id: 'member.management.maintain.detail.rectifyInfo' }),
},
];
break;
default:
break;
}
return ret;
const handleAnchorsReady = (anchors: AnchorsItem[]) => {
setAnchors(anchors);
};
return (
......@@ -225,7 +108,7 @@ const MemberQueryDetailed: React.FC<QueryProps> = props => {
/>
)}
onBack={() => history.push(`/memberCenter/memberAbility/profile/query`)}
anchors={getAnchorsArr()}
anchors={anchors}
extra={(
<Bookmark value={getBookmarkKey()} onChange={handleBookmarkChange}>
<Bookmark.Item value="basicInfo" title={intl.formatMessage({ id: 'member.management.maintain.basic' })} icon={<UnorderedListOutlined />} />
......@@ -236,10 +119,18 @@ const MemberQueryDetailed: React.FC<QueryProps> = props => {
</Bookmark>
)}
>
{children}
<MemberDetailsContextProvider
value={{
details: memberInfo as unknown as MemberDetails,
refreshDetails: getBasicInfo,
onAnchorsReady: handleAnchorsReady,
}}
>
{children}
</MemberDetailsContextProvider>
</AnchorPage>
</Spin>
);
};
export default inject('MemberStore')(observer(MemberQueryDetailed));
export default MemberQueryDetailed;
src/pages/member/memberQuery/detailed/levelInfo.tsx
View file @ da826758
......@@ -5,11 +5,14 @@
* @LastEditTime: 2021-11-17 18:19:34
* @Description: 会员等级信息详情
*/
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useContext } from 'react';
import { useIntl } from 'umi';
import { Spin, Row, Col } from 'antd';
import { usePageStatus } from '@/hooks/usePageStatus';
import { getMemberAbilityInfoDetailLevelBasic, getMemberAbilityInfoDetailLevelHistoryPage, GetMemberAbilityMaintenanceDetailLevelBasicResponse } from '@/services/MemberV2Api';
import AnchorPage from '@/components/AnchorPage';
import MemberDetailsContext from '../../memberDetailsContext';
import LevelInfo from '../../components/MemberLevelInfo';
import MemberActivePointRecords, { ListItem } from '../../components/MemberActivePointRecords';
......@@ -18,6 +21,10 @@ const MemberLevelInfo: React.FC<{}> = () => {
const [levelInfo, setLevelInfo] = useState<GetMemberAbilityMaintenanceDetailLevelBasicResponse>(null);
const [infoLoading, setInfoLoading] = useState(false);
const contenxt = useContext(MemberDetailsContext);
const intl = useIntl();
const getMemberLevelInfo = () => {
if (!validateId) {
return;
......@@ -42,6 +49,20 @@ const MemberLevelInfo: React.FC<{}> = () => {
getMemberLevelInfo();
}, []);
useEffect(() => {
const anchors = [
{
key: 'memberLevel',
name: intl.formatMessage({ id: 'member.management.maintain.detail.memberLevel' }),
},
{
key: 'activePoints',
name: intl.formatMessage({ id: 'member.management.maintain.detail.activePoints' }),
},
];
contenxt.onAnchorsReady(anchors);
}, []);
const getActivePointRecords = params => {
return new Promise<{ data: ListItem[] , totalCount: number }>((resolve, reject) => {
getMemberAbilityInfoDetailLevelHistoryPage({
......
src/pages/member/memberQuery/detailed/sincerityInfo.tsx
View file @ da826758
......@@ -5,12 +5,13 @@
* @LastEditTime: 2021-12-04 18:39:41
* @Description: 会员信用信息详情
*/
import React, { useEffect, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { useIntl } from 'umi';
import { Row, Col } from 'antd';
import { usePageStatus } from '@/hooks/usePageStatus';
import { getMemberAbilityInfoDetailCreditAftersaleHistoryPage, getMemberAbilityInfoDetailCreditAftersaleSummary, getMemberAbilityInfoDetailCreditBasic, getMemberAbilityInfoDetailCreditComplainHistoryPage, getMemberAbilityInfoDetailCreditComplainSummary, getMemberAbilityInfoDetailCreditTradeHistoryPage, getMemberAbilityInfoDetailCreditTradeSummary } from '@/services/MemberV2Api';
import AnchorPage from '@/components/AnchorPage';
import MemberDetailsContext from '../../memberDetailsContext';
import MemberSincerityAnalysis from '../../components/MemberSincerityAnalysis';
import MemberEvaluation, { EstimateSumItems, ListItem } from '../../components/MemberEvaluation';
import MemberFeedbackRecords, { ListItem as FeedbackItem, AnalysisData } from '../../components/MemberFeedbackRecords';
......@@ -46,6 +47,9 @@ const MemberSincerityInfo: React.FC<{}> = () => {
sum: 0,
});
const contenxt = useContext(MemberDetailsContext);
const intl = useIntl();
const getBasicInfo = () => {
......@@ -149,6 +153,28 @@ const MemberSincerityInfo: React.FC<{}> = () => {
getFeedbackSum();
}, []);
useEffect(() => {
const anchors = [
{
key: 'basicInfo',
name: intl.formatMessage({ id: 'member.management.maintain.basic' }),
},
{
key: 'orderEvaluation',
name: intl.formatMessage({ id: 'member.management.maintain.detail.orderEvaluation' }),
},
{
key: 'afterServiceEvaluation',
name: intl.formatMessage({ id: 'member.management.maintain.detail.afterServiceEvaluation' }),
},
{
key: 'feedbackRecords',
name: intl.formatMessage({ id: 'member.management.maintain.detail.feedbackRecords' }),
},
];
contenxt.onAnchorsReady(anchors);
}, []);
// 交易评论历史记录
const getOrderEvaluationList = (params) => {
return new Promise<{ data: ListItem[] , totalCount: number }>((resolve, reject) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment