import React, {Component} from 'react'
|
import moment from 'moment'
|
import md5 from 'md5'
|
import QRCode from 'qrcode.react'
|
import { notification, Tabs, Modal } from 'antd'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import WeiXinPay from '@/assets/img/weixinpay.jpg'
|
import WeiXinPayLogo from '@/assets/img/weixinpaylogo.jpg'
|
import WeiXinScan from '@/assets/img/weixinscan.png'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
|
class Pay extends Component {
|
state = {
|
orderId: '',
|
orderNo: '',
|
logo: window.GLOB.doclogo || '',
|
name: sessionStorage.getItem('Full_Name') || '',
|
copyRight: window.GLOB.copyRight || '',
|
icp: window.GLOB.ICP || '',
|
total: '',
|
unit: '',
|
qrcode: '',
|
second: 60,
|
overdue: false,
|
overdone: false,
|
appId: ''
|
}
|
|
UNSAFE_componentWillMount () {
|
let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))
|
|
let _appId = param.appId || window.GLOB.WXAppID || window.GLOB.WXminiAppID || ''
|
|
this.setState({
|
orderId: param.ID,
|
appId: _appId
|
})
|
|
if (param.ID && _appId) {
|
this.getOrder(param.ID, _appId)
|
} else if (!param.ID) {
|
notification.warning({
|
top: 92,
|
message: '未获取到订单ID！',
|
duration: 5
|
})
|
} else if (!_appId) {
|
notification.warning({
|
top: 92,
|
message: '未获取到应用ID！',
|
duration: 5
|
})
|
}
|
}
|
|
getOrder = (Id, appId) => {
|
let param = {
|
func: 's_get_weixin_pay_native',
|
ID: Id
|
}
|
|
param.LTextOut = md5(param.ID + window.GLOB.appkey)
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt(param.LTextOut, param.timestamp)
|
|
Api.genericInterface(param).then(res => {
|
if (res.status) {
|
let _total = res.amount ? parseFloat(res.amount.total) : ''
|
|
if (isNaN(_total)) {
|
_total = ''
|
} else if (_total !== '') {
|
_total = _total.toFixed(2)
|
}
|
|
this.setState({
|
orderNo: res.out_trade_no,
|
total: _total,
|
unit: res.amount && res.amount.currency === 'CNY' ? '元' : '元',
|
})
|
|
// 当前订单支付成功
|
if (res.pay_status) {
|
this.setState({
|
overdone: true
|
})
|
Modal.success({
|
title: '支付成功！',
|
content: '请刷新订单页面，查看订单状态。',
|
okText: '知道了',
|
onOk() {
|
window.close()
|
}
|
})
|
return
|
}
|
|
if (!res.out_trade_no) {
|
notification.warning({
|
top: 10,
|
message: '未获取到订单号！',
|
duration: 5
|
})
|
return
|
}
|
|
Api.getWxNativePay({ 'out_biz_no': res.out_trade_no, app_id: appId }).then(result => {
|
if (result.status && result.code_url) {
|
this.setState({
|
qrcode: result.code_url
|
})
|
setTimeout(this.resetSecond, 1000)
|
} else {
|
this.setState({
|
overdue: true
|
})
|
notification.warning({
|
top: 10,
|
message: result.message || '未获取到支付码！',
|
duration: 5
|
})
|
}
|
})
|
} else {
|
this.setState({
|
overdue: true
|
})
|
notification.warning({
|
top: 10,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
resetSecond = () => {
|
const { second, orderNo, overdone } = this.state
|
|
if (overdone) return
|
|
if (second >= 1) {
|
this.setState({
|
second: second - 1
|
})
|
setTimeout(this.resetSecond, 1000)
|
|
if ((second - 1) % 5 === 0) {
|
let param = {
|
func: 's_get_weixin_pay_native_status',
|
out_trade_no: orderNo
|
}
|
|
param.LTextOut = md5(orderNo + window.GLOB.appkey)
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt(param.LTextOut, param.timestamp)
|
|
Api.genericInterface(param).then(res => {
|
if (res.pay_status) {
|
this.setState({
|
overdone: true
|
})
|
Modal.success({
|
title: '支付成功！',
|
content: '请刷新订单页面，查看订单状态。',
|
okText: '知道了',
|
onOk() {
|
window.close()
|
}
|
})
|
}
|
})
|
}
|
} else {
|
this.setState({
|
overdue: true
|
})
|
}
|
}
|
|
resetQrcode = () => {
|
const { orderNo, appId } = this.state
|
|
if (!orderNo) {
|
notification.warning({
|
top: 10,
|
message: '未获取到订单号！',
|
duration: 5
|
})
|
return
|
} else if (!appId) {
|
notification.warning({
|
top: 10,
|
message: '未获取到应用ID！',
|
duration: 5
|
})
|
return
|
}
|
|
Api.getWxNativePay({ 'out_biz_no': orderNo, app_id: appId }).then(result => {
|
if (result.status && result.code_url) {
|
this.setState({
|
qrcode: result.code_url,
|
overdue: false,
|
second: 60
|
})
|
setTimeout(this.resetSecond, 1000)
|
} else {
|
notification.warning({
|
top: 10,
|
message: result.message || '未获取到支付码！',
|
duration: 5
|
})
|
}
|
})
|
}
|
|
onChange = () => {
|
|
}
|
|
render () {
|
const { logo, name, orderNo, icp, copyRight, total, unit, qrcode, second, overdue, overdone } = this.state
|
|
return (
|
<div className="mk-pay-container">
|
<div className="mk-pay-box">
|
<header>
|
<img className="plat-logo" src={logo} alt=""/>
|
<div className="user-name">{name}</div>
|
</header>
|
<div className="pay-tip">
|
<span>请您尽快支付，以便订单快速处理！{orderNo ? `订单号：${orderNo}` : ''}</span>
|
{total !== '' ? <span className="pay-total">应付金额<span>{total}</span>{unit}</span> : null}
|
</div>
|
<div className="mk-pay-content">
|
<Tabs defaultActiveKey="weixin">
|
<TabPane tab={<img src={WeiXinPayLogo} alt=""/>} key="weixin">
|
{!overdone ? <div className="qrcode-box">
|
{!overdue ? <p>距离二维码过期还剩<span>{second}</span>秒，过期后请刷新页面重新获取二维码。</p> : null}
|
{overdue ? <p className="overdue">二维码已过期，<span onClick={this.resetQrcode}>刷新</span>页面重新获取二维码。</p> : null}
|
<QRCode
|
value={qrcode}
|
size={250}
|
fgColor="#000000"
|
// imageSettings={{
|
// src: '',
|
// height: 60,
|
// width: 60,
|
// excavate: true
|
// }}
|
/>
|
{overdue ? <div className="overdue-mask"><p onClick={this.resetQrcode}>获取失败 点击重新获取二维码</p></div> : null}
|
<div className="qrcode-tip">
|
<img src={WeiXinScan} alt=""/>
|
<div>
|
<p>请使用微信扫一扫</p>
|
<p>扫描二维码支付</p>
|
</div>
|
</div>
|
</div> : null}
|
{overdone ? <div className="overdone">
|
<p>支付成功！</p>
|
<p>请刷新订单页面，查看订单状态。</p>
|
</div> : null}
|
{!overdone ? <img className="weixin-scan" src={WeiXinPay} alt=""/> : null}
|
</TabPane>
|
</Tabs>
|
{/* <div className="mk-pay-type">
|
<span className="tip">支付方式：</span>
|
<Radio.Group onChange={this.onChange} value="weixin">
|
<Radio value="weixin">微信支付</Radio>
|
</Radio.Group>
|
</div> */}
|
|
</div>
|
<div className="mk-pay-bottom">
|
{copyRight ? <p dangerouslySetInnerHTML={{ __html: copyRight.replace(/\s/ig, ' ') }}></p> : null}
|
{icp ? <p dangerouslySetInnerHTML={{ __html: icp.replace(/\s/ig, ' ') }}></p> : null}
|
</div>
|
</div>
|
</div>
|
)
|
}
|
}
|
|
export default Pay
|
