Skip to content

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

feat: 完成 会员申请 相关UI

parent 4eb617d3
Hide whitespace changes
Inline Side-by-side
Showing with 548 additions and 0 deletions
config/routes/memberRoute.ts
View file @ 5fd0dcfb
......@@ -506,6 +506,14 @@ const MemberRoute: RouterChild = {
noMargin: true,
component: '@/pages/member/memberQuery/addSubRole',
},
// 申请会员
{
path: '/memberCenter/memberAbility/query/apply',
name: 'applyMember',
hideInMenu: true,
noMargin: true,
component: '@/pages/member/memberQuery/applyMember',
},
// 会员考察
{
path: '/memberCenter/memberAbility/memberInspection',
......
src/locales/zh-CN/menu.ts
View file @ 5fd0dcfb
......@@ -142,6 +142,7 @@ export default {
'menu.memberAbility.memberQueryDetail.sincerityInfo': '诚信信息',
'menu.memberAbility.memberUpdate': '变更会员信息',
'menu.memberAbility.addSubRole': '新建会员角色',
'menu.memberAbility.applyMember': '申请会员',
// 店铺能力
'menu.shopAbility': '店铺',
......
src/pages/member/memberQuery/applyMember/components/ComingAgreement/index.tsx 0 → 100644
View file @ 5fd0dcfb
/*
* @Author: XieZhiXiong
* @Date: 2021-05-27 10:11:57
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-27 10:11:58
* @Description: 入库协议
*/
import React from 'react';
const ComingAgreement: React.FC = () => {
return (
<div>这里是入库协议</div>
);
};
export default ComingAgreement;
src/pages/member/memberQuery/applyMember/components/RegisterInfo/index.less 0 → 100644
View file @ 5fd0dcfb
@import '~antd/es/style/themes/default.less';
.card-box-title {
padding-left: @padding-xs;
line-height: @font-size-lg;
font-size: @font-size-lg;
font-weight: 500;
border-left: 2px solid @primary-color;
}
\ No newline at end of file
src/pages/member/memberQuery/applyMember/components/RegisterInfo/index.tsx 0 → 100644
View file @ 5fd0dcfb
/*
* @Author: XieZhiXiong
* @Date: 2021-05-27 10:51:52
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-27 11:20:54
* @Description: 注册信息
*/
import React from 'react';
import CustomizeColumn from '@/components/CustomizeColumn';
import styles from './index.less';
const RegisterInfo = () => {
const data = [
{
title: '公司名称',
value: '温州市隆昌皮业有限公司',
},
{
title: '登记机关',
value: '广州市工商局',
},
{
title: '营业执照',
value: '广州市工商局',
},
];
return (
<CustomizeColumn
title={(
<div className={styles['card-box-title']}>营业执照信息</div>
)}
data={data}
/>
);
};
export default RegisterInfo;
src/pages/member/memberQuery/applyMember/components/SubmitSuccess/index.less 0 → 100644
View file @ 5fd0dcfb
.success {
padding: 80px 0;
margin: 0 auto;
text-align: center;
&-text {
margin-top: @margin-lg;
font-size: 24px;
text-align: center;
line-height: 24px;
}
}
\ No newline at end of file
src/pages/member/memberQuery/applyMember/components/SubmitSuccess/index.tsx 0 → 100644
View file @ 5fd0dcfb
/*
* @Author: XieZhiXiong
* @Date: 2021-05-27 11:37:40
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-27 11:37:40
* @Description: 提交成功
*/
import React from 'react';
import IMG_APPLY_SUCCESS from '@/assets/imgs/apply-success.png';
import styles from './index.less';
const SubmitSuccess: React.FC = () => {
return (
<div className={styles.success}>
<img src={IMG_APPLY_SUCCESS} width="300px" height="225px" />
<p className={styles['success-text']}>您的申请资料已经提交成功，请等待审核结果</p>
</div>
);
};
export default SubmitSuccess;
src/pages/member/memberQuery/applyMember/index.tsx 0 → 100644
View file @ 5fd0dcfb
/*
* @Author: XieZhiXiong
* @Date: 2021-05-26 16:52:48
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-27 13:50:39
* @Description: 申请会员
*/
import React, { useState, useEffect, useRef } from 'react';
import { history, Prompt } from 'umi';
import { Button, Spin, Space, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { SaveOutlined } from '@ant-design/icons';
import {
createFormActions,
FormEffectHooks,
createEffectHook,
} from '@formily/antd';
import { FormStep } from '@formily/antd-components';
import { usePageStatus } from '@/hooks/usePageStatus';
import ReutrnEle from '@/components/ReturnEle';
import NiceForm from '@/components/NiceForm';
import MellowCard from '@/components/MellowCard';
// import { PublicApi } from '@/services/api';
// import { GetMemberAbilitySubGetResponse } from '@/services/MemberApi';
import schema from './schema';
import ComingAgreement from './components/ComingAgreement';
import RegisterInfo from './components/RegisterInfo';
import SubmitSuccess from './components/SubmitSuccess';
let countDownLen = 10;
const formActions = createFormActions();
const {
onFormInputChange$,
} = FormEffectHooks;
const onStepNext$ = createEffectHook('onStepNext');
const onStepPrevious$ = createEffectHook('onStepPrevious');
const MemberQueryApplyMember: React.FC = () => {
const { memberTypeId, roleId } = usePageStatus();
const [ticktack, setTicktack] = useState(countDownLen);
const [currenStep, setCurrenStep] = useState(0);
const [submitLoading, setSubmitLoading] = useState(false);
const [unsaved, setUnsaved] = useState(false);
const stepRef = useRef(0);
// eslint-disable-next-line no-undef
let timer: NodeJS.Timeout | null = null;
const countDown = () => {
timer = setInterval(() => {
countDownLen -= 1;
if (countDownLen < 0) {
clearTimeout(timer);
return;
}
setTicktack(countDownLen);
}, 1000);
};
useEffect(() => {
countDown();
return () => {
if (timer) {
clearTimeout(timer);
}
}
}, []);
const handleSubmit = (values: any) => {
if (!memberTypeId || !roleId) {
return;
}
setSubmitLoading(true);
const msg = message.loading({
content: '正在保存，请稍候...',
duration: 0,
});
// PublicApi.postMemberAbilityInfoAddrole({
// memberTypeId,
// roleId,
// detail: values,
// }).then(res => {
// if (res.code !== 1000) {
// return;
// }
// setUnsaved(false);
// setTimeout(() => {
// history.goBack();
// }, 800);
// }).finally(() => {
// msg();
// setSubmitLoading(false);
// });
};
return (
<Spin spinning={false}>
<PageHeaderWrapper
style={{
padding: 24,
}}
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title="申请会员"
extra={(
<Space>
{currenStep === 0 ? (
<Button
type="primary"
disabled={ticktack > 0}
onClick={() => {
formActions.dispatch('onStepNext', {})
}}
>
{`同意用户协议 ${ticktack > 0 ? '(' + ticktack + 's)' : ''}`}
</Button>
) : null}
{currenStep === 1 ? (
<>
<Button
onClick={() => {
formActions.dispatch('onStepPrevious', {})
}}
>
上一步：会员入库协议
</Button>
<Button
type="primary"
onClick={() => {
formActions.dispatch('onStepNext', {})
}}
>
下一步：填写入库信息
</Button>
</>
) : null}
{currenStep === 2 ? (
<>
<Button
onClick={() => {}}
>
保存为草稿
</Button>
<Button
onClick={() => {
formActions.dispatch('onStepPrevious', {})
}}
>
上一步：确认注册信息
</Button>
<Button
type="primary"
onClick={() => {
formActions.dispatch('onStepNext', {})
}}
>
下一步：上传资质证明
</Button>
</>
) : null}
{currenStep === 3 ? (
<>
<Button
onClick={() => {}}
>
保存为草稿
</Button>
<Button
onClick={() => {
formActions.dispatch('onStepPrevious', {})
}}
>
上一步：填写入库信息
</Button>
<Button
type="primary"
onClick={() => {
formActions.dispatch('onStepNext', {})
}}
>
确认提交
</Button>
</>
) : null}
</Space>
)}
>
<MellowCard bodyStyle={{ padding: '11px 16px' }}>
<NiceForm
onSubmit={handleSubmit}
actions={formActions}
initialValues={{}}
expressionScope={{
currenStep,
ComingAgreement: <ComingAgreement />,
RegisterInfo: <RegisterInfo />,
SubmitSuccess: <SubmitSuccess />,
}}
effects={($, actions) => {
onStepNext$().subscribe(() => {
stepRef.current += 1;
setCurrenStep(stepRef.current);
formActions.dispatch(FormStep['ON_FORM_STEP_NEXT'], {});
});
onStepPrevious$().subscribe(() => {
stepRef.current -= 1;
setCurrenStep(stepRef.current);
formActions.dispatch(FormStep['ON_FORM_STEP_PREVIOUS'], {});
});
onFormInputChange$().subscribe(() => {
if (!unsaved) {
setUnsaved(true);
}
});
}}
schema={schema}
/>
</MellowCard>
</PageHeaderWrapper>
<Prompt when={unsaved} message="您还有未保存的内容，是否确定要离开？" />
</Spin>
);
};
export default MemberQueryApplyMember;
src/pages/member/memberQuery/applyMember/schema.ts 0 → 100644
View file @ 5fd0dcfb
/*
* @Author: XieZhiXiong
* @Date: 2021-05-26 17:00:39
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-27 11:23:54
* @Description:
*/
import { ISchema } from '@formily/antd';
const schema: ISchema = {
type: 'object',
properties: {
STEP_LAYOUT: {
type: 'object',
'x-component': 'step',
'x-component-props': {
style: {
padding: '12px 16px',
backgroundColor: '#FAFBFC',
},
current: '{{currenStep}}',
dataSource: [
{
title: '会员入库协议',
name: 'step1',
},
{
title: '确认注册信息',
name: 'step2',
},
{
title: '填写入库信息',
name: 'step3',
},
{
title: '上传资质证明',
name: 'step4',
},
{
title: '完成',
name: 'step5',
},
],
},
},
step1: {
type: 'object',
properties: {
agreement: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{ComingAgreement}}'
},
},
},
},
step2: {
type: 'object',
properties: {
registerInfo: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{RegisterInfo}}'
},
},
},
},
step3: {
type: 'object',
properties: {
INCOMING_INFO: {
type: 'object',
'x-component': 'CardBox',
'x-component-props': {
title: '填写入库信息',
wrapProps: {
style: {
padding: '24px 16px',
},
},
},
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
grid: true,
full: true,
autoRow: true,
columns: 2,
labelCol: 6,
wrapperCol: 18,
labelAlign: 'left',
},
properties: {
mode: {
type: 'string',
title: '商业模式',
enum: [],
'x-component-props': {},
},
description: {
type: 'string',
title: '公司简介',
'x-component': 'textarea',
'x-component-props': {
placeholder: '',
rows: 5,
},
},
industry: {
type: 'string',
title: '主营行业',
'x-component-props': {
placeholder: '',
},
},
partner: {
type: 'string',
title: '合作伙伴',
'x-component-props': {
placeholder: '',
},
},
category: {
type: 'string',
title: '主营品类',
'x-component-props': {
placeholder: '',
},
},
project: {
type: 'string',
title: '代表性合作项目',
'x-component-props': {
placeholder: '',
},
},
scale: {
type: 'string',
title: '公司规模',
'x-component-props': {
placeholder: '',
},
},
brand: {
type: 'string',
title: '代理品牌',
'x-component-props': {
placeholder: '',
},
},
size: {
type: 'string',
title: '工厂面积',
'x-component-props': {
placeholder: '',
},
},
},
},
},
},
},
},
step4: {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelAlign: 'top',
},
properties: {
reason3: {
type: 'string',
title: '审核不通过原因',
'x-component': 'textarea',
required: true,
'x-component-props': {
placeholder: '在此输入你的内容，最长120个字符，60个汉字',
rows: 5,
},
'x-rules': [
{
limitByte: true, // 自定义校验规则
maxByte: 120,
}
],
},
},
},
},
},
step5: {
type: 'object',
properties: {
submitSuccess: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{SubmitSuccess}}'
},
},
},
},
},
};
export default schema;
\ No newline at end of file
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