Skip to content

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

将引用组件首字母大写改为小写

parent bd5b12e2
Hide whitespace changes
Inline Side-by-side
Showing with 297 additions and 27 deletions
src/pages/transaction/electronicContracts/components/alipay/index.tsx
View file @ 1c99235f
import React from 'react'
import { Result } from 'antd'
import styles from '../index.less'
import { AlipaySquareFilled } from '@ant-design/icons';
const Alipay = () => {
return(
......@@ -8,10 +9,21 @@ const Alipay = () => {
<Result
title="请使用法人手机号注册的支付宝账号登录支付"
extra={[
<div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>,
<div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的</div>,
<div className={styles.alipay_qrcode} />,
<div><AlipayCircleOutlined />支付宝扫一扫</div>
<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>
......
src/pages/transaction/electronicContracts/components/corporate/index.tsx
View file @ 1c99235f
import React from 'react'
import { Button, Row, Col } from 'antd'
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 = () => {
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>
const { Option } = Select;
const [form] = Form.useForm();
// 测试表当提交效果
const onSubmit = async () => {
const value = await form.validateFields();
console.log(value)
}
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>
</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 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}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
</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>
</>
)
}
......
src/pages/transaction/electronicContracts/components/index.less
View file @ 1c99235f
......@@ -16,6 +16,17 @@
padding-bottom: 8px;
}
.bank_btn {
width: 380px;
margin: auto !important;
text-align: left;
button {
&:first-child {
margin-right: 24px;
}
}
}
.alipay_qrcode {
width: 240px;
height: 240px;
......@@ -27,6 +38,61 @@
box-sizing: border-box;
}
.alipay_wran {
display: flex;
align-items: center;
justify-content: center;
}
.bank_info_le {
width: 420px;
margin: 24px auto 0px !important;
padding: 12px 24px 0px;
}
.info_phone_number {
width: 340px;
padding: 12px 24px;
margin: 24px auto !important;
background-color: #FAFBFC;
& > div {
text-align: left;
&:first-child {
color: #909399;
font-size: 12px;
padding: 12px 0px 6px;
}
&:last-child {
color: '#303133';
font-size: 32px;
font-weight: 500;
}
}
}
.bank_info {
width: 420px;
margin: 24px auto !important;
background-color: #FAFBFC;
padding: 12px 24px;
.bank_info_item {
display: flex;
padding: 12px 0px;
.bank_info_label {
width: 140px;
color: #909399;
text-align: left;
}
.bank_info_control {
width: 232px;
text-align: left;
}
}
}
.info_item {
.info_item_title {
position: relative;
......@@ -65,8 +131,23 @@
color: #303133;
button {
&:last-child {
margin-left: 24px;
&:first-child {
margin-right: 24px;
}
}
}
}
:global {
.ant-form-item {
width: 748px;
.ant-form-item-label {
width: 176px;
text-align: left;
& > label {
color: #909399;
}
}
}
......
src/pages/transaction/electronicContracts/components/publicAccount/index.tsx 0 → 100644
View file @ 1c99235f
import React from 'react'
import { Result, Button, Form, Input } from 'antd'
import styles from '../index.less'
const PublicAccount = () => {
return (
<>
<div className={styles.info_wrap}>
{/** 对公账户确认*/}
<Result
title="请确认您公司的对公银行账号与开户银行"
extra={[
<div key='key'>
<div className={styles.info_wran}>点击下一步后，系统将向您的对公账号转入一笔金额为随机的款项，</div>
<div className={styles.info_wran}>后续您需要填写这笔款项的具体金额，以便完成企业认证。</div>
<div className={styles.bank_info}>
<div className={styles.bank_info_item}>
<div className={styles.bank_info_label}>账户名称：</div>
<div className={styles.bank_info_control}>温州市隆昌皮具有限公司</div>
</div>
<div className={styles.bank_info_item}>
<div className={styles.bank_info_label}>银行账号：</div>
<div className={styles.bank_info_control}>622203 43324 42343</div>
</div>
<div className={styles.bank_info_item}>
<div className={styles.bank_info_label}>开户行：</div>
<div className={styles.bank_info_control}>中国建设银行广州市分行营业部</div>
</div>
</div>
<div className={styles.bank_btn}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
</div>
</div>
]}
/>
</div>
<div className={styles.info_wrap}>
{/** 对公账户打款*/}
<Result
title="请输入您公司的对公银行账号收到的转账金额，以便完成企业认证"
extra={[
<div key='key'>
<div className={styles.info_wran}>受银行结算时间的影响，到账时间为5分钟-72小时不等，请耐心等候</div>
<div className={styles.info_wran}>如果打款未到账，可在4小时后&nbsp;<span style={{ color: '#00B37A' }}>重新申请打款</span></div>
<div className={styles.bank_info_le} style={{ backgroundColor: '#FFF', marginBottom: '0px' }}>
<Form>
<Form.Item colon={false} label='转账金额' name="PRICE" rules={[{ required: true, message: '请输入转账金额' }]}>
<Input placeholder='请输入您收到的转账金额' />
</Form.Item>
</Form>
</div>
<div className={styles.bank_btn} style={{ width: '230px' }}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
</div>
</div>
]}
/>
</div>
<div className={styles.info_wrap}>
{/** 系统将向法人手机号码发送验证短信*/}
<Result
title="系统将向法人手机号码发送验证短信"
extra={[
<div key='key'>
<div className={styles.info_wran}>法人收到验证短信后，根据短信中的链接，在手机端完成委托书签署</div>
<div className={styles.info_phone_number}>
<div>法人手机号：</div>
<div>+86 186 7700 2345</div>
</div>
<div className={styles.bank_btn} style={{ textAlign: 'center' }}>
<Button type='primary'>发送授权短信</Button>
<Button style={{ width: '116px' }}>返回</Button>
</div>
</div>
]}
/>
</div>
<div className={styles.info_wrap}>
{/** 系统将向当前会员手机号码发送短信验证码*/}
<Result
title="系统将向当前会员手机号码发送短信验证码"
extra={[
<div key='key'>
<div className={styles.info_wran}>会员收到短信验证码后，填写验证码完成认证</div>
<div className={styles.info_phone_number}>
<div>法人手机号：</div>
<div>+86 186 7700 2345</div>
</div>
<Form>
<Form.Item noStyle>
<Input placeholder='请输入您收到的转账金额' />
</Form.Item>
</Form>
<div className={styles.bank_btn} style={{ textAlign: 'center' }}>
<Button type='primary'>开始认证</Button>
<Button style={{ width: '116px' }}>上一步</Button>
</div>
</div>
]}
/>
</div>
</>
)
}
export default PublicAccount
src/pages/transaction/electronicContracts/enterpriseCertified/index.tsx
View file @ 1c99235f
......@@ -4,8 +4,9 @@ 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 Corporate from '../components/corporate'
import Alipay from '../components/alipay'
import PublicAccount from '../components/publicAccount'
const EnterpriseCertified = () => {
return (
......@@ -16,7 +17,8 @@ const EnterpriseCertified = () => {
<StepComponents />
<EnterpriseInfoCheck />
<Corporate />
<Alipay />
{/**<Alipay />*/}
<PublicAccount />
</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