Commit ce2e87d6 authored by GuanHua's avatar GuanHua
parents 30203adb 51bb4004
......@@ -99,4 +99,30 @@
}
}
}
// 扫码
.qrCodeImage {
text-align: center;
width: 224px;
height: 224px;
margin: 20px auto 42px;
&>img {
display: block;
width: 100%;
height: 100%;
}
}
.scanTips {
display: flex;
justify-content: center;
align-items: center;
color: #6b778c;
margin-bottom: 18px;
.scanIcon {
font-size: 30px;
margin-right: @margin-sm;
}
}
\ No newline at end of file
......@@ -3,13 +3,14 @@ import { Modal, Steps, Row, Col, Spin, message, Upload, Button, Input } from 'an
import style from './index.less'
import { OrderDetailContext } from '../../_public/order/context'
import cx from 'classnames'
import { UploadOutlined } from '@ant-design/icons'
import { ScanOutlined, UploadOutlined } from '@ant-design/icons'
import { UPLOAD_TYPE } from '@/constants'
import { usePageStatus } from '@/hooks/usePageStatus'
import { PublicApi } from '@/services/api'
import { history } from 'umi'
import { useHttpRequest } from '@/hooks/useHttpRequest'
import { encryptedByAES } from '@/utils/cryptoAes'
import QRCode from 'qrcode'
export interface OrderPayModalProps {
currentRef: any,
......@@ -79,7 +80,9 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
const [checked, setChecked] = useState<any>({})
const [current, setCurrent] = useState(0) // 0选择方式 1线下支付方式 2授信支付 3余额支付 4微信支付 5货到付款 1000清除
const [payStep, setPayStep] = useState(0) // 支付模态框的步骤 0选方式 1下一步的具体操作 2输入支付密码
const mobilePayFlag = useRef(0) // 用于判断移动支付类型 4微信
const [code, setCode] = useState('')
const [qrCodeInfo, setQrCodeInfo] = useState({ generateCharacter: '', qrUrl: '' })
const [number, setNumber] = useState([0,1,2,3,4,5])
const { currentRef, confirm } = props
const [isSpin, setIsSpin] = useState<boolean>(false)
......@@ -103,6 +106,24 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
}
}, [visible])
useEffect(() => {
if(qrCodeInfo.generateCharacter){
generateQrCode()
}
}, [qrCodeInfo.generateCharacter])
const generateQrCode = () => {
// 生成二维码
QRCode.toDataURL(qrCodeInfo.generateCharacter).then((url:any) => {
setQrCodeInfo({...qrCodeInfo, qrUrl: url})
// 轮询支付结果
// setOpenTimer(1)
})
.catch((err:any) => {
console.error(err)
})
}
const handleConfirm = () => {
console.log(data,'data')
if (current === 0) {
......@@ -147,13 +168,15 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
console.log('选择了货到付款')
setCurrent(5)
setPayStep(1)
}
// else if(checked.id === 2) {
// console.log('选择了微信支付')
// setCurrent(4)
// setPayStep(1)
// handleSubmitPay()
// }
} else if(checked.id === 2) {
console.log('选择了微信支付')
// 跳转扫码支付
history.push(`/pay?orderId=${btoa(JSON.stringify({ orderId: id, memberId: data.supplyMembersId, memberRoleId: data.supplyMembersRoleId }))}`)
// mobilePayFlag.current = 4
// setCurrent(4)
// setPayStep(1)
// handleSubmitPay()
}
else {
message.error('暂只支持线下支付、授信额度支付、余额支付方式、货到付款')
}
......@@ -232,12 +255,15 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
params.payOrderUrls = payOrderUrls.join(',')
}
console.log(current, payStep,'666',mobilePayFlag)
const res = await run(params)
if (res.code === 1000) {
if(current != 4) {
if(mobilePayFlag.current !== 4) {
history.goBack()
} else {
console.log(res, '二维码信息')
setQrCodeInfo({ ...qrCodeInfo, generateCharacter: res.data })
}
}
}
......@@ -433,9 +459,12 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
{
current === 4 &&
<div>
<p>微信扫码支付</p>
<div>
<div className={style.qrCodeImage}>
<img src={qrCodeInfo.qrUrl} alt=""/>
<div className={style.scanTips}>
<ScanOutlined className={style.scanIcon} />
<span>打开 {mobilePayFlag.current === 4 ? '微信' : '支付宝'}App<br />扫码完成支付</span>
</div>
</div>
</div>
}
......
......@@ -33,17 +33,17 @@ const ReadyConfirmOrderDetail: React.FC = () => {
// 提交表单
const handleSubmit = useCallback(() => {
const handleSubmit = () => {
approvedRef.current.actions.submit().then(async (v) => {
const params = {
id: Number(id),
state: v.values.state,
cause: v.values.cause,
}
if(v.values.state) { // 通过
if(formContext.data.usingElectronicContracts && v.values.state) { // 使用合同 并且通过
approvedRef.current.setVisible(false)
electronRef.current.setVisible(true)
} else { // 不通过
} else {
const result = await run(params)
if (result.code === 1000) {
......@@ -51,10 +51,8 @@ const ReadyConfirmOrderDetail: React.FC = () => {
history.goBack()
}
}
console.log(params, v, 'v', approvedRef.current, electronRef.current)
})
}, [])
}
return (
<div>
......
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