Skip to content

J
jinfa-platform
Commit fff0a0d5 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

电子合同

parent da8d79ad
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 403 additions and 234 deletions
src/pages/transaction/electronicContracts/addContract/index.tsx
View file @ fff0a0d5
import React, { useEffect } from 'react'
import React, { useEffect, useState } from 'react'
import { history } from 'umi'
import { Form, Input, Upload, Card, Tooltip, Button, message } from 'antd'
import { Form, Input, Upload, Card, Tooltip, Button, message, Badge, Popconfirm } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ReutrnEle from '@/components/ReturnEle';
import { PublicApi } from '@/services/api'
......@@ -9,8 +9,13 @@ import { UPLOAD_TYPE } from '@/constants'
import { QuestionCircleOutlined, StarOutlined, FileWordFilled, UploadOutlined, DeleteOutlined } from '@ant-design/icons';
import styles from './index.less'
const AddContract: React.FC<{}> = () => {
const AddContract: React.FC<{}> = (props) => {
const { type } = history.location.query
const { TextArea } = Input;
const [form] = Form.useForm();
const [fileExampleUrl, setFileExampleUrl] = useState<string>('');
const [uploadFile, setUploadFile] = useState<any>([]);
const [fileUrl, setFileUrl] = useState<string>('')
/**判断文件类型和大小 */
const beforeDocUpload = (file: UploadFile) => {
const isJpgOrPng = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
......@@ -26,7 +31,58 @@ const AddContract: React.FC<{}> = () => {
/**上传回调 */
const handleChange = ({ fileList }) => {
console.log(fileList, 10086)
if (fileList[0].response) {
const file = [{
name: fileList[0].name,
file: fileList[0].response.data
}]
setFileUrl(fileList[0].response.data)
setUploadFile(file)
}
}
/**合同模板样例查询 */
useEffect(() => {
PublicApi.getOrderContractTemplateExample().then(res => {
setFileExampleUrl(res.data)
})
}, [])
/**新增&修改 */
const sharedFn = async (parmas: any) => {
await PublicApi.postOrderContractTemplateAdd(parmas).then(res => {
setTimeout(() => {
history.goBack()
}, 1000)
})
}
/**提交数据 */
const onSubmit = async () => {
await form.validateFields().then(res => {
const parmas = {
name: res.name,
version: res.version,
description: res.description,
fileExampleUrl,
fileUrl,
}
sharedFn(parmas)
console.log(parmas)
})
}
/**删除上传的合同 */
const delectContract = () => {
setUploadFile([]);
setFileUrl('');
}
const confirm = () => {
// message.error(`未保存地址信息`)
setTimeout(() => {
history.goBack()
}, 1000)
}
return (
......@@ -36,17 +92,22 @@ const AddContract: React.FC<{}> = () => {
>
<Card>
<div className={styles.addcontract_wrap}>
<Form>
<Form.Item label='合同模板名称' colon={false} name='name'>
<Input />
<Form form={form}>
<Form.Item label='合同模板名称' colon={false} name='name' rules={[{ required: type && true, message: '请输入合同模板名称' }]}>
{type ? <Input /> : <span>1</span>}
</Form.Item>
<Form.Item label='版本号' colon={false} name='version'>
<Input />
<Form.Item label='版本号' colon={false} name='version' rules={[{ required: type && true, message: '请输入版本号' }]}>
{type ? <Input /> : <span>1</span>}
</Form.Item>
{!type &&
<Form.Item label='状态' colon={false} name='status'>
<span><Badge status="success" /> 有效</span>
</Form.Item>
}
<Form.Item label='合同模板说明' colon={false} name='description'>
<TextArea rows={4} />
{type ? <TextArea rows={4} /> : <span>1</span>}
</Form.Item>
<Form.Item label={<div>合同文件模板样例&nbsp;<Tooltip placement="top" title='制作合同模板前，可下载合同模板样例，按照样例指引制作合同模板，其中需要添加的参数可以在合同模板参数查询中查找。'><QuestionCircleOutlined /></Tooltip></div>} colon={false} name='fileExampleUrl'>
<Form.Item label={<div>合同文件模板样例&nbsp;<Tooltip placement="top" title='制作合同模板前，可下载合同模板样例，按照样例指引制作合同模板，其中需要添加的参数可以在合同模板参数查询中查找。'><QuestionCircleOutlined /></Tooltip></div>} colon={false}>
<div className={styles.upload_item}>
<div className={styles.upload_left}>
<FileWordFilled />
......@@ -57,35 +118,56 @@ const AddContract: React.FC<{}> = () => {
</div>
</div>
</Form.Item>
<Form.Item label={<div>合同文件模板&nbsp;<Tooltip placement="top" title='制作完成的合同模板，需要上传至平台，才能在后续的订单中签订电子合同'><QuestionCircleOutlined /></Tooltip></div>} colon={false} name='fileUrl'>
<Form.Item label={<div>合同文件模板&nbsp;<Tooltip placement="top" title='制作完成的合同模板，需要上传至平台，才能在后续的订单中签订电子合同'><QuestionCircleOutlined /></Tooltip></div>} colon={false}>
<div className={styles.upload_data}>
<div className={styles.upload_item}>
<div className={styles.upload_left}>
<FileWordFilled />
<span>合同模板样例.doc</span>
{uploadFile.map((v, i) => (
<div className={styles.upload_item} key={i}>
<div className={styles.upload_left}>
<FileWordFilled />
<span>{v.name}</span>
</div>
{
type ?
<div className={styles.upload_right}>
<span>预览</span>
<DeleteOutlined onClick={delectContract} />
</div>
:
<div className={styles.upload_right}>
<span>下载</span>
</div>
}
</div>
<div className={styles.upload_right}>
<span>预览</span>
<DeleteOutlined />
</div>
</div>
))}
</div>
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
showUploadList={false}
beforeUpload={beforeDocUpload}
onChange={handleChange}
accept='.doc,.docx'
>
<Button icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>支持扩展名：.doc，文件大小不超过 20M</div>
</Upload>
</Form.Item>
<Form.Item>
<Button type="primary">保存</Button>
<Button>取消</Button>
{
(uploadFile.length === 0 && type) &&
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
showUploadList={false}
beforeUpload={beforeDocUpload}
onChange={handleChange}
accept='.doc,.docx'
>
<Button icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>支持扩展名：.doc，文件大小不超过 20M</div>
</Upload>
}
</Form.Item>
{type &&
<Form.Item style={{ marginLeft: '174px' }}>
<Button type="primary" style={{ marginRight: '24px' }} onClick={onSubmit}>保存</Button>
<Popconfirm
title="未保存，是否确定执行这个操作?"
onConfirm={confirm}
okText="是"
cancelText="否"
>
<Button>取消</Button>
</Popconfirm>
</Form.Item>
}
</Form>
</div>
</Card>
......
src/pages/transaction/electronicContracts/apply/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState } from 'react'
import styles from './index.less'
import { Link } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
......@@ -7,7 +7,6 @@ import { Descriptions, Button } from 'antd';
import div from './../../../editor/configs/componentConfigs/HTML/div';
const Apply = () => {
/**头部状态的颜色值 */
const applyStaus = [{
status: 1,
......@@ -30,8 +29,8 @@ const Apply = () => {
icon: <CloseCircleFilled />,
color: '#D32F2F',
}]
const num = 1
const [num, setNum] = useState<number>(1);
const [authType, setAuthType] = useState<number>(1); // 认证方式 1-法人认证 2-经办人认证 3-个人认证
return (
<PageHeaderWrapper>
......@@ -41,32 +40,47 @@ const Apply = () => {
<div key={item.status}>
{
num === item.status &&
<div className={styles.apply_status} style={{ backgroundColor: item.color }}>
<div>
<div className={styles.status} style={{ opacity: .6, fontSize: '12px' }}>申请状态</div>
<div className={styles.status}>{item.icon} {item.name}</div>
</div>
<div className={styles.apply_status_btn}>
<Link to={`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link>
{item.status === 3 && <Button size='middle' ghost>查看进度</Button>}
</div>
<div className={styles.apply_status} style={{ backgroundColor: item.color }}>
<div>
<div className={styles.status} style={{ opacity: .6, fontSize: '12px' }}>申请状态</div>
<div className={styles.status}>{item.icon} {item.name}</div>
</div>
<div className={styles.apply_status_btn}>
<Link to={`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified?authTypeEdit=${authType}`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link>
{num === 3 && <Button style={{ marginLeft: '24px' }} size='middle' ghost>查看进度</Button>}
</div>
</div>
}
</div>
))
}
<div className={styles.apply_item}>
<Descriptions title="申请信息" column={1}>
<Descriptions.Item label="公司名称">温州市隆昌皮业有限公司</Descriptions.Item>
<Descriptions.Item label="统一社会信用代码">4324324325425435</Descriptions.Item>
<Descriptions.Item label="法人姓名">张三</Descriptions.Item>
<Descriptions.Item label="法人手机号">+86 185 2929 6758</Descriptions.Item>
<Descriptions.Item label="法人身份证号">321023 19891205 3746</Descriptions.Item>
<Descriptions.Item label="认证方式">-</Descriptions.Item>
<Descriptions.Item label="验证方式">-</Descriptions.Item>
</Descriptions>
</div>
{/* 企业 */}
{(authType === 1 || authType === 2) &&
<div className={styles.apply_item}>
<Descriptions title="申请信息" column={1}>
<Descriptions.Item label="公司名称">温州市隆昌皮业有限公司</Descriptions.Item>
<Descriptions.Item label="统一社会信用代码">4324324325425435</Descriptions.Item>
<Descriptions.Item label="法人姓名">张三</Descriptions.Item>
<Descriptions.Item label="法人手机号">+86 185 2929 6758</Descriptions.Item>
<Descriptions.Item label="法人身份证号">321023 19891205 3746</Descriptions.Item>
<Descriptions.Item label="认证方式">-</Descriptions.Item>
<Descriptions.Item label="验证方式">-</Descriptions.Item>
</Descriptions>
</div>
}
{/* 个人 */}
{authType === 3 &&
<div className={styles.apply_item}>
<Descriptions title="申请信息" column={1}>
<Descriptions.Item label="姓名">张三</Descriptions.Item>
<Descriptions.Item label="手机号">+86 185 2929 6758</Descriptions.Item>
<Descriptions.Item label="身份证号">321023 19891205 3746</Descriptions.Item>
<Descriptions.Item label="验证方式">-</Descriptions.Item>
</Descriptions>
</div>
}
</div>
</PageHeaderWrapper>
......
src/pages/transaction/electronicContracts/classSearch/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Row, Col, Input, Button } from 'antd';
import { ColumnType } from 'antd/lib/table/interface';
import { StandardTable } from 'god';
import { PublicApi } from '@/services/api'
const ClassSearch = () => {
const ref = useRef<any>({});
//表头
const columns: ColumnType<any>[] = [{
title: 'ID',
......@@ -22,6 +23,16 @@ const ClassSearch = () => {
dataIndex: 'status',
}]
// 列表数据
const fetchData = (params?: any) => {
console.log(params)//可以直接打印参数
return new Promise((resolve, reject) => {
PublicApi.getContractParamPage({ ...params }).then(res => {
resolve(res.data)
})
})
}
return (
<PageHeaderWrapper>
<Card>
......@@ -30,13 +41,15 @@ const ClassSearch = () => {
rowKey: 'id',
}}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
controlRender={
<Row>
<Col span={12}>
<Input.Search
style={{ width: '256px',marginRight: '24px',marginBottom: '24px' }}
placeholder='搜索'
/>
/>
<Button>重置</Button>
</Col>
</Row>
......
src/pages/transaction/electronicContracts/components/alipay/index.tsx deleted 100644 → 0
View file @ da8d79ad
import React from 'react'
import { Result } from 'antd'
import styles from '../index.less'
import { AlipaySquareFilled } from '@ant-design/icons';
const Alipay = () => {
return(
<div className={styles.info_wrap}>
<Result
title="请使用法人手机号注册的支付宝账号登录支付"
extra={[
<div key='key'>
<div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>
<div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的</div>
<div className={styles.alipay_qrcode} />
<div className={styles.alipay_wran}>
<AlipaySquareFilled
style={{
fontSize: '24px',
color: '#3f7ed2',
marginRight: '8px'
}}
/>
支付宝扫一扫
</div>
</div>
]}
/>
</div>
)
}
export default Alipay
src/pages/transaction/electronicContracts/components/corporate/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState } from 'react'
import { Button, Row, Col, Form, Input, Select } from 'antd'
import styles from '../index.less'
import cx from 'classnames'
import { QuestionCircleOutlined } from '@ant-design/icons';
const Corporate = () => {
interface queryProps {
authType: number,
authTypeFn: Function,
checkPayWayFn: Function
}
const Corporate: React.FC<queryProps> = (props) => {
const { Option } = Select;
const { authType, authTypeFn, checkPayWayFn } = props;
const [form] = Form.useForm();
const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
// 测试表当提交效果
const onSubmit = async () => {
const value = await form.validateFields();
console.log(value)
}
// 切换支付认证方式
const CheckPayWay = (type: number) => {
setPayWay(type)
checkPayWayFn(type)
}
return (
<>
{/**认证方式*/}
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
<Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
</Row>
{/**企业认证方式*/}
{authType === 1 &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, payWay===1&&styles.active)} onClick={()=>CheckPayWay(1)}>支付宝验证</Col>
<Col className={cx(styles.card_checkbox_item, payWay===2&&styles.active)} onClick={()=>CheckPayWay(2)}>对公账户验证</Col>
</Row>
</div>
</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary' onClick={()=>authTypeFn('', 2)}>下一步</Button>
<Button onClick={()=>authTypeFn('', 0)}>上一步</Button>
</div>
</div>
</div>
</div>
</div>
</div>
}
{/**经办人认证*/}
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>企业信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>公司名称：</div>
<div className={styles.item_control}>温州市隆昌皮业有限公司</div>
{authType === 2 &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>企业信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>公司名称：</div>
<div className={styles.item_control}>温州市隆昌皮业有限公司</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>统一社会信用代码：</div>
<div className={styles.item_control}>4324324325425435</div>
</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>统一社会信用代码：</div>
<div className={styles.item_control}>4324324325425435</div>
</div>
<div className={styles.info_item}>
<div className={styles.info_item_title}>经办人信息核验</div>
<div className={styles.info_item_con}>
<Form form={form}>
<Form.Item label='经办人' name='name' colon={false} rules={[{ required: true, message: '请输入经办人' }]}>
<Input />
</Form.Item>
<Form.Item label='身份证号码' name='num' colon={false} rules={[{ required: true, message: '请输入身份证号码' }]}>
<Input />
</Form.Item>
<Form.Item label='手机号码' colon={false} required={true}>
<Row gutter={24}>
<Col span={7}>
<Form.Item style={{ width: '150px' }} name='code' rules={[{ required: true, message: '请选择区号' }]}>
<Select style={{ width: '100%' }}>
<Option value="Zhejiang">Zhejiang</Option>
<Option value="Jiangsu">Jiangsu</Option>
</Select>
</Form.Item>
</Col>
<Col span={17}>
<Form.Item style={{ width: '398px' }} name='phone' rules={[{ required: true, message: '请输入手机号码' }]}>
<Input />
</Form.Item>
</Col>
</Row>
</Form.Item>
</Form>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary' onClick={onSubmit}>下一步</Button>
</div>
</div>
</div>
</div>
</div>
<div className={styles.info_item}>
<div className={styles.info_item_title}>经办人信息核验</div>
<div className={styles.info_item_con}>
<Form form={form}>
<Form.Item label='经办人' name='name' colon={false} rules={[{ required: true, message: '请输入经办人' }]}>
<Input />
</Form.Item>
<Form.Item label='身份证号码' name='num' colon={false} rules={[{ required: true, message: '请输入身份证号码' }]}>
<Input />
</Form.Item>
<Form.Item label='手机号码' colon={false} required={true}>
<Row gutter={24}>
<Col span={7}>
<Form.Item style={{width: '150px'}} name='code' rules={[{ required: true, message: '请选择区号' }]}>
<Select style={{ width: '100%' }}>
<Option value="Zhejiang">Zhejiang</Option>
<Option value="Jiangsu">Jiangsu</Option>
</Select>
</Form.Item>
</Col>
<Col span={17}>
<Form.Item style={{width: '398px'}} name='phone' rules={[{ required: true, message: '请输入手机号码' }]}>
<Input />
</Form.Item>
</Col>
</Row>
</Form.Item>
</Form>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary' onClick={onSubmit}>下一步</Button>
}
{/**个人认证方式*/}
{authType === 3 &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
<Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
</Row>
</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
</div>
</div>
</div>
</div>
</div>
</div>
}
</>
)
}
......
src/pages/transaction/electronicContracts/components/enterpriseInfoCheck/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState } from 'react'
import styles from '../index.less'
import { Button, Row, Col } from 'antd'
import cx from 'classnames'
import { QuestionCircleOutlined } from '@ant-design/icons';
const EnterpriseInfoCheck = () => {
interface queryProps {
authTypeEdit: string,
authTypeFn: Function
}
const EnterpriseInfoCheck: React.FC<queryProps> = (props) => {
const { authTypeEdit, authTypeFn } = props;
const [authTypeBtn, setAuthTypeBtn] = useState<number>(1); // 认证方式
// 切换认证方式
const checkAuthType = (type:number) => {
setAuthTypeBtn(type);
}
return (
<>
{/* 企业展示 */}
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>企业信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>公司名称：</div>
<div className={styles.item_control}>温州市隆昌皮业有限公司</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>统一社会信用代码：</div>
<div className={styles.item_control}>4324324325425435</div>
{(authTypeEdit === '1' || authTypeEdit === '2') &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>企业信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>公司名称：</div>
<div className={styles.item_control}>温州市隆昌皮业有限公司</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>统一社会信用代码：</div>
<div className={styles.item_control}>4324324325425435</div>
</div>
</div>
</div>
</div>
<div className={styles.info_item}>
<div className={styles.info_item_title}>法人信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>法人姓名：</div>
<div className={styles.item_control}>张三</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>法人手机号：</div>
<div className={styles.item_control}>+86 185 2929 6758</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>法人身份证号：</div>
<div className={styles.item_control}>321023 19891205 3746</div>
<div className={styles.info_item}>
<div className={styles.info_item_title}>法人信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>法人姓名：</div>
<div className={styles.item_control}>张三</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>法人手机号：</div>
<div className={styles.item_control}>+86 185 2929 6758</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>法人身份证号：</div>
<div className={styles.item_control}>321023 19891205 3746</div>
</div>
</div>
</div>
</div>
<div className={cx(styles.info_item, styles.info_dashed)}>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>法人认证</Col>
<Col className={cx(styles.card_checkbox_item, styles.active)}>经办人认证</Col>
</Row>
<div className={cx(styles.info_item, styles.info_dashed)}>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, authTypeBtn===1&&styles.active)} onClick={()=>checkAuthType(1)}>法人认证</Col>
<Col className={cx(styles.card_checkbox_item, authTypeBtn===2&&styles.active)} onClick={()=>checkAuthType(2)}>经办人认证</Col>
</Row>
</div>
</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary' onClick={()=>authTypeFn(authTypeBtn, 1)}>下一步</Button>
</div>
</div>
</div>
</div>
</div>
</div>
}
{/* 个人展示 */}
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>个人信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>姓名：</div>
<div className={styles.item_control}>张三</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>手机号：</div>
<div className={styles.item_control}>+86 185 2929 6758</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>身份证号：</div>
<div className={styles.item_control}>321023 19891205 3746</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
{authTypeEdit === '3' &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>个人信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>姓名：</div>
<div className={styles.item_control}>张三</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>手机号：</div>
<div className={styles.item_control}>+86 185 2929 6758</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>身份证号：</div>
<div className={styles.item_control}>321023 19891205 3746</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
</div>
</div>
</div>
</div>
</div>
</div>
}
</>
)
}
......
src/pages/transaction/electronicContracts/components/steps/index.tsx
View file @ fff0a0d5
......@@ -3,10 +3,16 @@ import styles from './index.less'
import { Steps } from 'antd'
const { Step } = Steps;
const StepComponents = () => {
interface stepProps {
step: number,
}
const StepComponents: React.FC<stepProps> = (props) => {
const { step } = props;
return (
<div className={styles.step_info}>
<Steps size="small" current={0}>
<Steps size="small" current={step}>
<Step title="企业信息核验" />
<Step title="经办人/法人认证" />
<Step title="企业认证" />
......
src/pages/transaction/electronicContracts/enterpriseCertified/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState } from 'react'
import { history } from 'umi'
import ReutrnEle from '@/components/ReturnEle';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import StepComponents from '../components/steps'
import EnterpriseInfoCheck from '../components/enterpriseInfoCheck'
import Corporate from '../components/corporate'
import Alipay from '../components/alipay'
import PublicAccount from '../components/publicAccount'
const EnterpriseCertified = () => {
const { authTypeEdit } = history.location.query;
const [step, setStep] = useState<number>(0);
const [authType, setAuthType] = useState<number>(1);
const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
//认证方式切换Fn
const authTypeFn = (type: number, steps: number) => {
if (type) { setAuthType(type); }
setStep(steps)
}
//切换支付方式
const checkPayWayFn = (type: number) => {
setPayWay(type)
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
>
<StepComponents />
<EnterpriseInfoCheck />
<Corporate />
{/**<Alipay />*/}
<PublicAccount />
<StepComponents step={step} />
{step === 0 &&
<EnterpriseInfoCheck
authTypeEdit={authTypeEdit}
authTypeFn={authTypeFn}
/>
}
{step === 1 &&
<Corporate
authType={authType}
checkPayWayFn={checkPayWayFn}
authTypeFn={authTypeFn}
/>
}
{step === 2 &&
<PublicAccount
authType={authType}
payWay={payWay}
/>}
</PageHeaderWrapper>
)
}
......
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