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: '',
|
appid: '',
|
logo: '',
|
name: '',
|
copyRight: '',
|
icp: '',
|
total: '',
|
unit: '',
|
qrcode: '',
|
second: 60,
|
overdue: false,
|
overdone: false
|
}
|
|
UNSAFE_componentWillMount () {
|
let _urlparam = window.decodeURIComponent(window.atob(this.props.match.params.param))
|
let _params = {}
|
_urlparam.split('&').forEach(cell => {
|
let _cell = cell.split('=')
|
_params[_cell[0]] = _cell[1]
|
})
|
|
if (!sessionStorage.getItem('LoginUID') && _params.LoginUID) {
|
sessionStorage.setItem('LoginUID', _params.LoginUID)
|
}
|
if (!sessionStorage.getItem('UserID') && _params.userid) {
|
sessionStorage.setItem('UserID', _params.userid)
|
}
|
|
this.setState({
|
orderId: _params.ID,
|
logo: _params.logo,
|
name: _params.name,
|
copyRight: _params.copyRight,
|
icp: _params.icp
|
})
|
|
if (_params.ID) {
|
this.getOrder(_params.ID)
|
} else {
|
notification.warning({
|
top: 92,
|
message: '未获取到订单ID！',
|
duration: 5
|
})
|
}
|
}
|
|
getOrder = (Id) => {
|
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.getLocalConfig(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({
|
appid: res.appid,
|
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
|
} else if (!res.appid) {
|
notification.warning({
|
top: 10,
|
message: '未获取到应用ID！',
|
duration: 5
|
})
|
return
|
}
|
|
Api.getWxNativePay({ 'out_biz_no': res.out_trade_no, 'out_open_id': res.appid }).then(result => {
|
if (result.qrcode) {
|
this.setState({
|
qrcode: result.qrcode
|
})
|
setTimeout(this.resetSecond, 1000)
|
} else {
|
this.setState({
|
overdue: true
|
})
|
notification.warning({
|
top: 10,
|
message: result.msg || '未获取到支付码！',
|
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.getLocalConfig(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 { appid, orderNo } = this.state
|
|
if (!orderNo) {
|
notification.warning({
|
top: 10,
|
message: '未获取到订单号！',
|
duration: 5
|
})
|
return
|
}
|
|
Api.getWxNativePay({ 'out_biz_no': orderNo, 'out_open_id': appid }).then(result => {
|
if (result.qrcode) {
|
this.setState({
|
qrcode: result.qrcode,
|
overdue: false,
|
second: 60
|
})
|
setTimeout(this.resetSecond, 1000)
|
} else {
|
notification.warning({
|
top: 10,
|
message: result.msg || '未获取到支付码！',
|
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
|
