Skip to content

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

拆分页面组件

parent b784725b
Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 12 deletions
src/components/Charts/Pie/index.tsx
View file @ 0f9c762b
......@@ -53,7 +53,7 @@ interface PieState {
class Pie extends Component<PieProps, PieState> {
state: PieState = {
legendData: [],
legendBlock: true,
legendBlock: true, // 这里默认为 true，为 false 的话会触发相应的 css 设置宽度，从而导致画布容器的宽度过去，图表画不出来报错
};
requestRef: number | undefined = undefined;
......
src/global/config/global.d.ts
View file @ 0f9c762b
......@@ -32,10 +32,6 @@ export interface Web {
shopInfo: ShopInfo[];
}
export interface PayConfig {
paymemberConfig?: any;
}
export interface CountryList {
name: string;
key: string;
......@@ -52,6 +48,5 @@ export interface Global {
export interface RootObject {
userRegister: UserRegister;
web: Web;
payConfig: PayConfig;
global: Global;
}
\ No newline at end of file
src/pages/member/components/AuditProcess/index.tsx 0 → 100644
View file @ 0f9c762b
import React from 'react';
import {
Steps,
Tabs,
} from 'antd';
import MellowCard from '@/components/MellowCard';
import styles from './index.less';
interface AuditProcessProp {
};
const AuditProcess: React.FC<{}> = () => (
<MellowCard>
<Tabs onChange={() => {}}>
<Tabs.TabPane tab="外部审核流程" key="1">
<Steps style={{ marginTop: 30 }} progressDot current={2}>
<Steps.Step title="会员" description="申请注册" />
<Steps.Step title="平台" description="审核会员" />
<Steps.Step title="完成" description="" />
</Steps>
</Tabs.TabPane>
<Tabs.TabPane tab="内部审核流程" key="2">
<Steps style={{ marginTop: 30 }} progressDot current={2}>
<Steps.Step title="提交审核会员" description="运营经理" />
<Steps.Step title="审核会员" description="运营经理" />
<Steps.Step title="审核会员" description="副总经理" />
<Steps.Step title="确认会员审核结果" description="运营人员" />
</Steps>
</Tabs.TabPane>
</Tabs>
</MellowCard>
);
export default AuditProcess;
\ No newline at end of file
src/pages/member/components/BasicInfo/index.less 0 → 100644
View file @ 0f9c762b
.basicInfo {
.descriptions {
:global {
.ant-descriptions-item-label {
flex: 0 0 128px;
color: rgba(107, 119, 140, 1);
}
}
}
}
\ No newline at end of file
src/pages/member/components/BasicInfo/index.tsx 0 → 100644
View file @ 0f9c762b
import React, { useState } from 'react';
import {
Row,
Col,
Steps,
Descriptions,
Tabs,
Badge,
} from 'antd';
import classNames from 'classnames';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
import MellowCard from '@/components/MellowCard';
import PicWrap from '../PicWrap';
import AuditProcess from '../AuditProcess';
import FlowRecords from '../FlowRecords';
import styles from './index.less';
interface PageProps {
detailData: any;
}
const BasicInfo: React.FC<{}> = props => {
return (
<div className={styles.basicInfo}>
<Row gutter={[0, 24]}>
<Col span={24}>
<AuditProcess />
</Col>
<Col span={24}>
<MellowCard
title="基本信息"
>
<Descriptions column={2} className={styles.descriptions}>
<Descriptions.Item label="登录账户">185 2929 6547</Descriptions.Item>
<Descriptions.Item label="注册手机号">1810000000</Descriptions.Item>
<Descriptions.Item label="注册邮箱">kuaimeizheng@163.com</Descriptions.Item>
<Descriptions.Item label="申请时间">2020-12-26 13:45</Descriptions.Item>
</Descriptions>
</MellowCard>
</Col>
<Col span={24}>
<MellowCard
title="渠道信息"
>
<Descriptions column={2} className={styles.descriptions}>
<Descriptions.Item label="渠道级别">二级</Descriptions.Item>
<Descriptions.Item label="渠道类型">电商渠道</Descriptions.Item>
<Descriptions.Item label="代理地市">
<Row gutter={[16, 16]}>
<Col span={12}>广东省/广州市</Col>
<Col span={12}>广东省/广州市</Col>
<Col span={12}>广东省/广州市</Col>
<Col span={12}>广东省/广州市</Col>
</Row>
</Descriptions.Item>
<Descriptions.Item label="渠道描述">门店</Descriptions.Item>
</Descriptions>
</MellowCard>
</Col>
<Col span={24}>
<MellowCard
title="营业执照"
>
<Row gutter={20}>
<Col span={12}>
<Descriptions column={1} className={styles.descriptions}>
<Descriptions.Item label="公司名称">温州市隆昌皮业有限公司</Descriptions.Item>
<Descriptions.Item label="企业类型">
股份有限公司（非上市）
</Descriptions.Item>
<Descriptions.Item label="住所">中国浙江省温州市</Descriptions.Item>
<Descriptions.Item label="法定代表人">张三</Descriptions.Item>
<Descriptions.Item label="注册资本">壹仟万元整</Descriptions.Item>
<Descriptions.Item label="成立日期">2010-06-14</Descriptions.Item>
<Descriptions.Item label="营业期限">2010-06-14 至 长期有效</Descriptions.Item>
<Descriptions.Item label="经营范围">
经营全粒面牛皮，修面皮，漆色皮，打腊皮，水腊皮，疯马皮，珠光变色，大小荔枝纹，打腊水腊皮，
高光变色皮，胎牛皮、小牛纳帕皮、磨砂皮、镜面皮、开边珠、自然摔、烧焦打蜡皮，牛巴革，混种
羊面皮，山羊里皮，仿鹿皮，羊皮羊反绒系列
</Descriptions.Item>
</Descriptions>
</Col>
<Col span={12}>
<Descriptions column={1} className={styles.descriptions}>
<Descriptions.Item label="登记机关">广州市工商局</Descriptions.Item>
<Descriptions.Item label="登记时间">2010-06-14</Descriptions.Item>
<Descriptions.Item label="统一社会信用代码">4324324325425435</Descriptions.Item>
<Descriptions.Item label="营业执照">
<PicWrap
pics={[
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598594727734&di=20420459d5a6f2c95dd9bc5c47786e98&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598594742248&di=b76fef1833c6566d330ac88f6dbe9bae&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg',
]}
/>
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
</MellowCard>
</Col>
<Col span={24}>
<MellowCard
title="法定代表人信息"
>
<Row gutter={20}>
<Col span={12}>
<Descriptions column={1} className={styles.descriptions}>
<Descriptions.Item label="法人姓名">张三</Descriptions.Item>
<Descriptions.Item label="法人手机号">
+86 186 7700 2345
</Descriptions.Item>
<Descriptions.Item label="法人身份证号">440911198809076654</Descriptions.Item>
</Descriptions>
</Col>
<Col span={12}>
<Descriptions column={1} className={styles.descriptions}>
<Descriptions.Item label="法人身份证信息">
<PicWrap
pics={[
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598594727734&di=20420459d5a6f2c95dd9bc5c47786e98&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598594742248&di=b76fef1833c6566d330ac88f6dbe9bae&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg',
]}
/>
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
</MellowCard>
</Col>
<Col span={24}>
<MellowCard
title="联系信息"
>
<Descriptions column={2} className={styles.descriptions}>
<Descriptions.Item label="联系人">张三</Descriptions.Item>
<Descriptions.Item label="地址">中国浙江省温州市</Descriptions.Item>
<Descriptions.Item label="固定联系电话">
021 33232424
</Descriptions.Item>
<Descriptions.Item label="邮编">510222</Descriptions.Item>
<Descriptions.Item label="手机号码">+86 186 77003245</Descriptions.Item>
<Descriptions.Item label="网址">www.shushangyun.com</Descriptions.Item>
<Descriptions.Item label="传真号码">021 43434353</Descriptions.Item>
<Descriptions.Item label="邮箱">kuaimeizheng@163.com</Descriptions.Item>
</Descriptions>
</MellowCard>
</Col>
<Col span={24}>
<FlowRecords />
</Col>
</Row>
</div>
);
};
export default BasicInfo;
src/pages/member/components/FlowRecords/index.tsx 0 → 100644
View file @ 0f9c762b
import React from 'react';
import {
Row,
Col,
Steps,
Descriptions,
Tabs,
Badge,
} from 'antd';
import classNames from 'classnames';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
import MellowCard from '@/components/MellowCard';
import PicWrap from '../PicWrap';
import AuditProcess from '../AuditProcess';
import styles from './index.less';
const STATUS_COLOR_MAP = {
0: '#669EDE',
1: '#41CC9E',
2: '#EF6260',
};
const STATUS_COLOR_TXT = {
0: '待审核',
1: '审核通过',
2: '冻结',
};
interface FlowRecordsProps {
};
const FlowRecords: React.FC<{}> = () => {
const columns: EditableColumns[] = [
{
title: '序号',
dataIndex: 'index',
align: 'center',
render: (text, record, index) => index + 1,
},
{
title: '操作角色',
dataIndex: 'role',
align: 'center',
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
render: text => <Badge color={STATUS_COLOR_MAP[text]} text={STATUS_COLOR_TXT[text]} />,
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
},
{
title: '操作时间',
dataIndex: 'created',
align: 'center',
ellipsis: true,
},
{
title: '审核意见',
dataIndex: 'opinion',
align: 'center',
ellipsis: true,
},
];
const columns2: EditableColumns[] = [
{
title: '序号',
dataIndex: 'index',
align: 'center',
render: (text, record, index) => index + 1,
},
{
title: '操作人',
dataIndex: 'operator',
align: 'center',
},
{
title: '部门',
dataIndex: 'department',
align: 'center',
},
{
title: '职位',
dataIndex: 'job',
align: 'center',
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
render: text => <Badge color={STATUS_COLOR_MAP[text]} text={STATUS_COLOR_TXT[text]} />,
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
},
{
title: '操作时间',
dataIndex: 'created',
align: 'center',
ellipsis: true,
},
{
title: '审核意见',
dataIndex: 'opinion',
align: 'center',
ellipsis: true,
},
];
return (
<MellowCard>
<Tabs onChange={() => {}}>
<Tabs.TabPane tab="流转记录" key="1">
<PolymericTable
dataSource={[
{
id: 1,
role: '供应商',
status: 0,
action: '申请注册',
created: '2020-05-12 08:08',
opinion: '同意',
},
]}
columns={columns}
loading={false}
pagination={null}
/>
</Tabs.TabPane>
<Tabs.TabPane tab="内部单据流转记录" key="2">
<PolymericTable
dataSource={[
{
id: 1,
operator: '供应商',
department: '运营部',
job: '运营人员',
status: 0,
action: '提交审核会员',
created: '2020-05-12 08:08',
opinion: '同意',
},
]}
columns={columns2}
loading={false}
pagination={null}
/>
</Tabs.TabPane>
</Tabs>
</MellowCard>
);
};
export default FlowRecords;
\ No newline at end of file
src/pages/member/components/PicWrap/index.less 0 → 100644
View file @ 0f9c762b
.list {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0;
margin: 0;
width: 100%;
overflow-x: auto;
&-item {
width: 175px;
height: 120px;
padding: 0 28px;
margin-bottom: 10px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(235,236,240,1);
overflow: hidden;
list-style: none;
&:not(:last-child) {
margin-right: 16px;
}
> img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
\ No newline at end of file
src/pages/member/components/PicWrap/index.tsx 0 → 100644
View file @ 0f9c762b
import React from 'react';
import styles from './index.less';
interface PicWrapProps {
pics: string[];
};
const PicWrap: React.FC<PicWrapProps> = ({ pics = [] }) => (
<ul className={styles.list}>
{pics.map((item, index) => (
<li key={index} className={styles['list-item']}>
<img src={item} />
</li>
))}
</ul>
);
export default PicWrap;
\ No newline at end of file
src/pages/member/components/memberDetail/index.tsx
View file @ 0f9c762b
......@@ -13,16 +13,17 @@ import LevelDetail from './levelDetail';
import EquitiesDetail from './equitiesDetail';
import IntegrityDetail from './integrityDetail';
const LevelInfo = React.lazy(() => import('./LevelInfo'));
const EquityInfo = React.lazy(() => import('./EquityInfo'));
const SincerityInfo = React.lazy(() => import('./SincerityInfo'));
const BasicInfo = React.lazy(() => import('../BasicInfo'));
const LevelInfo = React.lazy(() => import('../LevelInfo'));
const EquityInfo = React.lazy(() => import('../EquityInfo'));
const SincerityInfo = React.lazy(() => import('../SincerityInfo'));
const { TabPane } = Tabs;
const { Step } = Steps;
const MemberDetail: React.FC<{}> = () => {
const { pageStatus, id, validateId } = usePageStatus();
const [actived, setActived] = useState('5');
const [actived, setActived] = useState('1');
const [detailData, setDetailData] = useState<any>({});
const fetchDetailData = async () => {
......@@ -110,7 +111,9 @@ const MemberDetail: React.FC<{}> = () => {
onTabChange={handleTabChange}
>
{actived === '1' ? (
<BaseDetail detailData={detailData} />
<Suspense fallback={null}>
<BasicInfo />
</Suspense>
) : actived === '2' ? (
<AuthDetail detailData={detailData} />
) : actived === '3' ? (
......
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