Skip to content

J
jinfa-platform
Commit 9b5d4b97 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

feat: 添加e账户认证企业认证页面，对接销售订单查询生成支付链接和二维码功能

parent 19ac5900
Hide whitespace changes
Inline Side-by-side
Showing with 789 additions and 133 deletions
config/config.ts
View file @ 9b5d4b97
...@@ -80,10 +80,10 @@ const config: any = { ...@@ -80,10 +80,10 @@ const config: any = {
}, },
'@umijs/hooks', '@umijs/hooks',
], // 将下划线转化关闭 ], // 将下划线转化关闭
[ // [
'transform-remove-console', // 'transform-remove-console',
{ exclude: ['error', 'warn'] }, // { exclude: ['error', 'warn'] },
], // ],
], ],
history: { history: {
type: 'browser', // 'brower' | 'hash' type: 'browser', // 'brower' | 'hash'
......
config/routes/index.ts
View file @ 9b5d4b97
...@@ -83,7 +83,7 @@ const memberCenterRoute = { ...@@ -83,7 +83,7 @@ const memberCenterRoute = {
// AuthConfigRoute, // AuthConfigRoute,
// MemberRoute, // MemberRoute,
// HandlingRoute, // HandlingRoute,
PayandSettleRoute, // PayandSettleRoute,
// marketingRoute, // marketingRoute,
// DealAbilityRoute, // DealAbilityRoute,
// ...asyncRoutes, // ...asyncRoutes,
......
src/pages/commodity/products/index.tsx
View file @ 9b5d4b97
...@@ -70,6 +70,7 @@ const Products: React.FC<{}> = () => { ...@@ -70,6 +70,7 @@ const Products: React.FC<{}> = () => {
const [currentOptionId, setCurrentOptionId] = useState<number>() const [currentOptionId, setCurrentOptionId] = useState<number>()
const [isDisabledOKbtn, setIsDisabledOKbtn] = useState<boolean>(false) const [isDisabledOKbtn, setIsDisabledOKbtn] = useState<boolean>(false)
const [exportQrcodeModal, setExportQrcodeModal] = useState<boolean>(false) const [exportQrcodeModal, setExportQrcodeModal] = useState<boolean>(false)
const [exportLoading, setExportLoading] = useState<boolean>(false)
const currentRef = useRef<any>([]) const currentRef = useRef<any>([])
const currentRefRow = useRef<any>([]) const currentRefRow = useRef<any>([])
const upperRef = useRef<any>({}) const upperRef = useRef<any>({})
...@@ -530,15 +531,12 @@ const Products: React.FC<{}> = () => { ...@@ -530,15 +531,12 @@ const Products: React.FC<{}> = () => {
let a: any = document.createElement("a") let a: any = document.createElement("a")
document.body.appendChild(a) document.body.appendChild(a)
a.style = "display: none" a.style = "display: none"
setExportLoading(true)
postProductCommodityExportCommodityQrCode({idList: currentRef.current}, { responseType: 'blob', getResponse: true }).then((res:any) => { postProductCommodityExportCommodityQrCode({idList: currentRef.current}, { responseType: 'blob', getResponse: true }).then((res:any) => {
const { code, data, response } = res const { code, data, response } = res
const filename = response.headers.get('content-disposition').split('=')[1] const filename = response.headers.get('content-disposition').split('=')[1]
console.log(filename)
if(code) { if(code) {
setTimeout(() => { throw new TypeError(res.message)
setExportQrcodeModal(false)
message.error(res.message)
}, 1500)
} else { } else {
let blob = new Blob([data], {type: "application/x-zip-compressed"}) let blob = new Blob([data], {type: "application/x-zip-compressed"})
// let objectUrl = URL.createObjectURL(blob) // let objectUrl = URL.createObjectURL(blob)
...@@ -548,12 +546,13 @@ const Products: React.FC<{}> = () => { ...@@ -548,12 +546,13 @@ const Products: React.FC<{}> = () => {
a.download = filename; a.download = filename;
a.click(); a.click();
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
setTimeout(() => {
setExportQrcodeModal(false)
message.success('导出成功')
}, 1500)
} }
}).catch(error =>{
message.error(error)
}).finally(() => {
setExportLoading(false)
message.success('导出成功')
setExportQrcodeModal(false)
}) })
} }
...@@ -794,6 +793,7 @@ const Products: React.FC<{}> = () => { ...@@ -794,6 +793,7 @@ const Products: React.FC<{}> = () => {
visible={exportQrcodeModal} visible={exportQrcodeModal}
onOk={handleExportQrcode} onOk={handleExportQrcode}
onCancel={() => setExportQrcodeModal(false)} onCancel={() => setExportQrcodeModal(false)}
confirmLoading={exportLoading}
> >
<h1>列表勾选：{currentRef.current.length || 0}个商品</h1> <h1>列表勾选：{currentRef.current.length || 0}个商品</h1>
<h2>说明：</h2> <h2>说明：</h2>
......
src/pages/payandSettle/eAccountApprove/components/company/index.tsx 0 → 100644
View file @ 9b5d4b97
import React, { useContext, useState } from 'react'
import { Button, Col, Form, Input, Row, Select } from 'antd'
import MellowCard from '@/components/MellowCard';
import { EDetailContext, formItemLayout, formItemLayoutCompany, prefixSelector, tailFormItemLayout, tailFormItemLayoutCompany } from '../../constant';
import { EditOutlined } from '@ant-design/icons';
import UploadImage from '@/components/UploadImage';
/** 企业 初始认证 */
const Company: React.FC<{}> = () => {
const { Option } = Select;
const [form1] = Form.useForm();
const [form2] = Form.useForm();
const eDetailContext = useContext(EDetailContext)
const { ctl } = eDetailContext
const [idCardAheadImg, setIdCardAheadImg] = useState<string>()
const [idCardBehindImg, setIdCardBehindImg] = useState<string>()
const [certificateImg, setCertificateImg] = useState<string>()
const onFinish = (values: any) => {
ctl.setApproved(true)
ctl.setFinish(true)
console.log('Received values of form: ', values);
};
const clickSign = () => {
form2.setFieldsValue({'electric': 10086})
}
return (<>
<MellowCard headStyle={{borderBottom:'none'}} title="企业认证（1/2）">
<Form
{...formItemLayoutCompany}
form={form1}
name="approve-form1"
onFinish={onFinish}
initialValues={{
prefix: '86',
}}
scrollToFirstError
colon={false}
labelAlign='left'
>
<Row>
<Col span={12}>
<Form.Item
name="company"
label="企业名称"
rules={[
{
required: true,
message: '请输入企业名称',
},
]}
>
<Input placeholder="请输入企业名称" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="account"
label="企业对公账户"
rules={[
{
required: true,
message: '请输入企业对公账户',
},
]}
>
<Input placeholder="请输入企业对公账户" />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
name="name"
label="法人姓名"
rules={[
{
required: true,
message: '请输入法人姓名',
},
]}
>
<Input placeholder="请输入法人姓名" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="blank"
label="开户银行名称"
rules={[
{
required: true,
message: '请输入开户银行名称',
},
]}
>
<Input placeholder="请输入开户银行名称" />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
name="type"
label="法人证件类型"
rules={[
{
required: true,
message: '请选择法人证件类型',
},
]}
>
<Select placeholder="请选择法人证件类型">
<Option value="1">身份证</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="blankPart"
label="开户银行支行名称"
rules={[
{
required: true,
message: '请输入开户银行支行名称',
},
]}
>
<Input placeholder="请输入开户银行支行名称" />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
name="idcard"
label="法人证件号码"
rules={[
{
required: true,
message: '请输入法人证件号码',
},
]}
>
<Input placeholder="请输入法人证件号码" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="blankNo"
label="支行行号"
rules={[
{
required: true,
message: '请输入支行行号',
},
]}
>
<Input placeholder="请输入支行行号" />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
name="phone"
label="法人手机号码"
rules={[{ required: true, message: '请输入法人手机号码' }]}
>
<Input addonBefore={prefixSelector} style={{ width: '100%' }} placeholder="请输入法人手机号码" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="idCardBehind"
label="法人证件反面照"
rules={[{ required: true, message: '请上传法人证件反面照' }]}
>
<UploadImage
imgUrl={idCardBehindImg}
fileMaxSize={700}
onChange={(val) => {
setIdCardBehindImg(val)
form1.setFieldsValue({
idCardBehind: val
})
}}
/>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
name="idCardAhead"
label="法人证件正面照"
rules={[{ required: true, message: '请上传法人证件正面照' }]}
>
<UploadImage
imgUrl={idCardAheadImg}
fileMaxSize={700}
onChange={(val) => {
setIdCardAheadImg(val)
form1.setFieldsValue({
idCardAhead: val
})
}}
/>
</Form.Item>
</Col>
<Col span={12}>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
name="certificate"
label="企业营业执照"
rules={[{ required: true, message: '请上传企业营业执照' }]}
>
<UploadImage
imgUrl={certificateImg}
fileMaxSize={700}
onChange={(val) => {
setCertificateImg(val)
form1.setFieldsValue({
certificate: val
})
}}
/>
</Form.Item>
</Col>
<Col span={12}>
</Col>
</Row>
<Form.Item {...tailFormItemLayoutCompany}>
<Button type="primary" htmlType="submit">
下一步
</Button>
</Form.Item>
</Form>
</MellowCard>
<MellowCard headStyle={{borderBottom:'none'}} title="企业认证（2/2）">
<Form
{...formItemLayout}
form={form2}
name="approve-form2"
onFinish={onFinish}
initialValues={{
prefix: '86',
}}
scrollToFirstError
colon={false}
labelAlign='left'
>
<Form.Item
name="phone"
label="法人手机号码"
rules={[{ required: true, message: '请输入法人手机号码' }]}
>
<Input addonBefore={prefixSelector} style={{ width: '100%' }} placeholder="请输入法人手机号码" />
</Form.Item>
<Form.Item label="验证码">
<Row gutter={8}>
<Col span={20}>
<Form.Item
name="captcha"
noStyle
rules={[{ required: true, message: '请输入验证码' }]}
>
<Input placeholder="请输入验证码" />
</Form.Item>
</Col>
<Col span={4}>
<Button>获取验证码</Button>
</Col>
</Row>
</Form.Item>
<Form.Item
label="电子协议签约"
name="electric"
rules={[{ required: true, message: '请签约电子协议' }]}
>
<Button onClick={clickSign} icon={<EditOutlined />} style={{width: '100%'}}>前往签约</Button>
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
</MellowCard>
</>)
}
export default Company
src/pages/payandSettle/eAccountApprove/components/finish/index.tsx → src/pages/payandSettle/eAccountApprove/components/companyFinish/index.tsx
View file @ 9b5d4b97
import React from 'react' import React, { useContext } from 'react'
import { Button, Card, Col, Row } from 'antd' import { Button, Col, Form, Row, Image } from 'antd'
import MellowCard from '@/components/MellowCard';
import styles from './index.less' import styles from './index.less'
import MellowCard from '@/components/MellowCard' import { EDetailContext } from '../../constant'
import { div } from '@/pages/editor/configs/componentConfigs/HTML'
import { SoundOutlined } from '@ant-design/icons'
interface IFinsh { /** 企业认证详情 */
isFinsh: boolean, const CompanyFinish: React.FC<{}> = () => {
} const [form] = Form.useForm();
const eDetailContext = useContext(EDetailContext)
const Finish: React.FC<IFinsh> = (props) => { const { ctl, finish, perfection, approved } = eDetailContext
const { isFinsh = false } = props
return (<div> return (<div>
<MellowCard headStyle={{borderBottom:'none'}} title="个人信息"> <MellowCard headStyle={{borderBottom:'none'}} title="企业信息" id="companyInfo">
<Row> <Row>
<Col span={12}> <Col span={12}>
<Row className={styles['card-list']}> <Row className={styles['card-list']}>
...@@ -42,37 +40,38 @@ const Finish: React.FC<IFinsh> = (props) => { ...@@ -42,37 +40,38 @@ const Finish: React.FC<IFinsh> = (props) => {
</Row> </Row>
</Col> </Col>
</Row> </Row>
</MellowCard> <Row>
{ <Col span={12}>
isFinsh ? <> <Row className={styles['card-list']}>
<MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="银行账户"> <Col span={6} className={styles['card-list_title']}>法人证件正面照</Col>
<Row> <Col>
<Col span={12}> <Image
<Row className={styles['card-list']}> width={104}
<Col span={6} className={styles['card-list_title']}>银行账号</Col> src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
<Col><p><span>188888888888</span><Button type="link">解绑</Button></p></Col> />
</Row>
</Col>
<Col span={12}>
<Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>姓名</Col>
<Col>吴彦祖</Col>
</Row>
</Col> </Col>
</Row> </Row>
</MellowCard> </Col>
<MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="电子协议"> <Col span={12}>
<Row className={styles['card-list']}> <Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>电子协议</Col> <Col span={6} className={styles['card-list_title']}>法人证件反面照</Col>
<Col><p><span>188888888888</span><Button type="link">查看签约协议</Button></p></Col> <Col>
<Image
width={104}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</Col>
</Row> </Row>
</MellowCard> </Col>
</> : <MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title=""> </Row>
<h3><SoundOutlined style={{color:'#00A98F'}} /> 进一步完善资料，可实现提现功能~</h3> </MellowCard>
<Button type="primary">立即完善</Button> <MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="电子协议" id="electricInfo">
</MellowCard> <Row className={styles['card-list']}>
} <Col span={6} className={styles['card-list_title']}>电子协议</Col>
<Col><p><span>188888888888</span><Button type="link">查看签约协议</Button></p></Col>
</Row>
</MellowCard>
</div>) </div>)
} }
export default Finish export default CompanyFinish
src/pages/payandSettle/eAccountApprove/components/header/index.tsx
View file @ 9b5d4b97
...@@ -11,10 +11,14 @@ export interface ILink { ...@@ -11,10 +11,14 @@ export interface ILink {
id: string; id: string;
} }
interface BackFn {
(): void;
}
export interface EDetailHeaderProps { export interface EDetailHeaderProps {
extraRight?: ReactNode, extraRight?: ReactNode,
anchorList?: ILink[], anchorList?: ILink[],
backLink?: string | boolean, backLink?: string | boolean | BackFn,
title: string, title: string,
} }
...@@ -70,6 +74,10 @@ const EDetailHeader: React.FC<EDetailHeaderProps> = ({ ...@@ -70,6 +74,10 @@ const EDetailHeader: React.FC<EDetailHeaderProps> = ({
} }
} }
const handleBack = () => {
typeof backLink === 'string' ? (typeof backLink === 'function' ? backLink() : history.push(backLink)) : history.goBack()
}
return ( return (
<div <div
className={isFixed ? [style.detailHeader, style.anchorTitleFixed].join(' ') : style.detailHeader} className={isFixed ? [style.detailHeader, style.anchorTitleFixed].join(' ') : style.detailHeader}
...@@ -80,7 +88,7 @@ const EDetailHeader: React.FC<EDetailHeaderProps> = ({ ...@@ -80,7 +88,7 @@ const EDetailHeader: React.FC<EDetailHeaderProps> = ({
<Row align='middle'> <Row align='middle'>
{ {
backLink ? <Col> backLink ? <Col>
<ArrowLeftOutlined onClick={() => typeof backLink === 'string' ? history.push(backLink) : history.goBack()} /> <ArrowLeftOutlined onClick={handleBack} />
</Col> : null </Col> : null
} }
<Col> <Col>
......
src/pages/payandSettle/eAccountApprove/components/personal/index.tsx
View file @ 9b5d4b97
import React from 'react' import React, { useContext } from 'react'
import { Button, Card, Col, Form, Input, Row, Select } from 'antd' import { Button, Col, Form, Input, Row, Select } from 'antd'
import MellowCard from '@/components/MellowCard'; import MellowCard from '@/components/MellowCard';
import { EDetailContext, formItemLayout, prefixSelector, tailFormItemLayout } from '../../constant';
/** 个人 初始认证 */
const Personal: React.FC<{}> = () => { const Personal: React.FC<{}> = () => {
const { Option } = Select; const { Option } = Select;
const [form] = Form.useForm(); const [form] = Form.useForm();
const eDetailContext = useContext(EDetailContext)
const { ctl } = eDetailContext
const onFinish = (values: any) => { const onFinish = (values: any) => {
ctl.setApproved(true)
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
}; };
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 2 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 10 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 2,
offset: 2,
},
},
};
const prefixSelector = (
<Form.Item name="prefix" noStyle>
<Select style={{ width: 70 }}>
<Option value="86">+86</Option>
</Select>
</Form.Item>
);
return ( return (
<MellowCard headStyle={{borderBottom:'none'}} title="个人认证"> <MellowCard headStyle={{borderBottom:'none'}} title="个人认证">
<Form <Form
{...formItemLayout} {...formItemLayout}
form={form} form={form}
name="register" name="approve-form"
onFinish={onFinish} onFinish={onFinish}
initialValues={{ initialValues={{
prefix: '86', prefix: '86',
......
src/pages/payandSettle/eAccountApprove/components/personalFinish/index.less 0 → 100644
View file @ 9b5d4b97
.card-list {
font-size: 12px;
line-height: 20px;
margin-top: 24px;
}
.card-list_title {
font-size: 12px;
color: #909399;
}
src/pages/payandSettle/eAccountApprove/components/personalFinish/index.tsx 0 → 100644
View file @ 9b5d4b97
import React, { useContext, useState } from 'react'
import { Button, Col, Form, Input, Row, Select } from 'antd'
import styles from './index.less'
import MellowCard from '@/components/MellowCard'
import { EditOutlined, SoundOutlined } from '@ant-design/icons'
import { EDetailContext, formItemLayout, tailFormItemLayout } from '../../constant'
/** 个人详情和进一步完善 */
const PersonalFinish: React.FC<{}> = () => {
const [form] = Form.useForm();
const eDetailContext = useContext(EDetailContext)
const { ctl, finish, perfection, approved } = eDetailContext
const onFinish = (values: any) => {
ctl.setFinish(true) // 已经完善
ctl.setPerfection(false) // 不需要完善
ctl.setShowAnchor(true)
console.log('Received values of form: ', values);
};
const clickSign = () => {
form.setFieldsValue({'electric': 10086})
}
return (!perfection ? <div>
<MellowCard headStyle={{borderBottom:'none'}} title="个人信息" id="personalInfo">
<Row>
<Col span={12}>
<Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>姓名</Col>
<Col>吴彦祖</Col>
</Row>
</Col>
<Col span={12}>
<Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>姓名</Col>
<Col>吴彦祖</Col>
</Row>
</Col>
</Row>
<Row>
<Col span={12}>
<Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>姓名</Col>
<Col>吴彦祖</Col>
</Row>
</Col>
<Col span={12}>
<Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>手机号</Col>
<Col><p><span>188888888888</span><Button type="link">解绑</Button></p></Col>
</Row>
</Col>
</Row>
</MellowCard>
{
finish ? <>
<MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="银行账户" id="accountInfo">
<Row>
<Col span={12}>
<Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>银行账号</Col>
<Col><p><span>188888888888</span><Button type="link">解绑</Button></p></Col>
</Row>
</Col>
<Col span={12}>
<Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>姓名</Col>
<Col>吴彦祖</Col>
</Row>
</Col>
</Row>
</MellowCard>
<MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="电子协议" id="electricInfo">
<Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>电子协议</Col>
<Col><p><span>188888888888</span><Button type="link">查看签约协议</Button></p></Col>
</Row>
</MellowCard>
</> : <MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="">
<h3><SoundOutlined style={{color:'#00A98F'}} /> 进一步完善资料，可实现提现功能~</h3>
<Button type="primary" onClick={() => ctl.setPerfection(true)}>立即完善</Button>
</MellowCard>
}
</div> : <div>
<MellowCard headStyle={{borderBottom:'none'}} title="完善信息">
<Form
{...formItemLayout}
form={form}
name="perfection-form"
onFinish={onFinish}
initialValues={{
prefix: '86',
}}
scrollToFirstError
colon={false}
labelAlign='left'
>
<Form.Item
name="name"
label="银行账号"
rules={[
{
required: true,
message: '请输入银行账号',
},
]}
>
<Input placeholder="请输入银行账号" />
</Form.Item>
<Form.Item
name="idcard"
label="开户行"
rules={[
{
required: true,
message: '请输入开户行',
},
]}
>
<Input placeholder="请输入开户行" />
</Form.Item>
<Form.Item label="验证码">
<Row gutter={8}>
<Col span={20}>
<Form.Item
name="captcha"
noStyle
rules={[{ required: true, message: '请输入验证码' }]}
>
<Input placeholder="请输入验证码" />
</Form.Item>
</Col>
<Col span={4}>
<Button>获取验证码</Button>
</Col>
</Row>
</Form.Item>
<Form.Item
label="电子协议签约"
name="electric"
rules={[{ required: true, message: '请签约电子协议' }]}
>
<Button onClick={clickSign} icon={<EditOutlined />} style={{width: '100%'}}>前往签约</Button>
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
</MellowCard>
</div>)
}
export default PersonalFinish
src/pages/payandSettle/eAccountApprove/constant.tsx 0 → 100644
View file @ 9b5d4b97
import { createContext } from 'react';
import { Form, Select } from 'antd';
const { Option } = Select;
// e账户认证 组件切换控制 Context
export const EDetailContext = createContext<any>({})
// form布局
export const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 2 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 10 },
},
};
export const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 2,
offset: 2,
},
},
};
export const formItemLayoutCompany = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
},
};
export const tailFormItemLayoutCompany = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 2,
offset: 2,
},
},
};
export const prefixSelector = (
<Form.Item name="prefix" noStyle>
<Select style={{ width: 70 }}>
<Option value="86">+86</Option>
</Select>
</Form.Item>
);
src/pages/payandSettle/eAccountApprove/effects/useEDetail.tsx 0 → 100644
View file @ 9b5d4b97
import { useCallback, useState, useEffect } from 'react'
import { message } from 'antd'
export const useEDetail = () => {
/** 详情数据 */
const [formData, setFormData] = useState<any>(null)
/** 企业/个人 */
const [type, setType] = useState<'company'|'personal'>('company')
/** 是否认证过 */
const [approved, setApproved] = useState<boolean>(false)
/** 是否需要完善 */
const [perfection, setPerfection] = useState<boolean>(false)
/** 是否完善过 */
const [finish, setFinish] = useState<boolean>(false)
/** 是否显示返 */
const [backed, setBacked] = useState<boolean>(false)
/** 是否显示锚点导航 */
const [showAnchor, setShowAnchor] = useState<boolean>(false)
useEffect(() => {
reloadFormData()
}, [])
const reloadFormData = useCallback(async () => {
// const fn = switchApi(type);
// let params: any = {};
// params[switchParamField(type)] = id
// const { code, data, message: msg } = await fn(params, { ctlType: "none" })
// if (code === 1000) {
setFormData({})
// } else {
// message.error(msg)
// }
}, [])
// 需共享的状态
const formContext = {
data: formData,
type,
approved,
finish,
perfection,
backed,
showAnchor,
ctl: {
setFormData,
setApproved,
setPerfection,
setBacked,
setShowAnchor,
setType,
setFinish
},
reloadFormData,
}
return {
formContext,
}
}
src/pages/payandSettle/eAccountApprove/index.tsx
View file @ 9b5d4b97
...@@ -2,34 +2,48 @@ import React from 'react' ...@@ -2,34 +2,48 @@ import React from 'react'
import EDetailHeader from './components/header' import EDetailHeader from './components/header'
import Personal from './components/personal' import Personal from './components/personal'
import styles from './index.less' import styles from './index.less'
import Finish from './components/finish' import { EDetailContext } from './constant'
import { useEDetail } from './effects/useEDetail'
import PersonalFinish from './components/personalFinish'
import Company from './components/company'
import CompanyFinish from './components/companyFinish'
const EAccountApprove: React.FC<{}> = () => { const EAccountApprove: React.FC<{}> = () => {
// 个人 or 企业 const { formContext } = useEDetail()
const personal = true
// 未认证
const approved = true
// 未完善
const finish = true
const linkList = [ const {
type,
approved,
perfection,
finish,
backed,
showAnchor } = formContext
const personalLinkList = [
{ title: '个人信息', id: 'personalInfo' }, { title: '个人信息', id: 'personalInfo' },
{ title: '账户信息', id: 'accountInfo' }, { title: '账户信息', id: 'accountInfo' },
{ title: '电子协议', id: 'electricInfo' }, { title: '电子协议', id: 'electricInfo' },
] ]
const companyLinkList = [
{ title: '企业信息', id: 'companyInfo' },
{ title: '电子协议', id: 'electricInfo' },
]
return ( return (
<div> <div>
<EDetailHeader <EDetailContext.Provider value={formContext}>
title="通联账户" <EDetailHeader
anchorList={finish ? linkList : []} title="通联账户"
/> anchorList={finish ? (type === "personal" ? personalLinkList : companyLinkList) : []}
<div className={styles.wrapper}> />
{ <div className={styles.wrapper}>
approved ? <Finish isFinsh={finish} /> : <Personal /> {
} type === 'personal' ? (approved ? <PersonalFinish /> : <Personal />) : (approved ? <CompanyFinish /> : <Company />)
</div> }
</div>
</EDetailContext.Provider>
</div> </div>
) )
} }
......
src/pages/trademark/addBrand.tsx
View file @ 9b5d4b97
...@@ -117,6 +117,7 @@ const AddBrand: React.FC<{}> = () => { ...@@ -117,6 +117,7 @@ const AddBrand: React.FC<{}> = () => {
// console.log(info) // console.log(info)
// const { code, data } = info.file.response // const { code, data } = info.file.response
// if (code === 1000) { // if (code === 1000) {
console.log(data, 'data')
setlogoUrl(data) setlogoUrl(data)
form.setFieldsValue({ logoUrl: data }) form.setFieldsValue({ logoUrl: data })
// } // }
...@@ -244,7 +245,7 @@ const AddBrand: React.FC<{}> = () => { ...@@ -244,7 +245,7 @@ const AddBrand: React.FC<{}> = () => {
]} ]}
className={styles.uploadForm} className={styles.uploadForm}
> >
<UploadImage {/* <UploadImage
disabled={banSomeField} disabled={banSomeField}
listType="picture-card" listType="picture-card"
showUploadList={false} showUploadList={false}
...@@ -252,6 +253,16 @@ const AddBrand: React.FC<{}> = () => { ...@@ -252,6 +253,16 @@ const AddBrand: React.FC<{}> = () => {
onChange={handleUploadLogoChange} onChange={handleUploadLogoChange}
imgUrl={logoUrl} imgUrl={logoUrl}
fileMaxSize={60} fileMaxSize={60}
/> */}
<UploadImage
imgUrl={logoUrl}
fileMaxSize={60}
onChange={(val) => {
setlogoUrl(val)
form.setFieldsValue({
logoUrl: val
})
}}
/> />
</Form.Item> </Form.Item>
</Card> </Card>
......
src/pages/transaction/saleOrder/index.less
View file @ 9b5d4b97
...@@ -39,7 +39,10 @@ ...@@ -39,7 +39,10 @@
} }
} }
.appPayRight { .appPayRight {
width: 160px;
margin-left: 12px;
p { p {
width: 160px;
color: #91959B; color: #91959B;
img { img {
vertical-align: middle; vertical-align: middle;
......
src/pages/transaction/saleOrder/index.tsx
View file @ 9b5d4b97
import React, { useRef, useState } from 'react' import React, { useEffect, useRef, useState } from 'react'
import { Card, Button, Space, message, Modal, Form, Row, Col, Input } from 'antd' import { Card, Button, Space, message, Modal, Form, Row, Col, Input, Spin } from 'antd'
import { StandardTable } from 'god' import { StandardTable } from 'god'
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { baseOrderListColumns, useTransformOrderTable } from './constant' import { baseOrderListColumns, useTransformOrderTable } from './constant'
...@@ -16,8 +16,9 @@ import { useHttpRequest } from '@/hooks/useHttpRequest' ...@@ -16,8 +16,9 @@ import { useHttpRequest } from '@/hooks/useHttpRequest'
import TableOperation from '@/components/TableOperation' import TableOperation from '@/components/TableOperation'
import { getAuth } from '@/utils/auth' import { getAuth } from '@/utils/auth'
import styles from './index.less' import styles from './index.less'
import QRCode from 'qrcode'
import { MEMBER_ROLE_TYPE_SERVICE_CONSUMER } from '@/constants/member' import { MEMBER_ROLE_TYPE_SERVICE_CONSUMER } from '@/constants/member'
import { getOrderVendorGeneratePayLink, getOrderVendorPage, postOrderVendorCancel, postOrderVendorTerminate, postOrderVendorTransfer, postOrderVendorTransferPreview } from '@/services/OrderNewV2Api' import { getOrderVendorGeneratePayLink, GetOrderVendorGeneratePayLinkResponse, getOrderVendorMiniAppCode, getOrderVendorPage, postOrderVendorCancel, postOrderVendorTerminate, postOrderVendorTransfer, postOrderVendorTransferPreview } from '@/services/OrderNewV2Api'
import appImg from '@/assets/icons/app.png' import appImg from '@/assets/icons/app.png'
import miniappImg from '@/assets/icons/miniapp.png' import miniappImg from '@/assets/icons/miniapp.png'
import scanImg from '@/assets/icons/scan.png' import scanImg from '@/assets/icons/scan.png'
...@@ -26,6 +27,20 @@ import scanImg from '@/assets/icons/scan.png' ...@@ -26,6 +27,20 @@ import scanImg from '@/assets/icons/scan.png'
export interface SaleOrderProps { } export interface SaleOrderProps { }
// 订单来源商城类型
export const WED = 1;
export const H5 = 2;
export const MINIAPP = 3;
export const APP = 4;
// 单来源商城类型对应字符
export const ORDER_SHOP_ORIGIN_MAP = {
[WED]: 'web',
[H5]: 'h5',
[MINIAPP]: 'miniapp',
[APP]: 'app',
};
const fetchTableData = async (params) => { const fetchTableData = async (params) => {
const { data } = await getOrderVendorPage(params) const { data } = await getOrderVendorPage(params)
return data return data
...@@ -44,6 +59,8 @@ const SaleOrder: React.FC<SaleOrderProps> = () => { ...@@ -44,6 +59,8 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
const [payChartVisible, setPayChartVisible] = useState<boolean>(false) const [payChartVisible, setPayChartVisible] = useState<boolean>(false)
const [payForm] = Form.useForm(); const [payForm] = Form.useForm();
const [payModel, setPayModel] = useState<'web'|'app'|'miniapp'|null>('app') const [payModel, setPayModel] = useState<'web'|'app'|'miniapp'|null>('app')
const currentPayRef = useRef<GetOrderVendorGeneratePayLinkResponse>({})
const [qrCode, setQrCode] = useState('')
const { run, loading } = useHttpRequest(postOrderVendorCancel) const { run, loading } = useHttpRequest(postOrderVendorCancel)
const { run: runPause, loading: loadingEnd } = useHttpRequest(postOrderVendorTerminate) const { run: runPause, loading: loadingEnd } = useHttpRequest(postOrderVendorTerminate)
...@@ -93,10 +110,41 @@ const SaleOrder: React.FC<SaleOrderProps> = () => { ...@@ -93,10 +110,41 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
history.push(`${history.location.pathname}/preview?id=${record.orderId}&modifyPrice=true`) history.push(`${history.location.pathname}/preview?id=${record.orderId}&modifyPrice=true`)
} }
useEffect(() => {
if(payModel === "web") {
payForm.setFieldsValue({'payChart': `/memberCenter/tranactionAbility/purchaseOrder/readyPayOrder/detail?id=${currentPayRef.current.orderId}`})
} else if(payModel === "app") {
// 生成二维码
QRCode.toDataURL(JSON.stringify({path: 'MycommodityDetails', orderId: currentPayRef.current.orderId})).then((url:any) => {
setQrCode(url)
}).catch((err:any) => {
console.error(err)
})
} else if(payModel === "miniapp"){
getOrderVendorMiniAppCode({orderId: currentPayRef.current.orderId + ''}).then(res => {
setQrCode(res.data)
})
}
}, [payModel, currentPayRef.current])
const onSave = () => {
const img: any = document.getElementById('qrcodeElement');
const canvas = document.createElement('canvas');
// console.log(img)
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
const url = canvas.toDataURL('image/png');
var downloadLink = document.getElementById('downloadLink');
downloadLink.setAttribute('href', url);
downloadLink.setAttribute('download', '二维码.png');
downloadLink.click();
}
const generatePayChart = (record) => { const generatePayChart = (record) => {
console.log(record, 'record')
getOrderVendorGeneratePayLink({orderId: record.orderId}).then(({ data }) => { getOrderVendorGeneratePayLink({orderId: record.orderId}).then(({ data }) => {
console.log(data.buyerMemberName, 'data') currentPayRef.current = data
setPayModel(ORDER_SHOP_ORIGIN_MAP[data['shopEnvironment']])
setPayChartVisible(true) setPayChartVisible(true)
}) })
} }
...@@ -490,15 +538,17 @@ const SaleOrder: React.FC<SaleOrderProps> = () => { ...@@ -490,15 +538,17 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
onCancel={() => setPayChartVisible(false)} onCancel={() => setPayChartVisible(false)}
footer={false} footer={false}
width={600} width={600}
destroyOnClose={true}
afterClose={()=>setQrCode('')}
> >
<div> <div>
{ {
payModel === 'web' && <Form form={payForm} name="pay-form" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}> payModel === 'web' && <Form form={payForm} name="pay-form" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
<Form.Item label="当前订单" name="order"> <Form.Item label="当前订单" name="order">
<span>中国建设银行广州市分行营业部</span> <span>{currentPayRef.current.orderNo}</span>
</Form.Item> </Form.Item>
<Form.Item label="订单来源" name="origin"> <Form.Item label="订单来源" name="origin">
<span>中国建设银行广州市分行营业部</span> <span>{currentPayRef.current.shopName}</span>
</Form.Item> </Form.Item>
<Form.Item label="支付链接"> <Form.Item label="支付链接">
<Row> <Row>
...@@ -507,7 +557,6 @@ const SaleOrder: React.FC<SaleOrderProps> = () => { ...@@ -507,7 +557,6 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
name="payChart" name="payChart"
noStyle noStyle
rules={[{ required: true, message: '此项为必填' }]} rules={[{ required: true, message: '此项为必填' }]}
initialValue="666666"
> >
<Input id="linkInput" disabled /> <Input id="linkInput" disabled />
</Form.Item> </Form.Item>
...@@ -527,19 +576,19 @@ const SaleOrder: React.FC<SaleOrderProps> = () => { ...@@ -527,19 +576,19 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
<img src={appImg} alt="" width={32} height={32} /> <img src={appImg} alt="" width={32} height={32} />
<h2>APP扫码</h2> <h2>APP扫码</h2>
</div> </div>
<p><span className={styles.listLabel}>当前订单：</span><span>当前订单</span></p> <p><span className={styles.listLabel}>订单摘要：</span><span>{currentPayRef.current.digest}</span></p>
<p><span className={styles.listLabel}>当前订单：</span><span>当前订单</span></p> <p><span className={styles.listLabel}>采购会员：</span><span>{currentPayRef.current.buyerMemberName}</span></p>
<p><span className={styles.listLabel}>当前订单：</span><span>当前订单</span></p> <p><span className={styles.listLabel}>订单总额：</span><span>￥{currentPayRef.current.productAmount}</span></p>
</div> </div>
<div className={styles.appPayRight}> <div className={styles.appPayRight}>
<div><img src={appImg} alt="" width={130} height={130} /></div> <div>{qrCode ? <img id="qrcodeElement" src={qrCode} alt="" width={130} height={130} /> : <Spin />}</div>
<p><img src={scanImg} alt="" width={16} height={16} /> 扫一扫进入APP支付</p> <p><img src={scanImg} alt="" width={16} height={16} /> 扫一扫进入APP支付</p>
</div> </div>
</div> </div>
<p><Button type="primary">保存图片</Button></p> <p><Button type="primary" onClick={onSave}>保存图片</Button></p>
<p className={styles.appPayBottom}> <p className={styles.appPayBottom}>
<p><span className={styles.listLabel}>当前订单：</span><span>当前订单</span></p> <p><span className={styles.listLabel}>当前订单：</span><span>{currentPayRef.current.orderNo}</span></p>
<p><span className={styles.listLabel}>当前订单：</span><span>当前订单</span></p> <p><span className={styles.listLabel}>订单来源：</span><span>{currentPayRef.current.shopName}</span></p>
</p> </p>
</div> </div>
} }
...@@ -547,28 +596,29 @@ const SaleOrder: React.FC<SaleOrderProps> = () => { ...@@ -547,28 +596,29 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
payModel === 'miniapp' && <div className={styles.appPayContainer}> payModel === 'miniapp' && <div className={styles.appPayContainer}>
<div className={styles.appPayContent}> <div className={styles.appPayContent}>
<div className={styles.appPayLeft}> <div className={styles.appPayLeft}>
<div> <div className={styles.leftTitle}>
<img src={miniappImg} alt="" width={32} height={32} /> <img src={miniappImg} alt="" width={32} height={32} />
<h3>小程序扫码</h3> <h2>小程序扫码</h2>
</div> </div>
<p><span className={styles.listLabel}>当前订单</span><span>当前订单</span></p> <p><span className={styles.listLabel}>订单摘要：</span><span>{currentPayRef.current.digest}</span></p>
<p><span className={styles.listLabel}>当前订单</span><span>当前订单</span></p> <p><span className={styles.listLabel}>采购会员：</span><span>{currentPayRef.current.buyerMemberName}</span></p>
<p><span className={styles.listLabel}>当前订单</span><span>当前订单</span></p> <p><span className={styles.listLabel}>订单总额：</span><span>￥{currentPayRef.current.productAmount}</span></p>
</div> </div>
<div className={styles.appPayRight}> <div className={styles.appPayRight}>
<div><img src={appImg} alt="" width={130} height={130} /></div> <div>{qrCode ? <img id="qrcodeElement" src={qrCode} alt="" width={130} height={130} /> : <Spin />}</div>
<p><img src={scanImg} alt="" width={16} height={16} /> 扫一扫进入小程序支付</p> <p><img src={scanImg} alt="" width={16} height={16} /> 扫一扫进入小程序支付</p>
</div> </div>
</div> </div>
<p><Button type="primary">保存图片</Button></p> <p><Button type="primary" onClick={onSave}>保存图片</Button></p>
<p className={styles.appPayBottom}> <p className={styles.appPayBottom}>
<p><span className={styles.listLabel}>当前订单</span><span>当前订单</span></p> <p><span className={styles.listLabel}>当前订单：</span><span>{currentPayRef.current.orderNo}</span></p>
<p><span className={styles.listLabel}>当前订单</span><span>当前订单</span></p> <p><span className={styles.listLabel}>订单来源：</span><span>{currentPayRef.current.shopName}</span></p>
</p> </p>
</div> </div>
} }
</div> </div>
</Modal> </Modal>
<a href="" id="downloadLink" style={{visibility:"hidden", display:"none"}}></a>
</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