Commit 34258fe4 authored by 前端-许佳敏's avatar 前端-许佳敏
parents 56681c06 86719b31
...@@ -8,6 +8,10 @@ ...@@ -8,6 +8,10 @@
color: #666666; color: #666666;
font-size: 14px; font-size: 14px;
&>a {
color: #666666;
}
&.arrow { &.arrow {
padding: 0 5px; padding: 0 5px;
} }
......
...@@ -6,7 +6,7 @@ import cx from 'classnames' ...@@ -6,7 +6,7 @@ import cx from 'classnames'
import styles from './index.less' import styles from './index.less'
interface BreadCrumbsPropsType { interface BreadCrumbsPropsType {
pathname?: string
} }
const handlePreeEnter = (e) => { const handlePreeEnter = (e) => {
...@@ -15,13 +15,26 @@ const handlePreeEnter = (e) => { ...@@ -15,13 +15,26 @@ const handlePreeEnter = (e) => {
} }
const BreadCrumbs: React.FC<BreadCrumbsPropsType> = (props) => { const BreadCrumbs: React.FC<BreadCrumbsPropsType> = (props) => {
const { pathname } = props
return ( return (
<div className={styles.information_bread_crumbs}> <div className={styles.information_bread_crumbs}>
<div className={styles.information_bread_crumbs_item}>您的位置:</div> <div className={styles.information_bread_crumbs_item}>您的位置:</div>
<div className={styles.information_bread_crumbs_item}>官网首页</div> <div className={styles.information_bread_crumbs_item}>官网首页</div>
<div className={cx(styles.information_bread_crumbs_item, styles.arrow)}>&gt;</div> <div className={cx(styles.information_bread_crumbs_item, styles.arrow)}>&gt;</div>
<div className={styles.information_bread_crumbs_item}>资讯</div> <div className={styles.information_bread_crumbs_item}>
{
pathname ? <a href="/infomation">资讯</a> : '资讯'
}
</div>
{
pathname && (
<>
<div className={cx(styles.information_bread_crumbs_item, styles.arrow)}>&gt;</div>
<div className={styles.information_bread_crumbs_item}>{pathname}</div>
</>
)
}
<div className={styles.information_bread_crumbs_search}> <div className={styles.information_bread_crumbs_search}>
<Input className={styles.information_bread_crumbs_search_input} onPressEnter={handlePreeEnter} /> <Input className={styles.information_bread_crumbs_search_input} onPressEnter={handlePreeEnter} />
......
...@@ -94,6 +94,11 @@ ...@@ -94,6 +94,11 @@
&:hover { &:hover {
background: #f2f2f2; background: #f2f2f2;
} }
&>a {
display: block;
color: #333333;
}
} }
} }
} }
......
...@@ -149,7 +149,9 @@ const InformationRight: React.FC = () => { ...@@ -149,7 +149,9 @@ const InformationRight: React.FC = () => {
{ {
hotLabel.map(item => ( hotLabel.map(item => (
<div key={`information_new_label_list_item_${item.id}`} className={styles.information_new_label_list_item}> <div key={`information_new_label_list_item_${item.id}`} className={styles.information_new_label_list_item}>
<span>{item.name}</span> <span>
<Link to={`/infomation/search?labelId=${item.id}&labelName=${btoa(encodeURIComponent(item.name))}`}>{item.name}</Link>
</span>
</div> </div>
)) ))
} }
...@@ -177,9 +179,15 @@ const InformationRight: React.FC = () => { ...@@ -177,9 +179,15 @@ const InformationRight: React.FC = () => {
{ {
recommendNews && recommendNews.map((item: any, index: number) => index > 0 && ( recommendNews && recommendNews.map((item: any, index: number) => index > 0 && (
<div key={`information_recommend_list_item_${item.id}`} className={styles.information_recommend_list_item}> <div key={`information_recommend_list_item_${item.id}`} className={styles.information_recommend_list_item}>
<ImageBox imgUrl={informationImg2} /> <Link to={`/infomation/detail?id=${item.id}`}>
<ImageBox imgUrl={item.imageUrl} />
</Link>
<div className={styles.information_recommend_list_item_main}> <div className={styles.information_recommend_list_item_main}>
<p className={styles.information_recommend_list_item_main_title}>{item.title}</p> <p className={styles.information_recommend_list_item_main_title}>
<Link to={`/infomation/detail?id=${item.id}`}>
{item.title}
</Link>
</p>
<div className={styles.information_recommend_list_item_main_date}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</div> <div className={styles.information_recommend_list_item_main_date}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</div>
</div> </div>
</div> </div>
......
...@@ -155,6 +155,10 @@ ...@@ -155,6 +155,10 @@
color: #000000; color: #000000;
margin-top: 10px; margin-top: 10px;
.text_clamp(2); .text_clamp(2);
&>a {
color: #000000;
}
} }
} }
} }
......
This diff is collapsed.
...@@ -128,7 +128,6 @@ const Information: React.FC<InformationPropsType> = (props) => { ...@@ -128,7 +128,6 @@ const Information: React.FC<InformationPropsType> = (props) => {
* @param page * @param page
*/ */
const handlePageChange = (page) => { const handlePageChange = (page) => {
console.log(page, 'page')
setCurrent(page) setCurrent(page)
fetchNewsByColumn(showColumnId, page) fetchNewsByColumn(showColumnId, page)
} }
...@@ -136,7 +135,7 @@ const Information: React.FC<InformationPropsType> = (props) => { ...@@ -136,7 +135,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
return ( return (
<div className={styles.information}> <div className={styles.information}>
<div className={styles.information_container}> <div className={styles.information_container}>
<BreadCrumbs /> <BreadCrumbs {...props} />
<div className={styles.information_focus}> <div className={styles.information_focus}>
<div className={styles.information_focus_left}> <div className={styles.information_focus_left}>
<Carousel <Carousel
......
import React, { Fragment } from 'react' import React, { useEffect, useState } from 'react'
import cx from 'classnames' import cx from 'classnames'
import { Pagination } from 'antd' import { Pagination } from 'antd'
import { Link } from 'umi' import { Link } from 'umi'
...@@ -7,10 +7,16 @@ import informationImg2 from '@/assets/imgs/information_2.png' ...@@ -7,10 +7,16 @@ import informationImg2 from '@/assets/imgs/information_2.png'
import ImageBox from '@/components/ImageBox' import ImageBox from '@/components/ImageBox'
import BreadCrumbs from './components/breadCrumbs' import BreadCrumbs from './components/breadCrumbs'
import InformationRight from './components/informationRight' import InformationRight from './components/informationRight'
import moment from 'moment'
import {
GetManageContentInformationPageResponseDetail,
} from '@/services/PassApi'
import { numFormat } from '@/utils/numberFomat'
import { PublicApi } from '@/services/api'
import styles from './index.less' import styles from './index.less'
interface InformationPropsType { interface InformationPropsType {
location: any
} }
const MockList = [ const MockList = [
...@@ -107,45 +113,108 @@ const MockList = [ ...@@ -107,45 +113,108 @@ const MockList = [
] ]
const InformationSearch: React.FC<InformationPropsType> = (props) => { const InformationSearch: React.FC<InformationPropsType> = (props) => {
const { query: { keyword, labelName, labelId } } = props.location
const [newsList, setNewsList] = useState<GetManageContentInformationPageResponseDetail[]>([]) // 资讯列表
const [current, setCurrent] = useState<number>(1)
const [pageSize] = useState<number>(10)
const [totalCount, setTotalCount] = useState<number>(0)
const [searchValue, setSearchValue] = useState<string>('')
useEffect(() => {
if (keyword || keyword === "") {
setSearchValue(keyword)
}
if (labelName && labelId) {
setSearchValue(decodeURIComponent(atob(labelName)))
}
setCurrent(1)
fetchSearchNewsList(1)
}, [props.location.query])
const fetchSearchNewsList = (currentPage: number) => {
let param: any = {
// columnId,
current: currentPage ? currentPage : current,
pageSize,
status: 2,
}
if (keyword) {
param.title = keyword
}
if (labelName && labelId) {
param.columnId = labelId
}
//@ts-ignore
PublicApi.getManageContentInformationPage(param).then(res => {
if (res.code === 1000) {
setNewsList(res.data.data)
setTotalCount(res.data.totalCount)
}
}).catch(() => { })
}
/**
* 切换分页
* @param page
*/
const handlePageChange = (page) => {
setCurrent(page)
fetchSearchNewsList(page)
}
return ( return (
<div className={styles.information}> <div className={styles.information}>
<div className={styles.information_container}> <div className={styles.information_container}>
<BreadCrumbs /> <BreadCrumbs {...props} pathname={searchValue} />
<div className={cx(styles.information_wrap, styles.no_mar_top)}> <div className={cx(styles.information_wrap, styles.no_mar_top)}>
<div className={styles.information_left}> <div className={styles.information_left}>
<div className={styles.information_title}> <div className={styles.information_title}>
<span>资讯搜索:</span> <span>资讯搜索:</span>
{
searchValue && <label>{searchValue}</label>
}
</div> </div>
<div className={styles.information_latest_release_list}> <div className={styles.information_latest_release_list}>
<div className={styles.information_latest_release_list_item}> {
<ImageBox width={285} height={190} imgUrl={informationImg2} /> newsList && newsList.map(item => (
<div className={styles.information_latest_release_list_item_main}> <div className={styles.information_latest_release_list_item} key={`information_latest_release_list_item_${item.id}`}>
<p><Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案,如何实现全网整合</Link></p> <ImageBox width={285} height={190} imgUrl={informationImg2} />
<div className={styles.information_common_view}> <div className={styles.information_latest_release_list_item_main}>
<div className={styles.information_common_view_item}> <p><Link to={`/infomation/detail?id=${item.id}`}>{item.title}</Link></p>
<ClockCircleOutlined /> <div className={styles.information_common_view}>
<span className={styles.information_common_view_item_text}>2019-09-25</span> <div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>{numFormat(item.readCount)}</span>
</div>
</div>
<div className={styles.information_latest_release_list_item_main_content}>
{item.digest}
</div>
<div className={cx(styles.information_common_tag_list, styles.bottom)}>
{
item.contentLabelList && item.contentLabelList.map((labelItem: any) => (
<div className={styles.information_common_tag_list_item} key={`information_common_tag_list_item-${labelItem.id}`}>{labelItem.name}</div>
))
}
</div>
</div> </div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
<div className={styles.information_latest_release_list_item_main_content}>
优秀的B2B电商商城平台开发公司除了提供搭建电商系统的服务之外,更应该为客户制定一套合理的电商系统平台整合解决方案…
</div>
<div className={cx(styles.information_common_tag_list, styles.bottom)}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div> </div>
</div> ))
</div> }
</div>
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
</div> </div>
{
newsList && newsList.length > 0 && (
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} current={current} pageSize={pageSize} total={totalCount} />
</div>
)
}
</div> </div>
<InformationRight /> <InformationRight />
</div> </div>
......
import React, { useEffect } from 'react' import React, { useEffect, useState } from 'react'
import { history } from 'umi' 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 { PageHeaderWrapper } from '@ant-design/pro-layout';
import ReutrnEle from '@/components/ReturnEle'; import ReutrnEle from '@/components/ReturnEle';
import { PublicApi } from '@/services/api' import { PublicApi } from '@/services/api'
...@@ -9,8 +9,13 @@ import { UPLOAD_TYPE } from '@/constants' ...@@ -9,8 +9,13 @@ import { UPLOAD_TYPE } from '@/constants'
import { QuestionCircleOutlined, StarOutlined, FileWordFilled, UploadOutlined, DeleteOutlined } from '@ant-design/icons'; import { QuestionCircleOutlined, StarOutlined, FileWordFilled, UploadOutlined, DeleteOutlined } from '@ant-design/icons';
import styles from './index.less' import styles from './index.less'
const AddContract: React.FC<{}> = () => { const AddContract: React.FC<{}> = (props) => {
const { type } = history.location.query
const { TextArea } = Input; 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 beforeDocUpload = (file: UploadFile) => {
const isJpgOrPng = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'; const isJpgOrPng = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
...@@ -26,7 +31,58 @@ const AddContract: React.FC<{}> = () => { ...@@ -26,7 +31,58 @@ const AddContract: React.FC<{}> = () => {
/**上传回调 */ /**上传回调 */
const handleChange = ({ fileList }) => { 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 ( return (
...@@ -36,17 +92,22 @@ const AddContract: React.FC<{}> = () => { ...@@ -36,17 +92,22 @@ const AddContract: React.FC<{}> = () => {
> >
<Card> <Card>
<div className={styles.addcontract_wrap}> <div className={styles.addcontract_wrap}>
<Form> <Form form={form}>
<Form.Item label='合同模板名称' colon={false} name='name'> <Form.Item label='合同模板名称' colon={false} name='name' rules={[{ required: type && true, message: '请输入合同模板名称' }]}>
<Input /> {type ? <Input /> : <span>1</span>}
</Form.Item> </Form.Item>
<Form.Item label='版本号' colon={false} name='version'> <Form.Item label='版本号' colon={false} name='version' rules={[{ required: type && true, message: '请输入版本号' }]}>
<Input /> {type ? <Input /> : <span>1</span>}
</Form.Item> </Form.Item>
{!type &&
<Form.Item label='状态' colon={false} name='status'>
<span><Badge status="success" /> 有效</span>
</Form.Item>
}
<Form.Item label='合同模板说明' colon={false} name='description'> <Form.Item label='合同模板说明' colon={false} name='description'>
<TextArea rows={4} /> {type ? <TextArea rows={4} /> : <span>1</span>}
</Form.Item> </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_item}>
<div className={styles.upload_left}> <div className={styles.upload_left}>
<FileWordFilled /> <FileWordFilled />
...@@ -57,35 +118,56 @@ const AddContract: React.FC<{}> = () => { ...@@ -57,35 +118,56 @@ const AddContract: React.FC<{}> = () => {
</div> </div>
</div> </div>
</Form.Item> </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_data}>
<div className={styles.upload_item}> {uploadFile.map((v, i) => (
<div className={styles.upload_left}> <div className={styles.upload_item} key={i}>
<FileWordFilled /> <div className={styles.upload_left}>
<span>合同模板样例.doc</span> <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>
<div className={styles.upload_right}> ))}
<span>预览</span>
<DeleteOutlined />
</div>
</div>
</div> </div>
<Upload {
action="/api/file/file/upload" (uploadFile.length === 0 && type) &&
data={{ fileType: UPLOAD_TYPE }} <Upload
showUploadList={false} action="/api/file/file/upload"
beforeUpload={beforeDocUpload} data={{ fileType: UPLOAD_TYPE }}
onChange={handleChange} showUploadList={false}
accept='.doc,.docx' beforeUpload={beforeDocUpload}
> onChange={handleChange}
<Button icon={<UploadOutlined />}>上传文件</Button> accept='.doc,.docx'
<div style={{ marginTop: '8px' }}>支持扩展名:.doc,文件大小不超过 20M</div> >
</Upload> <Button icon={<UploadOutlined />}>上传文件</Button>
</Form.Item> <div style={{ marginTop: '8px' }}>支持扩展名:.doc,文件大小不超过 20M</div>
<Form.Item> </Upload>
<Button type="primary">保存</Button> }
<Button>取消</Button>
</Form.Item> </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> </Form>
</div> </div>
</Card> </Card>
......
import React from 'react' import React, { useState } from 'react'
import styles from './index.less' import styles from './index.less'
import { Link } from 'umi'; import { Link } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout'
...@@ -7,7 +7,6 @@ import { Descriptions, Button } from 'antd'; ...@@ -7,7 +7,6 @@ import { Descriptions, Button } from 'antd';
import div from './../../../editor/configs/componentConfigs/HTML/div'; import div from './../../../editor/configs/componentConfigs/HTML/div';
const Apply = () => { const Apply = () => {
/**头部状态的颜色值 */ /**头部状态的颜色值 */
const applyStaus = [{ const applyStaus = [{
status: 1, status: 1,
...@@ -30,8 +29,8 @@ const Apply = () => { ...@@ -30,8 +29,8 @@ const Apply = () => {
icon: <CloseCircleFilled />, icon: <CloseCircleFilled />,
color: '#D32F2F', color: '#D32F2F',
}] }]
const [num, setNum] = useState<number>(1);
const num = 1 const [authType, setAuthType] = useState<number>(1); // 认证方式 1-法人认证 2-经办人认证 3-个人认证
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
...@@ -41,32 +40,47 @@ const Apply = () => { ...@@ -41,32 +40,47 @@ const Apply = () => {
<div key={item.status}> <div key={item.status}>
{ {
num === item.status && num === item.status &&
<div className={styles.apply_status} style={{ backgroundColor: item.color }}> <div className={styles.apply_status} style={{ backgroundColor: item.color }}>
<div> <div>
<div className={styles.status} style={{ opacity: .6, fontSize: '12px' }}>申请状态</div> <div className={styles.status} style={{ opacity: .6, fontSize: '12px' }}>申请状态</div>
<div className={styles.status}>{item.icon} {item.name}</div> <div className={styles.status}>{item.icon} {item.name}</div>
</div> </div>
<div className={styles.apply_status_btn}> <div className={styles.apply_status_btn}>
<Link to={`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link> <Link to={`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified?authTypeEdit=${authType}`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link>
{item.status === 3 && <Button size='middle' ghost>查看进度</Button>} {num === 3 && <Button style={{ marginLeft: '24px' }} size='middle' ghost>查看进度</Button>}
</div>
</div> </div>
</div>
} }
</div> </div>
)) ))
} }
<div className={styles.apply_item}> {/* 企业 */}
<Descriptions title="申请信息" column={1}> {(authType === 1 || authType === 2) &&
<Descriptions.Item label="公司名称">温州市隆昌皮业有限公司</Descriptions.Item> <div className={styles.apply_item}>
<Descriptions.Item label="统一社会信用代码">4324324325425435</Descriptions.Item> <Descriptions title="申请信息" column={1}>
<Descriptions.Item label="法人姓名">张三</Descriptions.Item> <Descriptions.Item label="公司名称">温州市隆昌皮业有限公司</Descriptions.Item>
<Descriptions.Item label="法人手机号">+86 185 2929 6758</Descriptions.Item> <Descriptions.Item label="统一社会信用代码">4324324325425435</Descriptions.Item>
<Descriptions.Item label="法人身份证号">321023 19891205 3746</Descriptions.Item> <Descriptions.Item label="法人姓名">张三</Descriptions.Item>
<Descriptions.Item label="认证方式">-</Descriptions.Item> <Descriptions.Item label="法人手机号">+86 185 2929 6758</Descriptions.Item>
<Descriptions.Item label="验证方式">-</Descriptions.Item> <Descriptions.Item label="法人身份证号">321023 19891205 3746</Descriptions.Item>
</Descriptions> <Descriptions.Item label="认证方式">-</Descriptions.Item>
</div> <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> </div>
</PageHeaderWrapper> </PageHeaderWrapper>
......
import React from 'react' import React, { useState, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Row, Col, Input, Button } from 'antd'; import { Card, Row, Col, Input, Button } from 'antd';
import { ColumnType } from 'antd/lib/table/interface'; import { ColumnType } from 'antd/lib/table/interface';
import { StandardTable } from 'god'; import { StandardTable } from 'god';
import { PublicApi } from '@/services/api'
const ClassSearch = () => { const ClassSearch = () => {
const ref = useRef<any>({});
//表头 //表头
const columns: ColumnType<any>[] = [{ const columns: ColumnType<any>[] = [{
title: 'ID', title: 'ID',
...@@ -22,6 +23,16 @@ const ClassSearch = () => { ...@@ -22,6 +23,16 @@ const ClassSearch = () => {
dataIndex: 'status', dataIndex: 'status',
}] }]
// 列表数据
const fetchData = (params?: any) => {
console.log(params)//可以直接打印参数
return new Promise((resolve, reject) => {
PublicApi.getContractParamPage({ ...params }).then(res => {
resolve(res.data)
})
})
}
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<Card> <Card>
...@@ -30,13 +41,15 @@ const ClassSearch = () => { ...@@ -30,13 +41,15 @@ const ClassSearch = () => {
rowKey: 'id', rowKey: 'id',
}} }}
columns={columns} columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
controlRender={ controlRender={
<Row> <Row>
<Col span={12}> <Col span={12}>
<Input.Search <Input.Search
style={{ width: '256px',marginRight: '24px',marginBottom: '24px' }} style={{ width: '256px',marginRight: '24px',marginBottom: '24px' }}
placeholder='搜索' placeholder='搜索'
/> />
<Button>重置</Button> <Button>重置</Button>
</Col> </Col>
</Row> </Row>
......
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
import React from 'react' import React, { useState } from 'react'
import { Button, Row, Col, Form, Input, Select } from 'antd' import { Button, Row, Col, Form, Input, Select } from 'antd'
import styles from '../index.less' import styles from '../index.less'
import cx from 'classnames' import cx from 'classnames'
import { QuestionCircleOutlined } from '@ant-design/icons'; 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 { Option } = Select;
const { authType, authTypeFn, checkPayWayFn } = props;
const [form] = Form.useForm(); const [form] = Form.useForm();
const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
// 测试表当提交效果 // 测试表当提交效果
const onSubmit = async () => { const onSubmit = async () => {
const value = await form.validateFields(); const value = await form.validateFields();
console.log(value) console.log(value)
} }
// 切换支付认证方式
const CheckPayWay = (type: number) => {
setPayWay(type)
checkPayWayFn(type)
}
return ( return (
<> <>
{/**认证方式*/} {/**企业认证方式*/}
<div className={styles.info_wrap}> {authType === 1 &&
<div className={styles.info_item}> <div className={styles.info_wrap}>
<div className={styles.info_item_con}> <div className={styles.info_item}>
<div className={styles.item_con}> <div className={styles.info_item_con}>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div> <div className={styles.item_con}>
<div className={styles.item_control}> <div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<Row className={styles.card_checkbox}> <div className={styles.item_control}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col> <Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col> <Col className={cx(styles.card_checkbox_item, payWay===1&&styles.active)} onClick={()=>CheckPayWay(1)}>支付宝验证</Col>
</Row> <Col className={cx(styles.card_checkbox_item, payWay===2&&styles.active)} onClick={()=>CheckPayWay(2)}>对公账户验证</Col>
</Row>
</div>
</div> </div>
</div> <div className={styles.item_con}>
<div className={styles.item_con}> <div className={styles.item_label}></div>
<div className={styles.item_label}></div> <div className={styles.item_control}>
<div className={styles.item_control}> <Button type='primary' onClick={()=>authTypeFn('', 2)}>下一步</Button>
<Button type='primary'>一步</Button> <Button onClick={()=>authTypeFn('', 0)}>一步</Button>
<Button>上一步</Button> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> }
{/**经办人认证*/} {/**经办人认证*/}
<div className={styles.info_wrap}> {authType === 2 &&
<div className={styles.info_item}> <div className={styles.info_wrap}>
<div className={styles.info_item_title}>企业信息核验</div> <div className={styles.info_item}>
<div className={styles.info_item_con}> <div className={styles.info_item_title}>企业信息核验</div>
<div className={styles.item_con}> <div className={styles.info_item_con}>
<div className={styles.item_label}>公司名称:</div> <div className={styles.item_con}>
<div className={styles.item_control}>温州市隆昌皮业有限公司</div> <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 className={styles.item_con}> </div>
<div className={styles.item_label}>统一社会信用代码:</div> <div className={styles.info_item}>
<div className={styles.item_control}>4324324325425435</div> <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>
</div> </div>
<div className={styles.info_item}> }
<div className={styles.info_item_title}>经办人信息核验</div> {/**个人认证方式*/}
<div className={styles.info_item_con}> {authType === 3 &&
<Form form={form}> <div className={styles.info_wrap}>
<Form.Item label='经办人' name='name' colon={false} rules={[{ required: true, message: '请输入经办人' }]}> <div className={styles.info_item}>
<Input /> <div className={styles.info_item_con}>
</Form.Item> <div className={styles.item_con}>
<Form.Item label='身份证号码' name='num' colon={false} rules={[{ required: true, message: '请输入身份证号码' }]}> <div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<Input /> <div className={styles.item_control}>
</Form.Item> <Row className={styles.card_checkbox}>
<Form.Item label='手机号码' colon={false} required={true}> <Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
<Row gutter={24}> <Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
<Col span={7}> </Row>
<Form.Item style={{width: '150px'}} name='code' rules={[{ required: true, message: '请选择区号' }]}> </div>
<Select style={{ width: '100%' }}> </div>
<Option value="Zhejiang">Zhejiang</Option> <div className={styles.item_con}>
<Option value="Jiangsu">Jiangsu</Option> <div className={styles.item_label}></div>
</Select> <div className={styles.item_control}>
</Form.Item> <Button type='primary'>下一步</Button>
</Col> <Button>上一步</Button>
<Col span={17}> </div>
<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>
</div> </div>
</div> }
</> </>
) )
} }
......
import React from 'react' import React, { useState } from 'react'
import styles from '../index.less' import styles from '../index.less'
import { Button, Row, Col } from 'antd' import { Button, Row, Col } from 'antd'
import cx from 'classnames' import cx from 'classnames'
import { QuestionCircleOutlined } from '@ant-design/icons'; 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 ( return (
<> <>
{/* 企业展示 */} {/* 企业展示 */}
<div className={styles.info_wrap}> {(authTypeEdit === '1' || authTypeEdit === '2') &&
<div className={styles.info_item}> <div className={styles.info_wrap}>
<div className={styles.info_item_title}>企业信息核验</div> <div className={styles.info_item}>
<div className={styles.info_item_con}> <div className={styles.info_item_title}>企业信息核验</div>
<div className={styles.item_con}> <div className={styles.info_item_con}>
<div className={styles.item_label}>公司名称:</div> <div className={styles.item_con}>
<div className={styles.item_control}>温州市隆昌皮业有限公司</div> <div className={styles.item_label}>公司名称:</div>
</div> <div className={styles.item_control}>温州市隆昌皮业有限公司</div>
<div className={styles.item_con}> </div>
<div className={styles.item_label}>统一社会信用代码:</div> <div className={styles.item_con}>
<div className={styles.item_control}>4324324325425435</div> <div className={styles.item_label}>统一社会信用代码:</div>
<div className={styles.item_control}>4324324325425435</div>
</div>
</div> </div>
</div> </div>
</div> <div className={styles.info_item}>
<div className={styles.info_item}> <div className={styles.info_item_title}>法人信息核验</div>
<div className={styles.info_item_title}>法人信息核验</div> <div className={styles.info_item_con}>
<div className={styles.info_item_con}> <div className={styles.item_con}>
<div className={styles.item_con}> <div className={styles.item_label}>法人姓名:</div>
<div className={styles.item_label}>法人姓名:</div> <div className={styles.item_control}>张三</div>
<div className={styles.item_control}>张三</div> </div>
</div> <div className={styles.item_con}>
<div className={styles.item_con}> <div className={styles.item_label}>法人手机号:</div>
<div className={styles.item_label}>法人手机号:</div> <div className={styles.item_control}>+86 185 2929 6758</div>
<div className={styles.item_control}>+86 185 2929 6758</div> </div>
</div> <div className={styles.item_con}>
<div className={styles.item_con}> <div className={styles.item_label}>法人身份证号:</div>
<div className={styles.item_label}>法人身份证号:</div> <div className={styles.item_control}>321023 19891205 3746</div>
<div className={styles.item_control}>321023 19891205 3746</div> </div>
</div> </div>
</div> </div>
</div> <div className={cx(styles.info_item, styles.info_dashed)}>
<div className={cx(styles.info_item, styles.info_dashed)}> <div className={styles.info_item_con}>
<div className={styles.info_item_con}> <div className={styles.item_con}>
<div className={styles.item_con}> <div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div> <div className={styles.item_control}>
<div className={styles.item_control}> <Row className={styles.card_checkbox}>
<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, styles.active)}>人认证</Col> <Col className={cx(styles.card_checkbox_item, authTypeBtn===2&&styles.active)} onClick={()=>checkAuthType(2)}>经办人认证</Col>
<Col className={cx(styles.card_checkbox_item, styles.active)}>经办人认证</Col> </Row>
</Row> </div>
</div> </div>
</div> <div className={styles.item_con}>
<div className={styles.item_con}> <div className={styles.item_label}></div>
<div className={styles.item_label}></div> <div className={styles.item_control}>
<div className={styles.item_control}> <Button type='primary' onClick={()=>authTypeFn(authTypeBtn, 1)}>下一步</Button>
<Button type='primary'>下一步</Button> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> }
{/* 个人展示 */} {/* 个人展示 */}
<div className={styles.info_wrap}> {authTypeEdit === '3' &&
<div className={styles.info_item}> <div className={styles.info_wrap}>
<div className={styles.info_item_title}>个人信息核验</div> <div className={styles.info_item}>
<div className={styles.info_item_con}> <div className={styles.info_item_title}>个人信息核验</div>
<div className={styles.item_con}> <div className={styles.info_item_con}>
<div className={styles.item_label}>姓名:</div> <div className={styles.item_con}>
<div className={styles.item_control}>张三</div> <div className={styles.item_label}>姓名:</div>
</div> <div className={styles.item_control}>张三</div>
<div className={styles.item_con}> </div>
<div className={styles.item_label}>手机号:</div> <div className={styles.item_con}>
<div className={styles.item_control}>+86 185 2929 6758</div> <div className={styles.item_label}>手机号:</div>
</div> <div className={styles.item_control}>+86 185 2929 6758</div>
<div className={styles.item_con}> </div>
<div className={styles.item_label}>身份证号:</div> <div className={styles.item_con}>
<div className={styles.item_control}>321023 19891205 3746</div> <div className={styles.item_label}>身份证号:</div>
</div> <div className={styles.item_control}>321023 19891205 3746</div>
<div className={styles.item_con}> </div>
<div className={styles.item_label}></div> <div className={styles.item_con}>
<div className={styles.item_control}> <div className={styles.item_label}></div>
<Button type='primary'>下一步</Button> <div className={styles.item_control}>
<Button type='primary'>下一步</Button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> }
</> </>
) )
} }
......
...@@ -3,10 +3,16 @@ import styles from './index.less' ...@@ -3,10 +3,16 @@ import styles from './index.less'
import { Steps } from 'antd' import { Steps } from 'antd'
const { Step } = Steps; const { Step } = Steps;
const StepComponents = () => { interface stepProps {
step: number,
}
const StepComponents: React.FC<stepProps> = (props) => {
const { step } = props;
return ( return (
<div className={styles.step_info}> <div className={styles.step_info}>
<Steps size="small" current={0}> <Steps size="small" current={step}>
<Step title="企业信息核验" /> <Step title="企业信息核验" />
<Step title="经办人/法人认证" /> <Step title="经办人/法人认证" />
<Step title="企业认证" /> <Step title="企业认证" />
......
import React from 'react' import React, { useState } from 'react'
import { history } from 'umi' import { history } from 'umi'
import ReutrnEle from '@/components/ReturnEle'; import ReutrnEle from '@/components/ReturnEle';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import StepComponents from '../components/steps' import StepComponents from '../components/steps'
import EnterpriseInfoCheck from '../components/enterpriseInfoCheck' import EnterpriseInfoCheck from '../components/enterpriseInfoCheck'
import Corporate from '../components/corporate' import Corporate from '../components/corporate'
import Alipay from '../components/alipay'
import PublicAccount from '../components/publicAccount' import PublicAccount from '../components/publicAccount'
const EnterpriseCertified = () => { 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 ( return (
<PageHeaderWrapper <PageHeaderWrapper
onBack={() => history.goBack()} onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />} backIcon={<ReutrnEle description="返回" />}
> >
<StepComponents /> <StepComponents step={step} />
<EnterpriseInfoCheck /> {step === 0 &&
<Corporate /> <EnterpriseInfoCheck
{/**<Alipay />*/} authTypeEdit={authTypeEdit}
<PublicAccount /> authTypeFn={authTypeFn}
/>
}
{step === 1 &&
<Corporate
authType={authType}
checkPayWayFn={checkPayWayFn}
authTypeFn={authTypeFn}
/>
}
{step === 2 &&
<PublicAccount
authType={authType}
payWay={payWay}
/>}
</PageHeaderWrapper> </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