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 = {
},
'@umijs/hooks',
], // 将下划线转化关闭
[
'transform-remove-console',
{ exclude: ['error', 'warn'] },
],
// [
// 'transform-remove-console',
// { exclude: ['error', 'warn'] },
// ],
],
history: {
type: 'browser', // 'brower' | 'hash'
......
config/routes/index.ts
View file @ 9b5d4b97
......@@ -83,7 +83,7 @@ const memberCenterRoute = {
// AuthConfigRoute,
// MemberRoute,
// HandlingRoute,
PayandSettleRoute,
// PayandSettleRoute,
// marketingRoute,
// DealAbilityRoute,
// ...asyncRoutes,
......
src/pages/commodity/products/index.tsx
View file @ 9b5d4b97
......@@ -70,6 +70,7 @@ const Products: React.FC<{}> = () => {
const [currentOptionId, setCurrentOptionId] = useState<number>()
const [isDisabledOKbtn, setIsDisabledOKbtn] = useState<boolean>(false)
const [exportQrcodeModal, setExportQrcodeModal] = useState<boolean>(false)
const [exportLoading, setExportLoading] = useState<boolean>(false)
const currentRef = useRef<any>([])
const currentRefRow = useRef<any>([])
const upperRef = useRef<any>({})
......@@ -530,15 +531,12 @@ const Products: React.FC<{}> = () => {
let a: any = document.createElement("a")
document.body.appendChild(a)
a.style = "display: none"
setExportLoading(true)
postProductCommodityExportCommodityQrCode({idList: currentRef.current}, { responseType: 'blob', getResponse: true }).then((res:any) => {
const { code, data, response } = res
const filename = response.headers.get('content-disposition').split('=')[1]
console.log(filename)
if(code) {
setTimeout(() => {
setExportQrcodeModal(false)
message.error(res.message)
}, 1500)
throw new TypeError(res.message)
} else {
let blob = new Blob([data], {type: "application/x-zip-compressed"})
// let objectUrl = URL.createObjectURL(blob)
......@@ -548,12 +546,13 @@ const Products: React.FC<{}> = () => {
a.download = filename;
a.click();
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<{}> = () => {
visible={exportQrcodeModal}
onOk={handleExportQrcode}
onCancel={() => setExportQrcodeModal(false)}
confirmLoading={exportLoading}
>
<h1>列表勾选：{currentRef.current.length || 0}个商品</h1>
<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 { Button, Card, Col, Row } from 'antd'
import React, { useContext } from 'react'
import { Button, Col, Form, Row, Image } from 'antd'
import MellowCard from '@/components/MellowCard';
import styles from './index.less'
import MellowCard from '@/components/MellowCard'
import { div } from '@/pages/editor/configs/componentConfigs/HTML'
import { SoundOutlined } from '@ant-design/icons'
import { EDetailContext } from '../../constant'
interface IFinsh {
isFinsh: boolean,
}
const Finish: React.FC<IFinsh> = (props) => {
const { isFinsh = false } = props
/** 企业认证详情 */
const CompanyFinish: React.FC<{}> = () => {
const [form] = Form.useForm();
const eDetailContext = useContext(EDetailContext)
const { ctl, finish, perfection, approved } = eDetailContext
return (<div>
<MellowCard headStyle={{borderBottom:'none'}} title="个人信息">
<MellowCard headStyle={{borderBottom:'none'}} title="企业信息" id="companyInfo">
<Row>
<Col span={12}>
<Row className={styles['card-list']}>
......@@ -42,37 +40,38 @@ const Finish: React.FC<IFinsh> = (props) => {
</Row>
</Col>
</Row>
</MellowCard>
{
isFinsh ? <>
<MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="银行账户">
<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>
<Row>
<Col span={12}>
<Row className={styles['card-list']}>
<Col span={6} className={styles['card-list_title']}>法人证件正面照</Col>
<Col>
<Image
width={104}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</Col>
</Row>
</MellowCard>
<MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="电子协议">
</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>
<Col span={6} className={styles['card-list_title']}>法人证件反面照</Col>
<Col>
<Image
width={104}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</Col>
</Row>
</MellowCard>
</> : <MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="">
<h3><SoundOutlined style={{color:'#00A98F'}} /> 进一步完善资料，可实现提现功能~</h3>
<Button type="primary">立即完善</Button>
</MellowCard>
}
</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>
</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 {
id: string;
}
interface BackFn {
(): void;
}
export interface EDetailHeaderProps {
extraRight?: ReactNode,
anchorList?: ILink[],
backLink?: string | boolean,
backLink?: string | boolean | BackFn,
title: string,
}
......@@ -70,6 +74,10 @@ const EDetailHeader: React.FC<EDetailHeaderProps> = ({
}
}
const handleBack = () => {
typeof backLink === 'string' ? (typeof backLink === 'function' ? backLink() : history.push(backLink)) : history.goBack()
}
return (
<div
className={isFixed ? [style.detailHeader, style.anchorTitleFixed].join(' ') : style.detailHeader}
......@@ -80,7 +88,7 @@ const EDetailHeader: React.FC<EDetailHeaderProps> = ({
<Row align='middle'>
{
backLink ? <Col>
<ArrowLeftOutlined onClick={() => typeof backLink === 'string' ? history.push(backLink) : history.goBack()} />
<ArrowLeftOutlined onClick={handleBack} />
</Col> : null
}
<Col>
......
src/pages/payandSettle/eAccountApprove/components/personal/index.tsx
View file @ 9b5d4b97
import React from 'react'
import { Button, Card, Col, Form, Input, Row, Select } from 'antd'
import React, { useContext } from 'react'
import { Button, Col, Form, Input, Row, Select } from 'antd'
import MellowCard from '@/components/MellowCard';
import { EDetailContext, formItemLayout, prefixSelector, tailFormItemLayout } from '../../constant';
/** 个人 初始认证 */
const Personal: React.FC<{}> = () => {
const { Option } = Select;
const [form] = Form.useForm();
const eDetailContext = useContext(EDetailContext)
const { ctl } = eDetailContext
const onFinish = (values: any) => {
ctl.setApproved(true)
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 (
<MellowCard headStyle={{borderBottom:'none'}} title="个人认证">
<Form
{...formItemLayout}
form={form}
name="register"
name="approve-form"
onFinish={onFinish}
initialValues={{
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'
import EDetailHeader from './components/header'
import Personal from './components/personal'
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<{}> = () => {
// 个人 or 企业
const personal = true
// 未认证
const approved = true
// 未完善
const finish = true
const { formContext } = useEDetail()
const linkList = [
const {
type,
approved,
perfection,
finish,
backed,
showAnchor } = formContext
const personalLinkList = [
{ title: '个人信息', id: 'personalInfo' },
{ title: '账户信息', id: 'accountInfo' },
{ title: '电子协议', id: 'electricInfo' },
]
const companyLinkList = [
{ title: '企业信息', id: 'companyInfo' },
{ title: '电子协议', id: 'electricInfo' },
]
return (
<div>
<EDetailHeader
title="通联账户"
anchorList={finish ? linkList : []}
/>
<div className={styles.wrapper}>
{
approved ? <Finish isFinsh={finish} /> : <Personal />
}
</div>
<EDetailContext.Provider value={formContext}>
<EDetailHeader
title="通联账户"
anchorList={finish ? (type === "personal" ? personalLinkList : companyLinkList) : []}
/>
<div className={styles.wrapper}>
{
type === 'personal' ? (approved ? <PersonalFinish /> : <Personal />) : (approved ? <CompanyFinish /> : <Company />)
}
</div>
</EDetailContext.Provider>
</div>
)
}
......
src/pages/trademark/addBrand.tsx
View file @ 9b5d4b97
......@@ -117,6 +117,7 @@ const AddBrand: React.FC<{}> = () => {
// console.log(info)
// const { code, data } = info.file.response
// if (code === 1000) {
console.log(data, 'data')
setlogoUrl(data)
form.setFieldsValue({ logoUrl: data })
// }
......@@ -244,7 +245,7 @@ const AddBrand: React.FC<{}> = () => {
]}
className={styles.uploadForm}
>
<UploadImage
{/* <UploadImage
disabled={banSomeField}
listType="picture-card"
showUploadList={false}
......@@ -252,6 +253,16 @@ const AddBrand: React.FC<{}> = () => {
onChange={handleUploadLogoChange}
imgUrl={logoUrl}
fileMaxSize={60}
/> */}
<UploadImage
imgUrl={logoUrl}
fileMaxSize={60}
onChange={(val) => {
setlogoUrl(val)
form.setFieldsValue({
logoUrl: val
})
}}
/>
</Form.Item>
</Card>
......
src/pages/transaction/saleOrder/index.less
View file @ 9b5d4b97
......@@ -39,7 +39,10 @@
}
}
.appPayRight {
width: 160px;
margin-left: 12px;
p {
width: 160px;
color: #91959B;
img {
vertical-align: middle;
......
src/pages/transaction/saleOrder/index.tsx
View file @ 9b5d4b97
import React, { useRef, useState } from 'react'
import { Card, Button, Space, message, Modal, Form, Row, Col, Input } from 'antd'
import React, { useEffect, useRef, useState } from 'react'
import { Card, Button, Space, message, Modal, Form, Row, Col, Input, Spin } from 'antd'
import { StandardTable } from 'god'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { baseOrderListColumns, useTransformOrderTable } from './constant'
......@@ -16,8 +16,9 @@ import { useHttpRequest } from '@/hooks/useHttpRequest'
import TableOperation from '@/components/TableOperation'
import { getAuth } from '@/utils/auth'
import styles from './index.less'
import QRCode from 'qrcode'
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 miniappImg from '@/assets/icons/miniapp.png'
import scanImg from '@/assets/icons/scan.png'
......@@ -26,6 +27,20 @@ import scanImg from '@/assets/icons/scan.png'
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 { data } = await getOrderVendorPage(params)
return data
......@@ -44,6 +59,8 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
const [payChartVisible, setPayChartVisible] = useState<boolean>(false)
const [payForm] = Form.useForm();
const [payModel, setPayModel] = useState<'web'|'app'|'miniapp'|null>('app')
const currentPayRef = useRef<GetOrderVendorGeneratePayLinkResponse>({})
const [qrCode, setQrCode] = useState('')
const { run, loading } = useHttpRequest(postOrderVendorCancel)
const { run: runPause, loading: loadingEnd } = useHttpRequest(postOrderVendorTerminate)
......@@ -93,10 +110,41 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
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) => {
console.log(record, 'record')
getOrderVendorGeneratePayLink({orderId: record.orderId}).then(({ data }) => {
console.log(data.buyerMemberName, 'data')
currentPayRef.current = data
setPayModel(ORDER_SHOP_ORIGIN_MAP[data['shopEnvironment']])
setPayChartVisible(true)
})
}
......@@ -490,15 +538,17 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
onCancel={() => setPayChartVisible(false)}
footer={false}
width={600}
destroyOnClose={true}
afterClose={()=>setQrCode('')}
>
<div>
{
payModel === 'web' && <Form form={payForm} name="pay-form" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
<Form.Item label="当前订单" name="order">
<span>中国建设银行广州市分行营业部</span>
<span>{currentPayRef.current.orderNo}</span>
</Form.Item>
<Form.Item label="订单来源" name="origin">
<span>中国建设银行广州市分行营业部</span>
<span>{currentPayRef.current.shopName}</span>
</Form.Item>
<Form.Item label="支付链接">
<Row>
......@@ -507,7 +557,6 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
name="payChart"
noStyle
rules={[{ required: true, message: '此项为必填' }]}
initialValue="666666"
>
<Input id="linkInput" disabled />
</Form.Item>
......@@ -527,19 +576,19 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
<img src={appImg} alt="" width={32} height={32} />
<h2>APP扫码</h2>
</div>
<p><span className={styles.listLabel}>当前订单：</span><span>当前订单</span></p>
<p><span className={styles.listLabel}>当前订单：</span><span>当前订单</span></p>
<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>{currentPayRef.current.buyerMemberName}</span></p>
<p><span className={styles.listLabel}>订单总额：</span><span>￥{currentPayRef.current.productAmount}</span></p>
</div>
<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>
</div>
</div>
<p><Button type="primary">保存图片</Button></p>
<p><Button type="primary" onClick={onSave}>保存图片</Button></p>
<p className={styles.appPayBottom}>
<p><span className={styles.listLabel}>当前订单：</span><span>当前订单</span></p>
<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>{currentPayRef.current.shopName}</span></p>
</p>
</div>
}
......@@ -547,28 +596,29 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
payModel === 'miniapp' && <div className={styles.appPayContainer}>
<div className={styles.appPayContent}>
<div className={styles.appPayLeft}>
<div>
<div className={styles.leftTitle}>
<img src={miniappImg} alt="" width={32} height={32} />
<h3>小程序扫码</h3>
<h2>小程序扫码</h2>
</div>
<p><span className={styles.listLabel}>当前订单</span><span>当前订单</span></p>
<p><span className={styles.listLabel}>当前订单</span><span>当前订单</span></p>
<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>{currentPayRef.current.buyerMemberName}</span></p>
<p><span className={styles.listLabel}>订单总额：</span><span>￥{currentPayRef.current.productAmount}</span></p>
</div>
<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>
</div>
</div>
<p><Button type="primary">保存图片</Button></p>
<p><Button type="primary" onClick={onSave}>保存图片</Button></p>
<p className={styles.appPayBottom}>
<p><span className={styles.listLabel}>当前订单</span><span>当前订单</span></p>
<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>{currentPayRef.current.shopName}</span></p>
</p>
</div>
}
</div>
</Modal>
<a href="" id="downloadLink" style={{visibility:"hidden", display:"none"}}></a>
</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