Commit ac7d316f authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

feat: 添加商品导出二维码功能,添加销售订单查询生成支付链接弹框,添加e账户认证未认证状态页面

parent 21de64ed
......@@ -83,7 +83,7 @@ const memberCenterRoute = {
// AuthConfigRoute,
// MemberRoute,
// HandlingRoute,
// PayandSettleRoute,
PayandSettleRoute,
// marketingRoute,
// DealAbilityRoute,
// ...asyncRoutes,
......
......@@ -24,6 +24,13 @@ const payandSettleRoute: RouterChild = {
component:'@/pages/payandSettle/paySetting',
noMargin: true,
},
// e账户认证
{
path:'/memberCenter/payandSettle/paySetting/eAccountApprove',
name:'eAccountApprove',
component:'@/pages/payandSettle/eAccountApprove',
noMargin: true,
},
]
},
// 授信申请
......
......@@ -11,7 +11,8 @@ import {
ExclamationCircleOutlined,
ImportOutlined,
ArrowUpOutlined,
ArrowDownOutlined
ArrowDownOutlined,
ExportOutlined
} from '@ant-design/icons'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
......@@ -30,7 +31,7 @@ import { priceTypeLabel, productStatusColor, productStatusLabel } from './consta
import EyePreview from '@/components/EyePreview'
import UpperProductModalTable from './components/upperProductModalTable'
import { Item } from '@/components/ButtonTabs'
import { getProductCommodityGetCommodityList, getProductCommodityGetShop, GetProductCommodityGetShopResponse, postProductCommodityApplyCheckCommodity, postProductCommodityCopyCommodity, postProductCommodityDeleteBatchCommodity, postProductCommodityGetShopBatch, postProductCommodityOffPublishCommodity, postProductCommodityOffPublishCommodityBatch, postProductCommodityPublishCommodity, postProductCommodityPublishCommodityBatch } from '@/services/ProductV2Api'
import { getProductCommodityGetCommodityList, getProductCommodityGetShop, GetProductCommodityGetShopResponse, postProductCommodityApplyCheckCommodity, postProductCommodityCopyCommodity, postProductCommodityDeleteBatchCommodity, postProductCommodityExportCommodityQrCode, postProductCommodityGetShopBatch, postProductCommodityOffPublishCommodity, postProductCommodityOffPublishCommodityBatch, postProductCommodityPublishCommodity, postProductCommodityPublishCommodityBatch } from '@/services/ProductV2Api'
import { getTemplateWebMemberShopWebFindCurrMemberShop } from '@/services/TemplateV2Api'
const { confirm } = Modal;
......@@ -67,6 +68,7 @@ const Products: React.FC<{}> = () => {
const [checkedValues, setCheckedValues] = useState<any>([])
const [currentOptionId, setCurrentOptionId] = useState<number>()
const [isDisabledOKbtn, setIsDisabledOKbtn] = useState<boolean>(false)
const [exportQrcodeModal, setExportQrcodeModal] = useState<boolean>(false)
const currentRef = useRef<any>([])
const currentRefRow = useRef<any>([])
const upperRef = useRef<any>({})
......@@ -508,7 +510,7 @@ const Products: React.FC<{}> = () => {
}
const handleMenuClick = (e) => {
// 1 批量删除;2 删除导入批次 0 导入上游;3 批量上架;4 批量下架
// 1 批量删除;2 删除导入批次 0 导入上游;3 批量上架;4 批量下架 5导出商品二维码
if(e.key === '1'){
handleBatchDelete(currentRef.current, true)
}else if(e.key === '2'){
......@@ -518,9 +520,42 @@ const Products: React.FC<{}> = () => {
handleUpperCommodity()
} else if(e.key === '3' || e.key === '4') {
handleBatch(e.key)
} else if(e.key === '5') {
currentRef.current.length ? setExportQrcodeModal(true) : message.error('请选择需要操作的商品')
}
}
const handleExportQrcode = () => {
let a: any = document.createElement("a")
document.body.appendChild(a)
a.style = "display: none"
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)
} else {
let blob = new Blob([data], {type: "application/x-zip-compressed"})
// let objectUrl = URL.createObjectURL(blob)
// window.location.href = objectUrl
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
setTimeout(() => {
setExportQrcodeModal(false)
message.success('导出成功')
}, 1500)
}
})
}
const handleBatchDelete = (ids: number[] = [], param?: boolean) => {
if(ids.length) {
if(param){
......@@ -588,6 +623,9 @@ const Products: React.FC<{}> = () => {
<Menu.Item key="1" icon={<DeleteOutlined />}>
批量删除
</Menu.Item>
<Menu.Item key="5" icon={<ExportOutlined />}>
导出商品二维码
</Menu.Item>
</Menu>
)
......@@ -750,6 +788,19 @@ const Products: React.FC<{}> = () => {
</Form.Item>
</Form>
</Modal>
<Modal
title='导出商品二维码'
visible={exportQrcodeModal}
onOk={handleExportQrcode}
onCancel={() => setExportQrcodeModal(false)}
>
<h1>列表勾选:{currentRef.current.length || 0}个商品</h1>
<h2>说明:</h2>
<p>1、一次最多导出1000个商品二维码</p>
<p>2、导出商品二维码大小为400*400</p>
<p>3、商品二维码为.jpg格式,图片命名为商品ID+商品名称(例如:10001_DIR清凉一夏正宫红口红)</p>
<p>4、导出的商品二维码图片按商城打包压缩包,压缩包文件命名规则为商城名称+当前导出年月日(例如:APP商城_20121201)</p>
</Modal>
{/* 选择上游商品 */}
<UpperProductModalTable currentRef={upperRef} type="checkbox" tableRef={ref} />
</PageHeaderWrapper>
......
......@@ -148,7 +148,7 @@ const CheckDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户提现">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={styles.repayment}>
<div className={styles['repayment-left']}>
......@@ -207,7 +207,7 @@ const CheckDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={cx(styles.repayment, styles.repayinfo)}>
<div className={styles['repayment-left']}>
......
......@@ -176,7 +176,7 @@ const AccountDetail: React.FC<{}> = () => {
>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={cx(styles.repayment, styles.repayinfo)}>
<div className={styles['repayment-left']}>
......
......@@ -245,7 +245,7 @@ const PaymentDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户提现">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={styles.repayment}>
<div className={styles['repayment-left']}>
......@@ -304,7 +304,7 @@ const PaymentDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col span={8}>
<div className={cx(styles.repayment, styles.repayinfo)}>
<div className={styles['repayment-left']}>
......
......@@ -207,7 +207,7 @@ const AccountDetail: React.FC<{}> = () => {
money: Number(value.money),
type: value['type'][0]
}
postPayAssetAccountRecharge(parasm).then(res => {
postPayAssetAccountRecharge(parasm, { ctlType: "none" }).then(res => {
const { code, data } = res
if(code === 1000){
modalRef.current.setVisible(false)
......@@ -240,7 +240,7 @@ const AccountDetail: React.FC<{}> = () => {
>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col
// span={8}
xxl={8}
......
......@@ -132,7 +132,7 @@ const AccountDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户提现">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col
// span={8}
xxl={8}
......@@ -243,7 +243,7 @@ const AccountDetail: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col
// span={8}
xxl={8}
......
import React, { useState, useEffect, useRef } from 'react'
import { history } from 'umi'
import { Card, Space, Row, Col, Button, Table, Modal, message } from 'antd'
import { Card, Space, Row, Col, Button, Table, Modal, message, Form, Input } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ReutrnEle from '@/components/ReturnEle'
import styles from './index.less'
......@@ -34,6 +34,7 @@ const EAccountDetail: React.FC<{}> = () => {
const [pageId, setPageId] = useState<any>()
const [isBtnLoading, setIsBtnLoading] = useState<boolean>(false)
const [scanVisible, setScanVisible] = useState<boolean>(false)
const [withdrawVisible, setWithdrawVisible] = useState<boolean>(false)
const [qrCode, setQrCode] = useState('')
const [renderCodeCharacter, setRenderCodeCharacter] = useState<rechargeItem>()
const [rechargeType, setRechargeType] = useState<number>()
......@@ -207,7 +208,7 @@ const EAccountDetail: React.FC<{}> = () => {
money: Number(value.money),
type: value['type'][0]
}
postPayAssetAccountRecharge(parasm).then(res => {
postPayAssetAccountRecharge(parasm, { ctlType: "none" }).then(res => {
const { code, data } = res
if(code === 1000){
modalRef.current.setVisible(false)
......@@ -225,6 +226,18 @@ const EAccountDetail: React.FC<{}> = () => {
modalRef.current.setVisible(true)
}
const applyWithdraw = () => {
setWithdrawVisible(true)
}
const handleWithdraw = () => {
}
const handleCancel = () => {
setWithdrawVisible(false)
}
const handleScan = () => {
setScanVisible(false)
getAccountInfo()
......@@ -240,7 +253,7 @@ const EAccountDetail: React.FC<{}> = () => {
>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="账户信息">
<Row gutter={100}>
<Row gutter={100} style={{marginRight: 0}}>
<Col
// span={8}
xxl={8}
......@@ -354,7 +367,7 @@ const EAccountDetail: React.FC<{}> = () => {
>
<div className={styles.rightActions}>
<Button className={styles.rightAction} type="primary" onClick={handleRecharge}>充值</Button>
<Button className={styles.rightAction} onClick={() => history.push(`/memberCenter/payandSettle/capitalAccounts/accountLists/applyWithdraw?id=${details?.id}`)}>申请提现</Button>
<Button className={styles.rightAction} onClick={applyWithdraw}>申请提现</Button>
</div>
</Col>
</Row>
......@@ -374,6 +387,7 @@ const EAccountDetail: React.FC<{}> = () => {
<Table columns={moveColumns} dataSource={moveData} pagination={false} />
</Card>
</Space>
{/* 输入充值 */}
<ModalForm
modalTitle='账户充值'
currentRef={modalRef}
......@@ -413,6 +427,43 @@ const EAccountDetail: React.FC<{}> = () => {
</div>
</div>
</Modal>
{/* 账户提现 */}
<Modal
title='账户提现'
visible={withdrawVisible}
onOk={handleWithdraw}
onCancel={handleCancel}
>
<div>
<Form name="withdraw-form" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
<Form.Item label="账户名称" name="name">
<span>中国建设银行广州市分行营业部</span>
</Form.Item>
<Form.Item label="银行账号" name="account">
<span>中国建设银行广州市分行营业部</span>
</Form.Item>
<Form.Item label="开户行" name="apart">
<span>中国建设银行广州市分行营业部</span>
</Form.Item>
<Form.Item label="提现金额" help="最多可提现 ¥10,000.00">
<Row>
<Col span={20}>
<Form.Item
name="amount"
noStyle
rules={[{ required: true, message: '此项为必填' }]}
>
<Input addonBefore="¥" placeholder="请输入提现金额" />
</Form.Item>
</Col>
<Col span={4}>
<Button type="link">全部提现</Button>
</Col>
</Row>
</Form.Item>
</Form>
</div>
</Modal>
</PageHeaderWrapper>
)
}
......
.card-list {
font-size: 12px;
line-height: 20px;
margin-top: 24px;
}
.card-list_title {
font-size: 12px;
color: #909399;
}
import React from 'react'
import { Button, Card, Col, Row } from 'antd'
import styles from './index.less'
import MellowCard from '@/components/MellowCard'
import { div } from '@/pages/editor/configs/componentConfigs/HTML'
import { SoundOutlined } from '@ant-design/icons'
interface IFinsh {
isFinsh: boolean,
}
const Finish: React.FC<IFinsh> = (props) => {
const { isFinsh = false } = props
return (<div>
<MellowCard headStyle={{borderBottom:'none'}} title="个人信息">
<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>
{
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>
</Col>
</Row>
</MellowCard>
<MellowCard headStyle={{borderBottom:'none'}} style={{marginTop: 16}} title="电子协议">
<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">立即完善</Button>
</MellowCard>
}
</div>)
}
export default Finish
.titleAvator {
width:48px;
height:48px;
background:rgba(135,119,217,1);
border-radius:4px;
border:1px solid rgba(223,225,230,1);
line-height: 48px;
text-align: center;
color: #fff;
margin: 0 24px;
}
.titleAvatorText {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-left: 8px;
}
.detailHeader {
background: #fff;
padding-left: 24px;
line-height: 48px;
:global {
.ant-row {
.ant-col-2 {
.ant-btn {
position: absolute;
top: 0;
right: 0;
}
}
}
.ant-anchor-wrapper {
min-height: auto;
}
.ant-anchor {
display: flex;
}
.ant-anchor-ink{
display: none;
}
.ant-anchor-link {
padding: 0;
text-align: center;
a {
display: inline-block;
font-size: 14px;
color: #909399;
margin: 0 16px;
height: 48px;
line-height: 48px;
}
}
.ant-anchor-link-active {
a{
font-weight: 500;
color: #303133;
border-bottom: 2px solid #00B37A;
}
}
}
}
.detailCol {
display: flex;
margin-top: 20px;
color: #303133;
}
.colLabel {
color: #909399;
margin-right: 16px;
}
// tabs标签锚点
.anchorTitle {
// height: 48px;
ul {
padding-left: 0;
display: flex;
li {
height: 48px;
line-height: 48px;
text-align: center;
list-style: none;
a {
display: inline-block;
height: 48px;
font-size: 14px;
color: #909399;
line-height: 48px;
margin: 0 16px;
}
.current {
font-weight: 500;
color: #303133;
border-bottom: 2px solid #00B37A;
}
}
}
}
.anchorTitleFixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
:global {
.ant-row {
.ant-col-2 {
.ant-btn {
position: fixed;
top: 16px;
right: 16px;
}
}
}
}
}
import React, { ReactNode, useEffect, useRef, useState } from 'react'
import { Row, Col, Skeleton, Anchor } from 'antd'
import { history } from 'umi'
import { ArrowLeftOutlined } from '@ant-design/icons'
import style from './index.less'
const { Link } = Anchor;
export interface ILink {
title: string;
id: string;
}
export interface EDetailHeaderProps {
extraRight?: ReactNode,
anchorList?: ILink[],
backLink?: string | boolean,
title: string,
}
/**
* e账户认证
*/
const EDetailHeader: React.FC<EDetailHeaderProps> = ({
extraRight,
anchorList = [],
backLink,
title
}) => {
// const isLoading = !!formContext.data
const flagRef = useRef({
flag: false,
distanceTop: 0
})
const [current, setCurrent] = useState<number>(0)
const [isFixed, setIsFixed] = useState<boolean>(false)
useEffect(() => {
window.addEventListener("scroll", onScroll)
return (() => {
window.removeEventListener('scroll', onScroll)
})
}, [])
const onScroll = () => {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let floors = document.querySelectorAll(".anchorContent>div")
floors.forEach((floor: any, index: any) => {
if (floor.offsetTop - 100 <= scrollTop) {
setCurrent(index)
}
})
// 锚点导航距离顶端距离
let navDom: any = document.getElementById("anchorTitle")
if (navDom) {
let distance = navDom.offsetTop - document.documentElement.scrollTop
if (!flagRef.current.flag) {
flagRef.current.distanceTop = navDom.offsetTop
flagRef.current.flag = true
}
if (distance <= 0) {
setIsFixed(true)
}
if (document.documentElement.scrollTop <= flagRef.current.distanceTop) {
setIsFixed(false)
}
}
}
return (
<div
className={isFixed ? [style.detailHeader, style.anchorTitleFixed].join(' ') : style.detailHeader}
id="detailHeader"
>
<Row>
<Col span={22}>
<Row align='middle'>
{
backLink ? <Col>
<ArrowLeftOutlined onClick={() => typeof backLink === 'string' ? history.push(backLink) : history.goBack()} />
</Col> : null
}
<Col>
<div className={style.titleAvatorText}>{title}</div>
</Col>
</Row>
{
anchorList.length ?
<Row>
<Col>
<div className={style.anchorTitle} id="anchorTitle">
<Anchor onClick={(e) => e.preventDefault()} showInkInFixed={false} targetOffset={200}>
{
anchorList.map((item, index) => (
<Link key={index} href={`#${item['id']}`} title={item['title']} />
))
}
</Anchor>
</div>
</Col>
</Row> : null
}
</Col>
<Col span={2}>{extraRight}</Col>
</Row>
</div>
)
}
EDetailHeader.defaultProps = {}
export default EDetailHeader
import React from 'react'
import { Button, Card, Col, Form, Input, Row, Select } from 'antd'
import MellowCard from '@/components/MellowCard';
const Personal: React.FC<{}> = () => {
const { Option } = Select;
const [form] = Form.useForm();
const onFinish = (values: any) => {
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"
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="type"
label="证件类型"
rules={[
{
required: true,
message: '请选择证件类型',
},
]}
>
<Select placeholder="请选择证件类型">
<Option value="1">身份证</Option>
</Select>
</Form.Item>
<Form.Item
name="idcard"
label="证件号码"
rules={[
{
required: true,
message: '请输入证件号码',
},
]}
>
<Input placeholder="请输入证件号码" />
</Form.Item>
<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 {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
</MellowCard>
)
}
export default Personal
import React from 'react'
import EDetailHeader from './components/header'
import Personal from './components/personal'
import styles from './index.less'
import Finish from './components/finish'
const EAccountApprove: React.FC<{}> = () => {
// 个人 or 企业
const personal = true
// 未认证
const approved = true
// 未完善
const finish = true
const linkList = [
{ title: '个人信息', id: 'personalInfo' },
{ title: '账户信息', id: 'accountInfo' },
{ title: '电子协议', id: 'electricInfo' },
]
return (
<div>
<EDetailHeader
title="通联账户"
anchorList={finish ? linkList : []}
/>
<div className={styles.wrapper}>
{
approved ? <Finish isFinsh={finish} /> : <Personal />
}
</div>
</div>
)
}
export default EAccountApprove
......@@ -14,3 +14,52 @@
}
}
}
.appPayContainer {
background-color: #FAFBFC;
padding: 24px 24px 0 24px;
.appPayContent {
margin-bottom: 24px;
padding: 48px;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
.appPayLeft {
.leftTitle {
display: flex;
align-items: center;
margin-bottom: 10px;
img {
margin-right: 12px;
}
h2 {
height: 32px;
line-height: 44px;
}
}
}
.appPayRight {
p {
color: #91959B;
img {
vertical-align: middle;
}
}
}
}
.appPayBottom {
display: flex;
justify-content: start;
& > p {
margin-right: 24px;
}
}
p {
.listLabel {
color: #91959B;
}
}
& > p {
text-align: center;
}
}
import React, { useRef, useState } from 'react'
import { Card, Button, Space, message } from 'antd'
import { Card, Button, Space, message, Modal, Form, Row, Col, Input } from 'antd'
import { StandardTable } from 'god'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { baseOrderListColumns, useTransformOrderTable } from './constant'
......@@ -15,8 +15,12 @@ import ModalForm from '@/components/ModalForm'
import { useHttpRequest } from '@/hooks/useHttpRequest'
import TableOperation from '@/components/TableOperation'
import { getAuth } from '@/utils/auth'
import styles from './index.less'
import { MEMBER_ROLE_TYPE_SERVICE_CONSUMER } from '@/constants/member'
import { getOrderVendorPage, postOrderVendorCancel, postOrderVendorTerminate, postOrderVendorTransfer, postOrderVendorTransferPreview } from '@/services/OrderNewV2Api'
import { getOrderVendorGeneratePayLink, 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'
// 销售订单查询
......@@ -37,6 +41,9 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
const destoryRef = useRef<any>({})
const pauseRef = useRef<any>({})
const orderIds = useRef<number[]>([])
const [payChartVisible, setPayChartVisible] = useState<boolean>(false)
const [payForm] = Form.useForm();
const [payModel, setPayModel] = useState<'web'|'app'|'miniapp'|null>('app')
const { run, loading } = useHttpRequest(postOrderVendorCancel)
const { run: runPause, loading: loadingEnd } = useHttpRequest(postOrderVendorTerminate)
......@@ -86,6 +93,30 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
history.push(`${history.location.pathname}/preview?id=${record.orderId}&modifyPrice=true`)
}
const generatePayChart = (record) => {
console.log(record, 'record')
getOrderVendorGeneratePayLink({orderId: record.orderId}).then(({ data }) => {
console.log(data.buyerMemberName, 'data')
setPayChartVisible(true)
})
}
const handleCopy = () => {
const content = payForm.getFieldValue('payChart')
copyHandle(content)
}
const copyHandle = (content) => {
let copy = (e)=>{
e.preventDefault()
e.clipboardData.setData('text/plain',content)
message.success('复制成功');
document.removeEventListener('copy',copy)
}
document.addEventListener('copy',copy)
document.execCommand("Copy");
}
const handleCancel = (r) => {
destoryRef.current.setVisible(true)
destroyActions.setFieldValue('id', r.orderId)
......@@ -189,6 +220,7 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
'评价': record.showComment,
'转单': record.showTransfer,
'修改订单价格': record.showModifyPrice,
'生成支付链接': record.showGeneratePayLink,
}
const operationHandler = {
......@@ -196,7 +228,8 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
'中止': () => handleSuspend(record),
'评价': () => handleEvaluate(),
'转单': () => onlyTransform(record.orderId),
'修改订单价格': () => handleModifyPrice(record)
'修改订单价格': () => handleModifyPrice(record),
'生成支付链接': () => generatePayChart(record)
}
return (
......@@ -223,6 +256,7 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
align: 'center',
dataIndex: 'ctl',
key: 'ctl',
width: 200,
render: (text, record) => renderOptionButton(record)
}
])
......@@ -449,6 +483,92 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
orderColumns,
}}
/>
{/* 支付链接 */}
<Modal
title='支付链接'
visible={payChartVisible}
onCancel={() => setPayChartVisible(false)}
footer={false}
width={600}
>
<div>
{
payModel === 'web' && <Form form={payForm} name="pay-form" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
<Form.Item label="当前订单" name="order">
<span>中国建设银行广州市分行营业部</span>
</Form.Item>
<Form.Item label="订单来源" name="origin">
<span>中国建设银行广州市分行营业部</span>
</Form.Item>
<Form.Item label="支付链接">
<Row>
<Col span={20}>
<Form.Item
name="payChart"
noStyle
rules={[{ required: true, message: '此项为必填' }]}
initialValue="666666"
>
<Input id="linkInput" disabled />
</Form.Item>
</Col>
<Col span={4}>
<Button type="primary" onClick={handleCopy}>复制链接</Button>
</Col>
</Row>
</Form.Item>
</Form>
}
{
payModel === 'app' && <div className={styles.appPayContainer}>
<div className={styles.appPayContent}>
<div className={styles.appPayLeft}>
<div className={styles.leftTitle}>
<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>
</div>
<div className={styles.appPayRight}>
<div><img src={appImg} alt="" width={130} height={130} /></div>
<p><img src={scanImg} alt="" width={16} height={16} /> 扫一扫进入APP支付</p>
</div>
</div>
<p><Button type="primary">保存图片</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>
</div>
}
{
payModel === 'miniapp' && <div className={styles.appPayContainer}>
<div className={styles.appPayContent}>
<div className={styles.appPayLeft}>
<div>
<img src={miniappImg} alt="" width={32} height={32} />
<h3>小程序扫码</h3>
</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>
</div>
<div className={styles.appPayRight}>
<div><img src={appImg} alt="" width={130} height={130} /></div>
<p><img src={scanImg} alt="" width={16} height={16} /> 扫一扫进入小程序支付</p>
</div>
</div>
<p><Button type="primary">保存图片</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>
</div>
}
</div>
</Modal>
</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