import React, {Component} from 'react'
|
import moment from 'moment'
|
import md5 from 'md5'
|
import QRCode from 'qrcode.react'
|
import { notification, Radio } from 'antd'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import WeiXinPay from '@/assets/img/weixinpay.jpg'
|
import WeiXinScan from '@/assets/img/weixinscan.png'
|
import './index.scss'
|
|
class Pay extends Component {
|
state = {
|
orderId: '',
|
orderNo: '',
|
logo: '',
|
name: '',
|
copyRight: '',
|
icp: '',
|
total: '',
|
unit: '',
|
qrcode: ''
|
}
|
|
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)
|
}
|
if (!sessionStorage.getItem('SessionUid') && _params.suid) {
|
sessionStorage.setItem('SessionUid', _params.suid)
|
}
|
|
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,
|
sandbox: 'Y'
|
}
|
|
param.LTextOut = md5(param.ID + window.GLOB.appkey)
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
param.secretkey = Utils.encrypt(param.LTextOut, param.timestamp)
|
|
Api.getLocalConfig(param).then(res => {
|
if (res.status) {
|
this.setState({
|
orderNo: res.out_trade_no,
|
total: res.amount ? res.amount.total : '',
|
unit: res.amount && res.amount.currency === 'CNY' ? '元' : '元',
|
})
|
|
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
|
})
|
} else {
|
notification.warning({
|
top: 10,
|
message: result.msg || '未获取到支付码！',
|
duration: 5
|
})
|
}
|
})
|
} else {
|
notification.warning({
|
top: 10,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
onChange = () => {
|
|
}
|
|
render () {
|
const { logo, name, orderNo, icp, copyRight, total, unit, qrcode } = 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}</span>
|
<span className="pay-total">应付金额<span>{total}</span>{unit}</span>
|
</div>
|
<div className="mk-pay-content">
|
<div className="mk-pay-type">
|
<span className="tip">支付方式：</span>
|
<Radio.Group onChange={this.onChange} value="weixin">
|
<Radio value="weixin">微信支付</Radio>
|
</Radio.Group>
|
</div>
|
<div className="qrcode-box">
|
<p>二维码有效时长5分钟，过期后请刷新页面重新获取二维码。</p>
|
<QRCode
|
value={qrcode}
|
size={230}
|
fgColor="#000000"
|
// imageSettings={{
|
// src: '',
|
// height: 60,
|
// width: 60,
|
// excavate: true
|
// }}
|
/>
|
<div className="qrcode-tip">
|
<img src={WeiXinScan} alt=""/>
|
<div>
|
<p>请使用微信扫一扫</p>
|
<p>扫描二维码支付</p>
|
</div>
|
</div>
|
</div>
|
<img className="weixin-scan" src={WeiXinPay} alt=""/>
|
</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
|
