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

config/routes/index.ts

@@ -83,7 +83,7 @@ const memberCenterRoute = {
     // AuthConfigRoute,
     // MemberRoute,
     // HandlingRoute,
-    // PayandSettleRoute,
+    PayandSettleRoute,
     // marketingRoute,
     // DealAbilityRoute,
     // ...asyncRoutes,

config/routes/payandSettle.ts

@@ -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,
+        },
       ]
     },
     // 授信申请

src/pages/commodity/products/index.tsx

@@ -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>

src/pages/payandSettle/amountAccountManage/checkWithdraw/checkDetail.tsx

@@ -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']}>

src/pages/payandSettle/amountAccountManage/memberAccountManage/memberAccountDetail.tsx

@@ -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']}>

src/pages/payandSettle/amountAccountManage/paymentWithdraw/paymentDetail.tsx

@@ -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']}>

src/pages/payandSettle/capitalAccounts/accountLists/accountDetail.tsx

@@ -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}

src/pages/payandSettle/capitalAccounts/accountLists/applyWithdraw.tsx

@@ -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}

src/pages/payandSettle/capitalAccounts/eAccount/index.tsx

 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>
   )
 }

src/pages/payandSettle/eAccountApprove/components/finish/index.less

+.card-list {
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 24px;
+}
+.card-list_title {
+  font-size: 12px;
+  color: #909399;
+}

src/pages/payandSettle/eAccountApprove/components/finish/index.tsx

+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

src/pages/payandSettle/eAccountApprove/components/header/index.less

+.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;
+        }
+      }
+    }
+  }
+}

src/pages/payandSettle/eAccountApprove/components/header/index.tsx

+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

src/pages/payandSettle/eAccountApprove/components/personal/index.tsx

+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

src/pages/payandSettle/eAccountApprove/index.less

+.wrapper {
+  padding: 16px;
+}

src/pages/payandSettle/eAccountApprove/index.tsx

+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

src/pages/transaction/components/orderDetailWrapper/index.less

 .wrapper {
-  padding: 24px;
+  padding: 16px;
 }

src/pages/transaction/purchaseRequisition/components/billDetailWrapper/index.less

 .wrapper {
-  padding: 24px;
+  padding: 16px;
 }

src/pages/transaction/saleOrder/index.less

@@ -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;
+  }
+}

src/pages/transaction/saleOrder/index.tsx

 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>
 }